如何用 Mermaid 画甘特图

2026-03-04 · MermZen 教程

甘特图（Gantt Chart）以横向条形展示项目任务的时间安排，直观呈现任务的开始时间、持续时长和相互依赖关系。适合项目管理、迭代排期、发布计划等场景。

为什么用甘特图？

解决的问题

甘特图帮助解决项目管理中的核心痛点：

时间可视化 — 一眼看出整个项目的时间跨度、各任务的持续时间
依赖关系清晰 — 明确哪些任务必须在其他任务完成后才能开始
进度追踪 — 通过状态标记快速了解当前进展
资源协调 — 识别任务重叠期，合理安排人力
里程碑管理 — 标记关键节点，确保项目按期交付

时间轴图 vs 甘特图

特性	时间轴图 (Timeline)	甘特图 (Gantt)
侧重点	事件发生的时间点	任务的持续时间
展示形式	垂直列表 + 时间点	横向条形图
依赖关系	不支持	支持 `after` 依赖
适用场景	历史回顾、里程碑展示	项目规划、进度管理
任务状态	无	`done`/`active`/`crit`

简单判断：如果需要管理"任务何时做、做多久、谁依赖谁"，用甘特图；如果只是展示"发生了什么"，用时间轴。

适用与不适用的场景

适合使用甘特图：

软件开发迭代规划
产品发布计划
营销活动排期
建筑工程进度管理
多人协作项目的任务分配

不适合使用甘特图：

只需要展示事件序列（用流程图或时间轴）
任务数量极少（少于3个）且没有依赖
需要展示复杂决策分支（用流程图）
系统架构设计（用类图或架构图）

与其他图表对比

图表类型	核心用途	与甘特图的区别
甘特图	项目进度管理	强调时间跨度、任务依赖、持续时长
时间轴	事件序列展示	强调时间点，无依赖关系，适合历史回顾
流程图	流程逻辑与决策	强调步骤顺序和分支判断，无时间概念

何时选择哪种图表

需要管理项目进度、资源、依赖？
    ├── 是 → 甘特图
    └── 否 → 只需要展示事件？
              ├── 是 → 有时间跨度概念？
              │         ├── 是 → 甘特图
              │         └── 否 → 时间轴
              └── 否 → 有流程/决策逻辑？
                        ├── 是 → 流程图
                        └── 否 → 其他图表

示例对比：

甘特图："后端API开发"需要7天，完成后"前端开发"才能开始（5天）→ 用甘特图清晰展示依赖和时长
时间轴："2026年3月发布v1.0，6月发布v2.0"→ 用时间轴展示发布节点
流程图："用户登录 → 验证密码 → 成功/失败分支"→ 用流程图展示逻辑

基本结构

一个完整的甘特图声明包含三个要素：

gantt
    title 我的项目计划
    dateFormat YYYY-MM-DD
    section 第一阶段
    任务名称 : 2026-03-01, 5d

在 MermZen 中试试 →

title — 图表标题（可选）
dateFormat — 日期格式，必须与任务日期格式一致
section — 任务分组标题，一个甘特图可以有多个 section
任务行：任务名 : 开始日期, 持续天数

日期格式

dateFormat 支持多种格式，推荐使用 YYYY-MM-DD：

格式	示例
`YYYY-MM-DD`	`2026-03-01`
`DD/MM/YYYY`	`01/03/2026`
`MM-DD-YYYY`	`03-01-2026`

任务定义详解

指定开始日期和持续时长

gantt
    dateFormat YYYY-MM-DD
    section 开发
    需求分析 : 2026-03-01, 3d
    UI 设计  : 2026-03-04, 5d

在 MermZen 中试试 →

持续时长单位：d（天）、w（周）、h（小时）

任务依赖（after 关键字）

gantt
    dateFormat YYYY-MM-DD
    section 开发
    后端开发  : be, 2026-03-01, 7d
    前端开发  : after be, 5d
    联调测试  : after 前端开发, 3d

在 MermZen 中试试 →

after 任务名 表示在指定任务完成后才开始，实现依赖链。给任务指定 ID（如 be），方便其他任务引用。

任务状态标记

gantt
    dateFormat YYYY-MM-DD
    section 进度
    已完成任务  : done,   2026-03-01, 3d
    进行中任务  : active, 2026-03-04, 5d
    普通待办    :         2026-03-09, 4d
    关键路径    : crit,   2026-03-09, 3d
    关键且进行中: crit, active, 2026-03-09, 3d

