Mermaid 图表测试

这是一个测试博客文章，用于验证 Hexo 是否能够正确显示 Mermaid 图表。

流程图测试

graph TD
    A[开始] --> B{是否支持Mermaid?}
    B -->|是| C[显示图表]
    B -->|否| D[显示代码块]
    C --> E[测试成功]
    D --> F[需要配置插件]
    F --> G[安装mermaid插件]
    G --> C

序列图测试

sequenceDiagram
    participant U as 用户
    participant H as Hexo
    participant M as Mermaid

    U->>H: 请求渲染博客
    H->>M: 解析mermaid代码
    M->>M: 生成SVG图表
    M->>H: 返回渲染结果
    H->>U: 显示完整页面

类图测试

classDiagram
    class BlogPost {
        +String title
        +Date date
        +String content
        +render()
        +publish()
    }

    class MermaidChart {
        +String type
        +String code
        +render()
    }

    class HexoEngine {
        +process()
        +generate()
    }

    BlogPost --> MermaidChart
    HexoEngine --> BlogPost

Git 分支图测试

gitgraph
    commit id: "初始提交"
    branch feature
    checkout feature
    commit id: "添加mermaid测试"
    commit id: "完善图表样式"
    checkout main
    commit id: "修复bug"
    merge feature
    commit id: "发布版本"

甘特图测试

gantt
    title Hexo Mermaid 集成项目
    dateFormat  YYYY-MM-DD
    section 开发阶段
    需求分析           :done,    des1, 2025-10-01, 2025-10-02
    环境搭建           :done,    des2, 2025-10-02, 2025-10-03
    插件配置           :active,  des3, 2025-10-03, 2025-10-04
    section 测试阶段
    单元测试           :         des4, 2025-10-04, 2025-10-05
    集成测试           :         des5, 2025-10-05, 2025-10-06
    section 部署阶段
    生产部署           :         des6, 2025-10-06, 2025-10-07

饼图测试

pie title Hexo 博客内容分布
    "技术文章" : 45
    "项目记录" : 25
    "学习笔记" : 20
    "生活随笔" : 10

状态图测试

stateDiagram-v2
    [*] --> 草稿
    草稿 --> 编辑中
    编辑中 --> 审核中
    审核中 --> 已发布
    审核中 --> 草稿
    已发布 --> 已归档
    已归档 --> [*]

用户旅程图测试

journey
    title 用户阅读博客体验
    section 发现
      打开博客网站: 5: 用户
      浏览文章列表: 4: 用户
    section 阅读
      点击感兴趣的文章: 5: 用户
      阅读文章内容: 5: 用户
      查看Mermaid图表: 5: 用户
    section 互动
      点赞文章: 4: 用户
      分享到社交媒体: 3: 用户
      留言评论: 4: 用户

总结

如果你能看到上面的各种图表正常显示，说明 Hexo 的 Mermaid 插件配置成功！这些图表类型涵盖了 Mermaid 的主要功能，可以满足大部分技术文档和博客的图表需求。

常见图表类型包括：

• 流程图 (Flowchart)
• 序列图 (Sequence Diagram)
• 类图 (Class Diagram)
• Git 图 (Git Graph)
• 甘特图 (Gantt Chart)
• 饼图 (Pie Chart)
• 状态图 (State Diagram)
• 用户旅程图 (User Journey)

如果图表没有正常显示，请检查：

1. 是否安装了 hexo-filter-mermaid-diagrams 插件
2. 主题是否支持 Mermaid
3. _config.yml 配置是否正确