本教程将系统介绍如何使用 Mermaid 在 Markdown 中绘制各种专业图表。Mermaid 采用类似代码的文本语法，易于编写、修改和版本控制，是技术文档撰写的得力工具。
提示：你可以在 在线markdown编辑器 上实时编辑和预览以下所有示例。
这类图表主要用于展示流程、结构和交互关系。
最常用的图表类型，用于展示步骤、判断和流程走向。
核心语法：
TD（从上到下）、LR（从左到右）[矩形]、(圆角矩形)、{菱形}、((圆形))-->（带箭头）、---（无箭头）示例：
```mermaid
graph TD
A[开始] --> B{登录验证}
B -- 成功 --> C[进入主页面]
B -- 失败 --> D[显示错误提示]
D --> A
C --> E[结束]
```展示对象之间的消息交互和时间顺序，常用于描述系统内部通信。
核心语法：
participant：定义参与者->>：实线箭头（同步消息）-->>：虚线箭头（返回消息）activate/deactivate：激活生命线示例：
```mermaid
sequenceDiagram
participant 用户
participant 前端
participant 后端API
participant 数据库
用户->>前端: 点击登录按钮
前端->>后端API: POST /login
后端API->>数据库: 查询用户信息
数据库-->>后端API: 返回用户数据
后端API-->>前端: 返回登录令牌
前端-->>用户: 跳转到首页
```用于项目管理，直观展示任务的时间线、持续时间和进度。
核心语法：
dateFormat：设置日期格式section：定义任务分组done（已完成）、active（进行中）、crit（关键路径）示例：
```mermaid
gantt
title 电商项目上线计划
dateFormat YYYY-MM-DD
section 需求阶段
需求调研 :done, a1, 2025-01-01, 7d
需求评审 :active, a2, 2025-01-08, 3d
原型设计 :a3, 2025-01-11, 5d
section 开发阶段
前端开发 :a4, 2025-01-16, 14d
后端开发 :a5, 2025-01-16, 14d
接口联调 :a6, 2025-01-30, 5d
section 测试阶段
功能测试 :a7, 2025-02-04, 5d
部署上线 :milestone, a8, 2025-02-09, 1d
```用于面向对象设计，展示类的结构、属性和方法，以及类之间的关系。
核心语法：
class：定义类+（公有）、-（私有）、#（受保护）<|--（继承）、*--（组合）、o--（聚合）示例：
```mermaid
classDiagram
class 动物 {
-String 名称
-int 年龄
+吃() void
+睡() void
}
class 鸟类 {
+String 羽毛颜色
+飞() void
}
class 企鹅 {
+String 栖息地
+游泳() void
}
class 狗 {
+String 品种
+吠() void
}
动物 <|-- 鸟类 : 继承
动物 <|-- 狗 : 继承
鸟类 <|-- 企鹅 : 继承
```描述一个实体在其生命周期内可能经历的所有状态及状态转换。
核心语法：
[*]：初始或结束状态-->：状态转换示例：
```mermaid
stateDiagram-v2
[*] --> 草稿
草稿 --> 审核中 : 提交审核
审核中 --> 已批准 : 审核通过
审核中 --> 草稿 : 审核驳回
已批准 --> 已发布 : 发布
已批准 --> 已归档 : 归档
已发布 --> 已归档 : 归档
已归档 --> [*]
state 审核中 {
[*] --> 初审
初审 --> 终审
终审 --> [*]
}
```用于数据库设计，展示实体、属性及其关系。
核心语法：
erDiagram：声明实体关系图||--||（一对一）、||--o{（一对多）、}o--o{（多对多）示例：
```mermaid
erDiagram
用户 ||--o{ 订单 : 拥有
订单 ||--|{ 订单明细 : 包含
商品 ||--o{ 订单明细 : 属于
用户 {
int 用户ID PK
string 用户名
string 邮箱
string 手机号
}
订单 {
int 订单ID PK
int 用户ID FK
datetime 下单时间
decimal 总金额
string 状态
}
商品 {
int 商品ID PK
string 商品名称
decimal 价格
int 库存
}
订单明细 {
int 明细ID PK
int 订单ID FK
int 商品ID FK
int 数量
decimal 单价
}
```描述用户在使用产品过程中经历的步骤、情绪变化和体验。
核心语法：
journey：声明用户旅程图section：定义任务阶段示例：
```mermaid
journey
title 网上购物体验
section 搜索商品
打开应用: 3: 用户
搜索关键词: 4: 用户
浏览结果列表: 4: 用户
section 下单支付
查看商品详情: 5: 用户
加入购物车: 4: 用户
填写收货信息: 2: 用户
选择支付方式: 3: 用户
完成支付: 5: 系统, 用户
section 售后服务
查看物流: 3: 用户
确认收货: 4: 用户
评价商品: 5: 用户
```这类图表主要用于数据的可视化分析和展示。
用于展示数据的比例分布，直观显示各部分占比。
核心语法：
pie：声明饼图"标签" : 数值：定义数据项示例：
```mermaid
pie
title 2025年Q1营收分布
"产品A" : 45
"产品B" : 25
"产品C" : 18
"产品D" : 12
```将数据点分布在四个象限中，用于策略分析、优先级排序等场景。
核心语法：
quadrantChart：声明象限图x-axis：X轴标签y-axis：Y轴标签标题: 0, 0（表示在四个象限中的位置，中心为0,0）示例：
```mermaid
quadrantChart
title 任务优先级分析
x-axis 不紧急 --> 紧急
y-axis 不重要 --> 重要
quadrant-1 重要且紧急
quadrant-2 重要但不紧急
quadrant-3 紧急但不重要
quadrant-4 不紧急不重要
项目危机: [0.9, 0.8]
长期规划: [0.2, 0.9]
日常邮件: [0.8, 0.1]
无意义会议: [0.2, 0.1]
产品发布: [0.9, 0.7]
团队建设: [0.3, 0.8]
```用于系统需求工程，展示需求、测试用例及其关系。
核心语法：
requirementDiagram：声明需求图requirement：定义需求element：定义测试用例或系统元素contains、satisfies、verifies：关系类型示例：
```mermaid
requirementDiagram
requirement 用户登录需求 {
id: REQ-001
text: 系统应支持用户通过用户名和密码登录
risk: 高
verifymethod: 测试
}
requirement 数据安全需求 {
id: REQ-002
text: 用户密码应加密存储
risk: 高
verifymethod: 审查
}
element 登录测试用例 {
type: testcase
text: 验证正确凭据能够成功登录
}
element 加密模块 {
type: implementation
text: 密码加密组件
}
用户登录需求 -verifies-> 登录测试用例
数据安全需求 -satisfies-> 加密模块
```这类图表用于更专业的领域，如软件架构、版本控制等。
可视化Git仓库的分支、提交和合并历史。
核心语法：
gitGraph：声明Git图commit：提交节点branch：创建分支checkout：切换分支merge：合并分支示例：
```mermaid
gitGraph
commit id: "初始提交"
commit id: "添加基础结构"
branch develop
checkout develop
commit id: "开发功能A"
commit id: "开发功能B"
branch feature/login
checkout feature/login
commit id: "实现登录界面"
commit id: "实现登录逻辑"
checkout develop
merge feature/login tag: "v1.0-alpha"
checkout main
merge develop tag: "v1.0-release"
commit id: "修复紧急Bug"
```用于软件架构可视化，展示从系统到代码的四个层次。
核心语法：
C4Context：上下文图（系统边界）C4Container：容器图（应用/服务）C4Component：组件图（模块/组件）Person：外部用户或系统System：软件系统Container：容器（应用程序、数据库等）Component：组件示例：
```mermaid
C4Context
title 在线购物系统上下文图
Person(顾客, "顾客", "使用系统的消费者")
System(商城系统, "在线商城系统", "提供商品浏览、下单、支付功能")
System_Ext(支付网关, "支付网关", "第三方支付服务")
System_Ext(物流系统, "物流系统", "配送管理")
Rel(顾客, 商城系统, "浏览、购买商品", "HTTPS")
Rel(商城系统, 支付网关, "调用支付接口", "API")
Rel(商城系统, 物流系统, "通知发货", "API")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```以树状结构组织思路、概念和想法，帮助梳理逻辑。
核心语法：
mindmap：声明思维导图root：根节点)表示圆形节点、(表示方形节点示例：
```mermaid
mindmap
root((项目规划))
需求分析
用户访谈
竞品调研
需求文档
技术选型
前端框架
React
Vue
)后端框架(
Spring Boot
Node.js
数据库
MySQL
MongoDB
开发计划
任务分解
时间估算
人员分配
测试部署
单元测试
集成测试
上线运维
```按时间顺序展示事件、里程碑或发展历程。
核心语法：
timeline：声明时间线title：标题section：时间段或阶段示例：
```mermaid
timeline
title 互联网发展历程
section 早期阶段
1969年 : ARPANET诞生
1971年 : 第一封电子邮件
1983年 : TCP/IP协议成为标准
section Web 1.0
1991年 : 万维网向公众开放
1994年 : 网景浏览器发布
1998年 : Google公司成立
section Web 2.0
2004年 : Facebook上线
2005年 : YouTube创建
2006年 : Twitter发布
section 移动互联网
2007年 : iPhone发布
2008年 : Android系统问世
2010年 : 微信诞生
```展示流量、能量、资金等资源的流向与分配，宽度代表流量大小。
核心语法：
sankey-beta：声明桑基图源 --> 目标 : 流量值示例：
```mermaid
sankey-beta
%% 定义节点
总预算
研发
市场
运营
行政
产品开发
技术开发
广告投放
公关活动
日常运营
人力资源
%% 定义流量
总预算 --> 研发 : 40
总预算 --> 市场 : 25
总预算 --> 运营 : 20
总预算 --> 行政 : 15
研发 --> 产品开发 : 22
研发 --> 技术开发 : 18
市场 --> 广告投放 : 15
市场 --> 公关活动 : 10
运营 --> 日常运营 : 12
运营 --> 人力资源 : 8
```展示系统各模块的组成、接口和信号流向。
核心语法：
block：声明方块图block：定义模块-->、~>（信号流）示例：
```mermaid
block
title 智能家居系统架构
block:传感器层
温湿度传感器
光照传感器
人体传感器
end
block:网关层
Zigbee网关
WiFi网关
end
block:控制层
智能路由器
场景引擎
end
block:应用层
手机App
语音助手
智能面板
end
温湿度传感器 --> Zigbee网关
光照传感器 --> Zigbee网关
人体传感器 --> Zigbee网关
Zigbee网关 --> 智能路由器
WiFi网关 --> 智能路由器
智能路由器 --> 场景引擎
场景引擎 --> 手机App
场景引擎 --> 语音助手
场景引擎 --> 智能面板
```专门用于Apache ZooKeeper服务的可视化，展示集群的节点结构。
注意：此功能目前为实验性，可能在某些编辑器或平台中不支持，语法也可能在后续版本中变化。
核心语法：
zookeeper：声明ZooKeeper图node：定义节点-->：连接关系示例：
```mermaid
zookeeper
title ZooKeeper集群结构
node "Leader" as leader
node "Follower 1" as follower1
node "Follower 2" as follower2
node "Observer" as observer
leader --> follower1
leader --> follower2
leader --> observer
```