Background: A Monday Morning Despair
“Does anyone know the big picture of this system?”
At a meeting at the start of the week, those words I uttered were met with silence from the entire team.
What we had on hand was a giant database that, over several years, had become like a “secret sauce” handed down through generations. There was no up-to-date ER diagram anywhere; the only “truth” was the active code (DDL).
The task required opening each table definition in an editor and manually building the relations in one’s head.
“Oh, this isn’t connected by user_id, it’s actually owner_id…” Every time I made a discovery like that, I felt my precious time as an engineer melting away.
“If only I could just paste the SQL and have a beautiful ER diagram come out instantly.”
With that thought, I looked for existing tools. Some gave me security concerns by asking me to “upload SQL to a server,” while others required “installing specialized software,” which didn’t fit my need for something I could use right now.
My pride as an engineer wouldn’t allow me to send the design info of a highly confidential project to an unknown server. “A 100% safe ER diagram generator that works instantly, only in the browser.” Deciding to make the tool I wanted more than anyone else was the start of the development for our SQL to ER Diagram Converter.
Technical Challenges: Fighting in the “Lonely Environment” of the Browser
Analyzing SQL using only JavaScript in the browser, without using powerful server-side libraries, was a series of tasks more arduous than I had anticipated.
1. The Endless Chase with “SQL Dialects”
SQL has “dialects” like MySQL and PostgreSQL.
At first, I thought, “CREATE TABLE statements are probably all the same,” but once I started the implementation, a mountain of patterns emerged—fine notation in column definitions, inline constraints, and more.
I’d rewrite a regular expression, test it, and then see it break on a different pattern of SQL.
Repeating that cycle many times, I gradually developed a parser that could “understand the feelings of SQL.”
2. Mermaid.js, the Savior
How to turn the analyzed data into a “diagram”? The one that solved this difficult problem was Mermaid.js.
By setting this tool—which engineers often use in Markdown—as the engine, a clean conversion line of “SQL → intermediate data → Mermaid notation → SVG” was completed.
erDiagram
USER ||--o{ POST : writes
USER {
string username
string email
}Thanks to this system, users could not only save the diagram as an image but also copy the generated code and use it directly in GitHub documentation, creating an extra benefit.
An “Obsession” with Security
The one thing I couldn’t compromise on with this tool was “keeping data from ever leaving the browser.”
During development, I was tempted many times by the thought that “it would be easier to process this on the server side,” but each time, I stopped myself, thinking, “That’s not the tool I want to use.”
No communication occurs. Therefore, you can paste confidential DML or DDL without hesitation.
I believe this sense of security is the essential value of the tool.
Conclusion
The SQL to ER Diagram Converter is a tool born from my own feeling of “this is a hassle.”
What developers should originally face is not the final draft of a document, but the design of a better system.
I couldn’t be happier if this tool reaches someone lost in thought because “there’s no design diagram” and provides a ray of light.
Now, paste the SQL you have on hand and start “checking your answers” for your design.