Mermaid Gantt 图：项目管理时间线、里程碑与依赖关系

puml.online
  2026-08-08 10:00 2026-08-08 10:00 创建   2026-08-14 21:34:29 2026-08-14 21:34:29 更新    

Mermaid 的 Gantt 图是项目管理神器——用文本描述任务时间线、里程碑和依赖关系，拖进文档里直接渲染。PlantUML 的 Gantt 图功能很弱，Mermaid 是这个领域的首选工具。

Gantt 图是什么

Gantt 图（甘特图）用横轴=时间、纵轴=任务的方式，展示：

  • 每个任务什么时候开始、什么时候结束
  • 任务之间的前后依赖关系
  • 关键里程碑在哪一天
  • 哪些任务是并行的

适合：Sprint 计划、版本规划、项目 roadmap、技术改造时间线。

一、最小例子

1
2
3
4
5
6
7
8
gantt
    title 项目里程碑
    dateFormat YYYY-MM-DD
    section 开发
    需求分析: a1, 2026-01-01, 7d
    设计: a2, after a1, 5d
    开发: a3, after a2, 14d
    测试: a4, after a3, 5d
  • title 是图标题
  • dateFormat 指定日期格式
  • section 分组，同组任务放一起
  • 任务名: ID, 开始日期, 持续时间（7d = 7 天，after ID = 依赖某任务结束后开始）

二、日期格式

Mermaid 支持多种日期格式：

1
2
3
4
5
6
7
8
9
gantt
    dateFormat YYYY-MM-DD
    任务A: t1, 2026-03-01, 3d

    dateFormat YYYY/MM/DD
    任务B: t2, 2026/03/05, 2d

    dateFormat DD-MM-YYYY
    任务C: t3, 07-03-2026, 1d

常用格式：

  • YYYY-MM-DD — ISO 标准，推荐
  • YYYY/MM/DD — 美式
  • YYYY-MMM-DD — 月份英文缩写（2026-Jan-15）
  • YYYY-MM-DD HH:mm — 精确到小时

三、任务时长

3.1 天数（d）

1
2
3
4
gantt
    dateFormat YYYY-MM-DD
    任务A: t1, 2026-01-01, 5d
    任务B: t2, 2026-01-03, 3d

3.2 周数（w）

1
2
3
4
gantt
    dateFormat YYYY-MM-DD
    Sprint 1: s1, 2026-01-01, 2w
    Sprint 2: s2, after s1, 2w

3.3 月份（m）

1
2
3
4
gantt
    dateFormat YYYY-MM-DD
    Q1开发: q1, 2026-01-01, 3m
    Q2测试: q2, after q1, 2m

3.4 精确时长

1
2
3
4
gantt
    dateFormat YYYY-MM-DD HH:mm
    凌晨批处理: t1, 2026-01-01 02:00, 3h
    白天服务: t2, 2026-01-01 09:00, 8h

四、Section 分组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
gantt
    title 电商平台重构计划
    dateFormat YYYY-MM-DD
    
    section 基础设施
    数据库选型: i1, 2026-01-01, 14d
    缓存架构: i2, after i1, 7d
    CI/CD 搭建: i3, 2026-01-10, 10d
    
    section 核心功能
    用户模块: u1, after i1, 21d
    商品模块: u2, after i1, 21d
    订单模块: u3, after u1, 14d
    
    section 上线
    集成测试: t1, after u3, 7d
    灰度发布: t2, after t1, 7d
    全量上线: t3, after t2, 1d

Section 让任务按职责分组，图更清晰。

五、里程碑（Milestone）

里程碑用 milestone 关键字，标记关键时间点：

1
2
3
4
5
6
7
8
9
10
11
12
13
gantt
    title 版本发布计划
    dateFormat YYYY-MM-DD
    
    section 开发
    需求: r1, 2026-01-01, 7d
    设计: r2, after r1, 5d
    开发: r3, after r2, 14d
    
    section 里程碑
    Alpha 发布: milestone, after r3, 0d
    Beta 发布: milestone, after r3 + 7d, 0d
    正式发布: milestone, after r3 + 21d, 0d

0d 持续时间 = 里程碑（Mermaid 把持续时间为 0 的任务渲染成菱形）。

六、任务依赖（Dependency）

6.1 after 依赖（完成后开始）

1
2
3
4
5
gantt
    dateFormat YYYY-MM-DD
    A: a1, 2026-01-01, 3d
    B: b1, after a1, 2d
    C: c1, after b1, 1d

A 结束 → B 开始 → C 开始。

6.2 链式依赖

1
2
3
4
5
6
7
gantt
    dateFormat YYYY-MM-DD
    需求: 2026-01-01, 7d
    设计: after 需求, 5d
    开发: after 设计, 14d
    测试: after 开发, 7d
    上线: after 测试, 1d

