A few months ago I was working on a system architecture for a project and needed to diagram it out. I opened the usual suspects, draw.io, Excalidraw, Lucidchart. All either too generic, paywalled for the good stuff, or missing the cloud-specific components I actually needed. I just wanted a free tool built for engineers, with real AWS, GCP, and Azure components, that I could use without hitting a paywall mid-session.
So I built one.
The idea
SysDesign started as a learning project as much as a product. I wanted to go deep on React Flow, understand how canvas-based UIs work under the hood, and ship something real at the end of it. The constraint I set myself was one week to get a working version out.
The hardest part
The canvas broke me for a bit. Getting drag and drop to feel right, handling node grouping, wiring up step undo/redo, making sure nothing felt laggy at scale. React Flow gives you a solid foundation but the moment you layer real interactions on top of it, edge cases pile up fast. I rewrote parts of the canvas interaction logic more than once before it felt right.
What ended up shipping
- A searchable registry of 200+ components across AWS, GCP, Azure, databases, microservices, security, observability, AI/ML, and DevOps
- Drag and drop canvas with node grouping, inline annotation, and step undo/redo
- Real-time project persistence with PostgreSQL and Google OAuth
- Terraform HCL and Mermaid export so you can turn a visual diagram directly into infrastructure-as-code scaffolds
- AI-powered diagram generation, describe your architecture in plain text and SysDesign generates the diagram for you
That last one was the most fun to build. Being able to type "a microservices architecture with an API gateway, three services, and a PostgreSQL database" and watch it render on the canvas felt like the tool clicking into place.
Why open source
Because the whole reason I built this was that the good tools were locked away. It felt wrong to do the same thing. If you're an engineer who diagrams systems, wants to contribute, or just wants to poke around the code, it's all there.
Live: sysdesign.obare27.com
GitHub: github.com/g-obare13/sysdesign
I'm actively improving it. If you use it and something feels off or missing, open an issue or just tell me in the comments.


Top comments (0)