在 MermZen 中试试 →

状态标记	视觉效果
`done`	灰色（已完成）
`active`	蓝色高亮（进行中）
`crit`	红色（关键路径）
`milestone`	菱形里程碑节点
不标记	默认颜色（待开始）

关键路径是什么？

关键路径（Critical Path）是项目中从开始到结束的最长任务链。关键路径上的任何任务延期，都会直接导致整个项目延期。

gantt
    dateFormat YYYY-MM-DD
    section 关键路径示例
    需求分析    : crit, req, 2026-03-01, 3d
    后端开发    : crit, be, after req, 5d
    前端开发    : fe, after req, 4d
    联调测试    : crit, after be, 2d
    上线部署    : crit, after 联调测试, 1d

在 MermZen 中试试 →

上例中，需求分析 → 后端开发 → 联调测试 → 上线部署 构成关键路径（共 11 天），而前端开发可以与后端开发并行，不影响总工期。

建议：用 crit 标记关键路径上的任务，让团队一眼识别哪些任务不能延期。

里程碑（milestone）

gantt
    dateFormat YYYY-MM-DD
    section 发布
    开发完成    : milestone, m1, 2026-03-15, 0d
    上线发布    : milestone, m2, 2026-03-20, 0d

在 MermZen 中试试 →

里程碑用 0d 持续时间表示一个时间点，而非时间段。

排除工作日

gantt
    dateFormat YYYY-MM-DD
    excludes weekends
    excludes 2026-04-04, 2026-04-05

在 MermZen 中试试 →

excludes weekends 自动排除周六周日，也可以指定具体假期日期。

完整示例：产品迭代计划

gantt
    title MermZen 博客功能 v1.0 计划
    dateFormat YYYY-MM-DD
    excludes weekends

    section 需求与设计
    需求评审        : done,   req,    2026-03-01, 2d
    UI 原型设计     : done,   ui,     after req,  3d
    设计评审        : milestone,      after ui,   0d

    section 开发
    博客模板开发    : active, tpl,    after ui,   4d
    文章内容编写    :         art,    after ui,   6d
    Actions CI 配置 :         ci,     after tpl,  2d

    section 测试与上线
    功能测试        : crit,   test,   after ci,   3d
    性能检查        : crit,           after test, 1d
    正式上线        : milestone,      after 性能检查, 0d

在 MermZen 中试试 →

最佳实践

任务和分组数量建议

Section（分组）：建议 3-5 个，过多会显得杂乱
每个 Section 的任务数：建议 3-7 个，便于阅读和追踪
总任务数：控制在 20 个以内，复杂的项目可以拆分为多个甘特图

任务依赖最佳实践

gantt
    title 迭代开发最佳实践示例
    dateFormat YYYY-MM-DD
    excludes weekends
    
    section 规划
    需求梳理     : done, plan, 2026-04-01, 2d
    任务拆分     : done, split, after plan, 1d
    
    section 开发
    核心功能     : crit, active, core, after split, 5d
    次要功能     : active, minor, after split, 7d
    代码审查     : after core, after minor, 2d
    
    section 交付
    集成测试     : crit, test, after 代码审查, 3d
    发布准备     : after test, 1d
    v1.0发布     : milestone, release, after 发布准备, 0d

在 MermZen 中试试 →

依赖设计原则：

避免循环依赖 — A 依赖 B，B 又依赖 A，会导致无法排期
控制依赖深度 — 依赖链过长（A→B→C→D→E）会增加项目风险，适当并行化
关键路径清晰 — 用 crit 标记决定总工期的任务链
里程碑作为检查点 — 在重要阶段结束时设置里程碑

里程碑使用指南

设置时机：阶段完成、重要交付、外部依赖节点
数量控制：一个甘特图建议 2-4 个里程碑，过多会稀释重要性
命名规范：使用动词+名词，如"设计评审完成"、"v1.0上线"

颜色/状态标记建议

标记	使用场景	视觉提示
`done`	已完成的任务	灰色，表示不再需要关注
`active`	正在进行的任务	蓝色，当前工作重点
`crit`	关键路径任务	红色，延期会影响总工期
`crit, active`	关键且进行中	红色高亮，最高优先级
无标记	待开始的任务	默认颜色，按计划执行

颜色使用建议：

不要把所有任务都标记为 crit，否则失去重点
active 只标记当前正在做的，完成后改为 done
定期更新状态，保持图表反映真实进度

