Mermaid 综合实战
# Mermaid 综合实战
# 场景设定
你要从零搭建一个个人技术博客系统。这套系统需要：
- 一个自建站点（VuePress），部署在 GitHub Pages 上
- 文章通过 Markdown 编写，Git 管理版本
- 读者可以评论、搜索、订阅
- 你一个人完成全部工作
下面用 Mermaid 的 5 种图表 把这个项目讲清楚。
# 图一：系统架构图（C4 + Flowchart）
graph TB
subgraph 用户侧
A[读者浏览器]
B[作者 VS Code]
end
subgraph GitHub生态
C[GitHub Pages]
D[GitHub仓库<br/>Markdown源码]
E[GitHub Actions<br/>自动构建部署]
end
subgraph 第三方服务
F[Giscus 评论]
G[Algolia 搜索]
H[Google Analytics]
end
A --> C
B -->|git push| D
D -->|触发| E
E -->|部署| C
C --> F
C --> G
C --> H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 图二：用户访问全链路（时序图）
sequenceDiagram
autonumber
actor R as 读者
participant CDN as Cloudflare CDN
participant GH as GitHub Pages
participant GA as Google Analytics
participant Gus as Giscus(评论)
participant Alg as Algolia(搜索)
R->>CDN: 访问 blog.yangchong.com
CDN->>GH: 未命中缓存，回源
GH-->>CDN: 返回 HTML/CSS/JS
CDN-->>R: 页面渲染完成
Note over R,GA: 页面加载自动触发
R->>GA: 发送 PV 事件（gtag.js）
R->>Alg: 输入关键词搜索
Alg-->>R: 返回匹配结果
R->>Gus: 加载评论区
Gus-->>R: 渲染 GitHub Discussions 评论
opt 读者发表评论
R->>Gus: 提交评论
Gus->>Gus: 写入 GitHub Discussions
Gus-->>R: 评论发布成功
end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 图三：Markdown → 线上文章（状态图）
stateDiagram-v2
[*] --> 草稿创作
草稿创作 --> 本地预览 : npm run dev
state 本地预览 {
[*] --> 检查语法
检查语法 --> 调整排版
调整排版 --> 检查链接
检查链接 --> 检查语法 : 发现问题
检查链接 --> [*] : 确认无误
}
本地预览 --> Git提交 : git add + commit
Git提交 --> CI构建 : git push
state CI构建 {
[*] --> 安装依赖
安装依赖 --> markdownlint
markdownlint --> vuepress build
vuepress build --> [*]
}
CI构建 --> 自动部署 : GitHub Actions
自动部署 --> 线上可见
线上可见 --> 草稿创作 : 读者反馈/更新
线上可见 --> [*]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 图四：开发计划（甘特图）
gantt
title 博客系统搭建计划
dateFormat YYYY-MM-DD
section 基础搭建
初始化VuePress项目 :done, init, 2019-01-01, 1d
配置Vdoing主题 :done, theme, after init, 2d
配置侧边栏/导航 :done, nav, after theme, 2d
section 功能集成
Algolia搜索 :done, alg, after nav, 3d
Giscus评论系统 :done, giscus, after nav, 2d
Google Analytics :done, ga, after nav, 1d
SEO优化 :active, seo, after ga, 5d
section 自动化
GitHub Actions配置 :done, ci, after nav, 3d
自动部署验证 :done, deploy, after ci, 1d
定时死链检查 : deadlink, after deploy, 2d
section 内容生产
已有文章迁移 :done, migrate, after deploy, 5d
Git系列撰写 :active, git, 2019-02-01, 30d
开源协议系列撰写 : license, after git, 14d
Markdown系列撰写 : md, after license, 10d
section 发布
正式上线 :milestone, launch, after migrate, 0d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 图五：技术选型脑图
mindmap
root((博客技术栈))
静态站点
VuePress v1
Vdoing 主题
Markdown
版本管理
GitHub 仓库
Git 分支策略
CI/CD
GitHub Actions
自动构建
自动部署
托管
GitHub Pages
自定义域名
Cloudflare CDN
功能插件
评论：Giscus
搜索：Algolia
统计：GA4
数学公式：KaTeX
内容体系
Git 从入门精通
)开源协议((
前端开发
架构设计
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 复盘：为什么选择 Mermaid
对比一下用传统工具和 Mermaid 画上面 5 张图的工作量：
| Visio/draw.io | Mermaid | |
|---|---|---|
| 图一（架构图） | 拖拽 8 个框 + 8 条线，30 分钟 | 写 20 行文字，3 分钟 |
| 图二（时序图） | 手动对齐箭头和文字，45 分钟 | 写 30 行文字，5 分钟 |
| 图三（状态图） | 画圆角矩形 + 箭头 + 对齐，30 分钟 | 写 25 行文字，3 分钟 |
| 图四（甘特图） | 最痛苦，逐条画彩色条，60 分钟 | 写 25 行文字，3 分钟 |
| 图五（脑图） | 手动画层级框 + 连线，20 分钟 | 写 15 行带缩进的文字，2 分钟 |
| 修改其中一张 | 重新拖拽，10-30 分钟 | 改 2 行文字，10 秒 |
| 版本管理 | 二进制文件，无法 diff | 纯文本，和代码一起 Git |
| 总计 | ~3 小时 | ~15 分钟 |
关键差距不在画图速度，而在修改成本。 架构演进时，用 Visio 改图就像用铅笔改墨水画——越改越脏。用 Mermaid 就像用代码重构——改一行，全局生效。
# 全文总结：Mermaid 八篇总览
| 篇 | 内容 | 核心图表 |
|---|---|---|
| 01 | 基础入门 | 流程图基础 |
| 02 | 流程图完全指南 | 11种节点 + 子图 + 样式 + 交互 |
| 03 | 时序图完全指南 | 参与者、消息、激活、循环、并发 |
| 04 | 类图与ER图 | 类定义、6种关系、实体关系 |
| 05 | 状态图与Git图 | 状态流转、复合状态、Git分支 |
| 06 | 甘特图与饼图 | 项目排期、数据占比 |
| 07 | 其他图表合集 | 脑图、时间线、旅程图、C4、桑基图 |
| 08 | 综合实战 | 5种图表讲一个项目 |
📌 记住一个原则：Mermaid 的核心价值不是"画得好看"，而是 "把图表纳入版本管理"。你的架构图、流程图和代码放在同一个 Git 仓库里，一起提交、一起审查、一起演化。这才是它真正的威力。
上次更新: 2026/06/07, 09:20:35
