Mermaid Sequence Diagram Syntax

A sequence diagram opens with sequenceDiagram, then declares participants and lists their messages in the order they happen.

Construct	Meaning	Example
`participant A`	Declares a lifeline drawn as a box.	sequenceDiagram participant A participant B A->>B: Hello
`actor A`	Declares a lifeline drawn as a stick figure, for a human participant.	sequenceDiagram actor User participant App User->>App: Log in
`A->>B: text`	Solid arrow, conventionally a request or call.	sequenceDiagram participant A participant B A->>B: Request
`A-->>B: text`	Dashed arrow, conventionally a response to a prior call.	sequenceDiagram participant A participant B A->>B: Request B-->>A: Response
`alt / else / end`	A two-way branch, like an if/else, drawn as a labelled box split into two paths.	sequenceDiagram participant A participant B A->>B: Request alt succeeds B-->>A: OK else fails B-->>A: Error end
`opt / end`	A single optional branch with no else.	sequenceDiagram participant A participant B A->>B: Request opt cache miss A->>B: Refetch end
`loop / end`	Repeats the enclosed messages, labelled with the loop condition.	sequenceDiagram participant A participant B loop every 5s A->>B: Poll end

Everything together

Mermaid source

sequenceDiagram
    actor User
    participant App
    participant AuthServer
    User->>App: Click "Log in"
    App->>AuthServer: Redirect with client_id
    AuthServer-->>User: Show login form
    User->>AuthServer: Submit credentials
    alt credentials valid
        AuthServer-->>App: Authorization code
        App-->>User: Logged in
    else credentials invalid
        AuthServer-->>User: Show error
    end

Mermaid Sequence Diagram Syntax — full exampleOpen in editor →

Free Online Sequence Diagram Generator →