Example sequence diagram code
This is the Mermaid source loaded in the editor above. Copy it into a Markdown file inside a ```mermaid block and GitHub, GitLab, Notion or Obsidian will render it.
sequenceDiagram
autonumber
actor U as User
participant W as Web App
participant A as Auth API
participant D as Database
U->>W: Submit login form
W->>A: POST /login
activate A
A->>D: Find user by email
D-->>A: User record
alt Password matches
A-->>W: 200 OK + session token
W-->>U: Redirect to dashboard
else Wrong password
A-->>W: 401 Unauthorized
W-->>U: Show "Invalid credentials"
end
deactivate A
Note over W,A: All traffic over HTTPSSequence diagram syntax cheat sheet
| Syntax | What it does |
|---|---|
| sequenceDiagram | Start a sequence diagram. |
| participant A as Alias | Declare a participant box with a display name. Use actor for a stick figure. |
| A->>B: text | Solid line with arrowhead (a call). A-->>B is dashed (a reply). |
| A-)B / A-xB | Async message (open arrow) / message ending in a cross. |
| activate A / deactivate A | Show an activation bar. Shorthand: A->>+B and B-->>-A. |
| alt ... else ... end | Alternative branches. Also loop, opt, par, critical and break blocks. |
| Note over A,B: text | A note spanning participants. Also Note left of / right of A. |
| autonumber | Number every message automatically. |
How to make a Mermaid sequence diagram
- 1Start the code with sequenceDiagram.
- 2Declare participants or actors in the order you want them shown.
- 3Write messages such as Client->>API: GET /orders.
- 4Add loops, alt blocks and notes to show logic.
- 5Export as SVG or PNG, or copy a share link.
Participants and message arrows
participant API declares a box; actor User draws a stick figure. Use participant A as Auth Service to give a short ID a longer display name. Participants appear left to right in the order they are declared or first used.
->> is a solid line with an arrowhead, typically a request; -->> is a dotted line, typically a response. -x ends in a cross for a failed or lost message, and -) draws an open arrow for async calls.
Activations, notes and numbering
Show when a participant is busy with activate API and deactivate API, or the shorthand Client->>+API: request and API-->>-Client: response.
Add Note right of API: text or Note over Client,API: text for context, and put autonumber on its own line to number every message.
Loops and alternatives
Wrap repeated messages in loop Every 30s ... end. Show branches with alt Success ... else Failure ... end, and optional steps with opt ... end.
par ... and ... end shows messages that happen in parallel, which is useful for fan-out calls to several services.