時序圖

時序圖是一種互動圖，顯示各流程如何彼此運作，以及運作的順序。

Mermaid 可以渲染時序圖。

資訊

關於節點的注意事項，由於 mermaid 語言的腳本編寫方式，「end」一詞可能會破壞圖表。

如果無法避免，必須使用括號()、引號""或中括號{}、[]，將「end」一詞括起來。例如：(end)、[end]、{end}。

語法

參與者

參與者可以隱式定義，如本頁的第一個範例所示。參與者或角色會依照圖表來源文字中出現的順序進行渲染。有時候您可能希望以與第一個訊息中出現的順序不同的順序顯示參與者。可以透過以下方式指定角色的出現順序

角色

如果您特別想要使用角色符號，而不是帶文字的矩形，可以使用如下的角色語句來達成。

別名

角色可以有一個方便的識別符號和一個描述性的標籤。

角色建立與銷毀 (v10.3.0+)

可以透過訊息建立和銷毀角色。要做到這一點，請在訊息前新增一個 create 或 destroy 指令。

create participant B
A --> B: Hello

Create 指令支援角色/參與者的區別和別名。訊息的發送者或接收者都可以被銷毀，但只有接收者可以被建立。

無法修復的角色/參與者建立/刪除錯誤

如果在建立或刪除角色/參與者時發生以下類型的錯誤

被銷毀的參與者 participant-name 在宣告後沒有關聯的銷毀訊息。請檢查時序圖。

且修復圖表程式碼並不能消除此錯誤，而且所有其他圖表的渲染都產生相同的錯誤，那麼您需要將 mermaid 版本更新到 (v10.7.0+)。

分組 / 方塊

角色可以分組在垂直方塊中。您可以使用以下標記法定義顏色（如果沒有定義，則為透明）和/或描述性標籤

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

訊息

訊息可以顯示為實線或虛線。

[Actor][Arrow][Actor]:Message text

目前支援十種箭頭類型

類型	描述
->	沒有箭頭的實線
-->	沒有箭頭的虛線
->>	帶有箭頭的實線
-->>	帶有箭頭的虛線
<<->>	帶有雙向箭頭的實線 (v11.0.0+)
<<-->>	帶有雙向箭頭的虛線 (v11.0.0+)
-x	末端帶有叉號的實線
--x	末端帶有叉號的虛線
-)	末端帶有開放箭頭的實線 (非同步)
--)	末端帶有開放箭頭的虛線 (非同步)

啟用

可以啟用和停用角色。(停用)啟用可以是專用的宣告

也可以使用快捷方式，將 +/- 後綴附加到訊息箭頭

可以為同一角色堆疊啟用

註解

可以在時序圖中加入註解。這是透過以下標記法完成的：Note [ right of | left of | over ] [Actor]: 註解內容中的文字

請參閱以下範例

也可以建立跨越兩個參與者的註解

換行符號

可以在註解和訊息中加入換行符號

角色名稱中的換行符號需要別名

迴圈

可以在時序圖中表示迴圈。這是透過以下標記法完成的

loop Loop text
... statements ...
end

請參閱以下範例

Alt

可以在時序圖中表示替代路徑。這是透過以下標記法完成的

alt Describing text
... statements ...
else
... statements ...
end

或者，如果序列是可選的（如果沒有 else）。

opt Describing text
... statements ...
end

請參閱以下範例

平行

可以顯示平行發生的動作。

這是透過以下標記法完成的

par [Action 1]
... statements ...
and [Action 2]
... statements ...
and [Action N]
... statements ...
end

請參閱以下範例

也可以巢狀平行區塊。

臨界區域

可以顯示必須自動發生，並具有條件處理情況的動作。

這是透過以下標記法完成的

critical [Action that must be performed]
... statements ...
option [Circumstance A]
... statements ...
option [Circumstance B]
... statements ...
end

請參閱以下範例

也可以完全沒有選項

此臨界區塊也可以巢狀，與上面看到的 par 語句等效。

中斷

可以指示流程中的序列停止（通常用於模擬例外）。

這是透過以下標記法完成的

break [something happened]
... statements ...
end

請參閱以下範例

背景強調

可以透過提供彩色背景矩形來強調流程。這是透過以下標記法完成的

rect COLOR
... content ...
end

顏色是使用 rgb 和 rgba 語法定義的。

rect rgb(0, 255, 0)
... content ...
end

rect rgba(0, 0, 255, .1)
... content ...
end

請參閱以下範例

註解

可以在時序圖中輸入註解，這些註解會被剖析器忽略。註解需要單獨一行，並且必須以 %% (雙百分號) 開頭。從註解開始到下一個換行符號之間的任何文字都將被視為註解，包括任何圖表語法

用於跳脫字元的實體代碼

