Mermaid diagrams

Render flowcharts, sequence diagrams, and other Mermaid diagrams in Markdown and MDX.

PreactPress renders Mermaid diagrams when @preactpress/plugin-mermaid is enabled. Use the mermaid language name:

```mermaid
graph TD
  A[Markdown] --> B[PreactPress]
  B --> C[Static HTML]
```

Flowchart#

graph TD
  A[Markdown] --> B[PreactPress]
  B --> C[Static HTML]
  C --> D[Fast docs site]

Sequence diagram#

graph TD
  A[Markdown] --> B[PreactPress]
  B --> C[Static HTML]
  C --> D[Fast docs site]

State diagram#

sequenceDiagram
  participant User
  participant Site as PreactPress Site
  participant Mermaid

  User->>Site: Open docs page
  Site->>Mermaid: Render diagram block
  Mermaid-->>Site: SVG diagram
  Site-->>User: Interactive documentation

sequenceDiagram participant User participant Site as PreactPress Site participant Mermaid User->>Site: Open docs page Site->>Mermaid: Render diagram block Mermaid-->>Site: SVG diagram Site-->>User: Interactive documentation

Mermaid is loaded on the client only when a page contains a diagram. Enable the plugin in .preactpress/config.ts:

stateDiagram-v2
  [*] --> Draft
  Draft --> Review
  Review --> Published
  Review --> Draft
  Published --> [*]