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
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.
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.
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.
Could we have the option of straight lines and 90 degree angles? I’ve never really liked the bendy ones. Looks cool, good job!
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
I was looking for it, thanks! Great work!
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.
Okay thats pretty cool. Nice job!
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.