Mermaid Diagrams¶

This guide covers using Mermaid diagrams in the documentation.

Basic Usage¶

Use fenced code blocks with the mermaid language:

graph LR
    A[Start] --> B[Process]
    B --> C[End]

Sequence Diagrams¶

sequenceDiagram
    participant User
    participant API
    participant DB

    User->>API: Request
    API->>DB: Query
    DB-->>API: Results
    API-->>User: Response

State Diagrams¶

stateDiagram-v2
    [*] --> Idle
    Idle --> Running: Start
    Running --> Done: Success
    Running --> Failed: Error
    Failed --> Idle: Reset
    Done --> [*]

Flowcharts¶

flowchart TD
    A[User Request] --> B{Authenticated?}
    B -->|Yes| C[Process Request]
    B -->|No| D[Login Page]
    C --> E[Return Result]

Note¶

For more advanced diagrams with better layout control, consider using D2 instead. See D2 Diagrams PoC.