Mermaid Sequence Diagrams

Sequence diagrams show interactions in chronological order.

They are useful for:

API calls
authentication
client-server communication
microservices
request and response flows

Basic Syntax

sequenceDiagram
    Alice->>Bob: Hello Bob
    Bob-->>Alice: Hello Alice

Try this code ❯

The order of participants affects their left-to-right placement.

Explicit Participants

sequenceDiagram
    participant User
    participant Server

    User->>Server: Request data
    Server-->>User: Return data

Try this code ❯

Aliases can make labels clearer:

sequenceDiagram
    actor User
    participant Auth as Auth Server
    participant DB as Database

    User->>Auth: POST /login
    Auth->>DB: Query User
    DB-->>Auth: Return Record
    Auth-->>User: 200 OK Token

Try this code ❯

Calls and Responses

A common pattern is:

A->>B: Request
B-->>A: Response

Notes

Add context with Note.

sequenceDiagram
    participant API
    participant Server

    Note over API,Server: Secure HTTPS Connection
    API->>Server: Request Data
    Server-->>API: Send Data

Try this code ❯

Activations

Use activate and deactivate to show processing.

sequenceDiagram
    participant API
    participant Server

    API->>Server: Request Data
    activate Server
    Server-->>API: Send Data
    deactivate Server

Try this code ❯

Conditional Logic

Use alt and else.

sequenceDiagram
    participant Client
    participant API

    Client->>API: Fetch Data

    alt Cached
        API-->>Client: Return Cache
    else Not Cached
        API-->>Client: Return Fresh Data
    end

Try this code ❯

Loops

Use loop for repeated operations.

sequenceDiagram
    participant Client
    participant API
    participant DB

    Client->>API: Fetch data

    loop Every Page
        API->>DB: Fetch page
        DB-->>API: Page data
    end

    API-->>Client: Return data

Try this code ❯