Sequence Diagram

Use Mermaid sequenceDiagram to show interactions over time between people, systems, and services.

Basic template

sequenceDiagram
    participant U as User
    participant A as App
    U->>A: Request
    A-->>U: Response

Core syntax

• Start with sequenceDiagram
• Add participant lines for actors
• Common arrows:
  • ->> request or message
  • -->> response
  • -) async signal
• Use blocks for structure:
  • alt
  • opt
  • loop
  • par
• Highlight activity with activate and deactivate

Common example

sequenceDiagram
    participant User
    participant UI
    participant API
    participant DB

    User->>UI: Submit form
    UI->>API: POST /orders
    activate API
    API->>DB: Insert order
    DB-->>API: Order saved
    API-->>UI: 201 Created
    deactivate API
    UI-->>User: Show confirmation

Good for

• API call flows
• Integration debugging
• Explaining who talks to whom and when

Watch for

• Sequence diagrams show interaction timing, not internal decision logic
• If the diagram gets too wide, collapse small helper systems into a single participant