流程圖 - 基本語法
流程圖由節點（幾何形狀）和邊（箭頭或線條）組成。 Mermaid 程式碼定義了如何建立節點和邊，並可容納不同的箭頭類型、多向箭頭，以及任何來往子圖的連結。
警告
如果您在流程圖節點中使用「end」這個字，請將整個單字或任何字母大寫（例如，「End」或「END」），或套用此變通方法。 輸入全部小寫字母「end」會破壞流程圖。
警告
如果您在連接流程圖節點中將字母「o」或「x」作為第一個字母，請在字母前新增一個空格或將字母大寫（例如，「dev--- ops」、「dev---Ops」）。
輸入「A---oB」會建立一個圓形邊。
輸入「A---xB」會建立一個交叉邊。
一個節點（預設）
資訊
id 是顯示在方塊中的內容。
提示
除了 flowchart，也可以使用 graph。
一個帶有文字的節點
也可以在方塊中設定與 id 不同的文字。 如果這樣做多次，則將使用該節點找到的最後一個文字。 此外，如果您稍後定義節點的邊，則可以省略文字定義。 呈現方塊時，將使用先前定義的文字。
Unicode 文字
使用 " 將 Unicode 文字括起來。
Markdown 格式
使用雙引號和反引號 "` 文字 `" 將 Markdown 文字括起來。
方向
此陳述式宣告流程圖的方向。
這宣告流程圖的方向為由上至下（TD 或 TB）。
這宣告流程圖的方向為由左至右（LR）。
可能的流程圖方向為
- TB - 由上至下
- TD - 由上而下/與由上至下相同
- BT - 由下至上
- RL - 由右至左
- LR - 由左至右
節點形狀
一個具有圓角的節點
一個體育場形狀的節點
一個副程式形狀的節點
一個圓柱形狀的節點
一個圓形的節點
一個不對稱形狀的節點
目前僅可能使用上述形狀，而非其鏡像。 這可能會在未來版本中變更。
一個菱形節點
一個六邊形節點
平行四邊形
平行四邊形 alt
梯形
梯形 alt
雙圓形
Mermaid 流程圖中擴充的節點形狀 (v11.3.0+)
Mermaid 導入 30 種新形狀，以增強流程圖建立的彈性和精確度。 這些新形狀提供了更多選項，以便在流程圖中視覺化地表示流程、決策、事件、資料儲存和其他元素，從而提高清晰度和語義意義。
形狀定義的新語法
Mermaid 現在支援定義形狀類型的一般語法，以適應不斷增加的形狀數量。 此語法可讓您使用清晰且彈性的格式，將特定形狀指派給節點
A@{ shape: rect }此語法會將節點 A 建立為矩形。 其呈現方式與 A["A"] 或 A 相同。
新形狀的完整清單
以下是新導入形狀及其對應的語義意義、簡短名稱和別名的完整清單
| 語義名稱 | 形狀名稱 | 簡短名稱 | 描述 | 支援的別名 |
|---|---|---|---|---|
| 卡片 | 有缺口的矩形 | notch-rect | 代表一張卡片 | card、notched-rectangle |
| 整理 | 沙漏 | hourglass | 代表整理作業 | collate、hourglass |
| 通訊連結 | 閃電 | bolt | 通訊連結 | com-link、lightning-bolt |
| 註解 | 大括號 | brace | 新增註解 | brace-l、comment |
| 註解右 | 大括號 | brace-r | 新增註解 | |
| 兩側都有大括號的註解 | 大括號 | braces | 新增註解 | |
| 資料輸入/輸出 | 向右傾斜 | lean-r | 代表輸入或輸出 | in-out、lean-right |
| 資料輸入/輸出 | 向左傾斜 | lean-l | 代表輸出或輸入 | lean-left、out-in |
| 資料庫 | 圓柱體 | cyl | 資料庫儲存 | cylinder、database、db |
| 決策 | 菱形 | diam | 決策步驟 | decision、diamond、question |
| 延遲 | 半圓角矩形 | delay | 代表延遲 | half-rounded-rectangle |
| 直接存取儲存 | 水平圓柱體 | h-cyl | 直接存取儲存 | das、horizontal-cylinder |
| 磁碟儲存 | 有線圓柱體 | lin-cyl | 磁碟儲存 | disk、lined-cylinder |
| 顯示 | 彎曲梯形 | curv-trap | 代表顯示 | curved-trapezoid、display |
| 分割流程 | 分割矩形 | div-rect | 分割流程形狀 | div-proc、divided-process、divided-rectangle |
| 文件 | 文件 | doc | 表示一份文件 | doc、document |
| 事件 | 圓角矩形 | rounded | 表示一個事件 | event |
| 萃取 | 三角形 | tri | 萃取流程 | extract、triangle |
| 分叉/合併 | 實心矩形 | fork | 流程中的分叉或合併 | join |
| 內部儲存 | 窗格 | win-pane | 內部儲存 | internal-storage、window-pane |
| 連接點 | 實心圓 | f-circ | 連接點 | filled-circle、junction |
| 帶線文件 | 帶線文件 | lin-doc | 帶線文件 | lined-document |
| 帶線/陰影流程 | 帶線矩形 | lin-rect | 帶線流程形狀 | lin-proc、lined-process、lined-rectangle、shaded-process |
| 迴圈限制 | 梯形五邊形 | notch-pent | 迴圈限制步驟 | loop-limit、notched-pentagon |
| 手動檔案 | 翻轉三角形 | flip-tri | 手動檔案操作 | flipped-triangle、manual-file |
| 手動輸入 | 傾斜矩形 | sl-rect | 手動輸入步驟 | manual-input、sloped-rectangle |
| 手動操作 | 頂部梯形 | trap-t | 表示一項手動任務 | inv-trapezoid、manual、trapezoid-top |
| 多份文件 | 堆疊文件 | docs | 多份文件 | documents、st-doc、stacked-document |
| 多個流程 | 堆疊矩形 | st-rect | 多個流程 | processes、procs、stacked-rectangle |
| 奇特 | 奇特 | odd | 奇特形狀 | |
| 紙帶 | 旗幟 | flag | 紙帶 | paper-tape |
| 準備條件 | 六邊形 | hex | 準備或條件步驟 | hexagon、prepare |
| 優先動作 | 底部梯形 | trap-b | 優先動作 | priority、trapezoid、trapezoid-bottom |
| 流程 | 矩形 | rect | 標準流程形狀 | proc、process、rectangle |
| 開始 | 圓形 | circle | 起點 | circ |
| 開始 | 小圓形 | sm-circ | 小型起點 | small-circle、start |
| 停止 | 雙圓形 | dbl-circ | 表示停止點 | double-circle |
| 停止 | 框線圓形 | fr-circ | 停止點 | framed-circle、stop |
| 儲存資料 | 領結矩形 | bow-rect | 儲存資料 | bow-tie-rectangle、stored-data |
| 子流程 | 框線矩形 | fr-rect | 子流程 | framed-rectangle、subproc、subprocess、subroutine |
| 摘要 | 交叉圓形 | cross-circ | 摘要 | crossed-circle、summary |
| 標籤文件 | 標籤文件 | tag-doc | 標籤文件 | tag-doc、tagged-document |
| 標籤流程 | 標籤矩形 | tag-rect | 標籤流程 | tag-proc、tagged-process、tagged-rectangle |
| 終點 | 體育場形 | stadium | 終點 | pill、terminal |
| 文字區塊 | 文字區塊 | text | 文字區塊 |
新形狀的流程圖範例
以下是一個利用一些新引入形狀的流程圖範例
流程
事件
終點（體育場形）
子流程
資料庫（圓柱體）
開始（圓形）
奇特
決策（菱形）
準備條件（六邊形）
資料輸入/輸出（向右傾斜）
資料輸入/輸出（向左傾斜）
優先動作（底部梯形）
手動操作（頂部梯形）
停止（雙圓形）
文字區塊
卡片（缺口矩形）
帶線/陰影流程
開始（小圓形）
停止（框線圓形）
分叉/合併（長矩形）
整理（沙漏）
註解（大括號）
右側註解（右大括號）
兩側都有大括號的註解
通訊連結（閃電符號）
文件
延遲（半圓角矩形）
直接存取儲存（水平圓柱體）
磁碟儲存（帶線圓柱體）
顯示（彎曲梯形）
分割流程（分割矩形）
萃取（小三角形）
內部儲存（窗格）
連接點（實心圓）
帶線文件
迴圈限制（缺口五邊形）
手動檔案（翻轉三角形）
手動輸入（傾斜矩形）
多份文件（堆疊文件）
多個流程（堆疊矩形）
紙帶（旗幟）
儲存資料（領結矩形）
摘要（交叉圓形）
標籤文件
標籤流程（標籤矩形）
Mermaid 流程圖中的特殊形狀（v11.3.0+）
Mermaid 還引入了 2 種特殊形狀來增強您的流程圖：icon 和 image。這些形狀允許您在流程圖中直接包含圖示和圖片，提供更多視覺背景和清晰度。
圖示形狀
您可以使用 icon 形狀在流程圖中包含圖示。若要使用圖示，您需要先註冊圖示包。請依照這裡提供的指示操作。定義圖示形狀的語法如下：
參數
- icon：已註冊圖示包中的圖示名稱。
- form：指定圖示的背景形狀。如果未定義，圖示將沒有背景。選項包括：
square (正方形)circlerounded
- label：與圖示相關聯的文字標籤。這可以是任何字串。如果未定義，則不會顯示標籤。
- pos：標籤的位置。如果未定義，標籤預設會位於圖示底部。可能的值為：
t (頂部)b (底部)
- h：圖示的高度。如果未定義，則預設為 48，這是最小值。
圖片形狀
您可以使用 image 形狀在流程圖中包含圖片。定義圖片形狀的語法如下：
參數
- img：要顯示的圖片的 URL。
- label：與圖片相關聯的文字標籤。這可以是任何字串。如果未定義，則不會顯示標籤。
- pos：標籤的位置。如果未定義，標籤預設會位於圖片底部。可能的值為：
t (頂部)b (底部)
- w：圖片的寬度。如果未定義，則預設為圖片的自然寬度。
- h：圖片的高度。如果未定義，則預設為圖片的自然高度。
- constraint：決定圖片是否應限制節點大小。此設定還確保圖片保持其原始長寬比，並根據寬度（
w）調整高度（h）。如果未定義，則預設為off。可能的值為：on (開啟)off (關閉)
這些新的形狀為您的流程圖提供了額外的彈性和視覺吸引力，使其更具資訊性和吸引力。
節點之間的連結
節點可以使用連結/邊線連接。可以有不同類型的連結，或將文字字串附加到連結。
帶有箭頭的連結
開放連結
連結上的文字
或
帶有箭頭和文字的連結
或
虛線連結
帶有文字的虛線連結
粗連結
帶有文字的粗連結
隱形連結
在某些情況下，當您想要更改節點的預設位置時，這可能是一個有用的工具。
鏈式連結
可以依照以下方式在同一行中宣告多個連結
也可以依照以下方式在同一行中宣告多個節點連結
然後您可以用非常具表達力的方式描述依賴關係。如下面的一行程式碼所示
如果使用基本語法描述相同的圖表，則需要四行。在這裡提醒一下，可能會過度使用此功能，使流程圖在 Markdown 形式中更難以閱讀。瑞典語單字 lagom 就浮現腦海。它的意思是，不多也不少。這也適用於具表達力的語法。
新的箭頭類型
支援新的箭頭類型
- 圓形邊線
- 交叉邊線
圓形邊線範例
交叉邊線範例
多向箭頭
可以使用多向箭頭。
連結的最小長度
流程圖中的每個節點最終都會根據其連結的節點，被指派到渲染圖中的一個等級，也就是垂直或水平層級（取決於流程圖的方向）。依預設，連結可以跨越任意數量的等級，但是您可以要求任何連結比其他連結更長，方法是在連結定義中添加額外的破折號。
在以下範例中，從節點 B 到節點 E 的連結中添加了兩個額外的破折號，因此它跨越的等級比一般連結多兩個
注意 渲染引擎可能仍會讓連結比要求的等級數更長，以容納其他要求。
當連結標籤寫在連結中間時，額外的破折號必須添加到連結的右側。以下範例與上一個範例等效
對於虛線或粗連結，要添加的字元是等號或點，如下表總結：
| 長度 | 1 | 2 | 3 |
|---|---|---|---|
| 一般 | --- | ---- | ----- |
| 帶箭頭的一般 | --> | ---> | ----> |
| 粗 | === | ==== | ===== |
| 帶箭頭的粗 | ==> | ===> | ====> |
| 虛線 | -.- | -..- | -...- |
| 帶箭頭的虛線 | -.-> | -..-> | -...-> |
會破壞語法的特殊字元
可以將文字放在引號內，以便渲染更多有問題的字元。如下例所示
用於跳脫字元的實體代碼
可以使用此處範例所示的語法來跳脫字元。
給定的數字是十進位，因此 # 可以編碼為 #35;。也支援使用 HTML 字元名稱。
子圖
subgraph title
graph definition
end以下是一個範例
您也可以為子圖設定明確的 ID。
流程圖
對於圖表類型流程圖，也可以設定與子圖之間來回的邊線，如下面的流程圖所示。
子圖中的方向
使用圖表類型流程圖，您可以使用 direction 陳述式來設定子圖的渲染方向，如下例所示。
限制
如果子圖的任何節點連結到外部，則將忽略子圖方向。相反地，子圖將繼承父圖的方向
Markdown 字串
「Markdown 字串」功能透過提供更多通用的字串類型來增強流程圖和心智圖，此類型支援粗體和斜體等文字格式設定選項，並自動將文字包裝在標籤中。
格式設定
- 對於粗體文字，請在文字前後使用雙星號（
**）。 - 對於斜體字，請在文字前後使用單星號（
*）。 - 使用傳統字串時，您需要新增
<br>標籤，才能在節點中換行。但是，Markdown 字串會在文字過長時自動換行，並允許您僅使用換行字元而不是<br>標籤來開始新的一行。
此功能適用於節點標籤、邊線標籤和子圖標籤。
可以使用以下方式停用自動換行：
---
config:
markdownAutoWrap: false
---
graph LR互動
可以將點擊事件繫結到節點，點擊可以導向 JavaScript 回呼，或導向將在新瀏覽器索引標籤中開啟的連結。
資訊
當使用 securityLevel='strict' 時，此功能將停用，而當使用 securityLevel='loose' 時將啟用。
click nodeId callback
click nodeId call callback()- nodeId 是節點的 ID
- callback 是在顯示圖表的頁面上定義的 JavaScript 函數名稱，呼叫該函數時會將 nodeId 作為參數。
以下是工具提示使用的範例
<script>
window.callback = function () {
alert('A callback was triggered');
};
</script>工具提示文字會以雙引號括住。工具提示的樣式由類別 .mermaidTooltip 設定。
成功 工具提示功能和連結到 URL 的功能可從 0.5.2 版開始使用。
?> 由於 Docsify 處理 JavaScript 回呼函數的方式有所限制，因此可以在 這個 jsfiddle 中查看上述程式碼的替代運作示範。
預設情況下，連結會在同一個瀏覽器索引標籤/視窗中開啟。可以透過在點擊定義中新增連結目標（支援 _self、_blank、_parent 和 _top）來變更此設定
初學者提示 — 在 html 環境中使用互動式連結的完整範例
<body>
<pre class="mermaid">
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
</pre>
<script>
window.callback = function () {
alert('A callback was triggered');
};
const config = {
startOnLoad: true,
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
securityLevel: 'loose',
};
mermaid.initialize(config);
</script>
</body>註解
可以在流程圖中輸入註解，剖析器會忽略這些註解。註解需要位於它們自己的行上，並且必須以 %%（雙百分比符號）作為開頭。從註解開始到下一個換行符號之間的任何文字都會被視為註解，包括任何流程語法
樣式和類別
設定連結樣式
可以設定連結的樣式。例如，您可能想要設定在流程中向後移動的連結的樣式。由於連結沒有與節點相同的方式的 ID，因此需要一些其他方式來決定應該將哪些樣式附加到連結。不是使用 ID，而是使用連結在圖表中定義時的順序編號，或者使用 default 套用到所有連結。在以下範例中，在 linkStyle 陳述式中定義的樣式將屬於圖表中的第四個連結
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;也可以透過使用逗號分隔連結編號，在單個陳述式中為多個連結添加樣式
linkStyle 1,2,7 color:blue;設定線條曲線的樣式
如果預設方法不符合您的需求，可以設定項目之間線條使用的曲線類型樣式。可用的曲線樣式包括 basis、bumpX、bumpY、cardinal、catmullRom、linear、monotoneX、monotoneY、natural、step、stepAfter 和 stepBefore。
在此範例中，由左至右的圖表使用 stepBefore 曲線樣式
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR如需可用曲線的完整清單，包括自訂曲線的說明，請參閱 Shapes 文件中的 d3-shape 專案。
設定節點的樣式
可以將特定樣式（例如更粗的邊框或不同的背景顏色）套用到節點。
類別
比起每次都定義樣式，更方便的做法是定義樣式類別，然後將此類別附加到應該具有不同外觀的節點。
類別定義如下例所示
classDef className fill:#f9f,stroke:#333,stroke-width:4px;此外，也可以在一個語句中定義多個類別的樣式
classDef firstClassName,secondClassName font-size:12pt;將類別附加到節點的方式如下所示
class nodeId1 className;也可以在一個語句中將類別附加到節點列表
class nodeId1,nodeId2 className;添加類別的較短形式是使用 ::: 運算符將類別名稱附加到節點，如下所示
當宣告節點之間的多個連結時，可以使用這種形式
CSS 類別
也可以在 CSS 樣式中預先定義類別，然後從圖形定義中套用，如下例所示
範例樣式
<style>
.cssClass > rect {
fill: #ff0000;
stroke: #ffff00;
stroke-width: 4px;
}
</style>範例定義
預設類別
如果類別名稱為 default，則會將其分配給所有沒有特定類別定義的類別。
classDef default fill:#f9f,stroke:#333,stroke-width:4px;Font Awesome 的基本支援
可以從 Font Awesome 添加圖示。
圖示透過語法 fa:#圖示類別名稱# 存取。
如果網站包含 CSS，Mermaid 支援 Font Awesome。Mermaid 對於可以使用的 Font Awesome 版本沒有任何限制。
請參閱官方 Font Awesome 文件，了解如何在您的網站中包含它。
在 <head> 中添加此程式碼片段將會添加對 Font Awesome v6.5.1 的支援
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
rel="stylesheet"
/>自訂圖示
只要網站導入了相應的工具包，就可以使用 Font Awesome 提供的自訂圖示。
請注意，這目前是 Font Awesome 的付費功能。
對於自訂圖示，您需要使用 fak 前綴。
範例
flowchart TD
B[fa:fa-twitter] %% standard icon
B-->E(fak:fa-custom-icon-name) %% custom icon並嘗試渲染它
頂點和連結之間有空格且沒有分號的圖形宣告
在圖形宣告中，語句現在也可以不以分號結尾。在 0.2.16 版發布後，以分號結束圖形語句只是可選的。因此，下面的圖形宣告與舊的圖形宣告一樣有效。
頂點和連結之間允許一個空格。但是，頂點及其文字之間以及連結及其文字之間不應有任何空格。舊的圖形宣告語法也將起作用，因此這個新功能是可選的，引入它是為了提高可讀性。
以下是圖形邊緣的新宣告，它與舊的圖形邊緣宣告一樣有效。
設定
渲染器
圖表的佈局是透過渲染器完成的。預設渲染器是 dagre。
從 Mermaid 9.4 版開始，您可以使用名為 elk 的替代渲染器。elk 渲染器對於較大和/或更複雜的圖表更好。
elk 渲染器是一個實驗性功能。您可以透過添加此指令將渲染器更改為 elk
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%資訊
請注意，網站需要使用 mermaid 9.4+ 版本才能使其正常運作，並在延遲載入設定中啟用此功能。
寬度
可以調整渲染流程圖的寬度。
這可以透過定義 mermaid.flowchartConfig 或使用 CLI 搭配包含設定的 JSON 檔案來完成。如何在 mermaidCLI 頁面中描述如何使用 CLI。mermaid.flowchartConfig 可以設定為包含設定參數的 JSON 字串或相應的物件。
mermaid.flowchartConfig = {
width: 100%
}