Skip to contentSkip to Content
ComponentsMermaid

Mermaid

Renders Mermaid  diagrams as SVG directly in the browser. Supports flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and all other Mermaid diagram types. Automatically switches between light and dark themes to match the site.

API

Mermaid (JSX component)

PropTypeDefaultDescription
chartstring—The Mermaid diagram definition string.

You can also use standard Mermaid fenced code blocks. Folio automatically converts these into <Mermaid> components during the build:

```mermaid
graph TD
    A --> B
```

Example

Fenced code block syntax

graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[OK]
  B -->|No| D[Cancel]
```mermaid
graph TD
    A[Start] --> B\{Decision\}
    B -->|Yes| C[OK]
    B -->|No| D[Cancel]
```

JSX component syntax

graph TD A[Start] --> B{Decision} B -->|Yes| C[OK] B -->|No| D[Cancel]
<Mermaid chart="graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[Cancel]" />

Sequence diagram

sequenceDiagram
  Client->>Server: POST /train
  Server->>Worker: dispatch(job)
  Worker-->>Server: result
  Server-->>Client: 200 OK
```mermaid
sequenceDiagram
    Client->>Server: POST /train
    Server->>Worker: dispatch(job)
    Worker-->>Server: result
    Server-->>Client: 200 OK
```

Class diagram

classDiagram
  class Node {
      +str address
      +connect()
      +disconnect()
  }
  class FederatedNode {
      +train()
      +aggregate()
  }
  Node <|-- FederatedNode
```mermaid
classDiagram
    class Node \{
        +str address
        +connect()
        +disconnect()
    \}
    class FederatedNode \{
        +train()
        +aggregate()
    \}
    Node <|-- FederatedNode
```
StepsFileTree