Mermaid Reference

Mermaid diagramming. Flowcharts, sequence diagrams, Gantt charts, state machines, class diagrams, and ER diagrams.

Flowcharts

Basic flowchart with direction and node shapes

graph LR
    A[Rectangle] --> B{Diamond}
    B -->|Yes| C(Rounded)
    B -->|No| D([Stadium])
    C --> E[[Subroutine]]
    D --> E

Directions: TB (top-bottom), LR (left-right), BT, RL.

Node shapes reference

graph TB
    A[Rectangle]
    B(Rounded)
    C{Diamond}
    D([Stadium])
    E[[Subroutine]]
    F[(Database)]
    G((Circle))
    H>Asymmetric]

Sequence Diagrams

Request-response sequence with participants

sequenceDiagram
    participant C as Client
    participant S as Server
    participant D as Database

    C->>S: POST /api/login
    activate S
    S->>D: SELECT user WHERE email=?
    activate D
    D-->>S: user record
    deactivate D
    alt valid credentials
        S-->>C: 200 OK + JWT
    else invalid
        S-->>C: 401 Unauthorized
    end
    deactivate S

Arrow types: →> solid with arrow, -→> dashed with arrow, →>+ activate, →>- deactivate.

State Diagrams

State machine with transitions

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: start
    Processing --> Success: complete
    Processing --> Failed: error
    Failed --> Processing: retry
    Success --> [*]

Gantt Charts

Project timeline with sections and dependencies

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Foundation
        Base install       :done,    a1, 2026-04-01, 3d
        Network config     :done,    a2, after a1, 2d
    section Application
        Deploy app         :active,  b1, after a2, 4d
        Testing            :         b2, after b1, 3d
    section Hardening
        Security audit     :         c1, after b2, 2d

Class Diagrams

Class relationships

classDiagram
    class Device {
        +String hostname
        +String ip_address
        +connect()
        +backup()
    }
    class Switch {
        +int vlan_count
        +show_vlans()
    }
    class Router {
        +String routing_protocol
        +show_routes()
    }
    Device <|-- Switch
    Device <|-- Router

Entity-Relationship Diagrams

Database schema with relationships

erDiagram
    USER ||--o{ SESSION : creates
    USER {
        int id PK
        string username
        string email
    }
    SESSION {
        int id PK
        int user_id FK
        datetime created_at
    }

Cardinality: || exactly one, o| zero or one, }| one or more, }o zero or more.

Kroki Integration

Mermaid in AsciiDoc via Kroki

[mermaid,target=auth-flow,format=svg]
....
sequenceDiagram
    Client->>Server: Login
    Server-->>Client: JWT
....

Renders during make build via local Kroki container.

Styling

Custom theme with CSS variables

%%{init: {'theme': 'dark', 'themeVariables': {
    'primaryColor': '#89b4fa',
    'primaryTextColor': '#cdd6f4',
    'primaryBorderColor': '#585b70',
    'lineColor': '#a6adc8',
    'secondaryColor': '#313244',
    'tertiaryColor': '#1e1e2e'
}}}%%
graph LR
    A[Start] --> B[End]

These map to Catppuccin Mocha palette values for visual consistency.