Mermaid是一种基于文本语法生成图表的工具。通过编写简单的Mermaid代码，可以生成流程图、时序图、类图、状态图、ER图、甘特图、思维导图、架构图等多种图表。
与传统的拖拽式绘图工具不同，Mermaid主要通过代码描述图表中的节点、关系、时间顺序和数据结构。修改代码后，图表可以自动重新生成，因此特别适合技术文档、产品设计、项目管理、软件开发和知识整理等场景。
本文介绍Mermaid基本语法，并整理Mermaid编辑器支持渲染的图表类型、声明语法、代码示例和使用场景。如果希望直接在线编写和预览Mermaid代码，可以免费体验ProcessOn Mermaid在线编辑器。
Mermaid是一种使用文本语法生成图表的工具。例如，下面的代码可以生成一个简单的Mermaid流程图：
flowchart TD
A[开始] --> B[输入信息]
B --> C{是否完成}
C -->|是| D[结束]
C -->|否| B
渲染效果如下：
其中：flowchart TD 用于声明创建一个从上到下排列的流程图。
Mermaid的运行逻辑可以概括为：
编写Mermaid代码 → 解析代码 → 渲染图表 → 修改代码 → 图表实时更新
因此，学习Mermaid的关键之一，就是了解不同图表对应的声明语法。
不同类型的图表使用不同的 Mermaid 语法，目前常见的 Mermaid 图形包括：
| 图表类型 | Mermaid声明语法 | 常见用途 |
| 流程图 | flowchart | 业务流程、算法、工作流程 |
| 时序图 | sequenceDiagram | 系统交互、API调用 |
| 类图 | classDiagram | 软件结构、面向对象建模 |
| 状态图 | stateDiagram-v2 | 状态转换、状态机 |
| ER图 | erDiagram | 数据库实体关系 |
| 甘特图 | gantt | 项目计划、任务进度 |
| 用户旅程图 | journey | 用户体验、客户旅程 |
| 思维导图 | mindmap | 知识整理、头脑风暴 |
| 时间轴 | timeline | 时间线、历史事件 |
| 饼图 | pie | 比例、构成分析 |
| 象限图 | quadrantChart | 分类、优先级、定位分析 |
| Git图 | gitGraph | Git分支、提交、合并 |
| 桑基图 | sankey-beta | 数据、资源、流量流向 |
| XY图 | xychart-beta | 数据趋势、数值比较 |
| 雷达图 | radar | 多维指标比较 |
| C4图 | C4Context 等 | 软件架构建模 |
| 架构图 | architecture-beta | 系统、服务和资源架构 |
| 看板图 | kanban | 任务、工作状态管理 |
| 框图 | block-beta | 模块、结构和系统关系 |
| 数据包图 | packet-beta | 网络数据包结构 |
| 需求图 | requirementDiagram | 需求分析和需求关系 |
不同Mermaid编辑器版本对图表的语法和功能支持可能有所变化，实际使用时应以编辑器支持的语法为准。
基础语法
Mermaid 使用 flowchart 声明创建流程图。最简单的写法：
flowchart TD
A[开始] --> B[处理]
B --> C[结束]
渲染效果
其中：
Mermaid 流程图还可以使用 LR（从左到右）、RL（从右到左）、BT（从下而上） 等方向设置。例如：
flowchart LR
A[开始] --> B[处理] --> C[结束]
表示流程图从左到右排列。
常用语法
| 语法 | 图形 | 意义 |
| (text) | 圆角矩形 | 表示流程的开始、结束或一般操作 |
| [text] | 矩形 | 表示具体步骤、任务或处理过程 |
| {text} | 菱形 | 表示判断、条件分支 |
| ((text)) | 圆形 | 表示连接点或事件 |
| [[text]] | 双矩形 | 表示调用子流程、子模块 |
| [(text)] | 圆柱 | 表示数据库节点 |
| >text] | 不对称图形 | 表示输入/输出 |
| [/text/] | 平行四边形 | 表示输入或输出数据 |
| --> | 箭头 | 表示流程进行方向 |
| --- | 无箭头连线 | 表示关联关系 |
| -.-> | 虚线箭头 | 表示可选流程、引用关系 |
| ==> | 粗箭头 | 表示重点流程或强关联 |
Mermaid生成流程图详细语法请访问以下页面查看：https://www.processon.com/mermaid/flowchart
流程图适合用于业务流程、工作流程、算法流程、系统流程和决策流程等场景，免费体验Mermaid流程图在线编辑器。
基础语法
Mermaid 使用 sequenceDiagram 声明创建时序图。最简单的示例：
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| sequenceDiagram | 时序图 | 创建一个时序图 |
| A->B: message | 实线 | 表示同步消息调用或普通交互 |
| A-->B: message | 虚线 | 表示返回消息或弱关联交互 |
| A->>B: message | 实线箭头 | 表示异步消息调用 |
| A-->>B: message | 虚线箭头 | 表示异步响应或返回消息 |
| participant A | 参与者 | 定义交互中的对象、角色或系统 |
| actor A | 角色 | 表示用户、外部系统等主动参与者 |
| activate A | 激活框 | 表示对象开始处理请求 |
| deactivate A | 结束激活 | 表示对象完成当前处理 |
| loop text | 循环框 | 表示重复执行的交互过程 |
| alt text | 条件分支 | 表示不同条件下的交互路径 |
| opt text | 可选流程 | 表示可能执行的交互 |
| par text | 并行框 | 表示多个操作同时执行 |
Mermaid生成时序图详细语法请访问以下页面查看：https://www.processon.com/mermaid/sequence-diagram
时序图适合描述用户与系统、系统与系统、服务与服务之间按照时间顺序发生的交互，免费体验Mermaid时序图在线编辑器。
基础语法
Mermaid 使用 classDiagram 声明创建类图。
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| classDiagram | 类图 | 创建一个类图 |
| class ClassName | 类 | 定义一个类对象 |
| ClassName : attribute | 属性 | 表示类中的成员变量 |
| ClassName : method() | 方法 | 定义类方法 |
| <|-- | 空心三角+实线 | 表示继承关系 |
| <|.. | 空心三角+虚线 | 表示实现关系 |
| *-- | 实心菱形+实线 | 表示组合关系 |
| o-- | 空心菱形+实线 | 表示聚合关系 |
| --> | 实线箭头 | 表示关联关系 |
| ..> | 虚线箭头 | 表示依赖关系 |
| -- | 实线 | 表示普通连接关系 |
| +attribute | 加号 | 表示公开的属性或方法 |
| -attribute | 减号 | 表示私有的属性或方法 |
类成员前面的 +、-、# 等符号可以表示不同的可见性。
Mermaid生成类图详细语法请访问以下页面查看：https://www.processon.com/mermaid/class-diagram
类图适合软件设计、面向对象建模、程序结构分析等场景，免费体验Mermaid类图在线编辑器。
基础语法
Mermaid 使用 stateDiagram-v2 声明创建状态图。
stateDiagram-v2
[*] --> 待支付
待支付 --> 已支付
已支付 --> 已发货
已发货 --> 已完成
已完成 --> [*]
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| stateDiagram-v2 | 状态图 | 创建一个状态图 |
| state StateName | 圆角矩形 | 定义基础状态节点 |
| state StateName : text | 带文本圆角矩形 | 为状态附加描述文本 |
| [*] | 实心小圆点或双层圆环 | 表示状态开始或结束 |
| [*] --> StateName | 起始箭头 | 表示进入第一个状态 |
| StateName --> [*] | 结束箭头 | 表示状态流程结束 |
| A --> B | 实线箭头 | 表示状态迁移 |
| A --> B: event | 含标注的实线箭头 | 含触发事件的状态迁移 |
| state StateName { ... } | 嵌套圆角矩形 | 定义复合状态 |
| state Node <<choice>> | 菱形 | 分支判断选择节点 |
| state Fork <<fork>> | 粗横向分隔线 | 表示并行流程开始 |
| state Join <<join>> | 粗横向分隔线 | 表示并行流程结束合并 |
Mermaid生成状态图详细语法请访问以下页面查看：https://www.processon.com/mermaid/state-diagram
状态图适合表示订单状态、工作流状态、用户状态、系统状态以及状态机等，免费体验Mermaid状态图在线编辑器。
基础语法
Mermaid 使用 erDiagram 声明创建实体关系图，也就是 ER 图。
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| erDiagram | ER图 | 创建一个ER图 |
| ENTITY { } | 矩形 | 定义一个实体 |
| type field | 属性标记 | 定义实体属性 |
| type field PK | 主键 | 定义实体主键 |
| type field FK | 外键 | 定义实体外键 |
| type field UK | 唯一密钥 | 定义唯一约束字段 |
| || | 一个 | 必须且仅一个 |
| o| | 零或一 | 零或一 |
| |{ | 一或多个 | 最少一个 |
| o{ | 零或一或多个 | 零个或多个 |
Mermaid生成ER图详细语法请访问以下页面查看：https://www.processon.com/mermaid/er-diagram
ER图可以表示实体、属性以及实体之间的关系，常用于数据库设计，免费体验Mermaid ER图在线编辑器。
基础语法
Mermaid 使用 mindmap 声明创建思维导图。
mindmap
root((Mermaid))
流程图
时序图
类图
甘特图
思维导图
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| mindmap | 思维导图 | 创建一个思维导图 |
| root[text] | 矩形 | 矩形根主题 |
| root(text) | 圆角矩形 | 圆角矩形根主题 |
| root((text)) | 圆形 | 圆形根主题 |
| root{{text}} | 六边形 | 六边形根主题 |
| root)text( | 气泡图 | 气泡根主题 |
| [text] | 矩形 | 矩形节点 |
| (text) | 圆角矩形 | 圆角矩形节点 |
| ((text)) | 圆形 | 圆形节点 |
| {{text}} | 六边形 | 六边形节点 |
| )text( | 气泡图 | 气泡节点 |
Mermaid生成思维导图详细语法请访问以下页面查看：https://www.processon.com/mermaid/mindmap
思维导图主要通过缩进表示层级关系，因此非常适合知识整理、头脑风暴、课程笔记和信息架构，免费体验Mermaid思维导图在线编辑器。
基础语法
Mermaid 使用 gantt 声明创建甘特图。
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 设计
需求分析 :a1, 2026-01-01, 3d
UI设计 :after a1, 2d
section 开发
前端开发 :2026-01-06, 4d
后端开发 :2026-01-07, 4d
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| gantt | 甘特图 | 创建一个甘特图 |
| title text | 标题 | 设置甘特图标题 |
| dateFormat text | 日期配置标识 | 定义时间轴日期解析格式 |
| section text | 分组色块标题栏 | 划分任务分组 |
| TaskName : id, startDate, endDate | 横向任务长条 | 定义任务的相关属性 |
| startDate | 横向任务长条 | 定义起始时间 |
| endDate | 横向任务长条 | 定义结束时间 |
| duration | 横向任务长条 | 定义任务持续时间 |
| id | 自定义 | 定义任务的编号 |
| after id | 横向任务长条 | 定义跟随前置任务开始的任务 |
| 16d, 2w | 横向任务长条 | 表示天或周 |
| milestone, date | 实心菱形 | 设置里程碑节点 |
Mermaid生成甘特图详细语法请访问以下页面查看：https://www.processon.com/mermaid/gantt
甘特图适合项目计划、任务安排、开发进度和项目管理，，免费体验Mermaid甘特图在线编辑器。
基础语法
Mermaid 使用 journey 声明创建用户旅程图。
journey
title 用户购买商品
section 浏览
搜索商品: 5: 用户
查看详情: 4: 用户
section 下单
加入购物车: 5: 用户
完成支付: 3: 用户
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| journey | 用户旅程图 | 创建一个用户旅程图 |
| title text | 标题 | 用户旅程图标题 |
| section text | 分段区块 | 划分流程阶段分组 |
| TaskName:num:Actor | 流程节点+满意度刻度轴 | 定义阶段内交互任务、满意度分值、参与角色 |
| num (1~5) | 满意度评分 | 1分最低，5分最佳 |
| Me, Cat | 角色 | 定义参与该任务的多个角色 |
Mermaid生成用户旅程图详细语法请访问以下页面查看：https://www.processon.com/mermaid/user-journey-diagram
用户旅程图适合分析客户从接触产品到完成目标过程中经历的不同步骤和体验，免费体验Mermaid用户旅程图在线编辑器。
基础语法
Mermaid 使用 timeline 声明创建时间轴。
timeline
title Mermaid发展历程
2019 : 项目发展
2020 : 功能扩展
2021 : 更多图表类型
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| timeline | 时间轴 | 创建一个时间轴 |
| title text | 标题 | 设置时间轴标题 |
| section text | 分段区块 | 划分时间阶段分组 |
| date : Event1 | 事件 | 定义时间点对应的事件 |
| : Event2 | 多事件 | 同一时间对应其他事件 |
| 空格 | 换行 | 对超长事件描述换行 |
Mermaid生成时间轴详细语法请访问以下页面查看：https://www.processon.com/mermaid/timeline
时间轴适合展示历史事件、项目发展、产品迭代和时间顺序信息，免费体验Mermaid时间轴在线编辑器。
基础语法
Mermaid 使用 quadrantChart 声明创建象限图。
quadrantChart
title 产品定位
x-axis 低价格 --> 高价格
y-axis 低质量 --> 高质量
quadrant-1 高端
quadrant-2 品质
quadrant-3 基础
quadrant-4 性价比
产品A: [0.8, 0.7]
产品B: [0.3, 0.8]
渲染效果
其中：
Mermaid生成象限图详细语法请访问以下页面查看：https://www.processon.com/mermaid/quadrant-chart
象限图适合产品定位、优先级分析、竞争分析和二维分类，免费体验Mermaid象限图在线编辑器。
基础语法
Mermaid 看板图用于按照任务状态组织工作项目，例如待处理、进行中和已完成。典型结构可以表示为：
kanban
Todo
任务A
任务B
Doing
任务C
Done
任务D
渲染效果
其中；
Mermaid生成看板图详细语法请访问以下页面查看：https://www.processon.com/mermaid/kanban
看板图适合项目管理、任务跟踪、研发流程和工作流管理，免费体验Mermaid看板图在线编辑器。
基础语法
需求图可以用于表示需求、功能和系统元素之间的关系，Mermaid 使用 requirementDiagram 声明创建需求图。
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| requirementDiagram | 需求图 | 创建一个需求图 |
| Requirement name { } | 需求 | 定义基础需求 |
| functionalRequirement name { } | 功能 | 定义功能需求 |
| interfaceRequirement name { } | 接口 | 定义接口需求 |
| performanceRequirement name { } | 性能 | 定义性能需求 |
| physicalRequirement name { } | 物理 | 定义物理需求 |
| element name {type: name docRef: name} | 元素 | 定义系统 / 组件 / 测试等实体元素 |
| X - satisfies -> Y | 虚线箭头 | 实体满足对应需求 |
| X - contains -> Y | 实线，起点有十字加号圆形端点 | 一个需求包含另一个需求 |
| X - derives -> Y | 虚线箭头 | 需求由另一需求衍生 |
| X - copies -> Y | 虚线箭头 | 需求复制另一需求 |
| X - traces -> Y | 虚线箭头 | 需求双向追溯关联 |
Mermaid生成需求图详细语法请访问以下页面查看：https://www.processon.com/mermaid/requirement-diagram
需求图适合产品需求分析、系统工程和需求追踪，免费体验Mermaid需求图在线编辑器。
基础语法
Mermaid 使用 pie 声明创建饼图。
pie showData
title 世界各大洲人口占比
"亚洲" : 59.5
"非洲" : 18.0
"欧洲" : 9.0
"北美洲" : 7.5
"南美洲" : 5.5
"大洋洲" : 0.5
渲染效果
其中：
Mermaid生成饼图详细语法请访问以下页面查看：https://www.processon.com/mermaid/pie-chart
饼图适合表示比例和构成关系，免费体验Mermaid饼图在线编辑器。
基础语法
桑基图主要用于表示不同节点之间的流量、资源、资金或数据流向，Mermaid 使用 sankey-beta 声明创建桑基图。
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
渲染效果
其中：
Mermaid生成桑基图详细语法请访问以下页面查看：https://www.processon.com/mermaid/sankey-diagram
桑基图是一种用于显示从一组数值到另一组数值流动的可视化图表，免费体验Mermaid桑基图在线编辑器。
基础语法
Mermaid 使用 xychart-beta 声明创建 XY 图。
xychart-beta
title "月度销售数据"
x-axis "月份"["1月", "2月", "3月", "4月", "5月", "6月"]
y-axis "销售额(万元)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| xychart-beta | XY坐标图 | 创建一个XY坐标图 |
| xychart-beta horizontal | 横向XY坐标图 | 创建一个横向XY坐标图 |
| title "name" | 标题 | 定义XY图标题 |
| x-axis "axisTitle" [a,b,c] | X轴 | 定义横轴类别和标题 |
| y-axis "axisTitle" min --> max | Y轴 | 定义纵轴范围和标题 |
| y-axis "axisTitle" | 仅带标题Y轴 | 仅设置纵轴名称，数值范围自动适配 |
| bar [num1, num2, num3] | 柱形图 | 定义柱状图数据序列 |
| line [num1, num2, num3] | 折线图 | 定义折线图数据序列 |
Mermaid生成xy图详细语法请访问以下页面查看：https://www.processon.com/mermaid/xy-chart
XY图适合展示数据变化、数值比较和简单的数据可视化，免费体验Mermaid XY图在线编辑器。
基础语法
雷达图适合比较多个对象在多个维度上的表现，例如能力评估、产品指标和方案比较。Mermaid 使用 radar-beta 声明创建雷达图。
radar-beta
title "能力评估雷达图"
axis a["沟通能力"], b["逻辑思维"], c["团队协作"], d["技术技能"]
curve A["张三"] {80, 90, 70, 85}
curve B["李四"] {60, 70, 90, 80}
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| radar-beta | 雷达图 | 创建一个雷达图 |
| title "name" | 标题 | 定义雷达图标题，紧跟在radar-beta之后 |
| title "name" | 标题 | 定义雷达图标题，放在radar-beta之前，且上下都需添加3条中划线 |
| axis id ["axisTitle"] | 维度轴 | 定义雷达图维度及名称 |
| curve id ["name"]{[values]} | 数据曲线 | 定义数据系列名称及各维度数值 |
| max value | 最大值 | 设置雷达图数值范围的最大值 |
| min value | 最小值 | 设置雷达图数值范围的最小值 |
Mermaid生成雷达图详细语法请访问以下页面查看：https://www.processon.com/mermaid/radar-chart
雷达图对于需要以圆形格式清晰简洁地表示数据的开发者、数据科学家和工程师特别有用，免费体验Mermaid雷达图在线编辑器。
基础语法
Mermaid 使用 gitGraph 声明创建 Git 图。
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
渲染效果
其中：
Mermaid生成Git图详细语法请访问以下页面查看：https://www.processon.com/mermaid/git-graph
Git 图适合表示 Git 提交、分支创建、分支切换和合并等版本控制过程，免费体验Mermaid Git图在线编辑器。
基础语法
Mermaid C4图用于软件架构建模，可以从不同层级描述软件系统、容器、组件以及它们之间的关系。
C4Context
title 业务系统C4图
Person(user, "用户", "系统使用者")
System(system, "业务系统", "核心业务系统")
Rel(user, system, "使用")
渲染效果
其中：
常用语法
| 语法 | 图形 | 意义 |
| C4Context | 系统上下文图 | 创建一个C4系统上下文图 |
| C4Container | 容器图 | 创建一个C4容器图 |
| C4Component | 组件图 | 创建一个C4组件图 |
| C4Dynamic | 动态交互图 | 创建一个C4动态交互图 |
| C4Deployment | 部署图 | 创建一个C4部署图 |
| title | 标题 | 设置C4图标题 |
| Person(alias, "label", "description") | 人 | 表示使用系统的用户或角色 |
| Person_Ext(alias, "label", "description") | 外部人 | 表示系统外部参与交互的人员或组织角色 |
| System(alias, "label", "description") | 系统节点 | 表示需要分析的软件系统 |
| System_Ext(alias, "label", "description") | 外部系统节点 | 表示系统依赖的第三方服务或外部软件系统 |
| System_Boundary(alias, "label") | 系统边界 | 表示系统范围边界 |
| Container(alias, "label", "technology") | 容器 | 表示系统内部可独立运行的软件单元 |
| Container_Boundary(alias, "label") | 容器边界 | 表示一个容器或服务的范围 |
Mermaid生成C4图详细语法请访问以下页面查看：https://www.processon.com/mermaid/c4-diagram
C4 图适合软件架构设计、系统分析和技术文档，免费体验Mermaid C4图在线编辑器。
基础语法
Mermaid 使用 architecture-beta 声明创建架构图。
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
渲染效果
其中：
Mermaid生成架构图详细语法请访问以下页面查看：https://www.processon.com/mermaid/architecture-diagram
架构图适合表示服务器、数据库、云服务、应用服务以及不同系统组件之间的关系，免费体验Mermaid架构图在线编辑器。
基础语法
框图主要通过模块和连接关系描述系统结构，Mermaid 使用 block-beta 声明创建框图。
block-beta
A space B
A["用户"] --> B["应用"]
B space C
B --> C["数据库"]
渲染效果
其中：
Mermaid生成框图详细语法请访问以下页面查看：https://www.processon.com/mermaid/block-diagram
框图适合系统模块、功能结构、技术架构和组件关系等场景，免费体验Mermaid框图在线编辑器。
基础语法
数据包图主要用于表示网络数据包或协议数据结构中的字段和长度，Mermaid 使用 packet-beta 声明创建数据包图。
packet-beta
0-7: "版本"
8-15: "类型"
16-31: "长度"
渲染效果
其中：
数据包图适合网络协议、数据包结构和技术规范文档，免费体验Mermaid数据包图在线编辑器。
不熟悉 Mermaid 语法并不意味着不能使用 Mermaid 生成图形，可以采用以下几种方式：
免费使用Mermaid模板
先选择与需求接近的模板，然后修改其中的节点、文字和关系。这种方式适合第一次使用 Mermaid 的用户。
AI生成Mermaid代码
可以直接用自然语言描述需要的图表，例如：
创建一个电商订单处理流程，包括用户下单、支付、库存检查、发货和订单完成。
AI 可以根据描述生成 Mermaid 代码，再根据实际需求修改。
使用AI检查和修复代码
如果 Mermaid 代码出现语法错误，可以让 AI 帮助定位问题并修改代码。
通过图像识别生成代码
对于已经存在的流程图、架构图或其他结构化图表，可以尝试通过图像识别生成 Mermaid 代码，再继续编辑。
Mermaid在线编辑器通常需要解决三个核心问题：代码编写、图表预览和结果导出。除此之外，模板和AI也可以降低Mermaid的使用门槛。
以ProcessOn Mermaid在线编辑器为例，可以在浏览器中直接：
因此，对于需要频繁创建Mermaid图形的用户来说，ProcessOn Mermaid在线编辑器可以将Mermaid代码编写、图形生成、二次编辑、导出分享集中在一个工作环境中。
从Mermaid 流程图、时序图、类图，到甘特图、思维导图、象限图、桑基图、Git图、C4图和架构图，都可以通过 Mermaid语法创建和编辑。
快来使用Mermaid在线编辑器，在线编写Mermaid 代码并生成图表吧。
Mermaid 语法难学吗？
Mermaid 基础语法相对简单，大多数图表只需要掌握图表声明、节点、连线和文本等基本写法。例如，sequenceDiagram 用于声明时序图，flowchart 用于声明流程图。不同图表类型的语法规则有所区别，复杂图表还需要进一步学习对应的参数和配置。
Mermaid 代码写错了为什么不能生成图？
Mermaid 对语法结构比较敏感。常见原因包括图表声明写错、节点或连线语法不完整、缩进或特殊字符处理不正确，以及使用了当前 Mermaid 版本不支持的语法。
Mermaid 支持中文吗？
支持。节点文本、标题、说明等位置通常可以直接使用中文，但需求图、桑基图、架构图不支持中文。
如果出现中文显示异常，通常需要进一步检查编辑器、字体或导出环境，而不一定是 Mermaid 语法本身的问题。
Mermaid和传统绘图软件有什么区别？
Mermaid主要通过文本代码描述图表，而传统绘图软件通常通过拖拽图形、连线和调整样式来制作图表。
Mermaid图表可以保存和复用吗？
可以。Mermaid图表的核心内容是文本代码，因此可以将代码保存到 Markdown、代码文件或其他支持Mermaid的文档中，需要时再次渲染。
这也是 Mermaid 与纯图片形式图表的一个重要区别：图片保存的是最终结果，而 Mermaid 代码同时保存了图表的结构信息。
Mermaid 和 Markdown 有什么关系？
Mermaid 经常与 Markdown 一起使用，但两者并不是同一种语法。
Markdown 主要用于编写结构化文本，而 Mermaid 用于通过代码生成图表。在支持 Mermaid 的 Markdown 编辑器中，可以将 Mermaid 代码嵌入 Markdown 文档，从而让图表与文字说明放在同一个文档中。
免费在线协同思维导图流程图
免费使用
树形图 
括号图 
思维笔记 
