Mermaid Sequence Diagram Maker
Write sequence diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.
Updated · Code editor with live preview
Sequence diagram example
Rendering preview…
sequenceDiagram
actor User
participant App
participant API
User->>App: Click "Log in"
App->>API: POST /auth/login
API-->>App: Token
App-->>User: Show dashboardWhat is a sequence diagram?
A sequence diagram shows how people or systems interact over time. Each participant is a vertical lifeline, and each message is an arrow between lifelines, read from top to bottom. In Mermaid a sequence diagram starts with the sequenceDiagram keyword.
When to use a sequence diagram
- Documenting API calls and request/response flows
- Explaining login, payment or OAuth flows
- Designing how microservices talk to each other
- Reviewing edge cases such as timeouts and retries
How to make a sequence diagram in Mermaid
- Step 1
Open the editor
Open TryMermaid with the example on this page, or start a new diagram with sequenceDiagram on the first line.
- Step 2
Declare the participants
List the people and systems involved with participant API or actor User. They appear from left to right in the order you declare them.
- Step 3
Add the messages
Write one message per line, such as User->>App: Log in. Use -->> for replies, which are drawn as dotted arrows.
- Step 4
Add logic and export
Wrap optional or repeated steps in opt, alt or loop blocks, check the live preview, then export PNG or SVG or share a link.
Sequence diagram syntax cheat sheet
| Element | Syntax | What it does |
|---|---|---|
| Participant | participant API | A system, shown as a box |
| Actor | actor User | A person, shown as a stick figure |
| Message | A->>B: Text | Solid line with an arrowhead |
| Reply | A-->>B: Text | Dotted line with an arrowhead |
| Async message | A-)B: Text | Solid line with an open arrow |
| Failed message | A-xB: Text | Line ending in a cross |
| Note | Note right of A: Text | Note beside a lifeline |
| Loop | loop Every minute … end | Repeated messages |
| Alternatives | alt Success … else Failure … end | If/else paths |
| Numbering | autonumber | Numbers every message |
Sequence diagram FAQ
Can I edit sequence diagrams on the visual canvas?
Not yet. The drag-and-drop canvas currently supports flowcharts. Sequence diagrams are edited in code with a live preview that updates as you type, and they export to PNG and SVG like any other diagram.
How do I number the messages in a sequence diagram?
Add autonumber on its own line right after sequenceDiagram. Mermaid then puts an increasing number on every message arrow, which makes long flows easier to discuss.
How do I show a condition or alternative path?
Use an alt block: write alt followed by the first condition, the messages for that case, else followed by the other condition and its messages, then end. Use opt for a single optional block and loop for repeated steps.