> 100/10 for mobile usability. Panning, Zooming, selecting and moving was so seamless I thought I was tripping out.
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.
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.
The tool looks very cool! But IMO you can't get an ER diagram from SQL since entities are fundamentally different from tables. They are certainly very similar, but SQL alone doesn't give you enough information to create an ER diagram.
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.
> entities are fundamentally different from tables
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 don't see a problem with the tool either really, it's just a pet peeve of mine to call what it produces an ER diagram when it's really a diagram of the relational model defined by the SQL.
I think most successful ORMs have an additional layer of semantics beyond what can be directly expressed in SQL. For example, Active Record has multiple types of associations (belongs_to, has_one, has_many, etc.) that I would argue align more closely to the ER model than the relational model. Of course you can come up with a set of conventions to go from ER to relational when everything is fed through the ORM, but you are losing some semantic information in the process. (That is, if you just look at the SQL table definitions, you don't have the same information about relationships).
To make parent’s point more exact: from Chen’s definition, these ER diagrams derived from SQL are the “physical” (most low-level) diagrams, you cannot recreate the “logic” or “conceptual” diagrams from it.
I guess nowadays few people care about this difference.
the use case for sql to er, is to study a database new to you
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
Inheritance is one case. In an ER diagram, you may have Employee and Client entities which both inherit from a Person entity. You could choose to have these represented as a single table (with nullable fields where not relevant). They could be three completely separate tables with common fields duplicated across the tables. Or there could be three tables where one table has the common fields from Person with Employee and Client having foreign keys to this table along with whatever unique fields they have.
Can you please elaborate on the differences? They are practically interchangeable, but conceptually there might be another layer on top of entities and relationships for somewhat richer semantics (like describing a relation, or additional annotations on the entity)
One example is that in ER cardinality is specified on the relation. In SQL cardinality is implemented and can be largely reversed to ER by looking at where foreign keys are.
Many to many will lead to an extra table (which can have additional properties, requiring this table to be modelled as an entity), one to many leads to the inclusion of a foreign key to another unique key (referring all columns of that key, _id is an implementation decision, compound primary keys are possible). One to one can be implemented in multiple ways, like one to many with a uniqueness constraint by the referring table or even by merging entities to a single table.
The raw SQL can be revealing but when entities have merged into one table it’s harder to tell what is what, unless a certain set of columns appears over different tables.
Aside from what else is mentioned in the sibling comment, inheritance is another big one. Inheritance is not explicit in SQL and in fact, when going from ER to SQL, there are multiple choices you can make about how to materialize the inheritance hierarchy.
Another is that in ER diagrams, relationships themselves can have attributes. Personally I think it tends to make more sense to convert relationships to entities in this case most of the time, but it can be useful.
Finally, relationships in ER diagrams can be N-ary and connect more than two entities while foreign keys in SQL always reference one other table. Of course you can have multiple foreign keys on a table to represent this, but not without some loss of semantics.
It's a small too nothing great I just figured others might find it useful too. I kept finding myself needing to visualize database schemas, but most tools had the same problems: paywalls, mandatory signups, or sending your SQL to someone else's server.
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
Probably not that important in practice. Firefox allows 2^20 - 4 and Chrome allows 2100000 characters. Also, 8000 characters already allows for an unreasonable amount of SQL and could be extended even further with compression. And if that should not be enough, the website already supports JSON exports. All in all, this seems like a worthwhile tradeoff for not having to store anything.
A few years ago I created a similar layout engine, it was extremely janky when I abandoned it because I first wanted to solve order/placing of the tiles but was unable to figure out a good algorithm for it
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.
Not sure what you're seeing, but I see quite a few overlapping lines. One of them easily solvable if you move `addresses` down. It starts with the `orders->users` overlapping `orders->addresses`.
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.
Ah, I was imprecise in my comment. I didn't mean that this implementation was doing the optimal ordering - I was just reminiscing about a similar project I worked on an why I abandoned it (I was unable to get the ordering done while keeping performance good enough with thousands of tiles
This reminds me of a tool I vibed with v0 a few months back: https://v0-yaerd.vercel.app. I created it because I hadn't seen a tool before that could interpret Laravel migration files and create ERDs from them, then prompted basic SQL support into it as well.
The same Ondras from V8CGI? I loved that project, one of the first server side JS implementations. Perhaps I was the only follower? Hey, Ondřej, loved your work!
Is there a way to generate these SVGs via CLi. I really like it, I also liked vscode's postgres extension which can do similar things although locked to vscode, but again no exportable cli option so you can store it in a repo.
This is cool! I made something similar a little while ago that I’ve been touching up here and there. You can’t export to any SQL but I just wanted a tool I can use to diagram tables: https://datagram.studio
Edit: should clarify mine is also free! It’s quite specific to my needs but I’m happy with it
The "entities vs tables" distinction is a real one, but I think for the majority of developers who just want to visualize an existing schema quickly, this is more than sufficient. Perfect is the enemy of useful here. Most people aren't building ORM abstractions — they just want to see what's connected to what.
DBeaver does a good job of this and works with most databases. I would not use MySQL Workbench or PGAAdmin now.
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?
> Remember the days of MySQL Workbench and how clunky it was
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.
Is there a way to hide connections to specific tables? Or alternatively filter out foreign keys by name.
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.
Have only had a quick look at it, but it looks very nicely done! Out of interest, did you use AI to assist with development? If yes, what percentage of the code would you say is AI generated vs conventional?
At some point I should post it, I got deepseek to fully reverse engineer the d2 tala engine binary (the sota for diagrams to code with ER ones), and I’m pretty close to an open source looking Go build with 1:1 parity
Once that’s done I guess I can just clean room design it to wasm and post it on npm lol
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/sqltoerdiagram
I kept finding myself needing to visualize database schemas, but most tools had the same problems: paywalls, mandatory signups, or sending your SQL to someone else's server.
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.
(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.")
100/10 for mobile usability. Panning, Zooming, selecting and moving was so seamless I thought I was tripping out.
That's really good yes, even double tapping editing does not reset the zoom level. Definitely one of the best mobile friendly site I have seen.
This. Author(s) did the homework.
> 100/10 for mobile usability. Panning, Zooming, selecting and moving was so seamless I thought I was tripping out.
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.
The whole code base is a breath of fresh air to be honest: https://github.com/royalbhati/sqltoerdiagram/blob/main/src/m...
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.
For a hot second I thought we were looking at glorious jquery until I saw this line at the top
const $ = (id) => document.getElementById(id);
The only thing is that it zooms in on safari mobile when pressing a text field, but that problem is unanimous
The tool looks very cool! But IMO you can't get an ER diagram from SQL since entities are fundamentally different from tables. They are certainly very similar, but SQL alone doesn't give you enough information to create an ER diagram.
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.
> entities are fundamentally different from tables
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?
ORMs are on a poor foundation. But I don't see the problem with this tool, it's just showing the tables.
I don't see a problem with the tool either really, it's just a pet peeve of mine to call what it produces an ER diagram when it's really a diagram of the relational model defined by the SQL.
I think most successful ORMs have an additional layer of semantics beyond what can be directly expressed in SQL. For example, Active Record has multiple types of associations (belongs_to, has_one, has_many, etc.) that I would argue align more closely to the ER model than the relational model. Of course you can come up with a set of conventions to go from ER to relational when everything is fed through the ORM, but you are losing some semantic information in the process. (That is, if you just look at the SQL table definitions, you don't have the same information about relationships).
> entities are fundamentally different from tables
one man’s simplicity is another man’s headache
To make parent’s point more exact: from Chen’s definition, these ER diagrams derived from SQL are the “physical” (most low-level) diagrams, you cannot recreate the “logic” or “conceptual” diagrams from it.
I guess nowadays few people care about this difference.
Few people ever cared about the difference.
the use case for sql to er, is to study a database new to you
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
Can you please elaborate? My understanding was that entities always have a 1:1 relationship with tables.
An example would be really helpful.
Inheritance is one case. In an ER diagram, you may have Employee and Client entities which both inherit from a Person entity. You could choose to have these represented as a single table (with nullable fields where not relevant). They could be three completely separate tables with common fields duplicated across the tables. Or there could be three tables where one table has the common fields from Person with Employee and Client having foreign keys to this table along with whatever unique fields they have.
Can you please elaborate on the differences? They are practically interchangeable, but conceptually there might be another layer on top of entities and relationships for somewhat richer semantics (like describing a relation, or additional annotations on the entity)
One example is that in ER cardinality is specified on the relation. In SQL cardinality is implemented and can be largely reversed to ER by looking at where foreign keys are.
Many to many will lead to an extra table (which can have additional properties, requiring this table to be modelled as an entity), one to many leads to the inclusion of a foreign key to another unique key (referring all columns of that key, _id is an implementation decision, compound primary keys are possible). One to one can be implemented in multiple ways, like one to many with a uniqueness constraint by the referring table or even by merging entities to a single table.
The raw SQL can be revealing but when entities have merged into one table it’s harder to tell what is what, unless a certain set of columns appears over different tables.
Aside from what else is mentioned in the sibling comment, inheritance is another big one. Inheritance is not explicit in SQL and in fact, when going from ER to SQL, there are multiple choices you can make about how to materialize the inheritance hierarchy.
Another is that in ER diagrams, relationships themselves can have attributes. Personally I think it tends to make more sense to convert relationships to entities in this case most of the time, but it can be useful.
Finally, relationships in ER diagrams can be N-ary and connect more than two entities while foreign keys in SQL always reference one other table. Of course you can have multiple foreign keys on a table to represent this, but not without some loss of semantics.
It's a small too nothing great I just figured others might find it useful too. I kept finding myself needing to visualize database schemas, but most tools had the same problems: paywalls, mandatory signups, or sending your SQL to someone else's server.
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
Truely good work! It’s responsive, clean and “onboarding” experience without signup walls is great. Good job.
> The URL contains the entire schema.
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.
https://www.rfc-editor.org/rfc/rfc9110#section-4.1-5
Probably not that important in practice. Firefox allows 2^20 - 4 and Chrome allows 2100000 characters. Also, 8000 characters already allows for an unreasonable amount of SQL and could be extended even further with compression. And if that should not be enough, the website already supports JSON exports. All in all, this seems like a worthwhile tradeoff for not having to store anything.
Beautiful software. Thanks!
The subject says this is free, if so what free license are you using? If the license is unspecified it may be open source but it is not free.
Reminds me of: https://explain.dalibo.com/
For 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.
Could we have the option of straight lines and 90 degree angles? I’ve never really liked the bendy ones. Looks cool, good job!
Thanks and I will add this to my todos!
A few years ago I created a similar layout engine, it was extremely janky when I abandoned it because I first wanted to solve order/placing of the tiles but was unable to figure out a good algorithm for it
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
In academia, this is called "planar embedding" and can be computed in O(V) where V is the number of vertices of the graph.
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.
https://github.com/kieler/elkjs works well for auto layout.
Not sure what you're seeing, but I see quite a few overlapping lines. One of them easily solvable if you move `addresses` down. It starts with the `orders->users` overlapping `orders->addresses`.
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.
Ah, I was imprecise in my comment. I didn't mean that this implementation was doing the optimal ordering - I was just reminiscing about a similar project I worked on an why I abandoned it (I was unable to get the ordering done while keeping performance good enough with thousands of tiles
This reminds me of a tool I vibed with v0 a few months back: https://v0-yaerd.vercel.app. I created it because I hadn't seen a tool before that could interpret Laravel migration files and create ERDs from them, then prompted basic SQL support into it as well.
btw did you know that ER diagrams are supported by Mermaid diagrams: https://mdview.io/mermaid?example=working-er It's not that pretty as in your app, but it does the work
I'm using https://github.com/ondras/wwwsqldesigner and I think that's worth taking it in account for comparison.
The same Ondras from V8CGI? I loved that project, one of the first server side JS implementations. Perhaps I was the only follower? Hey, Ondřej, loved your work!
Nice, but there is no LICENSE file in the github: https://github.com/royalbhati/sqltoerdiagram
Is there a way to generate these SVGs via CLi. I really like it, I also liked vscode's postgres extension which can do similar things although locked to vscode, but again no exportable cli option so you can store it in a repo.
This is cool! I made something similar a little while ago that I’ve been touching up here and there. You can’t export to any SQL but I just wanted a tool I can use to diagram tables: https://datagram.studio
Edit: should clarify mine is also free! It’s quite specific to my needs but I’m happy with it
The "entities vs tables" distinction is a real one, but I think for the majority of developers who just want to visualize an existing schema quickly, this is more than sufficient. Perfect is the enemy of useful here. Most people aren't building ORM abstractions — they just want to see what's connected to what.
Such an old problem solved very elegantly. Congrats. Remember the days of MySQL Workbench and how clunky it was.
DBeaver does a good job of this and works with most databases. I would not use MySQL Workbench or PGAAdmin now.
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?
> Remember the days of MySQL Workbench and how clunky it was
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.
VSC with dbt Fusion, or Datagrip maybe? I used SQL workbench once and it felt like a time capsule. It was impossible to navigate without mouse.
Maybe you can support schemas in more dialects by using a similar approach to a little tool I made: sqlscope.netlify.app
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
Is there a way to hide connections to specific tables? Or alternatively filter out foreign keys by name.
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.
Have only had a quick look at it, but it looks very nicely done! Out of interest, did you use AI to assist with development? If yes, what percentage of the code would you say is AI generated vs conventional?
Given that it has only two commits, where the first one is just "done", I would guess a substantial amount.
Yes but I have also coworkers who implement a full feature then remember to commit it, so we cant know for sure if its just that.
Is there any tool that will look at all the tables in my database and create an ER diagram with all the relationships?
There's also Azimutt: https://azimutt.app/gallery
You have linked to a paid, closed-source product. There are hundreds. OP has shared a free and open-source project.
At some point I should post it, I got deepseek to fully reverse engineer the d2 tala engine binary (the sota for diagrams to code with ER ones), and I’m pretty close to an open source looking Go build with 1:1 parity
Once that’s done I guess I can just clean room design it to wasm and post it on npm lol
Goals for someday
good work, I was really in need of something like this to visualise my schemas
Great tool Thanks for this. Please consider "keeping it going"
The GitHub link takes you to the front page of GitHub instead of the actual project.
I have just updated it. He was right to point that out.
updated thanks.
Its there already as dbdiagram, what's new?
What's new is that this isn't "dbdiagram" - it's good to have alternatives and even competing products.
This is cool! People actually need sthng like this.
Great stuff, well done and super useful!
Looks great, I’ll use this next week :p
I was looking for it, thanks! Great work!
Okay thats pretty cool. Nice job!
nice!
I kept finding myself needing to visualize database schemas, but most tools had the same problems: paywalls, mandatory signups, or sending your SQL to someone else's server.
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.
Small? Yes, but perfectly formed!
(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.")
There's an endless list of improvements on a project like this.
- 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.