只想静静地老湿敷用Mermaid甘特图在Markdown中高效管理项目进度
如果你还在用Excel或PPT手动绘制甘特图，那么是时候尝试更高效的解决方案了。Mermaid作为一款基于文本的图表生成工具，可以直接在Markdown文档中创建专业级的甘特图，无需切换工具或依赖图形界面。本文将带你全面掌握这一技能，从基础语法到高级应用，让你的项目文档从此焕然一新。
1. 为什么选择Mermaid甘特图
传统项目管理工具如Microsoft Project或Excel虽然功能强大，但在技术文档协作场景中存在明显短板：
- 版本控制困难：二进制文件难以进行diff比较
- 文档割裂：图表与说明文字分离，维护成本高
- 协作门槛：非技术人员需要安装特定软件才能查看
Mermaid甘特图完美解决了这些问题：
mermaid复制gantt
title 技术文档协作流程优化
dateFormat YYYY-MM-DD
section 文档编写
需求分析 :done, des1, 2023-06-01,2023-06-03
技术方案设计 :active, des2, 2023-06-04, 3d
section 代码实现
核心模块开发 : des3, after des2, 5d
单元测试 : des4, after des3, 3d
关键优势对比：
| 特性 | 传统工具 | Mermaid |
|---|---|---|
| 版本控制 | 困难 | 完美支持 |
| 修改成本 | 高 | 文本编辑即可 |
| 展示方式 | 独立文件 | 内嵌文档 |
| 学习曲线 | 陡峭 | 简单直观 |
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 快速入门基础语法
一个完整的Mermaid甘特图包含以下几个核心元素：
- 图表声明：以
gantt关键字开始 - 时间格式：
dateFormat定义输入日期格式 - 标题（可选）：
title设置图表标题 - 排除日期：
excludes标记非工作日 - 任务分区：
section划分项目阶段 - 任务定义：名称、状态、依赖关系等
基础示例：
mermaid复制gantt
title 简单项目计划
dateFormat YYYY-MM-DD
excludes weekends
section 设计阶段
需求调研 :done, des1, 2023-06-01, 5d
原型设计 :active, des2, after des1, 3d
section 开发阶段
前端开发 : des3, after des2, 7d
后端开发 : des4, after des3, 5d
任务定义语法详解：
code复制任务名称 :[状态], [任务ID], [开始时间], [持续时间]
支持的任务状态：
done：已完成active：进行中crit：关键路径- 无标记：未开始
3. 高级功能实战技巧
3.1 处理节假日和特殊日期
通过excludes参数可以灵活设置非工作日：
mermaid复制gantt
title 考虑节假日的项目计划
dateFormat YYYY-MM-DD
excludes weekends, 2023-06-22, 2023-06-23
section 项目阶段
任务A :a1, 2023-06-19, 5d
任务B :after a1, 3d
excludes支持多种格式：
- 具体日期：
2023-06-22 - 星期：
Sunday,Friday - 节假日列表：用逗号分隔多个日期
3.2 里程碑与关键路径
使用milestone标记重要节点，crit标识关键任务：
mermaid复制gantt
title 产品发布关键路径
dateFormat YYYY-MM-DD
section 开发
需求冻结 :milestone, m1, 2023-06-05, 0d
核心功能开发 :crit, c1, 2023-06-06, 10d
section 测试
集成测试 :crit, c2, after c1, 5d
发布评审 :milestone, m2, after c2, 0d
3.3 复杂依赖关系
Mermaid支持多种依赖关系表达方式：
- 简单依赖：
after <任务ID> - 多任务依赖：
after <任务1> <任务2> - 相对时间：
after <任务ID>+<天数>d
示例：
mermaid复制gantt
title 复杂依赖示例
dateFormat YYYY-MM-DD
section 多任务依赖
任务A :a1, 2023-06-01, 3d
任务B :a2, 2023-06-02, 2d
任务C :after a1 a2, 4d
section 相对时间
任务D :a3, 2023-06-10, 3d
任务E :after a3+2d, 5d
4. 样式定制与交互增强
4.1 基础样式调整
通过CSS变量可以自定义甘特图外观：
html复制<style>
.mermaid .grid .tick {
stroke: #e0e0e0;
stroke-width: 1px;
}
.mermaid .task.active {
fill: #4CAF50;
}
.mermaid .task.crit {
fill: #F44336;
}
</style>
常用可定制元素：
.grid：网格线样式.task：任务条样式.milestone：里程碑样式.todayMarker：当前日期标记
4.2 添加交互功能
在支持的环境中，可以为任务添加点击事件：
markdown复制```mermaid
gantt
title 可交互甘特图
dateFormat YYYY-MM-DD
section 文档
阅读规范 :doc1, 2023-06-01, 3d
编写初稿 :doc2, after doc1, 5d
click doc1 href "https://example.com/spec"
click doc2 call alert("开始编写文档")
```
交互类型：
href：跳转到指定URLcall：调用JavaScript函数
5. 实际应用场景示例
5.1 技术博客写作计划
mermaid复制gantt
title 技术博客写作计划
dateFormat YYYY-MM-DD
excludes weekends
section 研究阶段
资料收集 :done, research1, 2023-06-01, 3d
大纲编写 :active, research2, after research1, 2d
section 写作阶段
初稿撰写 : writing1, after research2, 5d
示例代码测试 : writing2, after writing1, 3d
section 发布阶段
校对修改 : review1, after writing2, 2d
发布文章 :milestone, release, after review1, 0d
5.2 开源项目贡献流程
mermaid复制gantt
title 开源项目贡献流程
dateFormat YYYY-MM-DD
section 本地开发
Fork项目 :done, fork, 2023-06-01, 1d
功能开发 :active, dev, after fork, 5d
section 代码提交
单元测试 :crit, test, after dev, 2d
PR提交 :crit, pr, after test, 1d
section 代码审查
修改迭代 : review, after pr, 3d
合并代码 :milestone, merge, after review, 0d
在实际使用中，我发现将Mermaid甘特图与版本控制结合特别高效。每次项目计划变更时，只需修改几行文本就能自动生成最新的进度图表，团队成员通过Markdown diff可以清晰看到计划变更的历史记录。