Mermaid 是什麼？一窺流程圖與圖表繪製的神奇工具

Table of Contents

Mermaid 是什麼？

「Mermaid 是什麼？」這個問題，相信許多經常需要製作流程圖、架構圖、時序圖，或是腦力激盪時需要視覺化呈現想法的朋友，都曾經在腦海中閃過。尤其是在需要與團隊協作、撰寫技術文件，或是製作簡報時，能夠快速、直觀地生成清晰圖表，絕對是一大福音。而 Mermaid，就是這樣一個能夠大幅提升你繪圖效率和質感的秘密武器！

簡單來說，Mermaid 是一個 **基於 Markdown 的語法來繪製圖表和流程圖的工具**。你不需要學習複雜的繪圖軟體，也不用被滑鼠拖曳元素的繁瑣操作所困擾。只需要用簡單、易讀的文字語法，就能夠「寫」出精美的圖表。它就像是程式碼界的「魔法咒語」，你唸對了咒語，就能召喚出你想要的視覺化圖示。

想像一下，當你在寫一份技術文件，需要展示系統架構，或是撰寫 API 文件時，能夠直接在 Markdown 檔案裡嵌入流程圖，這是不是超級方便！這也是為什麼 Mermaid 在工程師、技術寫作人員，以及許多需要數位化溝通的領域裡，越來越受歡迎的原因。它打破了傳統繪圖工具的門檻，讓「人人都能畫圖」成為可能。

Mermaid 如何運作？

Mermaid 的運作方式，核心在於它的 **文本語法**。它定義了一套標準化的語法，讓你能夠用純文字來描述圖表的結構和元素。當這些文本被 Mermaid 渲染引擎解析後，就會轉換成實際的圖形。這背後的原理，有點像是網頁開發中的 HTML 和 CSS。HTML 用來定義網頁的結構，而 Mermaid 則用來定義圖表的結構。

具體來說，Mermaid 支援多種不同類型的圖表，每種類型都有其獨特的語法規則。最常見的像是：

流程圖 (Flowchart)：用於描繪一個過程或系統的步驟順序。
時序圖 (Sequence Diagram)：用於展示不同物件或參與者之間的時間順序互動。
類別圖 (Class Diagram)：用於展示系統中的類別、屬性和方法之間的關係。
狀態圖 (State Diagram)：用於描述一個物件在其生命週期中可能經歷的狀態轉換。
使用者劇本圖 (User Story)：用於描述使用者與系統的互動。
甘特圖 (Gantt Chart)：用於項目管理，展示任務的時間表。
餅圖 (Pie Chart)：用於展示數據的比例。

要使用 Mermaid，你通常需要將你的 Mermaid 語法嵌入到一個支援 Mermaid 渲染的環境中。這些環境非常廣泛，包括：

GitHub 和 GitLab：這兩大程式碼託管平台都內建支援 Mermaid，你可以在 Markdown 文件中直接撰寫 Mermaid 語法，它會自動渲染成圖表。
各種筆記應用程式：像是 Obsidian, Notion (透過外掛), Typora 等，都可以直接或透過外掛來支援 Mermaid 語法。
文件生成工具：像是 MkDocs, Docusaurus 等，可以將 Mermaid 圖表整合到你的技術文件網站中。
線上 Mermaid 編輯器：網路上有很多免費的 Mermaid 線上編輯器，讓你無需安裝任何東西，就能即時預覽和編輯你的圖表。
開發者工具：在 VS Code 等程式碼編輯器中，也有許多外掛支援 Mermaid 的語法高亮和即時預覽。

Mermaid 的核心優勢：為什麼值得學習？

Mermaid 之所以能迅速普及，並非偶然。它提供了幾個傳統繪圖工具難以比擬的優勢，這也是我個人強烈推薦你值得花時間去了解它的原因。

1. 效率驚人，節省寶貴時間

這點絕對是最直觀的優勢！想像一下，你需要畫一個有數十個節點和連線的複雜流程圖。如果用滑鼠去拖曳、調整、對齊，可能要花上數十分鐘甚至更久。但如果使用 Mermaid，只需要幾分鐘的時間，你就可以用文字精確地定義出圖表的結構。而且，一旦你定義好了，修改起來也異常方便，只需改動文字語法，圖表就會同步更新。對於經常需要修改圖表的朋友來說，這簡直是救星！

2. 易於版本控制與協作

