Sequence Diagram

Definition

A sequence diagram, also known as a sequence chart, is a type of diagram that illustrates the interactions between objects in a system over time. It is used to visualize the behavior of a system and how objects communicate and work together.

Notations

In this post, I'll only introduce the commonly used notations that are sufficient for BAs. For more in-depth information about the notations, especially lifelines, you can refer to this link: https://www.omg.org/spec/UML/2.5.1/About-UML

Name	Symbol	Meaning
Lifeline - object		Represents an object participating in the process. Objects can be: Entity: User, account, etc. System component: Payment gateway, user interface. Control flow: Error handling flow, order processing flow. Business layer: Customer management service, product management service. ....etc
Lifeline -Actor		A variation of Lifeline - Object, specifically representing a user.
Activation		A vertical rectangle on a lifeline. Represents the period during which an object is performing an operation.
Sequence flow		Shows the sequential order of actions in the diagram.
Return		Shows the action of returning a result (usually a reply to a sequence flow).
Interaction use		An interaction frame, including a group of actions performed based on an operator (top left corner) and a condition (if any). Commonly used operators include: alt: Represents alternative choices (like if-else). opt: Represents an optional interaction (may or may not occur). loop: Represents a loop. par: Represents parallel interactions. seq: Represents a sequence of consecutive interactions.

Drawing Sequence Diagrams with Mermaid Live

There are many tools available for drawing sequence diagrams, such as Visio (MS Office), Draw.io (now https://app.diagrams.net/), Visual Paradigm, Lucidchart, etc.

However, in this post, I'll introduce a tool that I switched to for drawing sequence diagrams after using it: Mermaid (https://mermaid.live/edit).

With Mermaid, once you're familiar with it, you don't need to draw; you just type out the flow using its syntax, and the diagram will be generated for you.

User guide: https://mermaid.js.org/syntax/sequenceDiagram.html

The Mermaid interface consists of two main parts:

• The left side is the editor where you write the commands.

• The right side displays the corresponding diagram generated based on the commands.

Ví dụ:

Here's a snippet of Mermaid code. Just paste it into the editor and you'll see the result. Remember to enable auto-sync, or if it's disabled, click the sync button for Mermaid to generate the diagram:

Mermaid code

Result:

By understanding and utilizing sequence diagrams, BAs can effectively visualize and communicate complex system interactions, leading to clearer requirements and better software design