Mermaid how-to

Mermaid diagrams in VitePress via vitepress-plugin-mermaid.

Install

pnpm add -D mermaid vitepress-plugin-mermaid

import { defineConfig } from 'vitepress';
import { withMermaid } from 'vitepress-plugin-mermaid';

export default withMermaid(defineConfig({/* … */}));

List Mermaid under Fallow ignoreDependencies if dead-code analysis would flag docs-only deps.

Implementation examples

Flowchart

```mermaid
flowchart LR
  A[Edit Markdown] --> B[VitePress build]
  B --> C[Rendered SVG]
```

Sequence

```mermaid
sequenceDiagram
  participant B as Browser
  participant N as Next
  B->>N: GET /
  N-->>B: HTML
```

Preview

pnpm run docs:public:dev
# or
pnpm run docs:dev

Tips

• Keep diagrams small; quote labels that contain punctuation.
• Prefer architecture/flow diagrams over class dumps.