Tutorial •

Mermaid Sequence Diagram Tutorial

Learn how to use Mermaid to create sequence diagrams that illustrate interactions and message passing between objects.

What is a Sequence Diagram?

A sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. It’s incredibly useful for documenting system flows, API interactions, and business logic.

Basic Syntax

A sequence diagram starts with the sequenceDiagram keyword.

Participants

While you can use names directly, it’s recommended to define them explicitly using participant to control order or add aliases.

Code Example:

sequenceDiagram
    participant U as User
    participant S as Server
    U->>S: Send Request
    S-->>U: Return Response

Rendered Result:

sequenceDiagram
    participant U as User
    participant S as Server
    U->>S: Send Request
    S-->>U: Return Response

Message Types

Mermaid supports various line types for messages:

  • ->: Solid line without arrow
  • ->>: Solid line with arrow
  • -->>: Dotted line with arrow
  • -x: Solid line with a cross (indicates lost message)

Code Example:

sequenceDiagram
    Alice->John: Solid
    Alice-->>John: Dotted
    Alice->>John: Solid with arrow
    Alice--xJohn: Lost message

Rendered Result:

sequenceDiagram
    Alice->John: Solid
    Alice-->>John: Dotted
    Alice->>John: Solid with arrow
    Alice--xJohn: Lost message

Logic Controls (Alt, Opt, Loop)

You can use logic blocks similar to programming languages:

  • alt/else: Conditional branching
  • opt: Optional steps
  • loop: Loops

Code Example:

sequenceDiagram
    User->>System: Payment
    alt Enough Balance
        System-->>User: Success
    else Low Balance
        System-->>User: Failure
    end

Rendered Result:

sequenceDiagram
    User->>System: Payment
    alt Enough Balance
        System-->>User: Success
    else Low Balance
        System-->>User: Failure
    end

Notes

You can add notes to your sequence diagrams:

Code Example:

sequenceDiagram
    Note over User,Server: Establishing Secure Connection
    User->>Server: Hello

Rendered Result:

sequenceDiagram
    Note over User,Server: Establishing Secure Connection
    User->>Server: Hello

Practice Now

In our Mermaid Online Editor, you can try all the syntaxes above and generate your own sequence diagrams quickly. The tool supports real-time preview, making it perfect for learning and fast prototyping.

Related Articles