Halo 博客 Mermaid 图表使用全指南：从入门到多类型图表实战
Halo 博客 Mermaid 图表使用全指南：从入门到多类型图表实战
摘要：在 Halo 博客中，借助“文本绘图”插件的支持，我们可以直接在 Markdown 文章中使用文本代码绘制高颜值、矢量的 Mermaid 图表。本文将为您详细介绍 Mermaid 的使用方法，并提供流程图、时序图、甘特图、类图、状态图、饼图、实体关系图（ER）、思维导图（Mindmap）及用户旅程图等全套图表实战示例，让您的博客文章更具可视化吸引力！
一、 为什么在 Halo 中使用 Mermaid？
在传统博客撰写中，展示架构图或流程图通常需要使用第三方工具绘图后导出 PNG/JPEG 图片上传。这种方式存在三大痛点： 1. 修改繁琐：修改图表需要重新绘图、导出、上传与替换。 2. 高清失真：高分屏下图片易模糊。 3. 无法搜索：图片内容无法被博客搜索索引。
Halo 的 Mermaid 文本绘图插件 完美解决了这些问题：
- 纯文本驱动：使用 Markdown 的 ```mermaid 语法写代码，随时修改即时渲染。
- SVG 矢量输出：任何缩放比例下都保持极致清晰。
- 与主题融合：支持跟随系统深色/浅色模式自适应切换。
二、 基础使用方法
在 Halo 博客的 Markdown 编辑器（如 Vditor）中，只需按如下格式编写代码块即可：
```mermaid
graph TD
A[开始] --> B(处理数据)
B --> C{是否成功?}
C -- 是 --> D[完成]
C -- 否 --> E[重试]
```
三、 各种类型的 Mermaid 图表实战示例
1. 流程图 (Flowchart)
流程图常用于描述算法逻辑、业务处理流程或部署链路。支持多种节点形状与子图（Subgraph）。
graph TB
%% 定义子图：客户端
subgraph Client ["客户端 / 前端"]
A[用户浏览器] -->|HTTP POST| B(Nginx 网关)
end
%% 定义子图：后端服务
subgraph Server ["Halo 后端集群"]
B -->|反向代理| C{权限校验}
C -- 通过 --> D[Halo Core 核心 API]
C -- 未通过 --> E[403 拒绝访问]
D -->|读写操作| F[(PostgreSQL 数据库)]
D -->|缓存清理| G[(Redis 缓存)]
end
%% 节点样式控制
style A fill:#e1f5fe,stroke:#0288d1,stroke-width:2px;
style F fill:#fff3e0,stroke:#f57c00,stroke-width:2px;
style G fill:#ffebee,stroke:#d32f2f,stroke-width:2px;
2. 时序图 / 顺序图 (Sequence Diagram)
时序图用于展示对象之间按照时间顺序交互的过程，非常适合说明 API 调用流程与通信协议。
sequenceDiagram
autonumber
actor User as 👤 用户
participant Browser as 🌐 浏览器
participant Server as ⚙️ Halo 服务端
participant DB as 🗄️ 数据库
User->>Browser: 输入用户名/密码点击登录
Browser->>Server: POST /login (密码已 RSA 加密)
activate Server
Server->>DB: 查询用户凭证与角色信息
activate DB
DB-->>Server: 返回 User Entity 数据
deactivate DB
alt 认证成功
Server-->>Browser: 200 OK (Set-Cookie: SESSION=xyz)
Browser-->>User: 登录成功，跳转至控制台
else 认证失败
Server-->>Browser: 401 Unauthorized (提示密码错误)
Browser-->>User: 弹窗提示“用户名或密码错误”
end
deactivate Server
3. 甘特图 (Gantt Chart)
甘特图常用于项目管理、进度规划与任务依赖展示。
gantt
dateFormat YYYY-MM-DD
title Halo 博客系统升级与迁移行程表
excludes weekends
section 准备阶段
需求分析与方案制定 :done, des1, 2026-08-01, 2026-08-03
环境搭建与数据库备份 :done, des2, 2026-08-03, 2026-08-04
section 插件与主题配置
安装 Mermaid 文本绘图插件 :active, des3, 2026-08-05, 3d
测试各种图表兼容性 : des4, after des3, 2d
section 内容迁移与上线
旧文章批量导入 :crit, active, des5, 2026-08-07, 3d
最终全链路验证与上线 : des6, after des5, 1d
4. 类图 (Class Diagram)
类图用于面向对象设计（OOD），说明类、属性、方法以及类与类之间的继承、关联与依赖关系。
classDiagram
class Content {
+String id
+String title
+Date createTime
+publish()
+delete()
}
class Post {
+String slug
+String markdownRaw
+String htmlContent
+renderHtml()
}
class SinglePage {
+String pageTemplate
}
class User {
+String username
+String email
+Boolean disabled
+verifyPassword(String pwd)
}
Content <|-- Post : 继承
Content <|-- SinglePage : 继承
User "1" -- "*" Post : 发布与撰写
5. 状态图 (State Diagram)
状态图非常适合展示有限状态机（FSM），如文章生命周期、订单状态变迁等。
stateDiagram-v2
[*] --> Draft : 新增文章草稿
state Draft {
[*] --> Editing : 编辑内容
Editing --> AutoSaved : 自动保存
AutoSaved --> Editing
}
Draft --> Published : 点击“发布”
Published --> Editing : 重新编辑
Published --> Archived : 归档
Archived --> Published : 重新激活
Draft --> Deleted : 移入回收站
Published --> Deleted : 移入回收站
Deleted --> [*] : 彻底摧毁/删除
6. 饼图 (Pie Chart)
饼图适合直观展示数据的占比分布。
pie title 2026 年技术博客文章类型阅读占比
"大模型与 Multi-Agent" : 45
"后端架构与 云原生" : 25
"前端与 UI/UX 设计" : 15
"数据库与性能调优" : 10
"随笔与经验分享" : 5
7. 实体关系图 (ER Diagram)
ER 图常用于数据库设计、表结构与外键基数（Cardinality）关系建模。
erDiagram
USERS ||--o{ POSTS : "authors"
POSTS }|--|{ CATEGORIES : "belongs to"
POSTS }|--|{ TAGS : "tagged with"
POSTS ||--o{ COMMENTS : "contains"
USERS {
string username PK
string email
string role
}
POSTS {
string id PK
string title
string slug
string author_id FK
datetime publish_time
}
COMMENTS {
string id PK
string post_id FK
string content
string author_name
}
8. 思维导图 (Mindmap)
思维导图能够清晰梳理知识体系与分类树形结构。
mindmap
root((Halo 博客生态))
核心功能
文章管理
Markdown 原生支持
版本快照
分类与标签
自定义页面
插件扩展
文本绘图 (Mermaid)
全文检索 (Lucene)
评论组件
RSS / Sitemap
主题渲染
Chirpy 主题
Cosolar 主题
Earth 主题
9. 用户旅程图 (User Journey Map)
用户旅程图用于说明用户在使用产品时的心理体验与步骤满意度。
journey
title 读者在博客浏览技术文章的体验旅程
section 寻找文章
搜索引擎检索关键字: 5: 读者
点击搜索结果进入博客: 4: 读者
section 阅读体验
页面加载速度与美观度: 5: 读者
查看 Mermaid 架构图表: 5: 读者
阅读文章核心技术点: 4: 读者
section 互动与分享
在评论区留言交流: 4: 读者
复制链接分享给同事: 5: 读者
四、 进阶技巧与自定义配置
1. 改变图表主题风格
可以在 Mermaid 代码块顶部使用 %%{init: {'theme': 'dark'}}%% 自定义主题（支持 default, forest, dark, neutral）：
```mermaid
%%{init: {'theme': 'forest'}}%%
graph LR
A[Node A] --> B[Node B] --> C[Node C]
### 2. 节点自定义样式 (style 与 classDef)
可以使用 `classDef` 统一批量定义样式类：
```markdown
```mermaid
graph LR
classDef danger fill:#f8d7da,stroke:#721c24,color:#721c24;
classDef success fill:#d4edda,stroke:#155724,color:#155724;
A[正常节点] --> B[异常报错]:::danger
A --> C[运行成功]:::success
```
五、 总结
通过 Halo 的 文本绘图 (Mermaid) 插件，我们无需借助外部图片编辑工具，就能直接用文本优雅地创建专业级图表。这不仅极大地提升了撰文效率，也保证了前台界面的美观度与响应速度。
不妨在您的下一篇文章中试着用 Mermaid 绘制一张架构图吧！