Mermaid 图表示例
• 1 分钟阅读 1 分钟 • 19 words 19 words
Mermaid 是一个强大的图表和可视化工具,可以让您使用文本创建图表。以下是一些示例。
流程图
graph TD
A[开始] --> B{需要决策?}
B -->|是| C[选择选项 A]
B -->|否| D[选择选项 B]
C --> E[执行任务]
D --> E
E --> F[结束]
时序图
sequenceDiagram
participant 用户
participant 浏览器
participant 服务器
participant 数据库
用户->>浏览器: 输入 URL
浏览器->>服务器: HTTP 请求
服务器->>数据库: 查询数据
数据库-->>服务器: 返回数据
服务器-->>浏览器: HTML 响应
浏览器-->>用户: 显示页面
甘特图
gantt
title 项目时间表
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :a1, 2025-01-01, 7d
设计方案 :a2, after a1, 10d
section 开发阶段
前端开发 :b1, after a2, 15d
后端开发 :b2, after a2, 15d
section 测试阶段
功能测试 :c1, after b1, 5d
性能测试 :c2, after b2, 5d
类图
classDiagram
class 动物 {
+String 名称
+int 年龄
+吃()
+睡觉()
}
class 狗 {
+String 品种
+叫()
}
class 猫 {
+String 颜色
+喵()
}
动物 <|-- 狗
动物 <|-- 猫
状态图
stateDiagram-v2
[*] --> 待机
待机 --> 运行: 启动
运行 --> 暂停: 暂停
暂停 --> 运行: 继续
运行 --> 停止: 停止
停止 --> [*]
饼图
pie title 编程语言使用占比
"JavaScript" : 35
"Python" : 25
"Java" : 20
"Go" : 10
"其他" : 10
实体关系图
erDiagram
用户 ||--o{ 订单 : 下单
用户 {
int 用户ID
string 用户名
string 邮箱
}
订单 ||--|{ 订单项 : 包含
订单 {
int 订单ID
date 下单日期
float 总金额
}
订单项 }o--|| 产品 : 引用
订单项 {
int 数量
float 单价
}
产品 {
int 产品ID
string 产品名
float 价格
}
用户旅程图
journey
title 用户购物体验
section 浏览
访问网站: 5: 用户
搜索产品: 4: 用户
section 购买
添加到购物车: 4: 用户
结账: 3: 用户
支付: 3: 用户
section 配送
等待发货: 2: 用户
收到产品: 5: 用户
评价: 4: 用户
Git 图
gitgraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
总结
Mermaid 提供了丰富的图表类型,可以帮助您可视化各种概念和流程。在 Markdown 中使用 Mermaid 代码块即可轻松创建这些图表。