Mermaid Diagrams

Mermaid lets you create diagrams from text, right inside your Markdown files. No image editors, no exports — just describe the diagram and it renders automatically.

Flowchart

flowchart TD
    A[User visits docs] --> B{Authenticated?}
    B -->|Yes| C[Show full content]
    B -->|No| D[Show public pages]
    C --> E[Track analytics]
    D --> F[Prompt to sign in]
    F --> B

Sequence diagram

sequenceDiagram
    participant Browser
    participant CDN
    participant Server
    participant DB

    Browser->>CDN: GET /docs/page
    CDN-->>Browser: Cache HIT (HTML)
    Browser->>Server: POST /api/search
    Server->>DB: Query index
    DB-->>Server: Results
    Server-->>Browser: JSON response

Entity relationship diagram

erDiagram
    USER ||--o{ POST : writes
    USER ||--o{ COMMENT : writes
    POST ||--o{ COMMENT : has
    POST ||--o{ TAG : tagged_with
    TAG ||--o{ POST : applied_to

State diagram

stateDiagram-v2
    [*] --> Draft
    Draft --> InReview : Submit
    InReview --> Draft : Request changes
    InReview --> Approved : Approve
    Approved --> Published : Merge
    Published --> [*]

Git graph

gitGraph
    commit id: "init"
    branch feature
    checkout feature
    commit id: "add component"
    commit id: "add tests"
    checkout main
    commit id: "hotfix"
    merge feature id: "merge feature"
    commit id: "release"

Pie chart

pie title Documentation formats
    "MDX" : 55
    "Markdown" : 35
    "Other" : 10

Syntax

Use a fenced code block with the mermaid language identifier:

```mermaid
flowchart LR
    A --> B --> C
```

Mermaid supports many diagram types including flowcharts, sequence diagrams, class diagrams, Gantt charts, and more.