这篇文章用于测试博客的 Mermaid 图表支持功能。
流程图 (Flowchart)
图表
graph TD
A[开始] --> B{判断条件}
B -->|是| C[执行操作A]
B -->|否| D[执行操作B]
C --> E[结束]
D --> E序列图 (Sequence Diagram)
图表
sequenceDiagram
participant 用户
participant 浏览器
participant 服务器
用户->>浏览器: 访问网站
浏览器->>服务器: 发送请求
服务器-->>浏览器: 返回数据
浏览器-->>用户: 展示页面甘特图 (Gantt Chart)
图表
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2024-01-01, 2024-01-05
UI设计 :done, des2, 2024-01-06, 2024-01-12
原型制作 :active, des3, 2024-01-13, 2024-01-20
section 开发阶段
前端开发 :dev1, 2024-01-21, 2024-02-10
后端开发 :dev2, 2024-01-25, 2024-02-15
测试阶段 :test, 2024-02-16, 2024-02-25状态图 (State Diagram)
图表
stateDiagram-v2
[*] --> 空闲
空闲 --> 运行: 开始
运行 --> 暂停: 暂停
暂停 --> 运行: 继续
运行 --> 完成: 结束
完成 --> [*]类图 (Class Diagram)
图表
classDiagram
class Animal {
+String name
+int age
+makeSound()
+move()
}
class Dog {
+String breed
+bark()
+wagTail()
}
class Cat {
+boolean indoor
+meow()
+purr()
}
Animal <|-- Dog
Animal <|-- Cat饼图 (Pie Chart)
图表
pie title 编程语言使用比例
"JavaScript" : 35
"Python" : 25
"Java" : 20
"Go" : 10
"其他" : 10ER图 (Entity Relationship Diagram)
图表
erDiagram
USER ||--o{ ORDER : places
USER {
int id
string name
string email
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int id
date order_date
int user_id
}
LINE-ITEM {
int id
int quantity
int product_id
int order_id
}
PRODUCT ||--o{ LINE-ITEM : "ordered in"
PRODUCT {
int id
string name
decimal price
}用户旅程图 (User Journey)
图表
journey
title 用户购买流程
section 发现产品
浏览商品: 5: 用户
比较价格: 3: 用户
阅读评价: 4: 用户
section 购买决策
添加到购物车: 5: 用户
查看购物车: 3: 用户
结算付款: 2: 用户
section 收货体验
等待发货: 2: 用户
收到商品: 5: 用户
使用体验: 5: 用户以上就是各种类型的 Mermaid 图表示例。每个图表都应该可以在"图表"和"源码"之间切换显示。
预览: