如何使用
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 格式。