Architecture diagram generator
Sketch system design as text. Group services into tiers with Mermaid subgraphs — clients, APIs, datastores, queues — and render a clean architecture diagram for your design doc. Nothing leaves your browser.
One step per line. Indent two spaces to branch beneath the line above.
System design that lives in the repo
Architecture diagrams drift the moment they become a binary file in a design tool. Writing them as Mermaid keeps them next to the code: group each tier in a subgraph, use cylinders for datastores and hexagons for buses, and the diagram updates with a one-line edit during review.
It is also the right artifact for an RFC or onboarding doc — reviewers see the components and the data flow without opening a separate app.
From a workflow to its diagram
If you are documenting an automation — say an n8n or Zapier pipeline that moves data between services — an architecture diagram makes the moving parts legible. Sketch the trigger, the services it touches, and where data lands, then keep the source in your docs so it evolves with the flow.
Frequently asked questions
How do I make a software architecture diagram from text?
Use a Mermaid flowchart, group related services with "subgraph Tier … end", and connect them with arrows. Use cylinders "[(DB)]" for datastores. It renders live and exports to SVG or PNG.
How do I group services into tiers?
Wrap nodes in "subgraph Name … end". Each subgraph becomes a labelled box, which is the clearest way to show a presentation/application/data split or a set of microservices.
Can I show async or queued links?
Yes — use a dotted link with a label, like "A -. async .-> B", to distinguish events and queues from synchronous calls.
Is my architecture diagram private?
Yes. It renders entirely in your browser, so internal service names and topology never leave your device.
What shapes should I use for databases and queues?
Use "[(name)]" for a database cylinder, "[[name]]" for a queue/subroutine, and "{{name}}" for a hexagon such as an event bus. The cheatsheet lists them.