基本定義
流程圖由節點（幾何形狀）和連接線（箭頭或線條）組成。Mermaid 程式碼定義了節點和連接線的建構方式，並支援多種箭頭類型、多向箭頭以及與子流程的任意連結。
警告 如果你在流程圖節點中使用單字 "end"，請將首字母或整個單字大寫（例如："End" 或 "END"），全部小寫輸入 "end" 會導致流程圖出錯。
警告 如果你連接流程圖節點時使用字母 "o" 或 "x" 作為首字母，請在字母前加入一個空格或將字母大寫（例如："dev--- ops"、"dev---Ops"）。
一個節點（預設）
代碼
複製
嵌入
---
title: Node
---
flowchart LR
id
資訊
id 就是方框中顯示的內容。
提示
流程圖建立語法，除了使用 flowchart，還可以使用 graph。
一個帶有文字的節點
也可以為方框設定與 id 不同的文字。如果多次執行此操作，系統將採用該節點最後指定的文字。此外，如果稍後為節點定義了連接線，則可以省略文字定義；渲染方框時將使用之前定義的文字。
代碼
複製
嵌入
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Unicode 文字
使用雙引號將 Unicode 文字括住。
代碼
複製
嵌入
flowchart LR
id["This ❤ Unicode"]
Markdown 格式
使用雙引號和反引號將 Markdown 文字括住
代碼
複製
嵌入
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
方向
宣告了流程圖的方向
表示流程圖是從上到下排列的（TD 或 TB）
代碼
複製
嵌入
flowchart TD
Start --> Stop
流程圖方向包括：
- TB - 從上到下
- TD - 從上而下（與從上到下相同）
- BT - 從下到上
- RL - 從右到左
- LR - 從左到右
節點形狀
圓角矩形
代碼
複製
嵌入
flowchart LR
id1(This is the text in the box)
體育場形
代碼
複製
嵌入
flowchart LR
id1([This is the text in the box])
子流程
代碼
複製
嵌入
flowchart LR
id1[[This is the text in the box]]
資料庫
代碼
複製
嵌入
flowchart LR
id1[(Database)]
圓形
代碼
複製
嵌入
flowchart LR
id1((This is the text in the circle))
不對稱形狀
代碼
複製
嵌入
flowchart LR
id1>This is the text in the box]
菱形
代碼
複製
嵌入
flowchart LR
id1{This is the text in the box}
六邊形
代碼
複製
嵌入
flowchart LR
id1{{This is the text in the box}}
平行四邊形
代碼
複製
嵌入
flowchart TD
id1[/This is the text in the box/]
反向平行四邊形
代碼
複製
嵌入
flowchart TD
id1[\This is the text in the box\]
梯形
代碼
複製
嵌入
flowchart TD
A[/ProcessOn\]
倒梯形
代碼
複製
嵌入
flowchart TD
B[\ProcessOn/]
雙圓
代碼
複製
嵌入
flowchart TD
id1(((This is the text in the circle)))
Mermaid 流程圖節點形狀擴充
Mermaid 引進了 30 種新形狀，以增強流程圖建立的靈活性和精確度。這些新形狀提供了更多選項，用來直觀地表示流程、決策、事件、資料儲存以及流程圖中的其他元素，藉此提高清晰度和語意。
形狀定義的新語法
Mermaid 現在支援一種通用語法來定義形狀類型，以因應日益增多的形狀。此語法允許你使用清晰且靈活的格式為節點指定特定形狀。
複製
嵌入
A@{ shape: rect }
此語法將節點 A 建立為矩形。它的渲染方式與 [A] 或 A 相同。
節點形狀完整清單
以下是新引進的節點形狀及其相應的意義、簡稱和別名的完整清單：
| 語意名稱 | 圖形語法 | 語法簡稱 | 語法替代 | 詳細描述 |
|---|---|---|---|---|
| 卡片 | Notched Rectangle | notch-rect | card, notched-rectangle | 表示一張卡片 |
| 整理 | Hourglass | hourglass | collate | 表示整理操作 |
| 通訊鏈路 | Lightning Bolt | bolt | com-link, lightning-bolt | 通訊鏈路 |
| 註解 | Curly Brace | brace | brace-l, comment | 新增註解 |
| 右側註解 | Curly Brace | brace-r | 新增註解 | |
| 兩側帶有大括號的註解 | Curly Braces | braces | 新增註解 | |
| 資料輸入或輸出 | Lean Right | lean-r | in-out, lean-right | 表示輸入或輸出 |
| 資料輸入或輸出 | Lean Left | lean-l | lean-left, out-in | 表示輸出或輸入 |
| 資料庫 | Cylinder | cyl | cylinder, database, db | 資料庫儲存 |
| 判定 | Diamond | diam | decision, diamond, question | 決策步驟 |
| 延遲 | Half-Rounded Rectangle | delay | half-rounded-rectangle | 表示延遲 |
| 直接存取儲存 | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | 直接存取儲存 |
| 磁碟儲存 | Lined Cylinder | lin-cyl | disk, lined-cylinder | 磁碟儲存 |
| 顯示 | Curved Trapezoid | curv-trap | curved-trapezoid, display | 表示資訊在螢幕、終端機等裝置上顯示 |
| 分割處理 | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | 分割處理形狀 |
| 文件 | Document | doc | document | 表示一個文件 |
| 事件 | Rounded Rectangle | rounded | event | 表示一個事件 |
| 擷取 | Triangle | tri | extract, triangle | 擷取過程 |
| 分叉/合併 | Filled Rectangle | fork | join | 流程圖中的分叉或合併 |
| 內部儲存 | Window Pane | win-pane | internal-storage, window-pane | 內部儲存 |
| 連接點 | Filled Circle | f-circ | filled-circle, junction | 連接點 |
| 帶線文件 | Lined Document | lin-doc | lined-document | 帶線文件 |
| 線條/陰影流程 | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | 帶線條的流程形狀 |
| 迴圈限制 | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | 迴圈限制步驟 |
| 手動文件 | Flipped Triangle | flip-tri | flipped-triangle, manual-file | 手動文件操作 |
| 手動輸入 | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | 手動輸入步驟 |
| 手動操作 | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | 表示一項人工任務 |
| 多文件 | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| 多程序 | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| 不規則形狀 | Odd | odd | 不規則形狀 | |
| 紙帶 | Flag | flag | paper-tape | 紙帶 |
| 準備條件 | Hexagon | hex | hexagon, prepare | 準備或條件步驟 |
| 優先動作 | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | 優先動作 |
| 處理 | Rectangle | rect | proc, process, rectangle | 標準處理形狀 |
| 開始 | Circle | circle | circ | 起點 |
| 開始 | Small Circle | sm-circ | small-circle, start | 小圓起點 |
| 停止 | Double Circle | dbl-circ | double-circle | 表示停止點 |
| 停止 | Framed Circle | fr-circ | framed-circle, stop | 表示停止點 |
| 儲存資料 | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | 儲存資料 |
| 子流程 | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | 子流程, 子程序 |
| 摘要 | Crossed Circle | cross-circ | crossed-circle, summary | 摘要 |
| 標籤化文件 | Tagged Document | tag-doc | tagged-document | 標籤化文件 |
| 標準流程 | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| 終點 | Stadium | stadium | pill, terminal | 終點 |
| 文字區塊 | Text Block | text | 文字區塊 |
以下是使用新引進形狀的流程圖程式碼範例：
代碼
複製
嵌入
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
程序
代碼
複製
嵌入
flowchart TD
A@{ shape: rect, label: "This is a process" }
事件
代碼
複製
嵌入
flowchart TD
A@{ shape: rounded, label: "This is an event" }
子程序
代碼
複製
嵌入
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
資料庫（圓柱體）
代碼
複製
嵌入
flowchart TD
A@{ shape: cyl, label: "Database" }
開始（圓形）
代碼
複製
嵌入
flowchart TD
A@{ shape: circle, label: "Start" }
不規則圖形
代碼
複製
嵌入
flowchart TD
A@{ shape: odd, label: "Odd shape" }
判斷（菱形）
代碼
複製
嵌入
flowchart TD
A@{ shape: diamond, label: "Decision" }
準備條件（六邊形）
代碼
複製
嵌入
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
資料輸入/輸出（向右傾斜）
代碼
複製
嵌入
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
資料輸入/輸出（向左傾斜）
代碼
複製
嵌入
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
優先動作（梯形）
代碼
複製
嵌入
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
手動操作（倒梯形）
代碼
複製
嵌入
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
停止（雙圓）
代碼
複製
嵌入
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
文字區塊
代碼
複製
嵌入
flowchart TD
A@{ shape: text, label: "This is a text block" }
卡片（缺口矩形）
代碼
複製
嵌入
flowchart TD
A@{ shape: notch-rect, label: "Card" }
帶線/陰影流程
代碼
複製
嵌入
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
開始（小圓）
代碼
複製
嵌入
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
停止（帶框的圓）
代碼
複製
嵌入
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
分叉/合併（長矩形）
代碼
複製
嵌入
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
整理（沙漏）
代碼
複製
嵌入
flowchart TD
A@{ shape: hourglass, label: "Collate" }
註解（大括號）
代碼
複製
嵌入
flowchart TD
A@{ shape: comment, label: "Comment" }
註解右側（右側大括號）
代碼
複製
嵌入
flowchart TD
A@{ shape: brace-r, label: "Comment" }
註解（兩側均帶括號）
代碼
複製
嵌入
flowchart TD
A@{ shape: braces, label: "Comment" }
通訊鏈路（閃電）
代碼
複製
嵌入
flowchart TD
A@{ shape: bolt, label: "Communication link" }
文件
代碼
複製
嵌入
flowchart TD
A@{ shape: doc, label: "Document" }
延遲（半圓角矩形）
代碼
複製
嵌入
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
代碼
複製
嵌入
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
磁碟儲存（帶槽圓柱體）
代碼
複製
嵌入
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
顯示（顯示形狀）
代碼
複製
嵌入
flowchart TD
A@{ shape: curv-trap, label: "Display" }
分割處理（分割矩形）
代碼
複製
嵌入
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
擷取（小三角形）
代碼
複製
嵌入
flowchart TD
A@{ shape: tri, label: "Extract" }
內部儲存（視窗面板）
代碼
複製
嵌入
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
連接點（實心圓）
代碼
複製
嵌入
flowchart TD
A@{ shape: f-circ, label: "Connect" }
帶線文件
代碼
複製
嵌入
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
迴圈限制（缺口五邊形）
代碼
複製
嵌入
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
手動文件（翻轉三角形）
代碼
複製
嵌入
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
手動輸入（直角梯形）
代碼
複製
嵌入
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
多文件（堆疊文件）
代碼
複製
嵌入
flowchart TD
A@{ shape: docs, label: "Multi-document" }
多程序（堆疊矩形）
代碼
複製
嵌入
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
紙帶（旗幟）
代碼
複製
嵌入
flowchart TD
A@{ shape: flag, label: "Paper tape" }
儲存資料（蝴蝶結矩形）
代碼
複製
嵌入
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
摘要（帶十字的圓圈）
代碼
複製
嵌入
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
標籤化文件
代碼
複製
嵌入
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
標記的流程
代碼
複製
嵌入
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Mermaid 流程圖中的特殊形狀
Mermaid 還引進了圖片來增強你的流程圖，允許你直接在流程圖中包含圖片，藉此提供更多的視覺背景和清晰度。
圖片形狀
你可以使用 image 在流程圖中插入圖片，定義圖片的語法如下：
複製
嵌入
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
參數
- img：要顯示圖片的 URL 位址。
- label：與圖片關聯的文字標籤，可以是任何字串。如果未定義，則不會顯示任何標籤。
- pos：標籤的位置。如果未定義，則標籤將預設為圖片底部。
- w：圖片的寬度。如果未定義，則預設為圖片的原始寬度。
- h：圖片的高度。如果未定義，則預設為圖片的原始高度。
- constraint：決定圖片是否限制節點大小。此設定還可確保圖片保持其原始長寬比，並根據寬度調整高度。如果未定義，則預設為 off。
圖片為你的流程圖提供了額外的靈活性和視覺吸引力，使其更具資訊性和吸引力。
節點之間的連接
節點可以透過連接線和箭頭連接。有不同類型的連結，也可以將文字字串附加到連結上。
帶箭頭的連結
代碼
複製
嵌入
flowchart LR
A-->B
一個開放連結
代碼
複製
嵌入
flowchart LR
A --- B
帶文字的連結
代碼
複製
嵌入
flowchart LR
A-- This is the text! ---B
或者
代碼
複製
嵌入
flowchart LR
A --- | This is the text| B
帶有箭頭和文字的連結
代碼
複製
嵌入
flowchart LR
A-->|text|B
或者
代碼
複製
嵌入
flowchart LR
A-- text -->B
虛線連結
代碼
複製
嵌入
flowchart LR
A-.->B;
帶文字的虛線連結
代碼
複製
嵌入
flowchart LR
A-. text .->B;
粗連結
代碼
複製
嵌入
flowchart LR
A ==> B
帶文字的粗連結
代碼
複製
嵌入
flowchart LR
A == |text| ==> B
隱形連結
代碼
複製
嵌入
flowchart LR
A ~~~ B
連結的鏈式連接
代碼
複製
嵌入
flowchart LR
A -- text --> B -- text2 --> C
也可以在同一行中宣告多個節點連結，如下所示：
代碼
複製
嵌入
flowchart LR
a --> b & c--> d
你還可以描述相依性，就像下面的程式碼：
代碼
複製
嵌入
flowchart LR
a --> b & c--> d & e--> f
如果使用基本語法描述同一個圖形，則需要 8 行。需要提醒的是，過度使用這種方法可能會使 Markdown 格式的流程圖更難閱讀。
代碼
複製
嵌入
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
為連接線新增 ID
Mermaid 現在支援為連接線新增 ID，類似於將 ID 和中繼資料附加到節點上。這個功能為連接線上更高階的樣式、類別和動畫功能奠定了基礎。
語法：要為連接線新增 ID，請在連接線語法前面加上 ID，後面緊接 @ 字元。例如：
代碼
複製
嵌入
flowchart LR
A e1@--> B
在此範例中，e1 是連接 A 和 B 的連接線的 ID。你可以在後續的定義或樣式陳述式中使用這個 ID，就像使用節點一樣。
開啟動畫
為連接線新增 ID 後，你可以透過定義連接線的屬性來開啟連接線的動畫：
代碼
複製
嵌入
flowchart LR
A e1@==> B
e1@{ animate: true }
這告訴 Mermaid，連接線 e1 是動畫。
選擇動畫類型
在初始版本中，支援兩種動畫速度：fast 和 slow。選擇特定的動畫類型是啟用動畫並同時設定動畫速度的簡便方式。
代碼
複製
嵌入
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
使用 classDef 陳述式進行動畫
你還可以透過為連接線指派一個類別，然後在 classDef 陳述式中定義動畫屬性來為連接線新增動畫。例如：
代碼
複製
嵌入
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
在這段程式碼中：
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate 定義了一個名為 animate 的類別，並具有樣式和動畫屬性。
- class e1 animate 將 animate 類別套用於連接線 e1 上。
關於逸出逗號的說明：在設定 stroke-dasharray 屬性時，請記得將逗號逸出為 ,，因為逗號在 Mermaid 的樣式定義中用作分隔符。
新的箭頭類型
支援新的箭頭類型
- 帶實心圓的連接線
- 帶交叉標記的連接線
帶實心圓的連接線
代碼
複製
嵌入
flowchart LR
A --o B
帶交叉標記的連接線
代碼
複製
嵌入
flowchart LR
A --x B
多方向箭頭
可以使用多方向箭頭，例如：
代碼
複製
嵌入
flowchart LR
A o--o B
B <--> C
C x--x D
連接線長度
流程圖中的每個節點，會根據其連接的節點被分配到渲染圖中的一個等級，即垂直或水平層級（取決於流程圖方向）。預設情況下，連結可以跨越任意數量的等級，但你可以透過在連接定義中新增額外的連字號，來要求某一連接比其他連接更長。
在這個範例中，從節點 B 到節點 E 的連接中額外新增了兩個連字號，使其跨越的等級比一般連結多兩個：
代碼
複製
嵌入
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
當連接標籤寫在連接中間時，必須在連接右側新增額外的連字號。這個範例與上一個範例等效：
代碼
複製
嵌入
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
對於點狀線或粗連結，要新增的字元是等號或點，如下表所示：
| 長度 | 1 | 2 | 3 |
|---|---|---|---|
| 一般連接 | --- | ---- | ----- |
| 一般連接帶箭頭 | --> | ---> | ----> |
| 粗連接 | === | ==== | ===== |
| 粗連接帶箭頭 | ==> | ===> | ====> |
| 點狀線 | -.- | -..- | -...- |
| 點狀線帶箭頭 | -.- | -..-> | -...-> |
特殊字元
可以將文字放在引號內以渲染較麻煩的字元。如下例所示：
代碼
複製
嵌入
flowchart LR
id1["This is the (text) in the box"]
用於逸出字元的實體編碼
可以使用範例的語法對字元進行逸出。
代碼
複製
嵌入
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
給出的數字是十進位，因此 # 可以編碼為 #35。也支援使用 HTML 字元名稱。
子圖
複製
嵌入
subgraph title
graph definition
end
下面是一個例子：
代碼
複製
嵌入
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
你還可以為子圖設定 id。
代碼
複製
嵌入
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
流程圖
使用流程圖類型的圖表，也可以像下面的流程圖一樣設定指向子圖和來自子圖的連接線。
代碼
複製
嵌入
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
子圖方向
使用流程圖類型時，你可以使用方向陳述式來設定子圖的渲染方向，如下所示：
代碼
複製
嵌入
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
限制
如果子圖的任何節點與外部相連，子圖的方向將被忽略。否則，子圖將繼承父圖的方向：
代碼
複製
嵌入
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Markdown 字串
Markdown 字串透過提供一種更靈活的字串類型來增強流程圖和心智圖，支援粗體和斜體等文字格式選項，並且能夠在標籤內自動換行文字。
代碼
複製
嵌入
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- 要將文字加粗，請在文字前後使用兩個星號（**）。
- 斜體使用單星號（*）放在文字的前後。
- 對於傳統字串，你需要新增 <br> 標籤才能讓文字在節點中換行。然而，Markdown 字串在文字過長時會自動換行，並且只需使用換行字元而不是 <br> 標籤就可以開始新的一行。
此功能適用於節點標籤、連接線標籤和子圖標籤
可以透過使用特定語法來停用自動換行
代碼
複製
嵌入
---
config:
markdownAutoWrap: false
---
graph LR
註解
可以在流程圖中輸入註解，編輯器將忽略這些註解。註解需要獨佔一行，並且必須以雙百分比符號（%%）開頭。從註解開始到下一行的任何文字都會被視為註解，包括任何流程語法。
代碼
複製
嵌入
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
樣式和類別
連結樣式
可以設定連結樣式。例如，你可能想要設計一個在流程中向後移動的連結，由於連結不像節點那樣有 ID，因此需要透過其他方式來決定連結應使用的樣式。使用定義連結時的順序編號，或者使用預設值來套用於所有連結。
複製
嵌入
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
設定節點樣式
可以對節點設定特定樣式，例如較粗的邊框或不同的背景顏色。
代碼
複製
嵌入
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
類別
比每次定義樣式更方便的是定義一個樣式類別，並將該類別附加到需要不同外觀的節點上。
類別定義如下所示：
複製
嵌入
classDef className fill:pink,stroke:#333,stroke-width:4px;
此外，還可以在一個陳述式中為多個類別定義樣式：
複製
嵌入
classDef firstClassName,secondClassName font-size:12pt;
將類別附加到節點的操作如下：
複製
嵌入
class nodeId1 className;
還可以在一個陳述式中將一個類別附加到節點清單上：
複製
嵌入
class nodeId1,nodeId2 className;
新增類別可以使用 ::: 運算子將類別名稱附加到節點，如下所示：
代碼
複製
嵌入
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
宣告節點之間的多個連結時可以使用這種形式：
代碼
複製
嵌入
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- 在圖形宣告中，陳述式現在也可以不以分號結束。在 0.2.16 版本之後，圖形陳述式以分號結尾只是選項。因此，下面的圖形宣告與舊的圖形宣告一樣也是有效的。
- 頂點和連結之間允許有一個空格。但是，頂點及其文字以及連結與其文字之間不應有任何空格。舊的圖形宣告也仍然有效，因此這個新功能是選項，旨在提高可讀性。
下面是連接線的新宣告，與舊的連接線宣告一樣也是有效的。
代碼
複製
嵌入
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
