Biểu đồ tuần tự
Mermaid có thể kết xuất biểu đồ tuần tự. Biểu đồ tuần tự là một loại biểu đồ tương tác, nó thể hiện cách các tiến trình tác động lẫn nhau và thứ tự của các thao tác.
Sao chép
Nhúng
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Lưu ý về nút: do cách viết của ngôn ngữ Mermaid, từ "end" sẽ phá vỡ toàn bộ đồ thị. Nếu bắt buộc phải dùng "end", thì cần dùng dấu ngoặc đơn (), dấu ngoặc kép "", dấu ngoặc nhọn {} hoặc dấu ngoặc vuông [] để bao từ "end", tức là: (end), [end], {end}.
Cú pháp
Tác nhân
Các tác nhân sẽ hiển thị theo thứ tự chúng xuất hiện trong văn bản nguồn của biểu đồ. Đôi khi, bạn có thể muốn hiển thị các tác nhân theo thứ tự khác với thứ tự chúng xuất hiện trong thông điệp đầu tiên, có thể chỉ định thứ tự xuất hiện của các tác nhân bằng cách sau:
Sao chép
Nhúng
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
Nếu bạn muốn dùng ký hiệu vai trò thay vì hình chữ nhật có văn bản, thì có thể thực hiện bằng cách dùng câu lệnh vai trò, như sau.
Sao chép
Nhúng
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
Bí danh
Bạn có thể dùng as sau khai báo tác nhân để định nghĩa bí danh
Sao chép
Nhúng
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
Tạo và hủy tác nhân
Có thể tạo và hủy tác nhân thông qua thông điệp. Do đó, hãy thêm chỉ thị tạo hoặc hủy trước thông điệp.
Sao chép
Nhúng
participant B
A --> B: Hello
Khi tạo chỉ thị có hỗ trợ phân biệt tác nhân với bí danh. Người gửi hoặc người nhận của thông điệp có thể bị hủy, nhưng người nhận chỉ có thể được tạo.
Sao chép
Nhúng
sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
Nhóm/Khung
Các tác nhân có thể được nhóm lại trong một khung dọc. Bạn có thể dùng ký hiệu để định nghĩa màu (nếu không định nghĩa, nó sẽ trong suốt).
Sao chép
Nhúng
box Aqua Group Description
... actors ...
end
box Group without description
... actors ...
end
box rgb(33,66,99)
... actors ...
end
box rgba(33,66,99,0.5)
... actors ...
end
Nếu tên nhóm của bạn có màu, bạn có thể buộc màu đó thành trong suốt:
Sao chép
Nhúng
box transparent Aqua
... actors ...
end
Sao chép
Nhúng
sequenceDiagram
box Orange Alice & John
participant A
participant J
end
box Another Group
participant B
participant C
end
A->>J: Hello John, how are you?
J->>A: Great!
A->>B: Hello Bob, how is Charley?
B->>C: Hello Charley, how are you?
Thông điệp
Thông điệp có thể được hiển thị bằng nét liền hoặc nét đứt.
Đường có thể là nét liền hoặc nét đứt, và hỗ trợ kết thúc bằng nhiều loại mũi tên, dấu gạch chéo hoặc mũi tên hở khác nhau.
Sao chép
Nhúng
[Actor][Arrow][Actor]:Message text
Mười loại mũi tên tiêu chuẩn
| Loại | Mô tả |
|---|---|
| -> | Nét liền không có mũi tên |
| --> | Nét đứt không có mũi tên |
| ->> | Nét liền có mũi tên |
| -->> | Nét đứt có mũi tên |
| <<->> | Nét liền có mũi tên hai chiều |
| <<-->> | Nét đứt có mũi tên hai chiều |
| -x | Nét liền có dấu gạch chéo ở đầu mút |
| --x | Nét đứt có dấu gạch chéo ở đầu mút |
| -) | Nét liền có mũi tên rỗng ở cuối (bất đồng bộ) |
| --) | Nét đứt có mũi tên rỗng ở cuối (bất đồng bộ) |
Kích hoạt
Có thể kích hoạt và hủy kích hoạt một vai trò; việc hủy kích hoạt hoặc kích hoạt có thể là một khai báo riêng:
Sao chép
Nhúng
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
Còn có một ký hiệu tắt, đó là thêm + hoặc - sau mũi tên thông điệp.
Sao chép
Nhúng
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
Việc kích hoạt cùng một vai trò có thể xếp chồng:
Sao chép
Nhúng
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
Chú thích
Có thể thêm chú thích vào biểu đồ tuần tự. Có thể thực hiện thông qua các ký hiệu sau: Note[right of] hoặc [left of] hoặc [over][tác nhân]: nội dung chú thích
Sao chép
Nhúng
sequenceDiagram
participant John
Note right of John: Text in note
Cũng có thể tạo chú thích bao quát hai tác nhân:
Sao chép
Nhúng
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
Ký tự xuống dòng
Có thể thêm ký tự xuống dòng trong chú thích và thông điệp:
Sao chép
Nhúng
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
Ký tự xuống dòng trong tên vai trò cần định nghĩa bí danh:
Sao chép
Nhúng
sequenceDiagram
participant Alice as Alice<br/>Johnson
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<n/>But now in two lines
Vòng lặp
Trong biểu đồ tuần tự, có thể biểu diễn vòng lặp thông qua các ký hiệu sau.
Sao chép
Nhúng
loop Loop text
... statements ...
end
Hãy xem ví dụ dưới đây:
Sao chép
Nhúng
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
Thay thế
Trong biểu đồ tuần tự, có thể biểu diễn đường thay thế thông qua ký hiệu.
Sao chép
Nhúng
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
Sao chép
Nhúng
opt Describing text...
statements
end
Hãy xem ví dụ dưới đây:
Sao chép
Nhúng
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
Song song
Có thể biểu diễn các hành động xảy ra song song thông qua các ký hiệu sau.
Sao chép
Nhúng
par Action 1
statements
and Action 2
statements
and Action N
statements
end
Hãy xem ví dụ dưới đây:
Sao chép
Nhúng
sequenceDiagram
par Alice to Bob
Alice->>Bob: Hello guys!
and Alice to John
Alice->>John: Hello guys!
end
Bob-->>Alice: Hi Alice!
John-->>Alice: Hi Alice!
Cũng có thể lồng ghép các khối song song.
Sao chép
Nhúng
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
Vùng tới hạn
Có thể điều kiện hóa đối với các tình huống khác nhau để thể hiện những hành động phải được tự động thực thi.
Việc này được thực hiện thông qua các ký hiệu sau:
Sao chép
Nhúng
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
Hãy xem ví dụ dưới đây:
Sao chép
Nhúng
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
option Network timeout
Service-->Service: Log error
option Credentials rejected
Service-->Service: Log different error
end
Cũng có thể hoàn toàn không có tùy chọn nào.
Sao chép
Nhúng
critical Establish a connection to the DB
Service-->DB: connect
end
Khối quan trọng này cũng có thể được lồng ghép, tương đương với câu lệnh par đã thấy ở trên.
Ngắt
Có thể chỉ ra việc dừng chuỗi trong quy trình, thường được dùng để mô hình hóa các tình huống ngoại lệ.
Việc này được thực hiện thông qua các ký hiệu sau:
Sao chép
Nhúng
break [something happened]
... statements ...
end
Hãy xem ví dụ dưới đây:
Sao chép
Nhúng
sequenceDiagram
Consumer-->API: Book something
API-->BookingService: Start booking process
break when the booking process fails
API-->Consumer: show failure
end
API-->BillingService: Start billing process
Tô sáng nền
Có thể đặt hình chữ nhật nền có màu để tô sáng quy trình, thực hiện thông qua các ký hiệu sau:
Sao chép
Nhúng
rect COLOR
... content ...
end
Màu được định nghĩa bằng cú pháp rgb và rgba.
Sao chép
Nhúng
rect rgb(0, 255, 0)
... content ...
end
Sao chép
Nhúng
rect rgba(0, 0, 255, .1)
... content ...
end
Hãy xem ví dụ dưới đây:
Sao chép
Nhúng
sequenceDiagram
participant Alice
participant John
rect rgb(191, 178, 255)
note right of Alice: Alice calls John.
Alice->>+John: Hello John, how are you?
rect rgb(142, 182, 89)
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
end
John-->>-Alice: I feel great!
end
Alice ->>+ John: Did you want to go to the game tonight?
John -->>- Alice: Yeah! See you there.
Chú thích
Có thể nhập chú thích trong biểu đồ tuần tự, trình soạn thảo sẽ bỏ qua các chú thích này. Chú thích cần chiếm một dòng riêng và phải bắt đầu bằng hai dấu phần trăm %%. Mọi văn bản từ khi bắt đầu chú thích đến ký tự xuống dòng tiếp theo đều được coi là chú thích, bao gồm cả bất kỳ cú pháp biểu đồ nào.
Sao chép
Nhúng
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
Mã thực thể dùng để thoát ký tự
Có thể dùng cú pháp sau để thoát ký tự.
Sao chép
Nhúng
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
Con số đưa ra là hệ thập phân, do đó (#) có thể được mã hóa thành (#35;), cũng hỗ trợ sử dụng tên ký tự HTML.
Vì dấu chấm phẩy có thể thay thế ký tự xuống dòng để định nghĩa thẻ, nên khi bao gồm dấu chấm phẩy trong văn bản thông điệp, bạn cần dùng (#59;).
Đánh số
Có thể gắn một số thứ tự vào mỗi mũi tên trong biểu đồ tuần tự. Như sau:
Sao chép
Nhúng
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Menu của tác nhân
Tác nhân có thể chứa menu bật lên, trong đó liệt kê các liên kết được cá nhân hóa trỏ tới các trang bên ngoài. Ví dụ, nếu một vai trò đại diện cho một dịch vụ mạng, các liên kết hữu ích có thể bao gồm liên kết tới bảng điều khiển tình trạng dịch vụ, kho chứa mã nguồn của dịch vụ đó, hoặc liên kết tới trang wiki mô tả dịch vụ đó.
Có thể cấu hình bằng cách thêm một hoặc nhiều dòng liên kết, theo định dạng sau:
Sao chép
Nhúng
link <actor>: <link-label> @ <link-url>
Sao chép
Nhúng
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
Cú pháp menu nâng cao
Có một cú pháp nâng cao phụ thuộc vào định dạng JSON. Nếu bạn thành thạo định dạng JSON, thì cũng có thể dùng cách này.
Có thể cấu hình bằng cách thêm dòng liên kết theo định dạng sau:
Sao chép
Nhúng
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
Sao chép
Nhúng
sequenceDiagram
participant Alice
participant John
links Alice: {"Dashboard": "https://dashboard.contoso.com/alice", "Wiki": "https://wiki.contoso.com/alice"}
links John: {"Dashboard": "https://dashboard.contoso.com/john", "Wiki": "https://wiki.contoso.com/john"}
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
