Mermaid Diagram Demo

1 Minutes Apr 10, 2026 167 Words


This page tests that Mermaid diagrams render correctly.
Set mermaid: true in a post’s front matter, then use the {{< mermaid >}} shortcode around any diagram.


Flowchart — Request lifecycle

flowchart TD
    A([Client]) -->|HTTP request| B[Load Balancer]
    B --> C[API Gateway]
    C --> D{Auth valid?}
    D -- Yes --> E[Service]
    D -- No  --> F([401 Unauthorized])
    E --> G[(Database)]
    G --> E
    E -->|Response| A

Sequence diagram — Token refresh flow

sequenceDiagram
    participant Client
    participant AuthService
    participant ResourceServer

    Client->>AuthService: POST /token (refresh_token)
    AuthService-->>Client: access_token (expires in 1h)
    Client->>ResourceServer: GET /api/data (Bearer token)
    ResourceServer-->>Client: 200 OK + data
    Note over Client,ResourceServer: Token expires
    Client->>AuthService: POST /token (refresh_token)
    AuthService-->>Client: new access_token

Entity-Relationship diagram

erDiagram
    USER {
        uuid   id PK
        string email
        string name
    }
    POST {
        uuid   id PK
        string title
        text   body
        uuid   author_id FK
    }
    TAG {
        uuid   id PK
        string name
    }
    POST_TAG {
        uuid post_id FK
        uuid tag_id  FK
    }

    USER ||--o{ POST     : writes
    POST ||--o{ POST_TAG : has
    TAG  ||--o{ POST_TAG : labels