Mermaid 圖表入門與生成指南

Mermaid 是一個輕量級的圖表生成工具，讓你可以使用簡單的文本語法來創建各式各樣的視覺化圖表。本指南將從基礎概念開始，逐步深入到進階應用，包括如何使用 Python 和 ChatGPT 來輔助生成 Mermaid 圖表。

1. Mermaid 基礎介紹

什麼是 Mermaid？

Mermaid 是一個 JavaScript 函式庫，允許使用者通過簡單的文本描述來生成圖表，類似於 PlantUML。這種「以程式碼繪製圖表」的方式非常適合在多種文本環境（如 Markdown 文件）中嵌入視覺化內容。

支援平台與工具

• GitHub 和 GitLab
• Notion
• Obsidian
• VS Code（搭配擴充功能）
• 各種支援 Markdown 的編輯器

Mermaid 的特點

• 簡單易學：只需學習基本語法就能創建各種圖表
• 集成性強：支援多種工具和平台
• 可自訂性：可調整顏色、樣式、方向等
• 輕量且易於分享：以文本格式存儲，便於版本控制和協作

2. Mermaid 常見圖表類型

流程圖 (Flowchart)

最基本且常用的圖表類型，用於表示過程步驟和決策。

graph TD
    A[開始] --> B{是否成功？}
    B -->|是| C[完成]
    B -->|否| D[重試]
    D --> B

時序圖 (Sequence Diagram)

展示對象之間的交互和消息流動順序。

sequenceDiagram
    Alice->>Bob: 問候
    Bob-->>Alice: 回答
    Alice->>Charlie: 發送消息
    Charlie-->>Alice: 確認收到

甘特圖 (Gantt Chart)

用於顯示專案時間線和任務排程。

gantt
    title 專案甘特圖
    dateFormat YYYY-MM-DD
    section 需求分析
    任務A :a1, 2025-03-01, 5d
    任務B :after a1, 3d
    section 開發
    任務C :2025-03-10, 10d

圓餅圖 (Pie Chart)

呈現數據比例關係的圖表。

pie
    title 瀏覽器市場佔比
    "Chrome": 63.6
    "Safari": 19.2
    "Edge": 4.1
    "Firefox": 3.6
    "Others": 9.5

象限圖 (Quadrant Chart)

將數據點分佈在四個象限中進行分析。

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]

時間線圖 (Timeline)

用於展示事件按時間順序的發展。

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : YouTube
    2006 : Twitter

XY 圖表 (XY Chart)

用於表示兩個變量之間的關係，包括折線圖和柱狀圖。

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500]
    line [5000, 6000, 7500, 8200, 9500, 10500]

3. Mermaid 語法基礎

基本結構

Mermaid 圖表通常以圖表類型關鍵字開始，後面跟著圖表的具體內容。例如：

graph TD
    [圖表內容]

常用元素

• 節點：使用各種形狀表示，如 A[方形]、 B(圓角方形)、 C{菱形}
• 連線：使用箭頭表示關係，如 -->、 --->、 --o、 --x
• 文本：可以在節點或連線上添加文本說明
• 分組：使用 subgraph 將相關節點分組

方向設定

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

4. 進階用法

樣式定製

可以通過 classDef 和 class 來定義和應用樣式：

graph TD
    A[開始] --> B[結束]

    classDef green fill:#9f6,stroke:#333,stroke-width:2px;
    classDef orange fill:#f96,stroke:#333,stroke-width:4px;

    class A green
    class B orange

分組與嵌套

使用 subgraph 創建分組：

graph TB
    subgraph 分組1
        A[節點A] --> B[節點B]
    end

    subgraph 分組2
        C[節點C] --> D[節點D]
    end

    B --> C

主題設定

使用初始化指令來設定主題：

%%{init: { 'theme': 'forest' } }%%
graph TD
    A[開始] --> B[結束]

可選主題包括: default, forest, dark, neutral, base

5. 使用 Python 生成 Mermaid 圖表

Python 能夠輕鬆處理數據並生成 Mermaid 語法，非常適合自動化生成各種圖表。

生成時序圖示例

def generate_mermaid_sequence(data):
    """將整理好的資料轉換為 Mermaid 時序圖語法"""
    mermaid_code = "sequenceDiagram\n"
    for entry in data:
        mermaid_code += f'    {entry["from"]}->>{entry["to"]}: {entry["message"]}\n'
    return mermaid_code

# 範例資料
data = [
    {"from": "User", "to": "Server", "message": "Request data"},
    {"from": "Server", "to": "Database", "message": "Query for data"},
    {"from": "Database", "to": "Server", "message": "Return data"},
    {"from": "Server", "to": "User", "message": "Send response"}
]

# 生成 Mermaid 語法
mermaid_code = generate_mermaid_sequence(data)

# 將結果寫入檔案
with open("sequence_diagram.md", "w", encoding="utf-8") as file:
    file.write(f"\`\`\`mermaid\n{mermaid_code}\`\`\`")

生成圓餅圖示例

def generate_mermaid_pie_chart(data, title="數據統計圓餅圖"):
    """根據整理好的資料，生成 Mermaid Pie Chart 語法"""
    mermaid_code = f"pie\n    title {title}\n"
    for item in data:
        mermaid_code += f'    "{item["label"]}": {item["value"]}\n'
    return mermaid_code

# 範例資料
data = [
    {"label": "Chrome", "value": 63.6},
    {"label": "Safari", "value": 19.2},
    {"label": "Edge", "value": 4.1},
    {"label": "Firefox", "value": 3.6},
    {"label": "Others", "value": 9.5},
]

# 生成 Mermaid Pie Chart 語法
mermaid_code = generate_mermaid_pie_chart(data, "瀏覽器市場佔比")

6. 使用 ChatGPT 生成 Mermaid 圖表

當你需要快速生成 Mermaid 圖表但不想編寫程式碼時，可以使用 ChatGPT 來協助。

有效的提示詞範例

流程圖生成提示詞

請將以下流程描述轉換為 Mermaid 流程圖語法：

1. 用戶提交訂單
2. 系統檢查庫存
3. 如果庫存充足，則確認訂單；如果庫存不足，則通知用戶
4. 確認訂單後，系統處理付款
5. 如果付款成功，則準備發貨；如果付款失敗，則取消訂單
6. 發貨後，通知用戶追蹤資訊

時序圖生成提示詞

請為以下場景生成 Mermaid 時序圖語法：

用戶在網站上登入帳號，系統需要驗證用戶身份，然後授權用戶訪問資源。

7. Mermaid 圖表配置與自定義

圖表配置

許多 Mermaid 圖表類型支持各種配置選項，例如：

%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
quadrantChart
  x-axis Urgent --> Not Urgent
  y-axis Not Important --> "Important ❤"
  quadrant-1 Plan
  quadrant-2 Do
  quadrant-3 Delegate
  quadrant-4 Delete

節點樣式自定義

可以直接定義節點樣式或使用類來定義：

Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0

classDef class1 color: #109060
classDef class2 color: #908342, radius : 10
Point D:::class1: [0.6, 0.3]
Point E:::class2: [0.5, 0.4]

8. Mermaid 應用場景

Mermaid 圖表在各種情境下都非常有用：

• 文檔與筆記：在技術文檔、學習筆記中嵌入圖表，提升可讀性
• 專案管理：使用甘特圖規劃和追蹤專案進度
• 系統架構設計：使用流程圖、時序圖描述系統組件和互動關係
• 數據分析與報告：使用圓餅圖、XY圖等視覺化數據
• 教育與簡報：通過圖表簡化複雜概念，提升理解效果

9. 進階使用技巧

• 結合其他工具（如 Jupyter Notebook）使用 Mermaid
• 使用互動功能，如可點擊的連結
• 整合到持續集成流程中，自動生成文檔
• 利用分組功能創建更複雜的圖表層次

10. 參考資源

• Mermaid 官方文檔
• Mermaid Live Editor - 線上圖表編輯器
• GitHub 上的 Mermaid 儲存庫

通過以上方法，你可以輕鬆地使用 Mermaid 創建各種圖表，無論是手動編寫語法，還是通過 Python 自動生成，或是藉助 ChatGPT 快速產出圖表程式碼。

使用 Prompt 生成 Mermaid 圖表的提詞範例

以下是 10 個使用 Prompt 生成 Mermaid 圖表的提詞範例，涵蓋各種常見圖表類型和應用場景：

1. 基本流程圖提示詞

請為以下軟體開發流程創建 Mermaid 流程圖：

1. 需求分析
2. 系統設計
3. 編碼開發
4. 測試驗證
5. 部署上線
6. 維護更新

請確保使用從上到下的方向，並為每個步驟使用適當的形狀。

2. 決策流程圖提示詞

請創建一個 Mermaid 流程圖，描述顧客購物決策過程：

1. 顧客瀏覽產品
2. 顧客決定是否購買
   - 如果決定購買，加入購物車
   - 如果不購買，繼續瀏覽或退出
3. 顧客結帳
4. 系統確認付款
   - 如果付款成功，處理訂單
   - 如果付款失敗，返回付款頁面
5. 商品發貨
6. 客戶收貨確認

請使用從左到右的方向，並使用菱形表示決策點。

3. 系統架構時序圖提示詞

請為以下微服務系統間的交互創建 Mermaid 時序圖：

1. 用戶通過前端界面發送請求
2. API 網關接收請求並驗證用戶身份
3. 如果身份驗證失敗，返回錯誤信息
4. 如果身份驗證成功，API 網關將請求轉發到對應的服務
5. 服務處理請求並查詢數據庫
6. 數據庫返回結果
7. 服務處理結果並回傳給 API 網關
8. API 網關將結果返回給前端
9. 前端顯示結果給用戶