Mermaid 的圖表本質上是純文字檔。這意味著你可以將它們像程式碼一樣，儲存在 Git 等版本控制系統中。這對於團隊協作來說，意義重大。你可以輕鬆追蹤圖表的變更歷史，回溯到任何一個版本，並且能與團隊成員無縫地進行合併與衝突解決。這在傳統的圖片檔案格式（如 PNG, JPG）上是無法做到的。

3. 語法簡潔，學習曲線平緩

Mermaid 的語法設計得非常直觀，即使你沒有程式設計背景，也能夠快速上手。它通常以關鍵字開頭，定義圖表類型，然後用簡單的符號來表示節點、連線和文字。例如，流程圖中，箭頭 `–>` 代表一個方向性的連線，`—` 代表雙向連線。節點通常用方括號 `[]` 或圓括號 `()` 表示。這種簡潔的語法，讓學習過程非常愉快，不會讓你望而卻步。

4. 跨平台、跨應用程式的通用性

因為 Mermaid 是一種文本格式，所以它的通用性非常強。只要是支援 Mermaid 渲染的平台或工具，你都可以直接複製貼上你的 Mermaid 語法，並且看到一致的圖表效果。這減少了在不同工具之間轉換圖表的麻煩，也確保了圖表的一致性。

5. 專注於內容，而非格式

Mermaid 鼓勵你將精力集中在要呈現的「內容」和「邏輯」上，而不是糾結於圖表的「美觀」和「排版」。當然，Mermaid 也能產生很漂亮的圖表，但它的核心是幫助你清晰地表達想法。這種「內容為王」的思維，非常符合技術文件和知識分享的需求。

Mermaid 流程圖實戰：從零開始繪製

既然知道了 Mermaid 的強大之處，我們就來實際動手體驗一下吧！我們以最常用的 **流程圖 (Flowchart)** 為例，一步步帶你製作出一個簡單的流程圖。

步驟一：定義圖表類型

任何 Mermaid 圖表都需要以 `graph` 或 `flowchart` 關鍵字開頭，來告訴渲染引擎我們要繪製的是流程圖。接著，你需要指定圖表的方向。常見的方向有：

`TD` 或 `TB`：從上到下 (Top Down / Top to Bottom)
`LR`：從左到右 (Left to Right)
`BT`：從下到上 (Bottom to Top)
`RL`：從右到左 (Right to Left)

舉個例子，我們要繪製一個從上到下的流程圖，語法就會是：

graph TD

步驟二：定義節點 (Nodes)

節點是流程圖的基本構成元素，代表一個步驟、一個動作或一個決策。Mermaid 支援多種節點樣式，最常見的有：

`[ ]`：長方形節點，通常代表一個處理步驟。
`( )`：圓角矩形節點，通常代表開始或結束。
`{ }`：菱形節點，通常代表一個決策點。
`[/ \]`：平行四邊形節點，通常代表輸入/輸出。
`(( ))`：圓形節點，通常代表一個特定事件。

你可以為節點賦予一個 ID（通常是單個字母或數字），然後在後面的文字中給它加上顯示的內容。節點 ID 和顯示內容之間用一個冒號 `:` 分隔。

例如，我們定義三個節點：

graph TD
    A[開始]
    B{是否符合條件？}
    C[/請輸入數據/]

步驟三：定義連線 (Links)

連線用於連接節點，表示流程的方向。Mermaid 使用箭頭符號來表示連線：

`–>`：實心箭頭，表示流程方向。
`–>`：帶有箭頭的虛線，通常用於表示資訊流。
`—`：實心線，無箭頭，表示雙向連接或無方向性。

你還可以為連線加上文字標籤，用 `|文字|` 的形式放在連線中間。

現在，我們將上面定義的節點連接起來：

graph TD
    A[開始] --> B{是否符合條件？};
    B -- 是 --> C[/請輸入數據/];
    B -- 否 --> D[結束];
    C --> E[處理數據];
    E --> D;

在這個例子中：

`A[開始]`：定義一個 ID 為 `A` 的長方形節點，顯示文字為「開始」。
`–>`：從 `A` 連接到下一個節點。
`B{是否符合條件？}`：定義一個 ID 為 `B` 的菱形節點，顯示文字為「是否符合條件？」。
`– 是 –>`：從 `B` 連接到另一個節點，連線上標示「是」。
`C[/請輸入數據/]`：定義一個 ID 為 `C` 的平行四邊形節點，顯示文字為「請輸入數據」。
`D[結束]`：定義一個 ID 為 `D` 的長方形節點，顯示文字為「結束」。
`E[處理數據]`：定義一個 ID 為 `E` 的長方形節點，顯示文字為「處理數據」。