可以使用此處範例中的語法來跳脫字元。

給定的數字是十進位，因此 # 可以編碼為 #35;。也支援使用 HTML 字元名稱。

由於可以使用分號代替換行符號來定義標記，因此您需要使用 #59; 在訊息文字中包含分號。

sequenceNumbers

可以在時序圖中為每個箭頭附加序號。可以在將 mermaid 加入網站時進行配置，如下所示

<script>
  mermaid.initialize({ sequence: { showSequenceNumbers: true } });
</script>

也可以透過圖表程式碼開啟，如圖表所示

角色選單

角色可以有彈出式選單，其中包含指向外部頁面的個別連結。例如，如果角色代表網路服務，有用的連結可能包括指向服務健康儀表板、包含服務程式碼的儲存庫或描述服務的 wiki 頁面的連結。

可以透過加入一或多個連結行來進行配置，格式如下

link <actor>: <link-label> @ <link-url>

進階選單語法

存在一種依賴 JSON 格式的進階語法。如果您熟悉 JSON 格式，那麼這也存在。

可以透過加入格式如下的連結行來進行配置

links <actor>: <json-formatted link-name link-url pairs>

以下是一個範例

樣式設定

循序圖的樣式設定是透過定義一系列的 CSS 類別來完成的。在渲染過程中，這些類別會從位於 src/themes/sequence.scss 的檔案中提取。

使用的類別

類別	描述
actor	參與者方塊的樣式。
actor-top	圖表頂部參與者圖形/方塊的樣式。
actor-bottom	圖表底部參與者圖形/方塊的樣式。
text.actor	所有參與者文字的樣式。
text.actor-box	參與者方塊文字的樣式。
text.actor-man	參與者圖形文字的樣式。
actor-line	參與者的垂直線。
messageLine0	實線訊息線的樣式。
messageLine1	虛線訊息線的樣式。
messageText	定義訊息箭頭上文字的樣式。
labelBox	定義迴圈中左側標籤的樣式。
labelText	迴圈標籤中文字的樣式。
loopText	迴圈方塊中文字的樣式。
loopLine	定義迴圈方塊中線條的樣式。
note	註解方塊的樣式。
noteText	註解方塊中文字的樣式。

樣式表範例

body {
  background: white;
}

.actor {
  stroke: #ccccff;
  fill: #ececff;
}
text.actor {
  fill: black;
  stroke: none;
  font-family: Helvetica;
}

.actor-line {
  stroke: grey;
}

.messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: black;
}

.messageLine1 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: black;
}

#arrowhead {
  fill: black;
}

.messageText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

.labelBox {
  stroke: #ccccff;
  fill: #ececff;
}

.labelText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
}

.loopText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
}

.loopLine {
  stroke-width: 2;
  stroke-dasharray: '2 2';
  marker-end: 'url(#arrowhead)';
  stroke: #ccccff;
}

.note {
  stroke: #decc93;
  fill: #fff5ad;
}

.noteText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px;
}

設定

可以調整渲染循序圖的邊界。

這可以透過定義 mermaid.sequenceConfig 或使用 CLI 並搭配包含設定的 JSON 檔案來完成。如何在 CLI 中使用已在 mermaidCLI 頁面中說明。mermaid.sequenceConfig 可以設定為包含設定參數的 JSON 字串或對應的物件。

mermaid.sequenceConfig = {
  diagramMarginX: 50,
  diagramMarginY: 10,
  boxTextMargin: 5,
  noteMargin: 10,
  messageMargin: 35,
  mirrorActors: true,
};

可能的設定參數：

參數	描述	預設值
mirrorActors	開啟/關閉在圖表下方以及上方渲染參與者	false
bottomMarginAdj	調整圖表結束的向下距離。使用 CSS 的寬邊框樣式可能會產生不必要的剪裁，這就是存在此設定參數的原因。	1
actorFontSize	設定參與者描述的字體大小	14
actorFontFamily	設定參與者描述的字體系列	"Open Sans", sans-serif
actorFontWeight	設定參與者描述的字體粗細	"Open Sans", sans-serif
noteFontSize	設定附加於參與者的註解的字體大小	14
noteFontFamily	設定附加於參與者的註解的字體系列	"trebuchet ms", verdana, arial
noteFontWeight	設定附加於參與者的註解的字體粗細	"trebuchet ms", verdana, arial
noteAlign	設定附加於參與者的註解文字的對齊方式	center
messageFontSize	設定參與者 <-> 參與者訊息的字體大小	16
messageFontFamily	設定參與者 <-> 參與者訊息的字體系列	"trebuchet ms", verdana, arial
messageFontWeight	設定參與者 <-> 參與者訊息的字體粗細	"trebuchet ms", verdana, arial