{"id":51109349,"url":"https://github.com/royalbhati/sqltoerdiagram","last_synced_at":"2026-06-24T16:02:06.970Z","repository":{"id":366042879,"uuid":"1268898197","full_name":"royalbhati/sqltoerdiagram","owner":"royalbhati","description":"ER diagram generator. Paste CREATE TABLE statements and get a clean, interactive ERD — runs 100% in your browser, nothing uploaded","archived":false,"fork":false,"pushed_at":"2026-06-20T01:31:03.000Z","size":326,"stargazers_count":483,"open_issues_count":3,"forks_count":39,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-20T03:21:34.104Z","etag":null,"topics":["data-modeling","database","database-schema","dbdiagram","dbml","developer-tools","diagram","entity-relationship-diagram","er-diagram","erd","mysql","open-source","postgresql","schema","sql","sql-parser","sqlite","vanilla-js","visualization","vite"],"latest_commit_sha":null,"homepage":"https://sqltoerdiagram.com.","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/royalbhati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-14T04:12:26.000Z","updated_at":"2026-06-20T01:31:08.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/royalbhati/sqltoerdiagram","commit_stats":null,"previous_names":["royalbhati/sqltoerdiagram"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/royalbhati/sqltoerdiagram","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Fsqltoerdiagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Fsqltoerdiagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Fsqltoerdiagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Fsqltoerdiagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/royalbhati","download_url":"https://codeload.github.com/royalbhati/sqltoerdiagram/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royalbhati%2Fsqltoerdiagram/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34739426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-24T02:00:07.484Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-modeling","database","database-schema","dbdiagram","dbml","developer-tools","diagram","entity-relationship-diagram","er-diagram","erd","mysql","open-source","postgresql","schema","sql","sql-parser","sqlite","vanilla-js","visualization","vite"],"created_at":"2026-06-24T16:02:04.921Z","updated_at":"2026-06-24T16:02:06.960Z","avatar_url":"https://github.com/royalbhati.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SQL to ER Diagram\n\n**A free, open-source online ERD generator.** Paste a SQL schema (`CREATE TABLE`\nstatements) → get a clean, interactive entity-relationship diagram.\n\n![deps](https://img.shields.io/badge/deps-2-blue) ![bundle](https://img.shields.io/badge/bundle-32KB%20gzip-brightgreen)\n\n**100% local · no signup · no upload.** It runs entirely in your browser, so your\nschema never leaves your machine — no server, no backend. Live at\n**[sqltoerdiagram.com](https://sqltoerdiagram.com)**.\n\n## Why\n\nEvery other SQL-diagram tool is either paywalled, ugly, or slow. SQL to ER Diagram is\na single static page that stays smooth at **hundreds of tables**, edits your SQL\ntwo-way, and shares a whole diagram in a single link — with no account and nothing\nleaving your browser.\n\n## Features\n\n### Parse\n\n- Standard `CREATE TABLE` / `ALTER TABLE` DDL across **PostgreSQL, MySQL, SQLite,\n  SQL Server \u0026 Snowflake**.\n\n### Visualize \u0026 navigate\n\n- **Canvas renderer** with cached bitmaps + viewport culling — smooth at hundreds of\n  tables (benchmarked **~120fps** while zooming 300 tables / 593 FKs).\n- **Declutter dense schemas**: FK lines are soft by default; **hover** a table to\n  highlight just its relationships, **click** to pin focus (fades every unrelated\n  table and line), click empty space to clear.\n- **Drag** tables, **scroll / pinch to zoom**, and pan.\n\n### Smart layout\n\n- **Hub-aware layered auto-arrange**: the most-connected table is placed on one side\n  with its related tables aligned beside it. **Horizontal / Vertical** direction and\n  **Compact / Comfortable / Spacious** spacing live under the **Arrange ▾** menu.\n- **Overlap-free**: auto-arrange runs a separation pass so no two tables overlap.\n- **Your arrangement is saved**: positions and the camera persist automatically, so\n  reloading restores your exact layout. Editing SQL keeps your manual positions —\n  only brand-new tables get auto-placed beside the rest. **Arrange** re-runs layout\n  on demand.\n\n### Edit on the canvas → SQL updates\n\n- **Double-click** a table name, column name, or column type to edit it inline. The\n  change is applied as a *surgical text edit* (comments, formatting, and unsupported\n  clauses are preserved), and a table rename updates every `REFERENCES` to it.\n- **Add columns**: pin a table, then **+ add column**. The new column is inserted into\n  your SQL with a default type for the selected **dialect** (PostgreSQL / MySQL /\n  SQLite / SQL Server / Snowflake) and opens inline so you can name it. Editing a\n  column type shows dialect-aware suggestions.\n\n### Annotate\n\n- A bottom-left palette adds **sticky notes** and **group boxes** to label and cluster\n  sections. Drag to move, drag the corner to resize, double-click to edit text, click\n  to select (colour swatches + delete), or press Delete. They're part of the diagram —\n  included in saves, share links, and PNG/SVG exports.\n\n### Save, share \u0026 export\n\n- **Save / Open projects**: **Save** downloads a `.json` project (SQL + layout + camera\n  + dialect); **Open** loads one back.\n- **Share link**: **Share** copies a URL with the entire project encoded in the hash —\n  gzip-compressed + base64. The `#…` fragment is never sent to a server, so sharing\n  needs **no backend**, and opening the link restores the exact diagram.\n- **Export** to **PNG** (raster) and **SVG** (vector).\n\n### Editor \u0026 appearance\n\n- **Syntax-highlighted SQL editor**: keywords / types / strings / comments / numbers\n  are colored via a paint layer behind the textarea. Re-tokenizing is a single linear\n  pass coalesced to one animation frame, so typing stays instant (~6ms full repaint on\n  a 45KB / 300-table script, sub-ms on normal schemas).\n- **Hide the SQL panel** (⬚ in the toolbar) for a full-width diagram.\n- **Light + dark themes**, and it remembers your last schema locally.\n\n## Run locally\n\n```bash\nnpm install\nnpm run dev      # http://localhost:5173\n```\n\n## Build \u0026 host\n\n```bash\nnpm run build    # outputs static files to dist/\nnpm run preview  # preview the production build locally\n```\n\n`dist/` is plain static HTML/JS/CSS — drop it on any static host:\n\n- **GitHub Pages** — push `dist/` to a `gh-pages` branch, or use an action.\n- **Netlify / Vercel / Cloudflare Pages** — build command `npm run build`, publish dir `dist`.\n- **Any web server / S3 bucket** — just upload the contents of `dist/`.\n\n## Supported SQL\n\n- `CREATE [OR REPLACE] [TEMPORARY | TRANSIENT] TABLE [IF NOT EXISTS] name ( ... )` with quoted / backtick / `[bracket]` / `schema.qualified` names.\n- Inline column constraints: `PRIMARY KEY`, `NOT NULL`, `UNIQUE`, `REFERENCES other(col)`.\n- Table-level constraints: `PRIMARY KEY (...)`, `UNIQUE (...)`,\n  `FOREIGN KEY (...) REFERENCES other(...)`, `CONSTRAINT ... FOREIGN KEY ...`.\n- `ALTER TABLE x ADD [CONSTRAINT ...] FOREIGN KEY (...) REFERENCES y(...)`.\n- Line (`--`, `#`) and block (`/* */`) comments are ignored.\n\n## BigQuery\n\nSelect **BigQuery** from the dialect dropdown to work with BigQuery SQL instead of DDL.\n\n- Paste a raw `WITH … AS (…)` query — no `CREATE TABLE` statements needed. Each CTE becomes a table node in the diagram.\n- Column names are extracted from the `SELECT` list of each CTE (using aliases where present).\n- 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.\n- Backtick-quoted three-part names (`project.dataset.table`) are supported — the table portion is used as the node label.\n\n## Tech\n\n- **Vite** — build + dev server.\n- **@dagrejs/dagre** — layered auto-layout.\n- Custom canvas renderer + SQL DDL parser (no heavy SQL-parser dependency).\n\n## Shortcuts\n\n| Key | Action |\n| --- | --- |\n| **⌘ / Ctrl + Enter** | Re-arrange |\n| **Double-click** canvas | Zoom in |\n| Drag the pane divider | Resize the editor |\n\n## License\n\n[MIT](./LICENSE) © Royal Bhati. Fork it, self-host it, add your own SQL dialects — go for it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalbhati%2Fsqltoerdiagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyalbhati%2Fsqltoerdiagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalbhati%2Fsqltoerdiagram/lists"}