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....

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

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.

8d8890_4424911b758d4da590d138d0aee55d9e~mv2.png

Sample:

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:

8d8890_1c1be3eab63d46c384a7e65b1e78add9~mv2.png

Mermaid code

sequenceDiagram

    actor User

    participant FE as Front-End

    participant BE as Back-End

    User ->>+FE: create an account

    FE ->>+FE: validate data

    alt false

    FE -->>-User: return error

    else success

    activate FE

    FE ->>+BE: send request

    note over FE, BE: call API to create account

    BE ->>+ BE: validate API request

        alt false

        BE -->>- FE: return error

        FE ->>+ FE: display corresponding error

        deactivate FE

        else success

        BE -->>- FE: return result

        FE -->>- FE: display success message & login screen

        end

Result:

8d8890_ad264e6093f84662b26d1328ef2e9fce~mv2.png

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