What Is a Sequence Diagram?
A sequence diagram is a type of UML (Unified Modeling Language) diagram that shows how objects or components interact over time, in the order those interactions occur. It's one of the most immediately useful diagrams for developers because it maps directly onto how we think about API calls, service communication, and function execution flows.
Where an architecture diagram shows what exists, a sequence diagram shows what happens — step by step, message by message.
When to Use Sequence Diagrams
Sequence diagrams are particularly valuable in these situations:
- Designing a new API flow before writing code
- Debugging a complex interaction between services
- Documenting an authentication or authorization flow
- Onboarding developers to an unfamiliar workflow
- Reviewing a proposed integration with a third-party service
They're less useful for showing static structure (use class or component diagrams for that) or high-level system topology (use architecture diagrams).
Core Notation Elements
Participants (Lifelines)
Participants are the actors or components in the interaction. Each is shown as a box at the top with a vertical dashed line (called a lifeline) extending downward. Time flows from top to bottom.
Participants can be: users, browsers, services, APIs, databases, queues, or any system actor.
Messages (Arrows)
Messages are drawn as horizontal arrows between lifelines:
- Solid arrow (→): A synchronous call — the sender waits for a response.
- Dashed arrow (- - →): A return message or response.
- Open arrowhead: An asynchronous message — the sender doesn't wait.
Always label your arrows with the message name or action: GET /users/{id}, publishEvent(OrderPlaced), 200 OK + user data.
Activation Boxes
A narrow rectangle on a lifeline shows when a participant is active (processing a request). These are optional but add clarity when showing concurrent or nested calls.
Combined Fragments
For conditional and looping logic, UML provides combined fragments — rectangular frames with a label in the corner:
alt— alternative flows (like an if/else)opt— optional step (executes only if condition is true)loop— repeated interactionpar— parallel execution
A Practical Example: User Login Flow
Here's how a standard login sequence might read as a diagram description:
- Browser → API: POST /auth/login {email, password}
- API → Auth Service: validateCredentials(email, password)
- Auth Service → Database: SELECT user WHERE email = ?
- Database → Auth Service: user record
- [alt] Valid credentials: Auth Service → API: JWT token
- [alt] Invalid credentials: Auth Service → API: 401 Unauthorized
- API → Browser: 200 OK + token OR 401 error
Even written in text, this tells a complete story. Drawn as a sequence diagram, it becomes immediately visual and scannable.
Keeping Sequence Diagrams Manageable
Sequence diagrams get unwieldy fast. Keep them focused with these practices:
- One diagram per scenario — don't try to show the happy path and all error cases in one diagram.
- Limit participants to 4–7 — more than that and the diagram becomes hard to follow horizontally.
- Use
reffragments to reference another diagram for sub-flows you don't want to inline. - Use Mermaid or PlantUML to generate sequence diagrams as code — they're easier to update than drag-and-drop diagrams.
Tools for Drawing Sequence Diagrams
| Tool | Approach | Best For |
|---|---|---|
| Mermaid | Code-based | Diagrams in Markdown/docs |
| PlantUML | Code-based | Detailed UML in any IDE |
| draw.io | GUI | Formal, styled diagrams |
| Lucidchart | GUI | Team collaboration |
Sequence diagrams are one of the highest-value diagram types you can invest time in learning. Once you can sketch one quickly, you'll find yourself reaching for them constantly when designing or debugging complex flows.