SQL to ER Diagram

A free, open-source online ERD generator. Paste a SQL schema (CREATE TABLE
statements) → get a clean, interactive entity-relationship diagram.

100% local · no signup · no upload. It runs entirely in your browser, so your
schema never leaves your machine — no server, no backend. Live at
sqltoerdiagram.com.

Why

Every other SQL-diagram tool is either paywalled, ugly, or slow. SQL to ER Diagram is
a single static page that stays smooth at hundreds of tables, edits your SQL
two-way, and shares a whole diagram in a single link — with no account and nothing
leaving your browser.

Features

Parse

• Standard CREATE TABLE / ALTER TABLE DDL across PostgreSQL, MySQL, SQLite,
  SQL Server & Snowflake.

Visualize & navigate

• Canvas renderer with cached bitmaps + viewport culling — smooth at hundreds of
  tables (benchmarked ~120fps while zooming 300 tables / 593 FKs).
• Declutter dense schemas: FK lines are soft by default; hover a table to
  highlight just its relationships, click to pin focus (fades every unrelated
  table and line), click empty space to clear.
• Drag tables, scroll / pinch to zoom, and pan.

Smart layout

• Hub-aware layered auto-arrange: the most-connected table is placed on one side
  with its related tables aligned beside it. Horizontal / Vertical direction and
  Compact / Comfortable / Spacious spacing live under the Arrange ▾ menu.
• Overlap-free: auto-arrange runs a separation pass so no two tables overlap.
• Your arrangement is saved: positions and the camera persist automatically, so
  reloading restores your exact layout. Editing SQL keeps your manual positions —
  only brand-new tables get auto-placed beside the rest. Arrange re-runs layout
  on demand.

Edit on the canvas → SQL updates

• Double-click a table name, column name, or column type to edit it inline. The
  change is applied as a surgical text edit (comments, formatting, and unsupported
  clauses are preserved), and a table rename updates every REFERENCES to it.
• Add columns: pin a table, then + add column. The new column is inserted into
  your SQL with a default type for the selected dialect (PostgreSQL / MySQL /
  SQLite / SQL Server / Snowflake) and opens inline so you can name it. Editing a
  column type shows dialect-aware suggestions.

Annotate

• A bottom-left palette adds sticky notes and group boxes to label and cluster
  sections. Drag to move, drag the corner to resize, double-click to edit text, click
  to select (colour swatches + delete), or press Delete. They’re part of the diagram —
  included in saves, share links, and PNG/SVG exports.

Save, share & export

• Save / Open projects: Save downloads a .json project (SQL + layout + camera
  • dialect); Open loads one back.
• Share link: Share copies a URL with the entire project encoded in the hash —
  gzip-compressed + base64. The #… fragment is never sent to a server, so sharing
  needs no backend, and opening the link restores the exact diagram.
• Export to PNG (raster) and SVG (vector).

Editor & appearance

• Syntax-highlighted SQL editor: keywords / types / strings / comments / numbers
  are colored via a paint layer behind the textarea. Re-tokenizing is a single linear
  pass coalesced to one animation frame, so typing stays instant (~6ms full repaint on
  a 45KB / 300-table script, sub-ms on normal schemas).
• Hide the SQL panel (⬚ in the toolbar) for a full-width diagram.
• Light + dark themes, and it remembers your last schema locally.

Run locally

npm install
npm run dev      # http://localhost:5173

Build & host

npm run build    # outputs static files to dist/
npm run preview  # preview the production build locally

dist/ is plain static HTML/JS/CSS — drop it on any static host:

• GitHub Pages — push dist/ to a gh-pages branch, or use an action.
• Netlify / Vercel / Cloudflare Pages — build command npm run build, publish dir dist.
• Any web server / S3 bucket — just upload the contents of dist/.

Supported SQL

• CREATE [OR REPLACE] [TEMPORARY | TRANSIENT] TABLE [IF NOT EXISTS] name ( ... ) with quoted / backtick / [bracket] / schema.qualified names.
• Inline column constraints: PRIMARY KEY, NOT NULL, UNIQUE, REFERENCES other(col).
• Table-level constraints: PRIMARY KEY (...), UNIQUE (...),
  FOREIGN KEY (...) REFERENCES other(...), CONSTRAINT ... FOREIGN KEY ....
• ALTER TABLE x ADD [CONSTRAINT ...] FOREIGN KEY (...) REFERENCES y(...).
• Line (--, #) and block (/* */) comments are ignored.

BigQuery

Select BigQuery from the dialect dropdown to work with BigQuery SQL instead of DDL.

• Paste a raw WITH … AS (…) query — no CREATE TABLE statements needed. Each CTE becomes a table node in the diagram.
• Column names are extracted from the SELECT list of each CTE (using aliases where present).
• Relationships are inferred automatically from FROM and JOIN references: a CTE that reads from another CTE gets an edge between them, and references to base tables create stub nodes connected to the CTE.
• Backtick-quoted three-part names (project.dataset.table) are supported — the table portion is used as the node label.

Tech

• Vite — build + dev server.
• @dagrejs/dagre — layered auto-layout.
• Custom canvas renderer + SQL DDL parser (no heavy SQL-parser dependency).

Shortcuts

Key	Action
⌘ / Ctrl + Enter	Re-arrange
Double-click canvas	Zoom in
Drag the pane divider	Resize the editor

License

MIT © Royal Bhati. Fork it, self-host it, add your own SQL dialects — go for it.