Mermaid 甘特图 #

甘特图（Gantt Chart）是项目管理中常用的图表类型，用于展示项目进度、任务依赖关系和时间安排。

基本语法 #

1. 基本结构 #

mermaid 
gantt
  title 项目进度计划
  dateFormat  YYYY-MM-DD
  section 任务组1
    任务1: a1, 2023-01-01, 30d
    任务2: a2, after a1, 20d
  section 任务组2
    任务3: b1, 2023-01-15, 12d
    任务4: b2, after b1, 24d

2. 日期格式 #

支持多种日期格式：

格式 示例 说明
YYYY-MM-DD 2023-01-01 年-月-日
MM-DD-YYYY 01-01-2023 月-日-年
DD/MM/YYYY 01/01/2023 日/月/年
YYYY-MM-DD HH:mm 2023-01-01 10:00 带时间
mermaid 
gantt
  title 短期项目计划
  dateFormat  YYYY-MM-DD HH:mm
  section 日常任务
    任务1: 2023-01-01 09:00, 4h
    任务2: after 任务1, 6h

任务定义 #

1. 基本任务 #

mermaid 
gantt
  title 基本任务示例
  dateFormat  YYYY-MM-DD
  section 项目A
    任务1: task1, 2023-01-01, 10d
    任务2: task2, 2023-01-12, 15d

2. 依赖任务 #

使用after关键字定义任务依赖：

mermaid 
gantt
  title 依赖任务示例
  dateFormat  YYYY-MM-DD
  section 项目B
    任务1: t1, 2023-01-01, 10d
    任务2: t2, after t1, 15d
    任务3: t3, after t2, 5d

3. 并行任务 #

mermaid 
gantt
  title 并行任务示例
  dateFormat  YYYY-MM-DD
  section 项目C
    任务1: t1, 2023-01-01, 10d
    任务2: t2, 2023-01-01, 15d
    任务3: t3, 2023-01-01, 5d

4. 里程碑 #

使用milestone关键字定义里程碑：

mermaid 
gantt
  title 里程碑示例
  dateFormat  YYYY-MM-DD
  section 项目D
    任务1: t1, 2023-01-01, 10d
    里程碑: milestone1, 2023-01-12, 0d
    任务2: t2, after milestone1, 15d

任务组 #

1. 基本任务组 #

mermaid 
gantt
  title 任务组示例
  dateFormat  YYYY-MM-DD
  section 设计阶段
    需求分析: des1, 2023-01-01, 10d
    系统设计: des2, after des1, 15d
  section 开发阶段
    前端开发: dev1, after des2, 20d
    后端开发: dev2, after des2, 25d
    数据库开发: dev3, after des2, 15d
  section 测试阶段
    单元测试: test1, after dev1, 10d
    集成测试: test2, after test1, 15d
    系统测试: test3, after test2, 10d

2. 嵌套任务组 #

mermaid 
gantt
  title 嵌套任务组示例
  dateFormat  YYYY-MM-DD
  section 项目管理
    项目启动: pm1, 2023-01-01, 5d
    项目规划: pm2, after pm1, 10d
  section 开发
    section 前端
      页面设计: fe1, after pm2, 10d
      页面开发: fe2, after fe1, 15d
    section 后端
      API设计: be1, after pm2, 8d
      API开发: be2, after be1, 20d
    section 数据库
      数据库设计: db1, after pm2, 7d
      数据库实现: db2, after db1, 12d

任务状态 #

1. 进行中任务 #

使用active关键字标记进行中的任务：

mermaid 
gantt
  title 任务状态示例
  dateFormat  YYYY-MM-DD
  section 项目
    任务1: done, t1, 2023-01-01, 10d
    任务2: active, t2, after t1, 15d
    任务3: t3, after t2, 5d

2. 已完成任务 #

使用done关键字标记已完成的任务：

mermaid 
gantt
  title 任务完成状态
  dateFormat  YYYY-MM-DD
  section 项目
    需求分析: done, req, 2023-01-01, 10d
    系统设计: done, design, after req, 15d
    前端开发: active, frontend, after design, 20d
    后端开发: backend, after design, 25d

3. 待开始任务 #

不指定状态的任务默认为待开始：

mermaid 
gantt
  title 任务状态分布
  dateFormat  YYYY-MM-DD
  section 项目
    已完成任务: done, task1, 2023-01-01, 10d
    进行中任务: active, task2, after task1, 15d
    待开始任务: task3, after task2, 5d
    另一个待开始: task4, after task2, 7d

