Sequence Diagram

System Interactions Made Clear

Map workflows, catch bugs, and make communication easier. Bring clarity to complex processes by visualizing the order, logic, and interactions within systems.

Start Drawing

What Is a Sequence Diagram?

A sequence diagram is a type of UML (Unified Modeling Language) diagram that illustrates how, when, and in what order the user and objects interact within a system, and how the system responds. Put simply, it shows a sequence of interactions between the user, system, and its elements needed to complete a task.

Sequence diagrams give software developers, UX designers, and non-technical stakeholders a clear view into how systems work. They make it easier to spot problems, design new architectures, and document existing processes, all in a simple, visual format that everyone can follow.

Sequence Diagram Symbols

Sequence diagrams use a standardized set of symbols to represent components of a system, entities that interact with it, and tasks performed in the process.

An example of lifeline and actor elements created in Excalidraw.

Lifelines and Actors

Sometimes referred to as an object, a lifeline (labeled rectangle with downward line) is a participant of an interaction, like a shopping cart or payment gateway.

Though the line is usually dashed, in some frameworks (like Mermaid) it can be solid. Both are fine, as long as you're consistent.

An actor (stickman figure) is an external entity that interacts with the system. Usually, this is the user, e.g., a customer starting the process by placing an order.

Activation Boxes

Also known as activation, the thin rectangle placed on the vertical lines indicates that the object is involved in the operation initiated by a message. The longer the task takes, the longer the activation box.

Synchronous and Asynchronous Messages

Messages are signals, operations, and information exchanged between objects.

Arrows with a solid arrowhead represent synchronous messages. When an object sends a synchronous message, it must wait for a response before the interaction can continue.

In the case of an asynchronous message (marked with a lined arrowhead), the interaction can continue without waiting for a response from the receiver.

An example of return and self images created in Excalidraw.

Return and Self Messages

A return message (dashed arrow with a lined arrowhead) is sent when the receiver finishes processing a message and returns control to the caller.

A self message (a U-shaped arrow) is a message that an object sends to itself. It usually represents an internal operation.

Create and Destroy Messages

A create message adds a new object to the sequence diagram. It is attached to the lifeline it creates.

A destroy message does the opposite, removing an existing object. It's marked with an X attached to the destroyed lifeline.

Examples of a loop, alternative, and option elements of a sequence diagram.

Alternatives, Options, and Loops

An alternative (alt) frame shows possible flows of interaction, where only one is executed if a condition is met.

An option (opt) represents a single path that executes only if its condition is true.

A loop is a sequence of messages repeated until a condition is met.

All three elements include text in brackets for additional context, like the condition required or the action that triggers the process.

How Can Sequence Diagrams Help Specific Professions?

Software Developers
Map the logic of interactions between microservices, user interface, databases, and other components. Visualize error handling scenarios.
Business Analysts
Illustrate how orders move through the system to identify possible improvements. Specify intended behavior for features like automated invoice generation.
Project Managers
Use sequence diagrams to explain system behavior to clients, executives, and non-technical team members. See dependencies between interactions to plan tasks ahead and avoid blockers.
UX/UI Designers
Find friction points in processes like online checkout or account registration. Reveal where users might abandon the process, e.g., during payment or address confirmation.

Tips and Tricks for Creating Sequence Diagrams

Best Practices
- Reduce return messages: A synchronous message already implies a return, so return messages are often optional unless you need a high level of detail. You can also include the return value in the original message.
- Use conditional elements: Alternatives, loops, and options will help you model complex interactions in a structured way.
- Focus on a single use case: If a process is very complicated, it’s often clearer to split it into several sequence diagrams instead of trying to cover all scenarios in a single overloaded one.
Creating Sequence Diagrams in Excalidraw
- Edit lines and arrows: In the left-hand menu, you can adjust line style and arrowhead shape to distinguish between types of messages.
- Click less with shortcuts: Press R or 2 to draw a rectangle, A or 5 to draw an arrow, and L or 6 to draw a line.
- Use libraries: Browse Excalidraw libraries for all the components you need to create UML sequence diagrams.
- Place elements accurately: Right-click on the whiteboard and select "Snap to objects" or "Toggle grid" to arrange sequence diagram elements evenly.
- Add color for clarity: Use colors to highlight different elements of the diagram like objects and alternatives.
How to Draw Sequence Diagrams Faster in Excalidraw
With AI
- Click "More tools" in the toolbar and then "Text to diagram".
- Be specific; define the type of diagram, its purpose, and details like the specific symbols you want to use.
- You can view your AI-generated sequence diagram as Mermaid code.
- Here's an example of a prompt and a diagram generated: "Generate a sequence diagram for checking inventory. Use activations and the actor symbol for the customer."
With Mermaid Code
Mermaid is slower than AI prompts, but more consistent and compatible with GitHub, GitLab, Notion, Markdown, and other tools.
- Click "More tools" in the toolbar and then "Mermaid to Excalidraw".
- Be specific; state the type of diagram and its purpose.
- Type in Mermaid code to generate the diagram. If you need help writing the code, click the link in the instruction to open the Mermaid tutorial on sequence diagram syntax.
- Check out this sequence diagram for the login process, generated in Excalidraw with the following Mermaid code:
sequenceDiagram
actor User
participant UI as Login Page
participant Auth as Authentication System
User->>UI: Enter username & password
activate UI
UI->>Auth: Verify credentials
activate Auth
Auth-->>UI: Success / Failure
deactivate Auth
UI->>User: Grant access / Show error
deactivate UI

Wrapping Up

Sequence diagrams visualize how parts of a system interact over time, giving both technical and non-technical stakeholders a clear overview of the process. They illustrate the order of operations, highlight potential issues, and clarify requirements.

Software development and design is where sequence diagrams are particularly useful. Use them to map customer journeys like online checkout, model backend processes such as payment, and show how multiple systems interact in workflows like customer support.

Start Drawing