小黃老師嘿技術

你是不是也跟我一樣，曾經為了畫一份簡單的流程圖，在 Visio 或 draw.io 裡奮戰半天，光是「對齊」線條跟方塊就搞到心累？或者，你好不容易畫好了，主管或客戶卻說：「這個步驟要往前調」、「這裡要加一個判斷式」，然後你... 就得全部重拉一次！

我還記得剛當上部落客新手時，想畫一張內容規劃的心智圖，結果光是研究軟體介面就花了一整個下午。直到我遇見了 Mermaid，這個簡直像魔法一樣的工具，它徹底改變了我對「畫圖」這件事的想像。

Mermaid 允許你「用打字的」來畫圖。你沒看錯，就是像寫文章一樣，用簡單的文字語法來描述圖表的結構，它就會自動幫你生成精美、專業的圖表。而 Mermaid.live 就是它的官方線上編輯器，一個讓你即時預覽、隨時修改的完美遊樂場。

這篇文章會是一份（可能有點囉嗦，但保證深入的）7000 字完整教學，我會用最有溫度、最白話的方式，帶你從零開始，一步步掌握 Mermaid.live 的所有精華。無論你是部落客、專案經理、工程師、學生，或只是單純想提升工作效率，這篇文章都能讓你功力大增！

Mermaid 是什麼？為什麼它能解放你的生產力？

Mermaid 簡單來說，就是一種「標記語言 (Markup Language)」，就像你可能聽過的 Markdown 一樣。但它的目的不是排版文字，而是定義圖表。

你不需要關心方塊A要放在 (x, y) 座標 (100, 200)，線條B要怎麼拉才不會歪掉。你只需要告訴 Mermaid：「我有一個方塊A，它指向方塊B」，像這樣：

graph TD
  A --> B

Mermaid 就會自動幫你生成一張 A 指向 B 的流程圖。就是這麼簡單！

Mermaid vs 傳統繪圖軟體

你可能會想，用拉的不是很直覺嗎？為什麼要沒事找事學「寫程式」來畫圖？一開始我也這麼覺得，但相信我，一旦你跨過了那個坎，你會發現新世界。我幫你整理了這兩者的關鍵差異：

Mermaid 最大的魔力在於「修改效率」。當你的流程圖有 50 個節點時，傳統軟體要新增一個步驟，簡直是災難；但用 Mermaid，你可能只需要在兩行文字之間，插入一行新的文字，圖表就自動更新了，排版依然完美。

什麼是 Mermaid.live？

Mermaid.live 就是 Mermaid 官方提供的「線上即時編輯器」。

Mermaid 本身只是一套「語法規則」，你需要在支援它的地方（例如安裝了外掛的 VS Code，或是 Notion 筆記）才能把它「渲染」成圖。而 Mermaid.live 就像一個線上的沙盒 (Sandbox) 或遊樂場，它提供你：

對於我們部落客或一般使用者來說，Mermaid.live 是學習和製作圖表的最佳起點。你不需要安裝任何軟體，打開瀏覽器就能開始玩！

準備好了嗎？讓我們來啟動這個魔法工具吧！

點我開啟 Mermaid.live 官方編輯器

初探 Mermaid.live：5 分鐘快速掌握編輯器介面

當你點開 Mermaid.live，會看到一個非常簡潔的介面。別看它簡單，功能可強大了。我把它分成四大區域，讓你一次快速掌握：

1. 程式碼編輯區 (Code)

這就是你的「畫布」... 呃，應該說是你的「稿紙」。你所有的 Mermaid 語法都會在這裡輸入。它會自動幫你上色，讓語法更容易閱讀。最棒的是，你每打一個字，右邊的預覽區都會「即時」更新！

2. 即時預覽區 (Preview)

這裡是魔法發生的地方！你在左邊寫的「咒語」（語法），會在這裡變成活生生的圖表。這讓你能量「立即」看到結果，並快速修正錯誤。

3. 設定區 (Configuration)

這是控制圖表「外觀」的核心。點擊左側欄的「Configuration」圖示，你會看到：

• Theme: 選擇圖表的主題。預設是 default，我個人也很喜歡 forest (森林綠) 和 neutral (中性灰)。你可以玩玩看！
• Theme Variables: 更進階的設定，你可以在這裡用 JSON 格式微調主題的顏色、字體大小等。新手可以先跳過。

（後面的章節會再教大家如何用 %%{init}%% 指令在程式碼中直接修改主題喔！）

4. 動作區 (Actions)

當你對圖表滿意後，點擊左側欄的「Actions」圖示，這裡提供了超實用的功能：

• Download SVG: 匯出成 SVG 向量檔。這是最推薦的格式，因為它可以無限放大而不失真，而且檔案超小！部落格使用 SVG 可以讓畫質超清晰。
• Download PNG: 匯出成 PNG 點陣圖。如果你需要固定的圖片尺寸，這很方便。
• Copy Markdown: 這會產生一段 Markdown 語法，讓你直接貼到支援 Mermaid 的平台（如 GitHub）。
• Copy Image: 直接把圖表複製到剪貼簿。

【核心圖表 I】流程圖 (Flowchart)：一切的基礎

流程圖（在 Mermaid 裡也常被稱為 `graph`）是我們最常用，也是 Mermaid 語法的基礎。學會了它，其他圖表就觸類旁通了。

基本結構：方向與節點

所有 Mermaid 流程圖都以 graph (或 flowchart) 這個關鍵字開頭，接著是「方向」。

• TD 或 TB：Top Down / Top to Bottom (由上到下，最常用)
• LR：Left to Right (由左到右)
• BT：Bottom to Top (由下到上)
• RL：Right to Left (由右到左)

接著，你只需要定義「節點」和「連結」。

graph TD
  A --> B

這段程式碼的意思是：

1. graph TD：宣告一張「由上到下」的流程圖。
2. A --> B：建立一個節點 A，和一個節點 B，並用一個箭頭 (-->) 從 A 連接到 B。

就這麼簡單！如果你想多加幾個步驟呢？

graph TD
  A[開始] --> B(處理中)
  B --> C{判斷}
  C --> D[結束]
  C --> E[另一個結束]

是不是很像在寫筆記？我們馬上就畫出了一個有判斷分支的流程圖！

節點形狀大集合

Mermaid 提供了多種節點形狀，讓你的流程圖更語意化。關鍵在於你用什麼「括號」把文字包起來：

graph TD
  id1[我是方形]
  id2(我是圓角矩形)
  id3((我是圓形))
  id4{我是菱形 (判斷)}
  id5>我是不對稱矩形]
  id6{{我是六邊形}}
  id7[/我是平行四邊形/]
  id8[\我是梯形\]
  id9(( )) id1 --> id2 --> id3 --> id4
  id4 --> id5 --> id6 --> id7 --> id8 --> id9

重點提醒： id1, id2 這些是節點的「ID」，在程式碼中是唯一的，用來識別。而 [我是方形] 裡的文字，才是圖表上「顯示」的內容。如果顯示文字不包含特殊符號，你也可以省略 ID，Mermaid 會自動用文字當 ID，但建議一律使用 ID，管理上更方便。

箭頭樣式與文字

不只節點，線條（連結）也可以有很多變化：

graph TD
  A --> B[實線箭頭]
  A --- C[實線無箭頭]
  A -.-> D[虛線箭頭]
  A -.- E[虛線無箭頭]
  A ==> F[粗線箭頭]
  A -- 隨便加文字 --> G[在線上加文字]
  A --> |在線上加標籤| H
  A -- 綠色 --> I
  A -- 紅色 --> J

  %% 這邊是進階的「樣式」
  %% 我們用 linkStyle 定義第 8 條線 (I) 和第 9 條線 (J)
  linkStyle 7 stroke:#06c755,stroke-width:2px
  linkStyle 8 stroke:#ff0000,stroke-width:4px,stroke-dasharray: 5 5

（關於 linkStyle 的進階用法，我們在後面的章節會詳細說明！）

子圖表 (Subgraph)：讓結構更清晰

當你的流程圖很複雜時，可以用 subgraph 把相關的節點群組起來，就像幫它們加一個「外框」分類。

graph TD
  subgraph 階段一：準備
    A[收集資料] --> B(分析需求)
  end

  subgraph 階段二：執行
    direction LR %% 子圖表內可以獨立定義方向！
    B --> C{開始執行}
    C --> D[執行 A 計畫]
    C --> E[執行 B 計畫]
  end

  subgraph 階段三：結案
    D --> F(產出報告)
    E --> F
  end

  F --> G((結束))

透過 subgraph，整個流程的階段性一目了然，是不是超級清楚？

【核心圖表 II】循序圖 (Sequence Diagram)：釐清互動順序

循序圖（時序圖）是工程師的最愛，但它其實也非常適合用來說明「角色互動」的過程。例如，描述一個「顧客點餐」的流程：

循序圖的核心語法是 sequenceDiagram。

參與者 (Participant)

你首先要定義有哪些「參與者」。

sequenceDiagram
  participant C as 顧客
  participant W as 服務生
  participant K as 廚房

participant 是關鍵字，C, W, K 是 ID，as 後面接的是顯示的名稱。

訊息傳遞 (Message)

循序圖的精髓在於訊息。箭頭代表訊息的流向和類型：

• ->：實線無箭頭（通常不用）
• -->：虛線箭頭（回應、非同步）
• ->>：實線箭頭（請求、同步）
• -->>：虛線有箭頭（很少用）

讓我們把點餐流程串起來：

sequenceDiagram
  autonumber %% 自動加上編號
  participant C as 顧客
  participant W as 服務生
  participant K as 廚房

  C -) W: 我要一份 A 餐
  %% -) 代表顧客「自己」的動作，線連回自己
  %% 你也可以用 C ->> C: (思考要點什麼)

  W ->> C: 好的，請稍候
  W ->> K: A 餐一份
  
  K -->> W: A 餐好了！
  W -->> C: 您的 A 餐來了！

啟用與停用 (Activate)

有時候，你想強調某個角色「正在處理中」，這時可以用 activate 和 deactivate 來顯示「生命線」的啟用狀態。

sequenceDiagram
  participant C as 顧客
  participant W as 服務生
  participant K as 廚房

  C ->> W: 我要點餐
  
  activate W
  W ->> K: 顧客點了 A 餐
  
  activate K
  K -->> W: A 餐製作完成
  deactivate K
  
  W -->> C: 您的餐點好了
  deactivate W

你會看到服務生 (W) 和廚房 (K) 的垂直線上，出現了藍色的粗框，表示他們正在「工作中」，這讓流程更生動了！

迴圈、條件與註解

循序圖也可以有邏輯判斷！

• loop [文字] ... end：迴圈
• alt [條件 A] ... else [條件 B] ... end：條件分支
• opt [文字] ... end：可選項目
• Note [位置] of [ID]: [文字]：加上註解框

sequenceDiagram
  participant C as 顧客
  participant W as 服務生

  loop 點餐流程
    C ->> W: 我要點餐
  
    alt 餐點還有
      W ->> C: 好的，馬上來
    else 餐點賣完了
      W -->> C: 抱歉，賣完了
    end
  end

  Note right of C: 顧客決定換一家

循序圖對於釐清複雜的溝通流程非常有幫助，不只是寫程式，描述客服流程、部門協作也超好用！

【核心圖表 III】甘特圖 (Gantt Chart)：專案管理神器

身為一個需要管理內容排程的部落客，或是有專案在身的 PM，甘特圖（Gantt Chart）絕對是你的好朋友。用 Mermaid 寫甘特圖，修改日期簡直是秒殺！

語法開頭是 gantt。

定義日期格式與標題

gantt
  title 我的部落格文章撰寫計畫
  dateFormat YYYY-MM-DD
  axisFormat %Y-%m-%d
  %% excludes weekends %% (可以加上這行來排除週末)

• title：圖表大標題。
• dateFormat：你「輸入」的日期格式。
• axisFormat：圖表「顯示」的時間軸格式。

區段 (Section) 與任務 (Task)

甘特圖的核心就是「區段 (Section)」和「任務 (Task)」。

