SchemaSketch — SQL & JSON to ER Diagrams

What It Does

SchemaSketch lets you paste PostgreSQL-style SQL DDL or JSON schema definitions and instantly generates interactive entity-relationship diagrams — no account, no server, everything runs in the browser. A custom recursive-descent SQL parser handles CREATE TABLE, ALTER TABLE ADD FOREIGN KEY, composite keys, and constraint extraction.

How It Works

The editor uses CodeMirror 6 with syntax highlighting and 300ms debounced parsing for live preview. Diagrams are rendered as pure React SVG — no D3 dependency — with drag repositioning, mouse-wheel zoom via native viewBox transforms, and hover-based edge highlighting that glows connected relationships while dimming unrelated ones. One-click PNG export renders at 2x resolution via html-to-image.

Key Features

• Dual input — SQL DDL and JSON schema with automatic format detection
• Live preview — Diagrams update as you type with debounced parsing
• Interactive SVG — Drag entities, zoom, pan, and hover to trace relationships
• Built-in presets — Ecommerce, Blog, and F1 Telemetry schemas in both formats
• High-res export — 2x resolution PNG with one click