Tools mentioned in this article
Open the browser-based tool while you read and try the workflow immediately.
That Familiar Moment of Dread
“Hey, didn’t we add a RabbitMQ instance in front of this API server?”
When a junior engineer casually pointed this out during a meeting, my blood ran cold. The infrastructure diagram floating in our internal Wiki was staring back at me, proudly displaying a ‘Last Updated’ timestamp from six months ago.
Let’s be honest, infrastructure evolves constantly. We add a Redis cache here, a reverse proxy there. But going through the sheer pain of opening a heavy graphical drawing tool, dragging little square icons around, painfully aligning arrows, exporting the PNG, and uploading it to the Wiki… It’s just too much friction. Everyone thinks, “I’ll definitely update the diagram later,” and of course, nobody ever does.
Craving ‘Diagram as Code’
To kill this “forever outdated diagram” issue, I turned to Mermaid.js. The idea of ‘Diagram as Code’ is a dream for developers: you write some text, commit it to git, and a beautiful diagram magically appears.
But doing this locally had its quirks. Trying to write complex nested graphs (like an EC2 instance inside a VPC inside an AWS Cloud region) required learning syntax that wasn’t exactly intuitive. I’d write the code, wait for a PR preview to build, only to find out my arrows were pointing backwards.
Seeing It Build As You Type
“I just want to type the text and watch the diagram smoothly build itself on the other side of my screen in real-time.”
That entirely selfish desire is what birthed this “Infrastructure Diagram Builder.”
My biggest rule while building it was zero server communication. Infrastructure layouts are basically the blueprints to the company vault. There is absolutely no way I’d want you pasting that into a tool that sends data to some random server (even if it’s my random server). So, I forced the entire rendering pipeline into local, browser-side JavaScript.
If you’re currently dreading an infrastructure documentation update, try typing some code into this tool. Seeing the diagram snap into place gives you this weird, satisfying feeling of supreme architectural power.