如何使用 Mermaid 線上生成器
這款 Mermaid 流程圖線上生成器 讓您像寫程式碼一樣畫圖，無需拖曳，專注於邏輯本身。作為一款好用的 Mermaid 生成器網頁版，它支援即時預覽和高畫質匯出。
- 編輯程式碼： 在左側（手機端為上方）編輯器中輸入 Mermaid 程式碼生成圖 語法文本。
- 即時預覽： Mermaid 線上生成圖 會自動渲染在右側。您也可以點選「重整預覽」強制更新。
- 匯出圖片： 滿意後，通過這個 Mermaid 圖表生成器 點選右上角的「SVG」或「PNG」按鈕下載高畫質圖表。
語法速查
1. 流程圖 (Flowchart)
graph TD
A[開始] --> B{判斷}
B -- 是 --> C[執行操作]
B -- 否 --> D[結束]
C --> D
說明：graph TD 表示從上到下；[]
表示矩形，{} 表示菱形。
2. 時序圖 (SEQUENCE DIAGRAM)
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>Alice: I am good thanks!
Alice-)Bob: Have a nice day!
說明：->> 實線箭頭，-->> 虛線箭頭。
3. 甘特圖 (GANTT CHART)
gantt
title 專案開發計劃
section 需求
需求分析 :a1, 2024-01-01, 3d
section 開發
前端開發 :after a1, 5d
4. 類圖 (CLASS DIAGRAM)
classDiagram
Animal <|-- Duck
class Animal{
+int age
+String gender
}
class Duck{
+swim()
}
5. 狀態圖 (STATE DIAGRAM)
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
6. 實體關係圖 (ER DIAGRAM)
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
7. 使用者旅程 (USER JOURNEY)
journey
title 使用者購買流程
section 瀏覽
查找商品: 5: 使用者
查看詳情: 3: 使用者
section 購買
下單支付: 5: 使用者
8. 圓餅圖 (PIE CHART)
pie title 市場份額
"Chrome" : 65
"Safari" : 20
"Edge" : 10
9. 思維導圖 (MINDMAP)
mindmap
root((中心主題))
主要觀點1
子觀點
主要觀點2
10. 時間線 (TIMELINE)
timeline
title 歷史時間線
2020 : 5G商用
2023 : AI爆發
11. GIT圖 (GIT GRAPH)
gitGraph
commit
branch develop
checkout develop
commit
commit
12. C4 架構圖 (C4 DIAGRAM)
C4Context title C4 Context Diagram System(sys, "Internet Banking System", "Allows customers to view information.")
13. 需求圖 (REQUIREMENT DIAGRAM)
requirementDiagram
requirement test_req {
id: 1
text: the test requirement
risk: high
verifymethod: test
}
常見問題
1. 什麼是 MERMAID？
MERMAID 是一個基於 JAVASCRIPT 的圖表繪製工具，它允許您使用極簡的 MARKDOWN 風格文本來動態構建複雜的圖表和流程圖。它是 MERMAID 線上生成器 的核心引擎。
2. 匯出的圖片清晰度如何？
我們支援匯出為 SVG（向量圖）和 PNG（位圖）。SVG 可以無限放大不失真，非常適合插入文檔或列印；PNG 則適合在網頁分享。
3. 我的資料會上傳到伺服器嗎？
完全不會。 本工具是純客戶端工具，所有的渲染和圖片生成都在您的瀏覽器本地完成，沒有任何資料會被發送到我們的伺服器，請放心使用。
4. 為什麼圖表加載失敗？
通常是因為語法錯誤。請檢查您的程式碼是否符合 MERMAID 規範，尤其注意縮排、括號匹配和關鍵詞拼寫。您可以查看預覽區頂部的紅色錯誤提示進行修正。
5. 支援哪些類型的圖表？
支援流程圖 (FLOWCHART)、時序圖 (SEQUENCE)、類圖 (CLASS)、狀態圖 (STATE)、實體關係圖 (ER)、甘特圖 (GANTT)、圓餅圖 (PIE)、思維導圖 (MINDMAP) 等。
6. 可以自訂顏色和主題嗎？
可以。您可以通過編輯器上方的下拉選單選擇預設主題（如預設、森林、暗黑等）。進階使用者還可以通過
%%{init: { 'theme': 'base', 'themeVariables': { ... } } }%% 指令自訂具體顏色。
7. 它是免費的嗎？
是的，作為一款優質的 MERMAID 圖表生成器，本工具完全免費開放，不限使用次數，不限匯出數量。
8. 如何在 Word 或 PPT 中使用？
建議匯出為 PNG 圖片，然後直接插入到文檔中。如果需要最高解析度，可以匯出 SVG，最新版的 Office 也支援插入 SVG 格式。