Mermaid Sequence Diagram

Sequence diagrams show interactions between different components over time. Perfect for documenting API calls, system interactions, and message flows.

Use Case

Use sequence diagrams when you need to:

• Document API interactions
• Show message passing between components
• Visualize request/response flows
• Map out system communication patterns

Code

1```mermaid
2sequenceDiagram
3    participant A as Alice
4    participant B as Bob
5    
6    A->>B: Hello Bob!
7    B-->>A: Hi Alice!
8```

Result:

Explanation

• participant - Define participants (optional, auto-detected)
• ->> - Solid arrow (synchronous call)
• -->> - Dashed arrow (asynchronous return)
• ->>+ - Activate lifeline
• -->>- - Deactivate lifeline

Examples

Example 1: API Request Flow

 1```mermaid
 2sequenceDiagram
 3    participant Client
 4    participant API
 5    participant Database
 6    
 7    Client->>+API: POST /api/data
 8    API->>+Database: INSERT query
 9    Database-->>-API: Success
10    API-->>-Client: 201 Created
11```

Result:

Example 2: With Loops and Alt

 1```mermaid
 2sequenceDiagram
 3    participant User
 4    participant System
 5    participant Cache
 6    participant DB
 7    
 8    User->>System: Request Data
 9    System->>Cache: Check Cache
10    
11    alt Cache Hit
12        Cache-->>System: Return Data
13    else Cache Miss
14        System->>DB: Query Database
15        DB-->>System: Return Data
16        System->>Cache: Update Cache
17    end
18    
19    System-->>User: Return Data
20```

Result:

Example 3: With Notes

 1```mermaid
 2sequenceDiagram
 3    participant A as Algorithm
 4    participant D as Data
 5    
 6    Note over A,D: Initialization Phase
 7    A->>D: Load Data
 8    D-->>A: Data Ready
 9    
10    Note right of A: Processing
11    loop For each item
12        A->>D: Process Item
13        D-->>A: Result
14    end
15    
16    Note over A: Complete
17```

Result:

Notes

• Use participant X as Name for readable aliases
• Note over A,B: Text spans multiple participants
• Note left/right of A: Text for single participant notes
• Supports loop, alt, opt, par blocks

Gotchas/Warnings

• ⚠️ Arrow types: ->> (solid) vs -->> (dashed) - use consistently
• ⚠️ Activation: + and - must be balanced
• ⚠️ Participant order: Defined order determines left-to-right placement
• ⚠️ Long text: Break long messages into multiple lines with <br/>

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Requirement Diagrams
  Create requirement diagrams for system requirements with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js