如何使用
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 风格文本来动态构建复杂的圖表和流程圖。
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 格式。