ERD++

You paste a CREATE TABLE statement and a live, interactive Entity Relationship Diagram appears — no drag-and-drop, no manual wiring, no third-party chart library doing the heavy lifting.

What It Is

ERD++ is a browser-based ERD generator that parses raw SQL DDL — PostgreSQL, MySQL, SQLite — and renders a fully interactive diagram as you type. It's built for developers who work with SQL every day and are tired of drawing boxes in Figma or fighting with slow, opinionated diagramming tools. Paste your schema, see your schema. That's the whole pitch, and it delivers.

Key Features

Live parsing as you type. The diagram updates on every keystroke. There's no "Generate" button to click, no round-trip to a server. The parser runs in the browser and the SVG rerenders incrementally.

Custom SVG renderer — zero chart libraries. Every line, arrow, and table box is drawn with raw SVG. Crow's foot notation is implemented from scratch, relationship lines use a smart hierarchical layout engine that resolves crossings, and column types are color-coded. The result looks considerably better than anything you'd get from wrapping D3 or Chart.js.

Pan, zoom, and fit. Ctrl+Wheel to zoom, drag to pan, Fit button to snap everything into view. The canvas supports a 0.15x–3x zoom range and stays performant even with large schemas.

Three themes, four export formats. Toggle between Dark, Light, and Monokai. Export your diagram as PNG at 2x retina resolution, SVG (fully editable vector), the original SQL, or a JSON representation of the parsed schema. All state — your DDL, theme, toggle positions, panel width — persists to localStorage so your work survives a page refresh.

Custom relationship labels. Add a -- @rels block to your SQL or use inline comments to define labels that override the auto-detected ones. Useful when presenting a schema to non-technical stakeholders.

-- @rels
-- integrations -> triggers : has
-- triggers -> trigger_events : fires

Fine-grained layout controls. The settings panel exposes sliders for table width, row height, and table gap — so you can tune the layout for dense schemas without things collapsing into a hairball.

Under the Hood

ERD++ is a Next.js 15 + React 19 app compiled to a static export — no server, no API routes, no database. The entire parsing and rendering pipeline runs client-side in TypeScript.

The SVG renderer is the interesting part. Rather than using a library like Dagre or ELK for layout, it implements its own hierarchical placement algorithm: tables are sorted by dependency depth, placed in columns, and relationship edges are routed around table boundaries with bend-point calculation to minimize overlaps. Curved arrows are drawn as cubic Bézier paths. The crow's foot symbols are computed from the endpoint angle and placed at the correct orientation.

The resizable editor panel uses a mousedown drag listener on a 4px-wide divider that sets panel width as a CSS variable — the simplest possible approach, and it works perfectly.

Try It

erd-bheng.vercel.app

Paste any schema you have sitting around. Start with a simple two-table FK relationship, then drop in a 20-table production schema and watch the layout engine figure it out.