测试Mermaid图表功能
Mermaid 图表测试
本文用于测试博客的 Mermaid 图表功能,包括不同类型的图表和主题适配。
1. 流程图 (Flowchart)
graph TD
A[开始] --> B{条件判断}
B -->|是| C[执行操作A]
B -->|否| D[执行操作B]
C --> E[结束]
D --> E
2. 序列图 (Sequence Diagram)
sequenceDiagram
participant A as 用户
participant B as 前端
participant C as 后端
participant D as 数据库
A->>B: 提交请求
B->>C: 发送API请求
C->>D: 查询数据
D-->>C: 返回结果
C-->>B: 响应数据
B-->>A: 显示结果
3. 甘特图 (Gantt Chart)
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :done, des1, 2025-01-01,2025-01-05
UI设计 :done, des2, 2025-01-06,2025-01-10
section 开发阶段
前端开发 :active, dev1, 2025-01-11,2025-01-25
后端开发 : dev2, 2025-01-15,2025-01-30
section 测试阶段
单元测试 : test1, 2025-01-26,2025-02-05
集成测试 : test2, 2025-02-01,2025-02-10
4. 类图 (Class Diagram)
classDiagram
class Animal {
+String name
+int age
+makeSound()
+move()
}
class Dog {
+String breed
+bark()
+wagTail()
}
class Cat {
+String color
+meow()
+purr()
}
Animal <|-- Dog
Animal <|-- Cat
5. 状态图 (State Diagram)
stateDiagram-v2
[*] --> 空闲
空闲 --> 工作中 : 开始工作
工作中 --> 暂停 : 暂停
暂停 --> 工作中 : 继续
工作中 --> 完成 : 工作完成
完成 --> [*]
6. 饼图 (Pie Chart)
pie title 技术栈使用占比
"JavaScript" : 35
"Python" : 25
"Java" : 20
"C#" : 15
"其他" : 5
使用标签语法测试
graph LR
A[标签语法] --> B[正常渲染]
B --> C[测试成功]
测试说明
- ✅ 支持 Markdown 代码块语法 (```mermaid)
- ✅ 支持 Hexo 标签语法 (
测试Mermaid图表功能
https://lshgame.com/2025/08/01/Test_Mermaid_Chart_Functionality/