Mermaid Diagrams

Create diagrams directly in your documentation using mermaid fenced code blocks. Diagrams are rendered client-side with Mermaid and automatically adapt to light and dark mode.

Basic usage

```mermaid
graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]
```

Renders as:

graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action]
  B -->|No| D[End]

Examples

Sequence diagram

```mermaid
sequenceDiagram
  participant Client
  participant Server
  participant Database
  Client->>Server: HTTP Request
  Server->>Database: Query
  Database-->>Server: Result
  Server-->>Client: JSON Response
```

sequenceDiagram
  participant Client
  participant Server
  participant Database
  Client->>Server: HTTP Request
  Server->>Database: Query
  Database-->>Server: Result
  Server-->>Client: JSON Response

Class diagram

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

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

Git graph

```mermaid
gitGraph
  commit
  commit
  branch feature
  checkout feature
  commit
  commit
  checkout main
  merge feature
  commit
```

gitGraph
  commit
  commit
  branch feature
  checkout feature
  commit
  commit
  checkout main
  merge feature
  commit

Dark mode

Mermaid diagrams automatically switch between default and dark themes based on the current color mode. No additional configuration is needed.

How it works

The remarkCodeBlocks remark plugin intercepts code blocks with mermaid as the language before Shiki processes them. The diagram definition is passed to a MermaidBlock React component hydrated with client:load. On mount, it dynamically imports the Mermaid library, renders the diagram to SVG, and displays it. A <pre> placeholder is shown before hydration.