請標明每個步驟的消息內容，並使用不同的箭頭表示同步和異步通信。

4. 專案甘特圖提示詞

請為以下網站開發項目創建 Mermaid 甘特圖：

1. 需求收集：2025-03-01 到 2025-03-10
2. 界面設計：2025-03-11 到 2025-03-20
3. 前端開發：2025-03-21 到 2025-04-10
4. 後端開發：2025-03-21 到 2025-04-15
5. 數據庫設計：2025-03-15 到 2025-03-25
6. 系統整合：2025-04-16 到 2025-04-25
7. 測試：2025-04-26 到 2025-05-10
8. 部署上線：2025-05-11 到 2025-05-15

請將任務分為「規劃」、「開發」和「部署」三個部分，並使用不同的顏色標記。

5. 數據比例圓餅圖提示詞

請使用 Mermaid 創建一個圓餅圖，顯示以下手機操作系統的市場份額：

- Android: 72.2%
- iOS: 26.8%
- 其他: 1.0%

請為圖表加上標題「2024 年全球手機操作系統市場份額」，並使用適當的顏色區分不同的部分。

6. 產品評估象限圖提示詞

請創建一個 Mermaid 象限圖，用於評估我們的產品線：

- X 軸：從「低成本」到「高成本」
- Y 軸：從「低利潤」到「高利潤」
- 象限 1（右上）：「明星產品」
- 象限 2（左上）：「現金牛」
- 象限 3（左下）：「瘦狗」
- 象限 4（右下）：「問題產品」

請添加以下產品到圖表中：
- 產品 A：成本 0.7，利潤 0.8
- 產品 B：成本 0.3，利潤 0.9
- 產品 C：成本 0.8，利潤 0.3
- 產品 D：成本 0.2，利潤 0.2
- 產品 E：成本 0.5，利潤 0.5

請為象限圖添加標題「產品投資組合分析」。

7. 公司發展時間線提示詞

請創建一個 Mermaid 時間線圖，顯示我們公司的發展歷程：

標題：「公司發展大事記」

分段「創業期」：
- 2010：公司成立
- 2011：首款產品發布
- 2012：獲得天使投資

分段「成長期」：
- 2013：完成 A 輪融資
- 2015：用戶數量突破 100 萬
- 2017：進入國際市場

分段「成熟期」：
- 2019：上市
- 2021：年營收突破 10 億
- 2023：收購競爭對手
- 2025：全球用戶突破 10 億

請使用適當的樣式和顏色區分不同的發展階段。

8. 系統狀態圖提示詞

請為一個電子商務訂單系統創建 Mermaid 狀態圖：

1. 初始狀態：新訂單
2. 訂單提交後變為「待處理」
3. 「待處理」狀態可以轉變為：
   - 「已確認」（當系統確認訂單）
   - 「已取消」（當用戶取消訂單）
4. 「已確認」狀態轉變為「出貨中」（當商品出庫）
5. 「出貨中」狀態轉變為「已送達」（當商品送達）
6. 「已送達」狀態可以轉變為：
   - 「已完成」（當用戶確認收貨）
   - 「退貨中」（當用戶申請退貨）
7. 「退貨中」狀態轉變為「已退款」（當退貨完成）
8. 「已完成」和「已退款」是最終狀態

請使用適當的箭頭和標籤表示狀態轉換的條件。

9. 數據比較 XY 圖表提示詞

請創建一個 Mermaid XY 圖表，比較過去 6 個月的收入和支出：

標題：「2024 財務概況」

X 軸：1 月、2 月、3 月、4 月、5 月、6 月
Y 軸：「金額 (萬元)」 0 --> 50

收入數據（柱狀圖）：[32, 35, 30, 38, 42, 45]
支出數據（折線圖）：[28, 30, 33, 35, 34, 36]

請確保使用不同的顏色區分收入和支出，並添加適當的標題和軸標籤。

10. 網絡拓撲圖提示詞

請創建一個 Mermaid 流程圖，描述以下網絡拓撲：

中心是一個「核心路由器」，連接到四個「邊緣交換機」（分別標記為 A、B、C、D）。

每個邊緣交換機連接到：
- 一個「部門伺服器」
- 兩個「工作站群組」

核心路由器還連接到「互聯網」和「數據中心」。

請使用以下形狀：
- 路由器：菱形
- 交換機：圓角矩形
- 伺服器：圓形
- 工作站群組：長方形
- 互聯網：雲形
- 數據中心：資料庫形狀

請使用從中心向外發散的方向，並為不同類型的設備使用不同的顏色。

這些提詞範例涵蓋了各種 Mermaid 圖表類型和應用場景，可以根據實際需求進行調整和組合。使用這些提詞時，確保提供足夠的細節和特定要求，以獲得最符合你需求的圖表。