Sequence Diagram

Đị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

Tên	Ký hiệu	Ý nghĩa
Lifeline - object		Thể hiện đối tượng tham gia vào quy trình. Đối tượng ở đây có thể là: Entiry: User, tài khoản... System component: Cổng thanh toán, giao diện người dùng Control flow: luồng xử lý lỗi, luồng xử lý đơn hàng Business layer: Dịch vụ quản lý khách hàng, dịch vụ quản lý sản phẩm. ....etc
Lifeline -Actor		Là một biến thể của lifeline - Object, nhưng chỉ đại diện cho user.
Activation		Hình chữ nhật nằm dọc trên lifeline. Đại diện cho khoảng thời gian mà một đối tượng đang thực hiện một hoạt động.
Sequence flow		Thể hiện tuần tự các hành động trong sơ đồ.
Return		Thể hiện hành động trả lại kết quả (thường là reply của sequence flow)
Interaction use		Khung tương tác, bao gồm 1 nhóm các hành động được thực hiện dựa trên toán tử (object - góc trên bên trái) và điều kiện (nếu có). Thường thấy nhất là các toán tử: alt: Đại diện cho các lựa chọn thay thế (như if-else) opt: Đại diện cho một tương tác tùy chọn (có thể xảy ra hoặc không xảy ra) loop: Đại diện cho một vòng lặp par: Đại diện cho các tương tác song song seq: Đại diện cho một chuỗi các tương tác liên tiếp

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

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é:

Mermaid code

Kết quả: