Mermaid

Mermaid diagrams let you describe flows, sequences, state machines, and other visuals using text. Use a standard code block with the mermaid language tag to render a diagram.

There is no <Mermaid /> component; a standard Markdown fence with the mermaid language is all you need.

```mermaid
graph TD
    A[Write docs] --> B{Need a diagram?}
    B -->|Yes| C[Use a mermaid block]
    B -->|No| D[Use regular Markdown]
    C --> E[Publish]
    D --> E
```

Describe nodes and the connections between them to render a flowchart.

```mermaid
graph TD
    A[Write docs] --> B{Need a diagram?}
    B -->|Yes| C[Use a mermaid block]
    B -->|No| D[Use regular Markdown]
    C --> E[Publish]
    D --> E
```

List the participants and the messages between them to render a sequence diagram.

```mermaid
sequenceDiagram
    participant User
    participant DocsPage
    participant Browser

    User->>DocsPage: Open documentation
    DocsPage-->>Browser: Send Mermaid source
    Browser->>Browser: Render diagram
```

Mermaid diagrams render in the browser after the page loads. If the diagram syntax is invalid, docs.page shows the Mermaid error along with the original source so you can fix it.

• Code blocks: syntax-highlighted fences with copy, titles, and annotations
• Components overview: when to use tabs, code groups, and other components