Mermaid Sequence Diagrams Templates

Mermaid sequence diagram templates for API flows, auth, microservices, and more.

5 templates · Click "Use in Editor" to open any template and customize it instantly. No sign-up required.

sequenceDiagram
    participant C as Client
    participant A as API Server
    participant D as Database

    C->>+A: GET /api/users
    A->>A: Validate JWT token
    A->>+D: SELECT * FROM users
    D-->>-A: User records
    A-->>-C: 200 OK (JSON)

sequenceDiagram
    actor User
    participant App as Client App
    participant Auth as Auth Server
    participant API as Resource Server

    User->>App: Click "Login with Google"
    App->>Auth: Redirect to /authorize
    Auth->>User: Show consent screen
    User->>Auth: Grant permission
    Auth-->>App: Authorization code
    App->>+Auth: POST /token (exchange code)
    Auth-->>-App: Access token + Refresh token
    App->>+API: GET /userinfo (Bearer token)
    API-->>-App: User profile
    App-->>User: Logged in

sequenceDiagram
    autonumber
    participant GW as API Gateway
    participant US as User Service
    participant OS as Order Service
    participant PS as Payment Service
    participant NS as Notification Service

    GW->>+OS: Create Order
    OS->>+US: Validate User
    US-->>-OS: User Valid
    OS->>+PS: Process Payment
    PS-->>-OS: Payment OK
    OS->>NS: Send Confirmation (async)
    OS-->>-GW: Order Created (201)

sequenceDiagram
    participant C as Client
    participant S as Server

    C->>S: HTTP Upgrade Request
    S-->>C: 101 Switching Protocols
    Note over C,S: WebSocket connection established

    loop Real-time updates
        S-)C: Push notification
        C-)S: Acknowledge
    end

    C->>S: Close frame
    S-->>C: Close frame
    Note over C,S: Connection closed

sequenceDiagram
    actor Customer
    participant Cart
    participant Inventory
    participant Payment
    participant Email

    Customer->>Cart: Proceed to checkout
    Cart->>+Inventory: Reserve items
    Inventory-->>-Cart: Items reserved

    Cart->>+Payment: Charge card
    alt Payment successful
        Payment-->>-Cart: Charge confirmed
        Cart->>Email: Send receipt
        Cart-->>Customer: Order confirmed!
    else Payment failed
        Payment-->>Cart: Charge declined
        Cart->>Inventory: Release items
        Cart-->>Customer: Payment failed
    end