將這段語法複製到任何一個支援 Mermaid 的編輯器（例如 Mermaid Live Editor），你就可以看到一個清晰的流程圖了！是不是很神奇？

Mermaid 的進階應用與技巧

Mermaid 的功能遠不止於此，它還有許多進階的應用和技巧，可以讓你的圖表更加豐富和專業。

1. 節點樣式的進階使用

除了上面提到的基本樣式，Mermaid 還支援自定義節點樣式，以及使用圖標。你可以透過 CSS 來實現更精緻的視覺效果，這部分內容較為深入，通常在特定的渲染環境（如自定義網頁）下使用。

2.Subgraph 與分組

當你的流程圖變得越來越複雜時，使用 `subgraph` 來對相關節點進行分組，可以大大提升圖表的可讀性。

graph TD
    A[開始] --> B{是否有效？};
    subgraph "驗證階段"
        B -- 是 --> C[/驗證成功/];
        B -- 否 --> D[/驗證失敗/];
    end
    C --> E[處理];
    D --> F[報告錯誤];
    E --> G[結束];
    F --> G;

在這個例子中，「驗證階段」的 subgraph 將節點 B, C, D 進行了邏輯上的劃分，讓整個圖表結構更加清晰。

3. Mermaid 的其他圖表類型

Mermaid 不僅限於流程圖，它還支援許多其他類型的圖表，讓你能夠應對各種視覺化需求。

時序圖 (Sequence Diagram)

時序圖對於展示系統互動非常有用，語法也相當直觀。

sequenceDiagram
    participant A
    participant B
    A->>B: 請發送請求
    B-->>A: 回覆數據

類別圖 (Class Diagram)

這對於物件導向程式設計師來說，是個強大的工具，用於描述類別之間的關係。

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

你會發現，每種圖表的語法都有其特色，但都遵循著「文本描述」的核心原則。

Mermaid 在實際應用中的心得與觀點

從我個人的經驗來看，Mermaid 最大的價值在於它 **降低了製作圖表的門檻，並將效率提升到了一個全新的水平**。過去，我常常因為需要繪製圖表而拖延了撰寫技術文檔的進度。現在，我可以直接在 Markdown 文件中，邊寫邊繪製，圖文並茂，效率提升非常明顯。

此外，Mermaid 的 **可重複性 (Reproducibility)** 是非常寶貴的。一份 Mermaid 語法，可以被任何人、在任何支援的環境下，都產生一模一樣的圖表。這避免了「我的圖表看起來跟你不一樣」的溝通困擾。

當然，Mermaid 也不是萬能的。對於極度複雜、需要精細手動調整細節的圖表，或是需要高度藝術化設計的圖表，傳統的繪圖軟體可能還是有其優勢。但對於絕大多數的技術文件、系統架構、流程說明等場景，Mermaid 已經足夠強大，甚至可以說是最佳選擇。

我特別喜歡將 Mermaid 運用在：

API 文件說明，展示請求和回應的流程。
軟體架構圖，用以說明不同模組之間的互動。
工作流程說明，讓同事們能快速理解步驟。
個人筆記，用來梳理複雜的概念和想法。

常見問題與解答

在使用 Mermaid 的過程中，你可能會遇到一些常見的問題。這裡我整理了一些，並提供我的專業解答。

Q1：我的 Mermaid 圖表在某些平台顯示正常，但在另一個平台卻顯示亂碼或沒有圖？

這通常是因為你使用的平台或工具，對 Mermaid 的版本支援程度不同。Mermaid 會定期更新，加入新的語法或修正錯誤。

解答：

檢查 Mermaid 版本： 某些較舊的平台可能只支援較舊版本的 Mermaid。你可以嘗試將你的 Mermaid 語法與該平台建議使用的 Mermaid 版本相容。
檢查語法錯誤： Mermaid 對語法非常敏感。即使是一個多餘的空格或標點符號，都可能導致渲染失敗。強烈建議使用 Mermaid 的官方線上編輯器（Mermaid Live Editor）來檢查語法是否正確。
檢查渲染引擎： 確保你使用的平台或工具，確實有啟用 Mermaid 的渲染功能。有時候需要手動啟用外掛或設定。
測試簡單圖表： 如果是複雜圖表出現問題，先嘗試渲染一個最簡單的 Mermaid 圖表（例如一個只有兩個節點和一條連線的流程圖），看它是否能正常顯示。如果連最簡單的圖表都無法顯示，那問題就出在環境設定或版本支援上。

Q2：如何讓 Mermaid 的節點文字更換成中文，而不是英文 ID？

Mermaid 支援 Unicode 字元，所以直接在節點定義中使用中文是完全沒問題的。

解答：

在定義節點時，直接將你想要的中文文字放在節點標記符號（如 `[` `]` `(` `)` `{` `}` 等）的內部即可。

例如：

graph TD
    A[開始] --> B{檢查資料};
    B -- 有效 --> C[/處理資料/];
    B -- 無效 --> D[通知使用者];

在這個範例中，`A` 節點的顯示文字是「開始」，`B` 節點是「檢查資料」，依此類推。

Q3：Mermaid 圖表可以匯出成圖片檔 (如 PNG, SVG) 嗎？

當然可以！雖然 Mermaid 的核心是文本語法，但它最終會被渲染成視覺化的圖形。

解答：

使用線上編輯器： 大多數 Mermaid 線上編輯器（如 Mermaid Live Editor）都提供匯出成 PNG、SVG 等圖片檔的功能。你只需要編輯好你的 Mermaid 語法，然後點擊匯出按鈕即可。
使用開發工具或外掛： 許多程式碼編輯器（如 VS Code）的外掛，或是文件生成工具（如 MkDocs）的配置，都支援將 Mermaid 圖表自動匯出成圖片，或者在生成文件時就將其嵌入。
瀏覽器開發者工具： 在一些支援 Mermaid 的網頁環境（例如 GitHub），你可以透過瀏覽器的開發者工具，找到渲染後的 SVG 元素，然後將其複製或另存為檔案。SVG 是一種向量圖形格式，放大後也不會失真，非常適合用於技術文件。

Q4：Mermaid 支援顏色的設定嗎？

是的，Mermaid 支援對節點和連線進行顏色設定，可以讓你的圖表更加醒目和有層次。

解答：

Mermaid 提供了幾種設定顏色的方式，最常見的是透過 CSS 類別來定義。但對於一些基礎的顏色設定，可以直接在語法中進行。

例如，可以透過 `style` 指令來為特定的節點設定樣式，包括顏色。

graph TD
    A[開始]
    B{檢查};
    C[處理];
    D[結束];

    A --> B;
    B --> C;
    C --> D;

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#ccf,stroke:#333,stroke-width:2px
    style C fill:#cfc,stroke:#333,stroke-width:2px
    style D fill:#fcc,stroke:#333,stroke-width:2px

在這個範例中：

`style A fill:#f9f,stroke:#333,stroke-width:2px`：為節點 A 設定了粉紅色的填充色 (`fill:#f9f`)，黑色的邊框 (`stroke:#333`)，以及 2px 的邊框寬度 (`stroke-width:2px`)。

你可以根據需求，為不同的節點定義不同的顏色，讓你的流程圖更具視覺化效果。

Q5：Mermaid 的授權是怎麼樣的？我可以使用它製作商業用途的圖表嗎？

Mermaid 是一個開源專案，採用的是 **MIT 授權**。

解答：

MIT 授權是一個非常寬鬆的開源授權，它允許你自由地使用、修改、分發 Mermaid 的程式碼，即使是用於商業用途，也幾乎沒有限制。你只需要在你的產品或文件中包含原始的授權聲明即可（這通常是指 Mermaid 的授權文件，而不是你的圖表本身）。

這意味著，你可以放心地將 Mermaid 用於你的專案、產品、技術文件，甚至是商業簡報中，無需擔心授權問題。這也是為什麼它能在廣泛的開源專案和商業產品中被採用的重要原因之一。

總結來說，Mermaid 是一個功能強大、易於學習且高度靈活的文本式圖表繪製工具。無論你是開發者、技術寫作者、學生，還是任何需要將複雜想法視覺化的人，都非常值得深入了解和應用。它能讓你事半功倍，更專注於內容本身，並以清晰、專業的方式呈現你的想法！

Mermaid是什麼