How to read Mermaid diagrams in Markdown

Read a Mermaid diagram beside its explanation: how a renderer draws it, how to inspect the source, and why document links differ from diagram arrows.

A diagram has source and context

A Mermaid block describes a diagram as text. A compatible Markdown renderer draws that description inside the page. A reader that does not support Mermaid may show the code instead; that does not mean the Markdown file has lost its diagram.

The Project Reading Kit contains this fictional architecture in architecture.md:

```mermaid
flowchart LR
  Notes[Local notes] --> Review[Human review]
  Review --> Summary[Markdown summary]
  Summary --> Handoff[Folder handoff]
```

Read the explanation before interpreting the arrows

The diagram places human review before a summary is handed off. The paragraph underneath says the diagram does not imply automatic analysis or sync. Those boundaries matter: a neat flowchart is not evidence that each step is already implemented.

The arrows describe relationships between concepts. They do not automatically become links to Markdown files. Ordinary document links below the diagram lead to the specification and decisions.

Open the example in a compatible reader

Download and unzip the kit, then open architecture.md. In Aero Markdown, choose File → Open Folder…, select the kit and use the file tree. The document's Flow heading locates the diagram.

Aero bundles Mermaid for local rendering. The Mac app is not yet available to download. The free web reader shows the Mermaid source in this initial web version; it does not draw diagrams. You can still use it to read the explanation or use another Mermaid-compatible renderer for the drawing.

Diagnose a code block that stays as code

Check that the opening fence is labelled mermaid, that it has a closing fence, and that the diagram begins with a valid declaration such as flowchart LR. Then check whether the application supports that diagram type and syntax version.

Start with the small example before testing a large generated diagram. Do not assume an unsupported diagram is a network problem. The source is still part of the .md file.

Check the complete document

A useful diagram is accompanied by its assumptions and limits. In this kit, follow the local-file decision and return to the specification's acceptance criteria. Use the link guide for that path.

For tables, mathematics, a local image and another diagram in one document, download the rendering reference. It is a checkable example, not a benchmark result.