Sequence diagram (Mermaid)

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

Sequence diagrams are the most consistently useful thing Mermaid draws. This one covers the syntax you will use ninety percent of the time: participants, arrows, activations, alt and loop.

#What this example shows

  • autonumber, which numbers the messages so a review can refer to step 4.

  • alt and else, for a path that depends on a condition.

  • A note anchored across two participants, which is where timing rules belong.

#A worked example

Open it, edit it, or copy the source below.

Sequence diagram (Mermaid)

The source, which you can paste into a new diagram and edit:

sequenceDiagram
  autonumber
  actor U as User
  participant A as App
  participant S as Auth service
  participant D as Directory

  U->>A: Sign in
  activate A
  A->>S: POST /token
  activate S
  S->>D: Verify credentials
  D-->>S: Verified

  alt MFA enabled
    S-->>A: Challenge
    A-->>U: Enter code
    U->>A: Code
    A->>S: POST /token/mfa
  else No MFA
    Note over S,D: Straight to token issue
  end

  S-->>A: JWT, 15 minute expiry
  deactivate S
  A-->>U: Signed in
  deactivate A

  loop Every 14 minutes
    A->>S: Refresh
    S-->>A: New JWT
  end

#Making it your own

  • Add par and end to show two things happening at once.

  • Use participant rather than actor for systems; actor draws a stick figure.

  • Put expiry and retry rules in notes rather than in message labels.

Copy it. Change one line. See what happens.