Mermaid图表功能测试

Mermaid图表功能测试

本文档用于测试我们配置的Mermaid图表功能是否正常工作。

流程图测试

这是一个简单的流程图示例：

graph TD
    A[开始] --> B{是否支持Mermaid?}
    B -->|是| C[图表正常显示]
    B -->|否| D[需要检查配置]
    C --> E[测试成功]
    D --> F[重新配置]

序列图测试

这是一个序列图示例：

sequenceDiagram
    participant User
    participant Browser
    participant Hexo
    participant Blog

    User->>Browser: 访问博客页面
    Browser->>Hexo: 请求渲染文章
    Hexo->>Blog: 加载并渲染内容
    Note right of Hexo: 包含Mermaid图表
    Blog->>Browser: 返回渲染后的HTML
    Browser->>User: 显示含图表的页面

甘特图测试

这是一个甘特图示例：

gantt
    title 项目管理甘特图
    dateFormat YYYY-MM-DD
    section 第一阶段
        需求分析        :a1, 2026-01-01, 5d
        系统设计        :a2, after a1, 7d
    section 第二阶段
        开发实现        :b1, after a2, 14d
        测试验证        :b2, after b1, 7d
    section 第三阶段
        部署发布        :c1, after b2, 3d
        维护优化        :c2, after c1, 5d

饼图测试

这是一个饼图示例：

pie title 我的博客内容构成
    "技术文章" : 45
    "生活随笔" : 20
    "读书笔记" : 15
    "编程项目" : 10
    "其他内容" : 10

测试结果记录

如果您的网页上能够看到这些图表正常渲染，说明mermaid配置成功！

常见问题：

1. 图表不显示：检查浏览器控制台是否有JavaScript错误
2. 主题样式不美观：可以在_config.yml中调整mermaid的主题设置
3. 图表功能不全：可能需要更新mermaid的版本或安装其他相关插件

配置说明：

我们使用了以下配置：

• 插件：hexo-filter-mermaid-diagrams
• mermaid版本：10.6.1
• 主题：default（可以调整为forest、dark等）
• 支持流程图、序列图、甘特图、饼图等

---

测试页面创建完成 - 2026.01.07

对比：ASCII图表 vs Mermaid图表

为了让您看到改进效果，这里提供一个对比：

ASCII版本（之前的格式 - 静态文本）

    ┌─────────────┐
    │   开始      │
    └──────┬──────┘
           │
           ▼
    ┌─────────────┐
    │   判断      │
    └──────┬──────┘
           │
           ▼
    ┌─────────────┐
    │   结束      │
    └─────────────┘

Mermaid版本（现在的格式 - 可交互图表）

graph TD
    A[开始] --> B[判断条件]
    B -->|条件成立| C[执行操作A]
    B -->|条件不成立| D[执行操作B]
    C --> E[结束]
    D --> E

如您所见，mermaid图表具有更好的视觉效果、可交互性，并且能够自动适应不同屏幕尺寸。