使用 `excludes weekends` 排除非工作日

让甘特图更贴近实际工作安排：

gantt
    dateFormat YYYY-MM-DD
    excludes weekends
    section 迭代
    Sprint 1 : 2026-03-02, 10d

在 MermZen 中试试 →

常见误区

误区一：将甘特图与时间轴混淆

错误理解：甘特图就是横着的时间轴。

正解：时间轴展示"事件在什么时候发生"，甘特图展示"任务持续多久、谁依赖谁"。

何时用哪个：

展示"公司发展里程碑" → 时间轴
规划"下个迭代的开发任务" → 甘特图

误区二：任务过度拆分

❌ 不推荐：将简单的登录功能拆成 8 个超细粒度任务

gantt
    title ❌ 任务过度拆分示例（不推荐）
    dateFormat YYYY-MM-DD
    
    section 开发
    登录页面-写HTML     : a1, 2026-03-01, 2h
    登录页面-写CSS      : a2, after a1, 2h
    登录页面-写JS       : a3, after a2, 2h
    登录页面-调试       : a4, after a3, 1h
    注册页面-写HTML     : b1, after a4, 2h
    注册页面-写CSS      : b2, after b1, 2h
    注册页面-写JS       : b3, after b2, 2h

在 MermZen 中试试 →

✅ 推荐：合理合并，关注可交付成果

gantt
    title ✅ 合理任务粒度示例（推荐）
    dateFormat YYYY-MM-DD
    
    section 开发
    登录功能开发   : done, login, 2026-03-01, 1d
    注册功能开发   : done, reg, after login, 1d
    用户中心开发   : active, uc, after reg, 2d
    整体联调       : after uc, 1d

在 MermZen 中试试 →

任务粒度原则：

一个任务应该是可交付的、有意义的成果
粒度控制在"半天到三天"为宜
任务过多会导致图表臃肿，失去"一目了然"的价值

误区三：忽略任务依赖关系

❌ 不推荐：所有任务都独立声明，看不出逻辑关系

gantt
    dateFormat YYYY-MM-DD
    section 开发
    需求分析  : 2026-03-01, 3d
    UI设计    : 2026-03-04, 5d
    前端开发  : 2026-03-09, 7d
    后端开发  : 2026-03-09, 7d

✅ 推荐：明确依赖，让排期逻辑清晰可见

gantt
    dateFormat YYYY-MM-DD
    section 开发
    需求分析  : req, 2026-03-01, 3d
    UI设计    : after req, 5d
    后端开发  : api, after req, 7d
    前端开发  : after UI设计, after api, 7d

依赖的价值：

自动计算开始时间，避免手动日期错误
前置任务延期时，自动影响后续任务
可视化关键路径，识别项目风险点

误区四：不标记关键路径

问题：所有任务都是默认颜色，无法快速识别哪些任务对项目进度影响最大。

建议：用 crit 标记关键路径上的任务，让团队聚焦核心工作。

速查表

语法	功能
`gantt`	声明甘特图
`title 标题`	图表标题
`dateFormat YYYY-MM-DD`	日期格式
`excludes weekends`	排除周末
`section 名称`	任务分组
`任务名 : 日期, Nd`	指定开始日期
`任务名 : after 任务ID, Nd`	依赖前置任务
`任务名 : id, 日期, Nd`	带 ID 的任务
`:done`	已完成（灰色）
`:active`	进行中（蓝色）
`:crit`	关键路径（红色）
`:milestone`	里程碑节点

下一步

了解甘特图后，继续学习 Mermaid 类图，用于描述面向对象的系统结构。

如果您想在 MermZen 中尝试上述代码，可以点击在线编辑器，然后将代码粘贴进去。

如何用 Mermaid 画甘特图

为什么用甘特图？

解决的问题

时间轴图 vs 甘特图

适用与不适用的场景

与其他图表对比

何时选择哪种图表

基本结构

日期格式

任务定义详解

指定开始日期和持续时长

任务依赖（after 关键字）

任务状态标记

关键路径是什么？

里程碑（milestone）

排除工作日

完整示例：产品迭代计划

最佳实践

任务和分组数量建议

任务依赖最佳实践

里程碑使用指南

颜色/状态标记建议

使用 excludes weekends 排除非工作日

常见误区

误区一：将甘特图与时间轴混淆

误区二：任务过度拆分

误区三：忽略任务依赖关系

误区四：不标记关键路径

速查表

下一步

使用 `excludes weekends` 排除非工作日