这篇文章用于测试博客的 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
    "其他" : 10

ER图 (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 图表示例。每个图表都应该可以在"图表"和"源码"之间切换显示。