Convert a Mermaid flowchart into an architecture diagram.
Mermaid gives you the graph. What it cannot give you is tiers, icons, and a layout that survives the diagram growing.
From a flowchart to an architecture
A Mermaid flowchart of a system is a graph without semantics: every node is a box and every edge is an arrow. Converting adds the things an architecture diagram needs, which are tier assignment so dependency direction is visible, real service icons so components are identifiable at a glance, and a solver-computed layout that keeps working as nodes are added.
Tiers are the addition that matters
Grouping nodes into client, edge, application, data and external means a reader knows which way dependency flows before reading a label, and an upward edge looks wrong immediately. Mermaid has subgraphs, which can approximate this, and no notion that the groups are ordered.
Keep Mermaid where it fits
For a small diagram in a README that renders on GitHub, Mermaid is doing its job and converting is a downgrade. This is for diagrams that have grown past what its layout can render legibly.
Fidelity
| Comes through | Does not | |
|---|---|---|
| Nodes and labels | Yes | |
| Edges, direction and labels | Yes | |
| Subgraphs | Become sections or tiers | |
| Tier assignment | Added, inferred from names | Not present in the source |
| Service icons | Added, matched by name | Not present in the source |
| classDef styling | Replaced by tier colouring | |
| Layout | Recomputed, deliberately |
The prompt
Questions
Will it guess tiers correctly?
Usually, when names are descriptive. Anything ambiguous is worth correcting, which is a single edit to the graph.
Can I go back to Mermaid?
The agent will write Mermaid from the graph, so the structure survives. Tiers, icons and layout do not, because Mermaid cannot express them.
What about Mermaid's newer architecture diagram type?
It reads fine as a source. The same limits apply: its layout is built in, and icons come from a fixed set.
Related
- Convert Code to a DiagramThe general case: point it at code and get a diagram of what is there rather than what you remember building.
- Convert a Diagram into CodeThe direction almost nothing else does: the diagram stops being documentation and becomes the instruction.
- Convert Terraform to an Architecture DiagramTerraform records dependencies explicitly through references, so the edges are read rather than inferred. It is one of the most reliable sources there is.
- Convert Mermaid to ExcalidrawUseful when a Mermaid diagram has outgrown what Mermaid's layout can render legibly.
Last updated