Mermaid: The AI-Native Diagramming Engine

Published

Every other artifact in a software workflow has become text that a language model can draft, edit, and review: code, tests, commit messages, documentation. Diagrams stayed manual for years because canvas tools produce files that models cannot read or write meaningfully. Mermaid closes that gap. Because a Mermaid diagram is plain text with strict rules, a language model can produce a working diagram in one pass — and a human can review it the same way they review code. That is why Mermaid has quietly become the default output format for diagram generation.

The last manual artifact in the workflow

Consider how a design doc gets written today. An engineer drafts the prose with assistance, the team reviews it in a pull request, and the text evolves commit by commit. Then comes the architecture diagram — and the workflow jumps back a decade: open a canvas tool, drag shapes, align arrows, export a PNG, attach it, and re-export it every time the design changes. The diagram is the one artifact that cannot be drafted, diffed, or reviewed as text.

Diagrams-as-code fixes the workflow, not just the drawing. When the diagram is text, it lives in the same pull request as the design it illustrates, and the same review that checks the prose checks the picture. The bottleneck was never artistic skill; it was that canvas files are opaque to the tools engineers already use. Text removes the opacity.

Why language models write Mermaid well

Language models are pattern completers over text, and Mermaid gives them exactly that: a small, regular grammar with thousands of well-formed examples in training data — READMEs, docs sites, and open-source repositories are full of it. The syntax is also forgiving of iteration. A model can add a node by appending a line, express a branch with one arrow, and label an edge inline, all without computing coordinates.

Contrast that with a canvas file format, where “add a node” means emitting XML with positions, sizes, and connector routing that must not collide with existing shapes. A model can technically produce it, but the result is brittle and unverifiable by eye. Mermaid’s layout engine absorbs that complexity: the model describes relationships, and rendering is a solved problem. The grammar is small enough that a model’s output is usually valid on the first try, and short enough that a human can read the entire source in seconds.

From prompt to reviewed diagram

The practical loop looks like this. You describe the system in a prompt — “sequence diagram for checkout: user, API, payment provider, database, with a retry on timeout” — and the model returns Mermaid source. You paste it into the free Mermaid editor, and the diagram renders immediately in your browser. If something is wrong, you fix it by editing a line of text, not by dragging a box. When it is right, the source goes into the design doc or README, where GitHub renders it natively.

The review step is where diagrams-as-code pulls ahead of every canvas workflow. A reviewer reads the diff — one new edge, one renamed service — and approves it with the same care they give a code change. Six months later, when the payment provider changes, the update is a one-line commit that the same review process catches. The diagram stays true because keeping it true costs the same as editing the prose next to it.

Patterns that work in practice

Three patterns cover most real usage. First, scaffolding: ask for a first draft of a flow you already understand — an order decision tree or a login sequence — then correct the labels and branches by hand. The draft is right about structure more often than not, and fixing text is fast. Second, extraction: paste existing documentation or a code snippet into a prompt and ask for the flow it implies; models are good at turning prose into nodes and edges, which is exactly what Mermaid expresses. Third, transformation: ask for the same content as a different diagram type — a flowchart turned into a mindmap for a planning page, using the mindmap syntax guide as the reference — because the semantics survive the rewrite when both formats are text.

Verify before you trust

Generated diagrams need the same skepticism as generated code. Check three things before merging. Syntax: render it — the editor shows parse errors instantly, and a diagram that renders is syntactically sound. Semantics: read the source line by line and confirm every edge describes a relationship that actually exists; models occasionally invent a plausible-looking connection between services that never talk. Completeness: compare the diagram against the system’s real failure paths, because a happy-path-only diagram is worse than none — it looks authoritative and hides the branches where incidents actually happen.

The habit that makes this safe is treating the diagram source like code: it goes through a pull request, a reviewer reads it, and it changes in the same commit as the thing it describes.

What this changes for documentation teams

The economics of diagrams change when drafting them costs minutes instead of an afternoon. Teams document more flows, because the marginal cost of one more sequence diagram is small. Diagrams stay current, because updating text is part of the normal commit rhythm instead of a separate chore. And review coverage extends to visuals, because a diagram diff is as readable as a code diff.

None of this requires new infrastructure. Mermaid renders in the browser, in markdown on GitHub and GitLab, and in most docs tooling — the format the model writes is the format your repository already displays. The manual step that used to sit at the end of every design workflow is gone, and what replaces it is something engineering teams have refined for decades: text, reviewed by humans, versioned in git.