gantt
  title 部落格文章撰寫計畫
  dateFormat YYYY-MM-DD
  
  section 階段一：規劃
  收集資料 :done, 2025-10-20, 3d
  撰寫大綱 :active, 2025-10-23, 2d
  
  section 階段二：撰寫
  撰寫初稿 : 2025-10-25, 5d
  SEO 優化 : 2025-10-30, 2d

  section 階段三：發佈
  設計插圖 : 2025-10-28, 3d
  校稿與排版 : 2025-11-01, 2d
  正式發佈 : 2025-11-03, 1d

任務的語法是：[任務名稱] : [狀態], [開始日期], [持續天數/結束日期]。

任務狀態與里程碑

你可以定義任務的「狀態」，Mermaid 會用不同顏色標示：

• done：已完成 (通常是灰色)
• active：進行中 (通常是亮色)
• (不填)：未開始 (通常是深色)

你也可以定義「相依性」或「里程碑」：

gantt
  dateFormat YYYY-MM-DD
  
  section 範例
  任務 A :done, 2025-10-20, 3d
  任務 B :active, after 任務 A, 2d  %% 關鍵字 after
  重要節點 :milestone, 2025-10-26, 0d %% 里程碑

用 after [任務名稱]，B 任務就會自動接在 A 任務後面開始。用 milestone (里程碑)，它會顯示成一個菱形。當你的專案排程需要「動態調整」時，Mermaid 這種寫法（例如 after A）會自動幫你重排所有後續任務，省下 PM 大量的時間！

【核心圖表 IV】心智圖 (Mindmap)：腦力激盪必備

心智圖 (Mindmap) 是我身為部落客最愛的功能之一！用來發想文章大綱、規劃內容結構，真的超級方便。

語法開頭是 mindmap。

從根節點出發

心智圖的語法非常直觀，就是用「縮排」來表示層級。一層縮排 (通常是 2 或 4 個空白) 代表下一層分支。

mindmap
  root((部落格經營))
    (內容策略)
      (SEO)
        (關鍵字研究)
        (頁面優化)
      (社群媒體)
        (Facebook)
        (Instagram)
    (營利模式)
      (聯盟行銷)
      (廣告收入)
      (開設課程)
    (技術維護)
      (網站速度)
      (安全性)

是不是很像在寫大綱？它就會自動生成漂亮的心智圖！

節點形狀變化

心智圖也可以改變節點的形狀，來區分不同類型的想法：

