如何使用
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 項目開發計劃
dateformat YYYY-MM-DD
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 風格文本來動態構建複雜的圖表和流程圖。
2. 導出的圖片清晰度如何？
我們支持導出為 SVG（矢量圖）和 PNG（位圖）。SVG 可以無限放大不失真，非常適合插入文檔或打印；PNG 則適合在網頁分享。
3. 我的數據會上傳到服務器嗎？
完全不會。 本工具是純客戶端工具，所有的渲染和圖片生成都在您的瀏覽器本地完成，沒有任何數據會被發送到我們的服務器，請放心使用。
4. 為什麼圖表加載失敗？
通常是因為語法錯誤。請檢查您的代碼是否符合 Mermaid 規範，尤其注意縮進、括號匹配和關鍵詞拼寫。您可以查看預覽區頂部的紅色錯誤提示進行修正。
5. 支持哪些類型的圖表？
支持流程圖(Flowchart)、時序圖(Sequence)、類圖(Class)、狀態圖(State)、實體關係圖(ER)、甘特圖(Gantt)、餅圖(Pie)、思維導圖(Mindmap)等。
6. 可以自定義顏色和主題嗎？
可以。您可以通過編輯器上方的下拉菜單選擇預設主題（如默認、森林、暗黑等）。高級用戶還可以通過
%%{init: { 'theme': 'base', 'themeVariables': { ... } } }%% 指令自定義具體顏色。
7. 它是免費的嗎？
是的，本工具完全免費開放，不限使用次數，不限導出數量。
8. 如何在 Word 或 PPT 中使用？
建議導出為 PNG 圖片，然後直接插入到文檔中。如果需要最高清晰度，可以導出 SVG，最新版的 Office 也支持插入 SVG 格式。