778 字
4 分钟
Mermaid 图表
Mermaid 图表支持
1. 流程图(Flowchart / Graph)
graph TD
A[开始] --> B{条件}
B -->|是| C[处理A]
B -->|否| D[处理B]
C --> E[结束]
D --> E
代码示例:
```mermaidgraph TD A[开始] --> B{条件} B -->|是| C[处理A] B -->|否| D[处理B] C --> E[结束] D --> E```2. 时序图(Sequence Diagram)
sequenceDiagram
participant 用户 as 用户
participant 系统 as 系统
用户->>系统: 登录请求
系统-->>用户: 登录成功
代码示例:
```mermaidsequenceDiagram participant 用户 as 用户 participant 系统 as 系统 用户->>系统: 登录请求 系统-->>用户: 登录成功```3. 甘特图(Gantt Chart)
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 开发
需求分析 :done, des1, 2024-01-01, 7d
设计阶段 :active, des2, after des1, 5d
编码实现 : des3, after des2, 10d
代码示例:
```mermaidgantt title 项目计划 dateFormat YYYY-MM-DD section 开发 需求分析 :done, des1, 2024-01-01, 7d 设计阶段 :active, des2, after des1, 5d 编码实现 : des3, after des2, 10d```4. 类图(Class Diagram)
classDiagram
class 动物 {
名称
年龄
吃()
}
class 狗 {
品种
汪汪叫()
}
动物 <|-- 狗
代码示例:
```mermaidclassDiagram class 动物 { 名称 年龄 吃() } class 狗 { 品种 汪汪叫() } 动物 <|-- 狗```5. 状态图(State Diagram)
stateDiagram
[*] --> 未登录
未登录 --> 已登录: 登录
已登录 --> 未登录: 注销
已登录 --> 已登录: 操作
代码示例:
```mermaidstateDiagram [*] --> 未登录 未登录 --> 已登录: 登录 已登录 --> 未登录: 注销 已登录 --> 已登录: 操作```6. 实体关系图(ER Diagram)
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
代码示例:
```mermaiderDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses```7. 用户旅程图(User Journey Diagram)
journey
title 在线购物旅程
section 发现阶段
访问首页: 5: 用户
浏览商品: 4: 用户
section 购买阶段
加入购物车: 5: 用户
完成支付: 4: 用户, 支付系统
代码示例:
```mermaidjourney title 在线购物旅程 section 发现阶段 访问首页: 5: 用户 浏览商品: 4: 用户 section 购买阶段 加入购物车: 5: 用户 完成支付: 4: 用户, 支付系统```8. Git 图(Git Graph)
gitGraph
commit
branch feature
commit
commit
checkout main
merge feature
代码示例:
```mermaidgitGraph commit branch feature commit commit checkout main merge feature```9. 饼图(Pie Chart)
pie
title 饼图示例
"A" : 30
"B" : 20
"C" : 50
代码示例:
```mermaidpie title 饼图示例 "A" : 30 "B" : 20 "C" : 50```10. C4 模型图(C4 Diagram)
C4Component
title Component diagram for Internet Banking System
Container_Boundary(web, "Web Application") {
Component(web_app, "Web App", "React", "Provides UI")
}
代码示例:
```mermaidC4Component title Component diagram for Internet Banking System Container_Boundary(web, "Web Application") { Component(web_app, "Web App", "React", "Provides UI") }```11. 思维导图(Mindmap)
mindmap
root((项目))
需求分析
设计
编码
测试
部署
代码示例:
```mermaidmindmap root((项目)) 需求分析 设计 编码 测试 部署```12. XY 图(XY Chart)
xychart-beta
title "月度销售"
x-axis [Jan, Feb, Mar]
y-axis "销售额" 0 --> 10000
bar [5000, 6000, 7500]
line [5000, 6000, 7500]
代码示例:
```mermaidxychart-beta title "月度销售" x-axis [Jan, Feb, Mar] y-axis "销售额" 0 --> 10000 bar [5000, 6000, 7500] line [5000, 6000, 7500]```13. 时间线(Timeline)
timeline
title 时间线示例
2023-01-01 : 事件1
2023-02-01 : 事件2
2023-03-01 : 事件3
代码示例:
```mermaidtimeline title 时间线示例 2023-01-01 : 事件1 2023-02-01 : 事件2 2023-03-01 : 事件3```