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