Mermaid

Flowcharts, sequence diagrams, and every other Mermaid diagram type from a fenced code block.

A fenced block with the mermaid language renders as a diagram instead of a code block. Nothing to import: the renderer is loaded on the client only on pages that contain a diagram, so the rest of the site never pays for it.

Diagrams are drawn with the same --pd-* tokens as the rest of the page, so they stay monochrome, follow the active preset, and re-render when the theme switches.

Flowchart#

md
```mermaid
flowchart LR
  A[Write MDX] --> B{Has meta.json?}
  B -- yes --> C[Ordered tree]
  B -- no --> D[Sorted by title]
  C --> E[Rendered page]
  D --> E
```

Sequence diagram#

Title#

The title meta attribute adds a caption under the diagram.

Request lifecycle
md
```mermaid title="Request lifecycle"
stateDiagram-v2
  [*] --> Idle
  Idle --> Loading: request
  ...
```

Component#

The same renderer is available as a component when the diagram source comes from a variable or is built in JSX.

mdx
<Mermaid
  title="Deploy"
  chart={`gitGraph
  commit id: "init"
  branch feature
  commit id: "sidebar"
  commit id: "search"
  checkout main
  commit id: "docs"
  merge feature id: "release"`}
/>
Deploy

Props#

NameTypeDefaultDescription
chartstring-Diagram source in Mermaid syntax.
titlestring-Caption rendered under the diagram.
classNamestring-Added to the figure element.

Behaviour#

  • The diagram source stays in the Markdown and llms.txt outputs as a mermaid fence, so assistants read it as text.
  • Rendering uses Mermaid's strict security level, so HTML inside labels is escaped.
  • A syntax error shows the parser message in place of the diagram instead of breaking the page.