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

Every rendered diagram gets a GFM-style control cluster in the bottom-right corner, so large diagrams stay explorable without mouse-drag interaction:

• Arrow buttons — pan the diagram up, down, left, or right in fixed steps
• Zoom in / zoom out — scale the diagram between 0.4× and 4×
• Reset — restore the original position and scale
• Full screen — open the diagram in a lightbox overlay; close it with the same button or Escape

The diagram container is keyboard accessible: focus it with Tab, then pan with the arrow keys, zoom with + / -, and reset with 0.

Set panZoom={false} on the prop-based syntax to disable the controls.

Props

When using the prop-based syntax (<Mermaid chart="...">) instead of fenced code blocks:

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
```

Escape hatch — prop syntax (for programmatic use):

<Mermaid chart="graph TD&#10;  A[Start] --> B{Is it working?}">
</Mermaid>

Notes

• Diagrams are rendered client-side. During SSR, a <pre class="mermaid"> placeholder is rendered instead.
• Pan, zoom, and fullscreen: Button-driven controls (GFM-style) appear once a diagram renders, including a fullscreen lightbox toggle; mouse drag and scroll-wheel zoom are intentionally not intercepted.
• 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.