No backend, no accounts, no data leaving your machine.
A few implementation details that were fun:
* Built on <canvas> instead of DOM/SVG. Tables are rasterized into cached bitmaps with viewport culling, which keeps things smooth even with hundreds of tables on screen.
* The SQL parser tracks source spans for every token. That lets edits stay surgical so a rename a table and only the relevant identifier (and its references) change while comments and formatting remain untouched.
* The URL contains the entire schema. Sharing simply serializes the schema into the URL itself, so there's no backend, no stored state, and no account required.
* I also experimented with a Rust/WASM version because why not? but the parser was ~37% slower because the JS↔WASM boundary cost outweighed the compute savings but The O(n^2) overlap-resolution pass was about 2.2x faster though * In the end I stuck with plain JavaScript. No framework ~32KB gzipped
So I ended up building my own.
You paste in your CREATE TABLE statements and it generates an interactive ER diagram right in the browser. You can drag tables around, auto arrange the layout, edit table/column names directly on the canvas (it rewrites the SQL for you), add notes and group boxes, and export as PNG or SVG.
No backend, no accounts, no data leaving your machine.
A few implementation details that were fun:
* Built on <canvas> instead of DOM/SVG. Tables are rasterized into cached bitmaps with viewport culling, which keeps things smooth even with hundreds of tables on screen.
* The SQL parser tracks source spans for every token. That lets edits stay surgical so a rename a table and only the relevant identifier (and its references) change while comments and formatting remain untouched.
* The URL contains the entire schema. Sharing simply serializes the schema into the URL itself, so there's no backend, no stored state, and no account required.
* I also experimented with a Rust/WASM version because why not? but the parser was ~37% slower because the JS↔WASM boundary cost outweighed the compute savings but The O(n^2) overlap-resolution pass was about 2.2x faster though * In the end I stuck with plain JavaScript. No framework ~32KB gzipped
It's a small too nothing great I just figured others might find it useful too.
Just to clarify, what link is it?
I've check it out, and the GitHub icon, in the header on the top right corner, is correct, and links to the following project:
- https://github.com/royalbhati/sqltoerdiagramFor visualizing query plans. One of the most useful tools for optimizing sql queries I’ve ever used.
Just make sure to download the fully offline v2 version at the bottom if you want to use it with anything sensitive.
Edit: should clarify mine is also free! It’s quite specific to my needs but I’m happy with it
For example in a multi-tenant application 90% of tables will link to the tenant table, but those links add little value to the viewer, so hiding these would be nice.
Basically integrate sqlglot to translate the schema between dialects and then use a base dialect for generating the schema.
The two tools seem complementary and you seem to be a better designer, so it would be nice to see it all together
That's not to say that the tool is useless or that diagrams of this sort are unhelpful. I'll admit I'm being pedantic and others will probably disagree.
Yeah, my first thought was that the diagramming bit needs to be ripped out into its own library, because I can see a use for the diagramming bits for more than ER diagrams.
Isn’t that going to be a problem due to the URL length limitations?
> It is RECOMMENDED that all senders and recipients support, at a minimum, URIs with lengths of 8000 octets in protocol elements.
Author is top notch in my book. I'm a sucker for someone taking a complex problem and distilling out a simple solution. I don't know of higher praise to give a developer.
(Only minor tweak one could suggest would be multiple table selection for dragging... but to quote Frasier: "Think about it, Niles. What's the one thing better than an exquisite meal? An exquisite meal, with one tiny flaw we can pick at all night." Niles, raising a glass: "Ah, of course, to impossible standards.")
An example would be really helpful.
so the db already exist, but they have no er, and maybe even little docs
so it act more like an exploratory tool, ideally, it should allow you to create views and add notes, so you dont have to look at the full er at once, especially if the number of table is huge, and if many of those tables are missing foreign keys
one man’s simplicity is another man’s headache
Isn't the fact that they are _mostly_ interchangeable the foundational principle of hundreds of ORMs? Of course the DDL doesn't say much about the entity's lifecycle, but if the bar is set at representing its relationships, fields and cardinality as a graph, it seems sufficient?
I guess nowadays few people care about this difference.
This might be a good implementation but is it not easier to use something that can connect to your database than having to copy and paste chunks of SQL?
I loved MySQL Workbench, but it had its faults. Is there any equivalent alternative today? I've dreamed about an app that fuses MySQL Workbench + real-time collaboration, so I can share the same workspace with others in the team and see what others are are up to and collaborate on things.
- Dragging a group should also drag the tables within the group.
- It would be nice to be able to drag relationship lines to reshape their curves around other tables.
But what is here now is so well crafted that it feels uncomfortable asking for features without acknowledging how impressive it already is.
const $ = (id) => document.getElementById(id);
Eg your example diagram has an optimal order in which there are no overlapping lines... But it's surprisingly hard to figure that out without doing n^m calculations... And I wanted to use it in a game, so a shitton of tiles.
Dunno where I was going with this, just got reminded of that project after looking at this great implementation.
It also reminded me of the xyflow lib
However, there are graphs that do not allow planar embeddings (e.g. K_5 or K_3,3, see https://en.wikipedia.org/wiki/Planar_graph).
In this case, you'll probably want to look into heuristics that produce a low number of crossings and little distortion when new vertices are added.
Also, the `reviews` table overlaps the line from `order_items` to `products` and moving `order_items` down for example gets rid of that problem.
Not saying the project isn't cool, but this layout isn't optimal as per your constraints.
SQL to ER Diagram
SQL schema
Drop your CREATE TABLE statements on the left. Drag tables, scroll to zoom, double-click to rename, export when done.
100% local — your schema never leaves your browser. No accounts, no uploads.
SQL to ER Diagram is a free, open-source tool that converts a SQL schema into an interactive entity-relationship diagram (ERD) right in your browser. Paste your CREATE TABLE statements and instantly visualize tables, columns, primary keys, foreign keys and relationships. Works with PostgreSQL, MySQL, SQLite and SQL Server. Drag tables, auto-arrange the layout, add notes, and export to PNG or SVG. Nothing is uploaded — your schema stays on your machine.
Paste your SQL CREATE TABLE statements into the editor and SQL to ER Diagram instantly renders an interactive entity-relationship diagram. Drag tables to arrange them, then export as PNG or SVG.
It parses standard CREATE TABLE and ALTER TABLE DDL and works with PostgreSQL, MySQL, SQLite and SQL Server syntax, including primary keys, foreign keys, unique and not-null constraints.
Yes. SQL to ER Diagram is completely free and open source, with no account or sign-up required.
Everything runs locally in your browser. Your SQL schema is never uploaded to or stored on any server.
Yes. You can export a high-resolution PNG or a vector SVG, save the full project as a file, or copy a shareable link that encodes the diagram in the URL.
No installation needed. It runs entirely in your web browser on both desktop and mobile.