Mermaid Diagrams

Mermaid diagram support for flowcharts, sequence diagrams, and more.

Use fenced code blocks with the mermaid language to render diagrams. Mermaid is loaded on-demand — pages without mermaid blocks incur no overhead.

Flowchart

```mermaid

graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[Other Action]
  C --> E[End]
  D --> E

```

Sequence Diagram

```mermaid

sequenceDiagram
  participant User
  participant App
  participant API
  User->>App: Click button
  App->>API: Fetch data
  API-->>App: JSON response
  App-->>User: Render result

```

State Diagram

```mermaid

stateDiagram-v2
  [*] --> Draft
  Draft --> Review : Submit
  Review --> Published : Approve
  Review --> Draft : Request Changes
  Published --> Archived : Archive
  Archived --> [*]

```

Enlarge & Zoom/Pan

Every rendered diagram shows an enlarge button at its top-right corner — the same affordance used by Image Enlarge. Clicking it opens the diagram in a dialog with Google-Maps-style zoom and pan controls, so dense diagrams can be inspected up close.

The dialog has three controls:

• + zooms in.

• − zooms out, but never below the dialog's original full-width size.

• pan (hand) lets you drag the diagram around once it's zoomed in.

Their enable/disable behavior:

• On open, the diagram is shown at full size. − and pan are disabled — only + is clickable.

• Clicking + zooms in and enables − and pan.

• With pan active, dragging pans the diagram.

• Clicking − zooms out; back at the original full width, − and pan disable again.

Try it on the diagram below — click its enlarge button, zoom with +, then pan with the hand:

Configuration

Mermaid support is controlled by the mermaid setting in src/config/settings.ts:

export const settings = {
  // ...
  mermaid: true, // enabled by default
};

See the Mermaid documentation for all supported diagram types.