Mermaid图表测试

这是一个测试Mermaid图表功能的博客文章。以下是各种类型的Mermaid图表示例。

流程图

  flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

复杂流程图

  flowchart TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示用户界面]
    B -->|否| D[跳转登录页面]
    D --> E[输入用户名密码]
    E --> F{验证成功?}
    F -->|是| C
    F -->|否| G[显示错误信息]
    G --> E
    C --> H[用户操作]
    H --> I[结束]

序列图

  sequenceDiagram
    participant A as 用户
    participant B as 前端
    participant C as 后端
    participant D as 数据库
    
    A->>B: 发送请求
    B->>C: 转发请求
    C->>D: 查询数据
    D-->>C: 返回结果
    C-->>B: 处理响应
    B-->>A: 显示结果

类图

  classDiagram
    class Animal {
        +name: string
        +age: int
        +eat()
        +sleep()
    }
    
    class Dog {
        +breed: string
        +bark()
    }
    
    class Cat {
        +color: string
        +meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat

状态图

  stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 处理成功
    处理中 --> 失败: 处理失败
    失败 --> 待处理: 重试
    已完成 --> [*]

饼图

  pie
    title 编程语言使用比例
    "JavaScript" : 45
    "Python" : 30
    "Java" : 15
    "Go" : 10

甘特图

  gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 前端开发
    需求分析           :done,    des1, 2024-01-01, 2024-01-05
    UI设计            :done,    des2, 2024-01-06, 2024-01-10
    前端开发          :active,  des3, 2024-01-11, 2024-01-20
    测试              :         des4, 2024-01-21, 2024-01-25
    
    section 后端开发
    数据库设计        :done,    des5, 2024-01-01, 2024-01-05
    API开发           :active,  des6, 2024-01-06, 2024-01-15
    集成测试          :         des7, 2024-01-16, 2024-01-20

Git图

  gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    branch feature
    checkout feature
    commit
    checkout main
    merge feature

ER图

  erDiagram
    USER {
        int id PK
        string name
        string email
        datetime created_at
    }
    
    POST {
        int id PK
        int user_id FK
        string title
        text content
        datetime created_at
    }
    
    COMMENT {
        int id PK
        int post_id FK
        int user_id FK
        text content
        datetime created_at
    }
    
    USER ||--o{ POST : creates
    POST ||--o{ COMMENT : has
    USER ||--o{ COMMENT : writes

思维导图

  mindmap
  root(( Hugo博客 ))
    布局系统
      单页模板
      列表模板
      部分模板
    内容管理
      文章
      页面
      分类
      标签
    主题开发
      SCSS样式
      JavaScript
      响应式设计
   部署方案
      GitHub Pages
      Netlify
      Vercel

用户旅程图

  journey
    title 用户购物旅程
    section 访问网站
      浏览首页: 5: 用户
      搜索商品: 4: 用户
    section 选择商品
      查看详情: 5: 用户
      比较价格: 3: 用户
      加入购物车: 5: 用户
    section 完成购买
      下单支付: 4: 用户
      等待收货: 3: 用户
      确认收货: 5: 用户

4种注释样式测试

提示: 这个博客现在支持Mermaid图表了！你可以使用标准的GitHub Flavored Markdown语法来创建各种类型的图表。

警告: 确保你的Mermaid语法是正确的，否则图表可能无法正常显示。

错误: 如果图表没有显示，请检查浏览器控制台是否有JavaScript错误。

注意: Mermaid图表是在客户端渲染的，需要JavaScript支持。

测试完成

如果以上所有图表都能正常显示，说明Mermaid集成已经成功完成！现在你可以在任何Markdown文章中使用 ```mermaid 代码块来创建图表了。