6.3 并行任务（同一 after）

1
2
3
4
5
6
gantt
    dateFormat YYYY-MM-DD
    任务A: a1, 2026-01-01, 5d
    任务B: b1, 2026-01-01, 3d
    任务C: c1, after a1, 2d
    任务D: d1, after b1, after c1, 2d

D 依赖 B 和 C 都完成才开始。

6.4 使用 ID 显式依赖

1
2
3
4
5
6
gantt
    dateFormat YYYY-MM-DD
    task1: a, 2026-01-01, 4d
    task2: b, 2026-01-03, 3d
    task3: c, after a, 2d
    task4: d, after b, after c, 1d

七、任务色彩

1
2
3
4
5
6
7
8
9
10
11
12
gantt
    title 带颜色的项目计划
    dateFormat YYYY-MM-DD
    
    section 状态色彩
    已完成: done, 2026-01-01, 10d
    关键任务: crit, 2026-01-08, 5d
    进行中: active, 2026-01-10, 3d
    未来任务: future, 2026-01-15, 4d
    
    done, crit: done
    active: active

Mermaid 内置状态关键字：done（绿）、crit（红）、active（蓝）、future（灰）。

自定义颜色

1
2
3
4
5
6
7
8
gantt
    dateFormat YYYY-MM-DD
    
    紧急: 2026-01-01, 5d
    样式紧急: crit, active, 2026-01-01, 5d
    
    style crit fill:#ff6b6b
    style active fill:#6bcb77

八、Today Marker（今天的标记线）

1
2
3
4
5
6
7
8
9
10
%%{init: {'theme': 'base'}}%%
gantt
    title 迭代计划
    dateFormat YYYY-MM-DD
    todayMarker stroke:#ff3, stroke-width:3px
    
    任务A: a1, 2026-01-01, 7d
    任务B: a2, after a1, 5d
    任务C: a3, after a2, 3d
    today: today, 2026-01-10

todayMarker 在当前日期画一条红色竖线，帮助团队看到”今天在哪里”。

九、和 PlantUML Gantt 的对比

功能 Mermaid Gantt PlantUML Gantt
任务时长 ✅ d/w/m/h ✅ d/w/m
依赖关系 ✅ after ID ✅ then 链
里程碑 ✅ milestone ✅ milestone
Section 分组 ✅ ❌
色彩状态 ✅ done/crit/active ✅ style
todayMarker ✅ ❌
资源分配 ❌ ✅ resource
简洁程度 非常简洁 较复杂
中文支持 ✅ ✅

PlantUML Gantt 功能更多（资源分配、日志配置），但 Mermaid 上手快、样式好看、更适合文档。项目管理用 Mermaid，资源调度精细控制用 PlantUML。

十、常见报错

报错 原因 修复
任务不显示 日期格式不对 确认 dateFormat 和任务日期格式一致
依赖形成循环 after 指向了后面的任务 检查依赖链不要成环
任务重叠 并行任务没有设 after 并行任务也要有 after
中文不显示 字体问题 用 fontawesome 或换主题

小结

Mermaid Gantt 记住 5 点：

  1. dateFormat YYYY-MM-DD 声明日期格式，每个任务都用对应格式
  2. section 分组让任务按模块分开，图更清晰
  3. after ID 或 after 任务名 是依赖声明，链式写法最直观
  4. milestone 标记关键里程碑，0d 持续时间就是里程碑
  5. todayMarker stroke:#ff3 在当前日期画标记线，Sprint 计划必备

PlantUML Gantt 功能更全但更复杂——日常文档、README、Sprint board，用 Mermaid Gantt 足够了。

  • 标题: Mermaid Gantt 图：项目管理时间线、里程碑与依赖关系
  • 作者: puml.online
  • 创建于 : 2026-08-08 10:00:00
  • 更新于 : 2026-08-14 21:34:29
  • 链接: https://puml.online/blog/mermaid-gantt/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
Mermaid Gantt 图：项目管理时间线、里程碑与依赖关系
  1. Gantt 图是什么
  2. 一、最小例子
  3. 二、日期格式
  4. 三、任务时长
    1. 3.1 天数（d）
    2. 3.2 周数（w）
    3. 3.3 月份（m）
    4. 3.4 精确时长
  5. 四、Section 分组
  6. 五、里程碑（Milestone）
  7. 六、任务依赖（Dependency）
    1. 6.1 after 依赖（完成后开始）
    2. 6.2 链式依赖
    3. 6.3 并行任务（同一 after）
    4. 6.4 使用 ID 显式依赖
  8. 七、任务色彩
    1. 自定义颜色
  9. 八、Today Marker（今天的标记线）
  10. 九、和 PlantUML Gantt 的对比
  11. 十、常见报错
  12. 小结