時序圖
Mermaid 可以渲染時序圖。時序圖是一種互動圖，它展示了各個程序如何相互操作以及操作的順序。
代碼
複製
嵌入
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
資訊
關於節點的說明：由於 Mermaid 語言的編寫方式，"end" 這個詞會破壞整個圖形。如果必須使用「end」，則需要使用小括號（）、雙引號""、大括號{} 或中括號[]來括住「end」一詞，即：（end）、[end]、{end}。
語法
參與者
參與者會按照在圖表來源文字中出現的順序顯示。有時，你可能希望以不同於第一則訊息中出現的順序來顯示參與者，可以透過以下方法來指定參與者的出場順序：
代碼
複製
嵌入
sequenceDiagram
participant Alice
participant Bob
Bob->>Alice: Hi Alice
Alice->>Bob: Hi Bob
角色
如果你想使用角色符號，而不是帶有文字的矩形，則可以透過使用角色陳述式來實現，如下所示。
代碼
複製
嵌入
sequenceDiagram
actor Alice
actor Bob
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
別名
你可以在參與者宣告後使用 as 來定義別名
代碼
複製
嵌入
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
參與者建立和銷毀
可以透過訊息建立和銷毀參與者。因此，請在訊息前新增建立或銷毀指令。
複製
嵌入
participant B
A --> B: Hello
建立指令時支援區分參與者與別名。訊息的傳送者或接收者可被銷毀，但接收者只能被建立。
代碼
複製
嵌入
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
分組/框
參與者可以分組放在垂直框中。你可以使用符號定義顏色（如果沒有定義，它將是透明的）。
複製
嵌入
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
資訊
如果你的群組名稱是有色的，你可以將該顏色強制設為透明：
複製
嵌入
box transparent Aqua
... actors ...
end
代碼
複製
嵌入
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?
訊息
訊息可以實線顯示，也可以虛線顯示。
線條可以是實線或虛線，並且支援以各種類型的箭頭、十字或開口箭頭結束。
複製
嵌入
[Actor][Arrow][Actor]:Message text
十種標準箭頭類型
| 類型 | 描述 |
|---|---|
| -> | 無箭頭實線 |
| --> | 無箭頭虛線 |
| ->> | 帶箭頭實線 |
| -->> | 帶箭頭虛線 |
| <<->> | 雙向箭頭的實線 |
| <<-->> | 雙向箭頭的虛線 |
| -x | 末端有十字的實線 |
| --x | 末端有十字的虛線 |
| -) | 末尾帶有空心箭頭的實線（非同步） |
| --) | 末尾帶有空心箭頭的虛線（非同步） |
啟用
可以啟用和停用一個角色，停用或啟用可以是專用宣告：
代碼
複製
嵌入
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
activate Alice
Bob->>Alice: Hi Alice!
deactivate Alice
還有一種快捷表示法，即在訊息箭頭後新增 + 或 -。
代碼
複製
嵌入
sequenceDiagram
Alice->>+John: Hello John, how are you?
John-->>-Alice: Great!
同一角色的啟用可以疊加：
代碼
複製
嵌入
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!
註解
可以為時序圖新增註解。可以透過以下符號實現：Note[right of] 或 [left of] 或 [over][參與者]：註解內容
代碼
複製
嵌入
sequenceDiagram
participant John
Note right of John: Text in note
還可以建立涵蓋兩個參與者的註解：
代碼
複製
嵌入
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
換行字元
可以在註解和訊息中新增換行字元：
代碼
複製
嵌入
sequenceDiagram
Alice->John: Hello John,<br/>how are you?
Note over Alice,John: A typical interaction<br/>But now in two lines
角色名稱中的換行字元需要定義別名：
代碼
複製
嵌入
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
迴圈
在時序圖中可以透過以下符號來表達迴圈。
複製
嵌入
loop Loop text
... statements ...
end
請參閱下面的範例：
代碼
複製
嵌入
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
替代
在時序圖中可以透過符號來表達替代路徑。
複製
嵌入
alt Describing text...
statements
else
statements
end
或者如果存在可选序列：
複製
嵌入
opt Describing text...
statements
end
請參閱下面的範例：
代碼
複製
嵌入
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
平行
可以透過以下符號表示並行發生的動作。
代碼
複製
嵌入
par Action 1
statements
and Action 2
statements
and Action N
statements
end
請參閱下面的範例：
代碼
複製
嵌入
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!
也可以巢狀並行區塊。
代碼
複製
嵌入
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
關鍵區段
可以透過對各種情況進行條件化處理，來展示必須自動執行的操作。
這是透過以下符號完成的：
複製
嵌入
critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end
請參閱下面的範例：
代碼
複製
嵌入
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
也有可能完全沒有選項。
代碼
複製
嵌入
critical Establish a connection to the DB
Service-->DB: connect
end
這個關鍵區塊也可以巢狀，相當於上面看到的 par 陳述式。
中斷
可以在流程中指示序列的停止，通常用於建立異常情況的模型。
這是透過以下符號完成的：
複製
嵌入
break [something happened]
... statements ...
end
請參閱下面的範例：
代碼
複製
嵌入
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
背景醒目提示
可以設定彩色背景矩形來醒目提示流程，透過以下符號完成：
複製
嵌入
rect COLOR
... content ...
end
顏色是使用 rgb 和 rgba 語法定義的。
複製
嵌入
rect rgb(0, 255, 0)
... content ...
end
複製
嵌入
rect rgba(0, 0, 255, .1)
... content ...
end
請參閱下面的範例：
代碼
複製
嵌入
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.
註解
可以在時序圖中輸入註解，編輯器將忽略這些註解。 註解需要獨佔一行，並且必須以雙百分比符號 %% 開頭。 從註解開始到下一個換行字元之間的任何文字都將被視為註解，包括任何圖表語法。
代碼
複製
嵌入
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
用於逸出字元的實體編碼
可以使用以下語法對字元進行逸出。
代碼
複製
嵌入
sequenceDiagram
A->>B: I #9829; you!
B->>A: I #9829; you #infin; times more!
給出的數字是十進位，因此 (#) 可以編碼為 (#35;)，還支援使用 HTML 字元名稱。
由於分號可以代替換行字元來定義標記，因此在訊息文字中包含分號時，你需要使用 (#59;)。
編號
可以在時序圖中的每個箭頭上附加一個序號。如下所示：
代碼
複製
嵌入
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!
參與者選單
參與者可以包含彈出式選單，其中列有指向外部頁面的個人化連結。例如，如果一個角色代表一個網路服務，有用的連結可能包括指向服務健康儀表板的連結、包含該服務程式碼的儲存庫，或描述該服務的 Wiki 頁面連結。
可以透過新增一或多條連結行來設定，格式如下：
複製
嵌入
link <actor>: <link-label> @ <link-url>
代碼
複製
嵌入
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!
進階選單語法
有一種依賴 JSON 格式的進階語法。如果你熟練 JSON 格式，那麼這也可以使用。
可以透過新增以下格式的連結行來設定：
複製
嵌入
links <actor>: <json-formatted link-name link-url pairs>
示例如下:
代碼
複製
嵌入
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!
