---
title: Mermaid
description: Render diagrams from Mermaid code blocks.
---

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

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

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

## Sequence Diagram

```mermaid
sequenceDiagram
    participant User
    participant DocsPage
    participant Browser

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

````
```mermaid
sequenceDiagram
    participant User
    participant DocsPage
    participant Browser

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

## Notes

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