Sequence Diagram

Free Online Sequence Diagram Maker

A sequence diagram is a type of UML diagram that shows how participants — such as a user, an app, and a server — exchange messages over time. Each participant gets a vertical lifeline, and arrows between lifelines represent requests and replies in the order they actually occur.

Create UML sequence diagrams to visualize interactions between systems, services, and users. Real-time preview, no signup.

Last updated: · Mermaid v11

Try it live

Live · editablediagram.mmd
Example sequence diagram rendered by FlowViz
Edit the code — the diagram follows

When to use sequence diagram

API documentation

Document REST API calls, authentication flows, and service-to-service communication as messages between participants. Solid arrows for requests and dashed replies keep the request/response contract explicit in a way prose never quite manages.

System design

Sketch microservice interactions, message passing, and event-driven architectures before committing to them. Adding a queue or a cache is one participant line, which keeps design reviews fast and concrete.

Bug investigation

Reconstruct the exact sequence of events leading to an incident to see where the failure entered the flow. A sequence diagram of the failing path is often the clearest artifact you can attach to a postmortem.

Key syntax

sequenceDiagramDeclare diagram type
participant ADeclare a participant
actor U as UserParticipant shown as person icon
A->>B: messageSolid arrow with message
A-->>B: replyDashed reply arrow
activate AShow activation bar
Note over A,B: textAdd note spanning participants
loop Every 5sLoop block
alt/elseConditional block
Full Sequence Diagram syntax reference → More Mermaid examples →

How to create a sequence diagram with Mermaid

1

Open FlowViz and start with sequenceDiagram on the first line.

2

Declare your participants: participant Server or actor User for people.

3

Write messages between participants: A->>B: Request message for solid arrows.

4

Use A-->>B: Response for dashed reply arrows.

5

Add activate A and deactivate A to show processing time bars.

6

Use Note over A,B: text to add annotations.

7

Export as SVG when your diagram is complete.

Frequently asked questions

When should I use a sequence diagram instead of a flowchart?

Use a sequence diagram when *who* does something matters as much as what happens — it puts each participant on its own lifeline and shows messages crossing between them in time order. Use a flowchart when the actor is irrelevant and only the order of steps and decisions matters. A login flow drawn as a flowchart hides which side validates the password; drawn as a sequence diagram, that is the first thing you see.

What is a sequence diagram used for?

Showing how participants interact over time — API request flows, auth handshakes, and service-to-service communication are the classic cases.

What is the difference between ->> and -->> arrows?

A solid arrow (->>) is a request or call; a dashed arrow (-->>) is the reply. Async messages use -) and --).

Can I show loops and conditionals in a sequence diagram?

Yes — wrap messages in loop ... end for repetition, alt/else for branching, and opt for optional fragments.

Related tools

Meeting Cost Calculator →

Start diagramming now

No signup. No install. Just open the editor and start writing.