Định nghĩa

Sequence diagram hay sơ đồ trình tự là một dạng biểu đồ mô tả tương tác giữa các đối tượng (object) trong một hệ thống theo trình tự thời gian. Nó được sử dụng để mô tả hành vi của hệ thống và cách các đối tượng giao tiếp, làm việc với nhau.

Ký hiệu

Trong bài này mình chỉ giới thiệu các ký hiệu hay dùng và đủ dùng với BA nhé. Đi sâu hơn về các ký hiệu, đặc biệt là lifeline, các bạn có thể tìm hiểu thêm ở đây https://www.omg.org/spec/UML/2.5.1/About-UML

Công cụ vẽ Sequence diagram - Mermaid live

Có khá nhiều các công cụ khác nhau sử dụng cho việc vẽ sequence diagram như Visio (MS office), Draw.io (giờ là https://app.diagrams.net/), visual-paradigm, lucidchart...

Tuy nhiên trong bài này mình sẽ giới thiệu 1 tool mà sau khi sử dụng thì mình quyết định là đổi qua để vẽ Sequence diagram thay vì các tool còn lại. Đó là Mermaid: https://mermaid.live/edit:

Với mermaid khi đã quen thuộc các dùng các bạn k cần vẽ mà chỉ gần type ra luồng chạy theo cú pháp (syntax) là diagram sẽ được gen ra cho các bạn.
User guide: https://mermaid.js.org/syntax/sequenceDiagram.html
Giao diện mermaid gồm 2 phần chính:
- Bên trái là editor, nơi các bạn tạo ra các câu lệnh
- Bên phải là diagram tương ứng được hệ thống tạo ra dựa trên câu lệnh

8d8890_4424911b758d4da590d138d0aee55d9e~mv2.png

Ví dụ:

Mình có 1 đoạn code mermaid, bạn chỉ cần paste vào editor là sẽ thấy kết quả, nhớ bật auto sync hoặc nếu tắt thì bạn ấn vào nút sync để Mermaid generate diagram nhé:

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

Kết quả:

8d8890_ad264e6093f84662b26d1328ef2e9fce~mv2.png

Sequence Diagram

Định nghĩa

Ký hiệu

Công cụ vẽ Sequence diagram - Mermaid live

Mermaid code