如何使用 Mermaid 語法建立流程圖（從入門到精通）

在 Notion 或 GitHub 中難以視覺化流程嗎？Mermaid 標記法讓您使用簡單的文字語法生成流程圖——非常適合開發人員和技術文件撰寫者。

本指南涵蓋從基本語法到 AI 驅動的快捷方式的所有內容，如果編碼不是您的風格，還有更簡單的替代方案。

🔍 您將在本部落格中學到：

✅ 基本語法 – 節點、箭頭和方向

✅ 條件邏輯 – If/else 分支（%%{if}%%）

✅ 自訂樣式 – 形狀顏色、圓角

✅ AI + Mermaid – 使用 AI 工具更快生成圖表

✅ 無程式碼替代方案 – 像 EdrawMax 這樣的拖放工具

本文內容

什麼是 Mermaid 標記法
使用 Mermaid 標記法建立流程圖
EdrawMax：建立流程圖的專用工具

什麼是 Mermaid 標記法

Mermaid 是一種文字轉圖表工具，使用類似 Markdown 的語法建立流程圖、序列圖等。主要優點：

✅ 程式碼相容 – 可在 GitHub、Notion 和 VS Code 中使用

✅ 版本控制友善 – 圖表隨程式碼更新

✅ 無需手動對齊 – 自動生成整潔的版面配置

Mermaid vs. PlantUML

功能	Mermaid	PlantUML
易用性	語法更簡單	學習曲線較陡峭
GitHub 支援	原生預覽	需要外掛程式
圖表類型	8+ 種（流程圖、甘特圖）	10+ 種（更多小眾類型）

提示：對於非開發人員，可嘗試拖放工具（如 EdrawMax）以完全跳過語法。

使用 Mermaid 標記法建立流程圖

您可以使用 Mermaid Live Editor（一個網頁工具）來使用 Mermaid 標記法建立圖表。語法在各平台上都相同，因此如果您使用 Notion 或 VS Code，本教學仍然適用。

如何使用 Mermaid 標記法建立圖表

造訪 Mermaid Live Editor 網站。當網站載入時，您會看到範例程式碼和預覽圖表。您也可以在左側邊欄的範例圖表下探索更多範例.

這讓入門變得簡單，即使是第一次使用 Mermaid。

使用 Mermaid 語法撰寫基本流程圖

現在，檢視基本語法並查看實際範例。

定義流程圖類型和方向

每個 Mermaid 流程圖都以關鍵字「flowchart」開頭，後接您希望圖表流動的方向（「TD」或「LR」）。因此：

使用「flowchart TD;」建立由上而下的版面配置。
如果您偏好由左至右的版面配置，請使用「flowchart LR;」。

新增節點和箭頭

每個節點（或元素）都需要 ID 和標籤。您使用「-->」連接節點以建立箭頭。以下是範例：

A[文字 A] B[文字 B]A -- C[文字 C]B -- D[文字 D]C -- D

注意：在 Mermaid Live Editor 中，當您在左側編輯器窗格中輸入程式碼時，圖表會在右側即時更新。當您結合（1）和（2）部分時，您將獲得一個完整的可用流程圖。

嘗試將（1）部分的方向從 TD（由上而下）切換為 LR（由左至右），以即時查看流程變化。

如何在流程圖中建立條件分支

新增條件分支

要在流程圖中顯示條件，請從單一節點繪製箭頭到兩個或更多節點。這會建立決策點。當您從一個節點繪製箭頭到兩個或更多節點時，您會建立條件分支。這裡的關鍵語法元素是用於決策節點的大括號「{}」和用於標記箭頭的管道符號「|」：

以下是範例：

範例A[開始] --> B(流程 1)B --> C{決策}C -->|是| D[流程 2]C -->|否| E[流程 3]

您也可以透過將箭頭連接回先前的節點來建立迴圈。這有助於表示流程中的重複步驟或條件。要建立迴圈，請使用標準箭頭語法「-->」將箭頭導向流程圖中較早的節點。

如何自訂形狀、箭頭和顏色

變更節點的形狀

您可以透過在文字周圍使用不同類型的括號來改變圖表元素的形狀：

[文字]：正方形
(文字)：圓角矩形
{文字}：菱形（用於決策）
[(文字)]：圓柱體
((文字))：圓形

例如，您可以使用不同形狀製作如下所示的流程圖：

範例flowchart TDA[矩形] --> B(圓角矩形)B --> C{菱形}C --> D[(圓柱體)]D --> E((圓形))

自訂箭頭樣式

您可以透過變更箭頭標記中的符號來變更箭頭的線條樣式。您也可以使用以下（範例）語法將文字新增到箭頭：

範例「A ==> B;」：粗箭頭「B -.-> C;」：虛線箭頭「B --> |文字| C;」：帶文字的箭頭

設定顏色

您可以為整個節點或個別箭頭設定顏色：

要變更整體主題，請使用此程式碼：

程式碼%%{init: {'theme': 'forest'}}%%要對特定箭頭使用樣式：linkStyle 2 stroke:red,stroke-width:4px

由於 Mermaid Live Editor 會即時更新，您會立即看到是否有問題——錯誤訊息或損壞的圖表。如果需要嘗試幾次，不用擔心。測試不同樣式是學習 Mermaid 語法的一部分。

使用 AI 生成 Mermaid 語法

Mermaid 語法相當簡單，但如果您不想學習結構，您仍然可以透過將 Mermaid 與 AI 工具結合並稍後複製貼上來建立流程圖。

方法如下：

步驟 1

開啟 AI 聊天機器人（如 Claude 或 ChatGPT）並描述您想要的流程圖。要求 AI 生成 Mermaid 程式碼。範例提示為：「使用 Mermaid 語法建立使用者註冊流程的流程圖。」

步驟 2

將生成的程式碼複製並貼上到 Mermaid Live Editor 中以查看圖表。

步驟 3

如果看起來有問題，請要求 AI 調整或編輯程式碼，直到圖表看起來正確。

這種方法讓您即使是 Mermaid 新手也能輕鬆生成圖表。

EdrawMax：建立流程圖的專用工具

Mermaid 語法非常適合使用文字快速建立流程圖。但如果您正在尋找更直觀的介面或靈活的編輯，請考慮使用 EdrawMax.

以下是它與 Mermaid 語法的比較：

功能	Mermaid 語法	EdrawMax
操作	基於文字	圖形介面
學習曲線	簡單但需要語法知識	簡單的拖放
範本	有限的範例	30,000+ 個範本（不僅限於流程圖）
自訂	需要語法編輯	直接編輯流程圖（所有內容皆可自訂，包括形狀、線條、顏色和字型）
速度	熟悉後速度快	透過拖放更快速
複雜圖表	較難建立	透過內建支援和範本輕鬆完成
版本控制整合	使用文字輕鬆完成	支援，並提供復原選項
匯出選項	PNG、SVG	PNG、JPG、PDF、SVG 等更多格式
費用	免費	付費（但免費版本提供足夠的功能）