如何在 Mermaid 中繪製泳道圖

在企業運作中，多個部門往往會以不同角色共同參與單一流程。在這種情況下，明智的做法是使用泳道圖 to 來釐清流程中的每個步驟以及各團隊的實際職責。

透過為每個部門與負責人劃分泳道，並搭配流程圖，您可以一目了然地掌握工作分配等資訊。這也有助於標準化與改善業務流程，強化團隊之間的溝通。

本文將教您如何透過 Mermaid 製作或繪製泳道圖，並提供一些您可以輕鬆複製的範例。

為什麼要用 Mermaid 繪製泳道圖

傳統工具的缺點

在實際案例中，銷售團隊在使用 PowerPoint 製作訂單處理泳道圖時遇到了幾個問題：

• 編輯負擔過重：當物流團隊新增品質檢查步驟時，必須手動重新調整每個連接線的位置。
• 協作問題：版本控制不佳，導致客服團隊使用了過時的流程圖。
• 列印問題：列印時標題和內容經常錯位。

Mermaid 的優勢

Mermaid是一款基於文字的圖表工具，透過以下功能解決了許多上述痛點：

• 版本追蹤：與 Git 整合，可清楚記錄泳道圖的所有變更歷史。
• 免費使用：Mermaid 編輯器完全免費。

Mermaid 的限制

不過，Mermaid 也並非沒有缺點。對於泳道圖來說，要完美對齊所有元素並不容易，特別是在試圖整齊格式化泳道時，但它仍然能讓您在一張圖表中顯示流程和部門。

由於 Mermaid 使用程式碼來建立圖表，因此需要一定的學習時間。它適合熟悉編寫程式碼的使用者。但如果覺得這太費力，也有更簡單的選擇。

像是 EdrawMax 或 Visio 這類工具，讓您透過拖放圖形和範本來建立泳道圖，無需撰寫任何程式碼。

如何在 Mermaid 中繪製泳道圖

基本語法

要在 Mermaid 中繪製泳道圖，首先使用以下格式編寫簡單的流程圖：

flowchart LRsubgraph Department AA[Step 1]endsubgraph Department BB[Step 2]endsubgraph Department Csubgraph Sub-Dept C1C[Step 3]endsubgraph Sub-Dept C2D[Step 4]endendA --> B --> CD --> B

以下是語法中使用的程式碼說明，幫助您更好理解：

Flowchart LR

這告訴 Mermaid 繪製一個由左至右流動的流程圖。您可以將 LR 改為 TB（由上至下）、RL（由右至左）或 BT（由下至上），依您的版面需求而定。

使用子圖建立泳道

Subgraph 定義一個容器或泳道，例如部門或角色。子圖內的所有步驟會被視覺化地分組。您也可以巢狀使用子圖來表示層級關係，例如包含子團隊的部門。範例：

範例subgraph Department AA[Step 1]end

以下是一些重要提示：

• 在 subgraph 與標籤之間務必保留空格（例如 subgraph Department A）。
• Mermaid 不要求縮排，但這有助於保持程式碼的可讀性，特別是在巢狀使用子圖時。

顯示流程

使用「-->」依序連接每個步驟，這會顯示流程的方向。

自訂 Mermaid 泳道圖

您可以為 Mermaid 泳道圖添加樣式和標籤，以提升清晰度和視覺吸引力。以下是範例：

範例flowchart LRsubgraph Department AA[Step 1]style A fill:#e6f3ffendsubgraph Department BB[Step 2]style B fill:#fffbe6endA -->|Send request| Bstyle Department A stroke:#1890ffstyle Department B stroke:#faad14

同樣地，以下是語法說明：

樣式指令

使用 style 自訂節點或子圖的外觀。您可以變更：

• fill 來設定背景顏色
• stroke 來設定邊框顏色

範例style A fill:#e6f3ffstyle Department A stroke:#1890ff

線條樣式

要變更連接線的外觀：

• 「-.->」建立虛線
• 「==>」建立粗箭頭

為連接線添加標籤

在節點之間使用 |您的標籤| 來解釋流程。

範例A -->|Step A process| BB -.->|Conditional| CC ==> D

這讓您可以直接在連接線上顯示決策、訊息或條件，非常適合保持圖表的可讀性。

使用 Mermaid 編輯器

當您完成泳道圖的Mermaid程式碼後，需要一個編輯器來視覺化呈現。以下是一些推薦的 Mermaid 編輯器：

• Mermaid Live Editor。一款基於瀏覽器的工具，讓您貼上程式碼並立即看到圖表。
• Markdown Preview Enhanced。Visual Studio Code 外掛程式，可在 Markdown 檔案中呈現 Mermaid 圖表。
• EdrawMax。支援 Mermaid 程式碼和拖放式圖表建立功能，非常適合偏好視覺化工具的使用者。

如何用 AI 生成 Mermaid 泳道圖語法並修改

雖然學習Mermaid基礎知識是件好事，但依賴 AI 也能更快產出結果。這樣您就不必手動輸入程式碼。

您可以使用 ChatGPT、Claude、Gemini 或其他您偏好的工具。

步驟 1

開啟您偏好的 AI 聊天機器人，然後建立提示詞，描述以下內容：

• 1) 將使用 Mermaid 語法；
• 2) 泳道圖的內容；
• 3) 圖表的設計（如有）。請記住，描述越詳細越好。

提示詞範例：「使用 Mermaid 語法建立一個泳道圖，顯示律師事務所的任務流程。」

步驟 2

然後，將生成的程式碼複製貼上到Mermaid.

步驟 3

如果您想編輯圖表的任何部分，請盡可能精確地向 AI 描述要變更的內容。

步驟 4

在 AI 生成新的流程圖程式碼後，再次複製貼上到 Mermaid 線上編輯器。

兩個 Mermaid 泳道圖範例

醫療檢查流程

以下是使用 Mermaid 語法建立的泳道圖範例，顯示醫療檢查的流程。

主要設計重點如下：

1. 部門之間清楚區隔
• 使用子圖將圖表劃分為急診、放射科和心臟科部門。
• 為每個部門套用不同顏色（例如紅色、藍色、綠色），提升視覺清晰度。
2. 流程易於追蹤
• 採用由左至右（LR）的版面配置，讓急診應變流程一目了然。
• 使用循環流程（例如 B → C → D → E → B）顯示檢查、診斷和治療如何循環進行。

費用報銷流程

此範例展示使用 Mermaid 語法建立的泳道圖，概述費用報銷流程。

此流程圖的主要設計重點：

1. 依部門清楚區隔
• 使用子圖將流程劃分為會計、總務和申請人區塊。
• 這有助於釐清各部門在流程中的職責。
2. 視覺化報銷流程
• 採用從申請到核准到付款的由左至右（LR）方向配置步驟。
• 在核准階段加入回饋循環，顯示不完整的申請會退回給申請人。

常見問題