See it as a diagram
Everything below, as a diagram you can edit. Describe yours and see it in seconds.
No account needed · Editable canvas, not a picture
What diagrams as code actually fixed
Version control. The diagram now lives on a branch, moves with a tag, and can be reverted. That was the biggest practical problem with a drawing tool export and it is genuinely solved.
Reviewability. A change to the graph appears in the pull request as text a reviewer can read. Compared to a binary image where the diff is unreadable, this is a large win, and it is why teams who adopt mermaid do see fewer wrong diagrams for a while.
Proximity. The diagram is in the same repository as the thing it describes, so the effort of updating it drops from open another tool to edit a file you already have open. Lower effort means more updates, which is real.
None of that is accuracy. Being reviewable makes drift visible to a reviewer who happens to notice. It does not make drift impossible, and it does not tell anyone that a diagram was supposed to change.
The three shapes mermaid drift takes
Silent omission. Someone adds a call from the orders service to a new pricing service. Nothing fails, no test is red, no reviewer thinks about the README, and the graph now describes a system with one fewer edge than reality. This is the most common and the most damaging, because the diagram looks complete.
Rename skew. A module is renamed in code, every import updated by the tooling, and the mermaid node keeps the old label because no refactoring tool touches a markdown fence. Six months later two names are in circulation and new joiners assume they are two different things.
Layout collapse. Mermaid lays out automatically, and automatic layout degrades as the node count rises. The tangle is not the real problem; the real problem is that maintaining something unreadable feels pointless, so the file keeps growing for a few months out of habit and then freezes. Completeness is what causes this, and it is a trap for generated diagrams too: an early completeness pass of Datadef Terraform pipeline drew 62 resources from a 123-resource repository and produced a column that was correct, complete and unreadable.
A fourth, less discussed: the copy in Confluence. Mermaid renders in GitHub, so the wiki gets a pasted screenshot, and the screenshot is a separate artefact with a separate decay rate. See embed diagrams in markdown for the version of this that does not fork.
<!-- README.md, committed 2025-11, still there today -->
graph TD
api --> orders
orders --> ordersdb
orders --> events
<!-- Since then, in code and not in the graph:
orders now calls pricing before writing
ordersdb was split into orders and inventory
events gained a second consumer
nothing failed, so nobody noticed -->If you are staying with mermaid
Put the diagram file next to the code it describes rather than all diagrams in one docs directory. A reviewer touching internal/orders is far more likely to notice internal/orders/README.md than a file three levels away.
Add a CODEOWNERS entry so the team that owns the code is requested on changes to the diagram, and so a change to the code without a change to the diagram is at least visible to the same people.
Cap the scope of each diagram deliberately. Three diagrams of ten nodes each stay maintained far longer than one diagram of thirty, because each one has an obvious owner and stays legible. See the limits of docs as code for diagrams.
FAQ
Do mermaid diagrams solve documentation drift?
Where do mermaid diagrams usually go wrong?
How many nodes should an architecture diagram carry?
Should some diagrams still be written by hand?
How do you replace a hand-written graph in a README?
What happens to the wiki copy of a mermaid diagram?