• (文字)：圓角矩形 (預設)
• ((文字))：圓形
• [文字]：方形
• )文字(：橢圓形 (像藥丸)
• ( (文字) )：Cloud 雲朵 (注意有空格)

mindmap
  root[週末出遊計畫]
    ( (天氣) )
      (晴天)
        (去海邊)
      (雨天)
        )逛博物館(
    ((交通))
      [開車]
      [搭火車]
    ( (必帶物品) )
      (錢包)
      (雨傘)

透過不同的形狀，你可以快速分類你的思緒，非常實用。

【核心圖表 V】圓餅圖 (Pie Chart)：快速呈現數據

有時候，你需要快速展示數據佔比，圓餅圖 (Pie Chart) 也能輕鬆搞定。

語法開頭是 pie。

pie
  title 我的時間分配
  "寫作" : 40
  "回覆 E-mail" : 15
  "開會" : 10
  "發想新點子" : 20
  "耍廢" : 15

語法就是 "標籤" : 數值。Mermaid 會自動幫你算出百分比並畫出來。是不是快到不可思議？

更多強大圖表巡禮（快速入門）

Mermaid 的能耐遠不止於此！為了滿足這篇 7000 字教學的深度（笑），我再帶你快速瀏覽幾個在特定領域超級強大的圖表。你不需要精通，但你知道它「存在」，未來需要時就能立刻拿出來用！

類別圖 (Class Diagram)

用途：工程師用來描述「物件導向」的系統結構（例如一個「類別」有哪些屬性和方法）。

範例：

classDiagram
  class 動物 {
    +String 名字
    +int 年齡
    +void 睡覺()
    +void 吃飯()
  }
  
  class 貓 {
    +void 喵喵叫()
  }

  class 狗 {
    +void 汪汪叫()
  }

  動物 <|-- 貓 : 繼承
  動物 <|-- 狗 : 繼承
  
  貓 "1" -- "many" 貓奴 : 擁有 >

<|-- 表示繼承，-- 表示關聯。+ 表示公開 (public) 屬性或方法。

狀態圖 (State Diagram)

用途：描述一個事物（例如訂單、機器）的「狀態」如何變化。

範例：

stateDiagram-v2
  [*] --> 待付款 : 建立訂單

  待付款 --> 待出貨 : 付款成功
  待付款 --> 已取消 : 付款失敗或逾時
  
  待出貨 --> 已出貨 : 商家寄送
  已出貨 --> 已完成 : 顧客取貨
  
  已取消 --> [*]
  已完成 --> [*]

[*] 是開始或結束的符號。狀態圖對於釐清複雜的SOP或系統邏輯非常有幫助。

實體關係圖 (ER Diagram)

用途：資料庫設計師用來顯示「資料表 (Table)」之間的關聯。

範例：

erDiagram
  USER ||--o{ POST : "writes"
  POST ||--|{ COMMENT : "has"
  USER ||--o{ COMMENT : "writes"

  USER {
    int userID PK "User ID"
    string username "Username"
  }
  POST {
    int postID PK "Post ID"
    string title "Title"
    int userID FK "Foreign Key"
  }
  COMMENT {
    int commentID PK "Comment ID"
    string text "Comment Text"
    int userID FK
    int postID FK
  }

||--o{ 這類符號是用來表示「一對多」、「多對多」等資料庫關係 (Cardinality)。

使用者旅程圖 (User Journey)

用途：PM 或 UX 設計師用來描述「使用者」在使用產品時的「步驟」、「情緒」和「痛點」。這是我覺得非常有「溫度」的一種圖！

範例：

journey
  title 顧客線上購物旅程
  section 發現
    發現需求: 5: 小明, 小美
    逛社群網站: 4: 小明
    看到廣告: 5: 小美
  section 考慮
    進入網站: 5: 小明, 小美
    比較商品: 3: 小明 (覺得有點貴)
    查看評價: 4: 小美
  section 購買
    加入購物車: 5: 小美
    結帳卡住: 1: 小美 (痛點！)
    放棄購買: 1: 小美
    順利結帳: 5: 小明
  section 售後
    收到商品: 5: 小明 (開心)

語法是 [任務名稱]: [情緒分數 1-5]: [參與者]。它會自動生成一個視覺化的旅程地圖。

時間軸 (Timeline)

用途：用來呈現歷史事件、公司大事記、或專案的重大里程碑。

範例：

timeline
  title 2025 年部落格大事記
  2025-01-01 : 網站上線
  2025-03-15 : 達到 100 篇文
  2025-06-30 : 首次接到業配
  2025-10-19 : 撰寫 Mermaid 教學文 (就是現在！)
  2025-12-31 : 慶祝年終
  ;
  section 2026 規劃
  2026-Q1 : 開設線上課程
  2026-Q3 : 出版電子書

是不是超級多功能？Mermaid 簡直是一個瑞士刀！

進階技巧：讓你的圖表更上一層樓

學會了基本圖表後，你一定會想：「我能不能改顏色？」、「我能不能讓它更好看？」。當然可以！

註解：在程式碼中做筆記

這超級重要！當你的圖表變得很複雜時，你需要註解來提醒自己這段程式碼在幹嘛。請使用 %% (兩個百分比符號)。

graph TD
  A --> B
  %% 這是註解，不會顯示在圖表上
  B --> C %% 這也是註解

自訂樣式 (Styling)

Mermaid 允許你定義 CSS Class，然後套用到節點或線上。

方法一：classDef (定義) 和 class (套用)

graph TD
  A[開始] --> B{判斷}
  B -- 是 --> C[成功]
  B -- 否 --> D[失敗]
  
  %% 1. 定義 Class
  classDef success fill:#f0fdf6,stroke:#06c755,stroke-width:2px,color:#038a3c
  classDef failure fill:#fff8f0,stroke:#ff8c00,stroke-width:2px,color:#D2691E
  
  %% 2. 套用 Class
  class C success
  class D failure

classDef [class名稱] [CSS屬性]。你可以用 fill (填充色)、stroke (邊框色)、color (文字色) 等。

方法二：linkStyle (用於線條)

前面提過的 linkStyle 是專門用來改線條的。它會依照線條的「順序」來套用。

graph TD
  A --> B %% 這是第 0 條線
  A --> C %% 這是第 1 條線
  
  linkStyle 0 stroke:#06c755,stroke-width:4px
  linkStyle 1 stroke:#ff0000,stroke-width:2px,stroke-dasharray: 5 5

（注意：順序是從 0 開始算的喔！）

修改主題 (Theme)

雖然你可以在 Mermaid.live 的「Configuration」介面改主題，但更專業的做法是「寫在程式碼裡」。這樣你的圖表無論在哪個平台開啟，都會長一樣！

請使用 %%{init}%% 這個「初始化指令」。

%%{init: { "theme": "forest" } }%%
graph TD
  A[我是森林主題] --> B(看起來很舒服)

把這行魔法指令放在圖表的最開頭，圖表就會立刻套用 forest (森林) 主題。其他可選主題還有 default, dark, neutral, base。

你甚至可以在 init 裡覆蓋主題的變數：

%%{init: { 
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#06c755",
    "primaryTextColor": "#fff",
    "lineColor": "#06c755",
    "nodeBorder": "#06c755"
  }
} }%%
graph TD
  A[完全客製化] --> B(LINE 綠色主題！)

實戰應用：我如何用 Mermaid 規劃這篇文章？

說了這麼多，不如來個實際案例。這篇超過 7000 字的教學文，如果沒有先規劃大綱，一定會寫到迷路。所以，我就是用 Mermaid 的「心智圖」來規劃的！

這是我當時草稿的 Mermaid 程式碼（簡化版）：

mindmap
  root((Mermaid.live 完整教學))
    (為什麼要學？)
      [痛點：傳統軟體很慢]
      [優點：修改快、版控]
    (介面導覽)
      (Code / Preview)
      (Config / Actions)
    (核心圖表：流程圖)
      (方向 TD/LR)
      (節點形狀)
      (箭頭)
      (Subgraph)
    (核心圖表：循序圖)
      (Participant)
      (Message)
      (Activate)
    (核心圖表：甘特圖)
      (Section / Task)
      (Milestone)
    (核心圖表：心智圖)
    (核心圖表：圓餅圖)
    (更多圖表巡禮)
      (Class / State / ER)
      (Journey / Timeline)
    (進階技巧)
      (Styling / classDef)
      (Theme / init)
    (FAQ)
    (結論)

我只需要專注在「層級」和「關鍵字」，Mermaid 就幫我生出了一張清晰的大綱圖。在撰寫過程中，如果我發現「甘特圖」應該要放在「循序圖」前面，我只需要移動那兩行文字，圖表就自動更新了。這就是 Mermaid 的威力！

常見問題 FAQ

整理一些大家剛入門時最常遇到的問題！

結論：別再「拉」圖了，開始「寫」圖吧！

呼～恭喜你滑到了這裡！這篇 7000 多字的文章，我們從 Mermaid 的核心理念、Mermaid.live 的介面，一路玩遍了流程圖、循序圖、甘特圖、心智圖... 等超過 10 種圖表，甚至還學會了自訂樣式和主題。

我希望這篇文章給你的，不只是一個工具的SOP，而是一種全新的工作思維。

「用文字定義結構，讓程式處理外觀」是未來高效工作的趨勢。Mermaid 完美體現了這一點。它讓你從繁瑣的「對齊、拉線、調顏色」中解放出來，真正專注於圖表要傳達的「邏輯」與「資訊」。

一開始學習語法可能會有點卡，這是正常的。但請相信我，只要你堅持下去，用它完成兩、三個圖表後，你就會愛上那種「修改一行字，整張圖自動重排」的快感！

別再浪費時間在拖拉方塊上了。現在就打開 Mermaid.live，試著「寫」出你的第一張圖吧！

立刻前往 Mermaid.live 實戰