Mermaid

Mermaid lets you create diagrams and visualizations using plain text. DocuBook renders Mermaid diagrams natively inside MDX — just write a fenced code block with the mermaid language identifier.

For the full list of diagram types and syntax reference, see the official Mermaid documentation.

Diagram Types

Flowchart

graph TD
  A[Start] --> B{Is it working?}
  B -->|Yes| C[Great!]
  B -->|No| D[Debug]
  D --> B

Sequence Diagram

sequenceDiagram
  participant U as User
  participant S as Server
  participant D as Database
  U->>S: Request data
  S->>D: Query
  D-->>S: Results
  S-->>U: Response

Class Diagram

classDiagram
  class Animal {
    +String name
    +int age
    +makeSound() void
  }
  class Dog {
    +fetch() void
  }
  class Cat {
    +purr() void
  }
  Animal <|-- Dog
  Animal <|-- Cat

State Diagram

stateDiagram-v2
  [*] --> Idle
  Idle --> Processing: Start
  Processing --> Success: Complete
  Processing --> Error: Fail
  Error --> Idle: Retry
  Success --> [*]

Gantt Chart

gantt
  title Project Timeline
  dateFormat  YYYY-MM-DD
  section Planning
  Research          :done,  a1, 2026-01-01, 14d
  Design            :done,  a2, 2026-01-15, 10d
  section Development
  Frontend          :active, b1, 2026-01-25, 20d
  Backend           :        b2, 2026-01-25, 20d
  Testing           :        b3, 2026-02-14, 10d

Pie Chart

pie title Browser Usage
  "Chrome" : 65
  "Safari" : 18
  "Firefox" : 10
  "Edge" : 7

ER Diagram

erDiagram
  USER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : includes
  USER {
    string id PK
    string name
    string email
  }
  ORDER {
    int id PK
    string status
    date created_at
  }

Pan and Zoom

Pan and zoom are only active inside the fullscreen view. A rendered diagram shows just a fullscreen button in the bottom-right corner — the non-fullscreen diagram scrolls normally with no transform controls.

Open fullscreen by clicking the button, or focus the container with Tab then press Enter. Fullscreen locks page scroll and shows:

• Pan — mouse-drag, touch-drag, or arrow keys
• Zoom in / zoom out — scroll wheel, + / - keys, or the zoom bar buttons (range 0.4× to 4×)
• Reset — click the zoom percentage button or press 0
• Help (?) — auto-opens on first fullscreen entry, re-openable anytime via the ? button
• Exit — Exit fullscreen button (top-right) or Escape

Fullscreen shortcuts work regardless of focus. Exiting fullscreen collapses the help panel.

Output Markdown

Primary syntax — fenced code block:

```mermaid
graph TD
  A[Start] --> B{Is it working?}
  B -->|Yes| C[Great!]
  B -->|No| D[Debug]
  D --> B
```

Notes

• Diagrams are rendered client-side. During SSR, a <pre class="mermaid"> placeholder is rendered instead.
• Pan, zoom, and fullscreen: A fullscreen button appears after the diagram renders. Click or press Enter to open the fullscreen lightbox. Inside fullscreen, pan with mouse-drag, touch-drag, or arrow keys; zoom with the zoom bar buttons, scroll wheel, or + / -; reset via the zoom percentage button or 0. Press Escape to exit.
• Theme synchronization: The component automatically detects dark/light theme changes and re-renders diagrams.
• Lazy loading: Off-screen diagrams are only rendered when scrolled into view (200px margin).
• Error fallback: If a diagram has invalid Mermaid syntax, the raw code is shown with an error message.
• Per-diagram theme overrides can be set via %%{init: {"theme": "forest"}}%% directives inside the chart definition.
• All standard Mermaid diagram types are supported: flowchart, sequenceDiagram, classDiagram, stateDiagram, gantt, pie, erDiagram, gitGraph, journey, etc.