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 --> [*]
```

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.