Mermaid 甘特图与饼图
# Mermaid 甘特图与饼图
# 一、甘特图（Gantt Chart）
甘特图展示项目时间线和任务排期，是项目管理的核心工具。
# 1.1 基础语法
gantt
title 电商平台开发计划
dateFormat YYYY-MM-DD
section 基础建设
项目初始化 :done, a1, 2019-03-01, 7d
技术选型 :done, a2, after a1, 3d
section 核心功能
用户模块 :active, b1, 2019-03-15, 14d
商品模块 :b2, 2019-03-15, 14d
订单模块 :b3, after b1, 14d
section 测试上线
联调测试 :c1, 2019-04-20, 7d
灰度发布 :c2, after c1, 3d
正式上线 :milestone, c3, 2019-05-05, 0d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
任务状态标记：
| 标记 | 含义 |
|---|---|
done | 已完成（灰色） |
active | 进行中（蓝色） |
crit | 关键任务（红色） |
| 无标记 | 待开始 |
milestone | 里程碑（菱形标记） |
# 1.2 两种时间格式
dateFormat YYYY-MM-DD 日期格式
a1, 2019-03-01, 7d 指定起始日期 + 持续天数
after a1, 5d 在任务a1之后开始
until a2 直到任务a2完成时结束
2019-03-01, 2019-03-15 起始→终止日期
1
2
3
4
5
6
2
3
4
5
6
# 1.3 简化版（用周/天表示）
gantt
title Sprint 规划
dateFormat YYYY-MM-DD
axisFormat %m/%d
section Sprint 1
需求分析 :done, s1a, 2019-10-01, 3d
原型设计 :active, s1b, after s1a, 2d
开发 : s1c, after s1b, 10d
测试 : s1d, after s1c, 3d
section Sprint 2
Story 讨论 : s2a, after s1d, 2d
开发 : s2b, after s2a, 10d
发布 🎉 :milestone, s2m, after s2b, 0d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 1.4 实战：一个完整项目的甘特图
gantt
title 2019年个人博客搭建计划
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 技术选型
VuePress调研 :done, t1, 2019-06-01, 3d
主题选用Vdoing :done, t2, after t1, 1d
section 基础搭建
项目初始化 :done, b1, after t2, 2d
配置导航/侧边栏 :active, b2, after b1, 3d
配置评论/Giscus : b3, after b2, 2d
配置SEO/统计 : b4, after b3, 2d
section 内容迁移
原有文章格式化 : m1, after b4, 5d
Git系列撰写 :crit, m2, 2019-07-01, 30d
开源协议系列撰写 : m3, after m2, 14d
section 自动化
GitHub Actions配置 : a1, after b4, 3d
自动部署验证 : a2, after a1, 1d
死链检查集成 : a3, after a2, 1d
section 发布
内测 : p1, after a3, 2d
正式发布 :milestone, p2, after p1, 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
# 二、饼图（Pie Chart）
# 2.1 基础语法
pie
title 技术栈占比
"JavaScript" : 35
"TypeScript" : 25
"Python" : 20
"Go" : 15
"其他" : 5
1
2
3
4
5
6
7
2
3
4
5
6
7
pie [showData]
title 图表标题
"数据项1" : 数值
"数据项2" : 数值
1
2
3
4
2
3
4
加上 showData 可以在图例中显示数值。
# 2.2 实战场景
场景1：项目 Bug 类型分布
pie showData
title Bug 类型分布（Q2）
"UI 显示" : 42
"逻辑错误" : 28
"性能问题" : 15
"兼容性" : 10
"安全漏洞" : 5
1
2
3
4
5
6
7
2
3
4
5
6
7
场景2：团队时间分配
pie
title 一周工作时间分配
"编码" : 25
"会议" : 15
"Code Review" : 10
"文档写作" : 10
"学习研究" : 10
"午休&摸鱼" : 30
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 三、实践技巧
# 3.1 甘特图最佳实践
- section 分类：按团队或模块名称拆分 section
- 里程碑用
milestone：发布、转测等关键节点 - 关键任务标
crit：让风险和阻塞点醒目 - 粒度控制：一页不要超过 30 个任务，否则失去全局视角
- 用
after而不是硬编码日期：上游任务变动后自动联动
# 3.2 饼图最佳实践
- 数据项不超过 6-8 个：过多的小块难以阅读
- 合并"其他"：占比较小的项统一归入"其他"
- 搭配百分比：用
showData显示具体数字 - 颜色自动分配：Mermaid 自动给每块不同颜色
# 四、速查
┌──────────────────────────────────────────────┐
│ Mermaid 甘特图 & 饼图速查 │
├──────────────────────────────────────────────┤
│ 甘特图 │
│ dateFormat YYYY-MM-DD 日期格式 │
│ :done, id, date, days 已完成任务 │
│ :active, id, date, days 进行中任务 │
│ :crit, id, date, days 关键任务 │
│ :milestone, id, date, 0d 里程碑 │
│ after taskId 在任务后开始 │
│ │
│ 饼图 │
│ pie [showData] 带数据标注 │
│ "名称" : 数值 数据项 │
└──────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
🏃 下一篇：其他图表合集——脑图、时间线、用户旅程图、C4架构图、Git图、需求图、桑基图。
上次更新: 2026/06/07, 09:20:35