高级功能 #

1. 自定义颜色 #

mermaid 
gantt
  title 自定义颜色示例
  dateFormat  YYYY-MM-DD
  axisFormat  %m-%d
  section 项目
    任务1: done, t1, 2023-01-01, 10d
    任务2: active, t2, after t1, 15d
    任务3: t3, after t2, 5d
  
  %% 自定义颜色
  classDef done fill:#98fb98,stroke:#333,stroke-width:1px;
  classDef active fill:#ffa07a,stroke:#333,stroke-width:1px;
  classDef default fill:#e6e6fa,stroke:#333,stroke-width:1px;

2. 时间轴格式 #

使用axisFormat自定义时间轴格式：

mermaid 
gantt
  title 自定义时间轴
  dateFormat  YYYY-MM-DD
  axisFormat  %m/%d
  section 项目
    任务1: 2023-01-01, 30d
    任务2: after 任务1, 20d

3. 周末与工作日 #

可以指定是否显示周末：

mermaid 
gantt
  title 工作日与周末
  dateFormat  YYYY-MM-DD
  excludes weekends
  section 项目
    任务1: 2023-01-01, 10d
    任务2: after 任务1, 15d

4. 任务依赖复杂关系 #

mermaid 
gantt
  title 复杂依赖关系
  dateFormat  YYYY-MM-DD
  section 项目
    任务A: a, 2023-01-01, 10d
    任务B: b, 2023-01-05, 12d
    任务C: c, after a, 15d
    任务D: d, after a, 10d
    任务E: e, after b and c, 8d
    任务F: f, after d, 12d
    任务G: g, after e and f, 6d

最佳实践 #

  1. 明确的任务命名：使用清晰、描述性的任务名称
  2. 合理的任务分组：将相关任务组织到同一个任务组中
  3. 准确的时间估计：基于历史数据和经验进行时间估计
  4. 明确的任务依赖：正确定义任务之间的依赖关系
  5. 使用里程碑：在关键节点设置里程碑，便于跟踪项目进展
  6. 定期更新：根据实际进度定期更新甘特图

常见问题 #

问题：日期显示不正确 #

解决方案：确保使用正确的日期格式，并在图表中指定dateFormat

问题：任务依赖关系不生效 #

解决方案：确保依赖任务的ID正确，使用after关键字定义依赖关系

问题：任务状态不显示 #

解决方案：使用done、active等关键字标记任务状态

问题：时间轴刻度不合适 #

解决方案：使用axisFormat自定义时间轴格式

完整示例 #

下面是一个完整的软件开发项目甘特图示例：

mermaid 
gantt
  title 软件开发项目计划
  dateFormat  YYYY-MM-DD
  axisFormat  %m-%d
  excludes weekends
  
  section 项目启动
    项目调研: done, proj-research, 2023-01-02, 5d
    需求收集: done, req-collect, after proj-research, 7d
    项目立项: done, proj-init, after req-collect, 3d
  
  section 需求分析
    需求分析: done, req-analysis, after proj-init, 10d
    需求评审: done, req-review, after req-analysis, 3d
    需求确认: done, req-confirm, after req-review, 2d
  
  section 系统设计
    系统架构设计: done, arch-design, after req-confirm, 8d
    数据库设计: done, db-design, after arch-design, 5d
    接口设计: done, api-design, after arch-design, 6d
    设计评审: done, design-review, after db-design and api-design, 3d
  
  section 开发阶段
    前端框架搭建: active, fe-frame, after design-review, 5d
    后端框架搭建: active, be-frame, after design-review, 7d
    数据库实现: active, db-implement, after design-review, 6d
    前端页面开发: fe-dev, after fe-frame, 20d
    后端接口开发: be-dev, after be-frame, 25d
    功能集成: integration, after fe-dev and be-dev, 10d
  
  section 测试阶段
    单元测试: unit-test, after integration, 10d
    集成测试: integration-test, after unit-test, 15d
    系统测试: system-test, after integration-test, 12d
    用户验收测试: uat, after system-test, 10d
  
  section 上线准备
    文档编写: doc, after uat, 8d
    系统部署: deploy, after doc, 5d
    上线培训: training, after deploy, 3d
  
  section 项目上线
    正式上线: milestone,上线, after training, 0d
    上线监控: monitor, after 上线, 7d
    项目验收: acceptance, after monitor, 3d
最后更新：2026-02-08