测试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/
作者
SuHang
发布于
2025年8月1日
许可协议