开始这堂关于甘特图 (Gantt Chart) 的课程。与流程图和时序图不同，甘特图是一种强大的项目管理工具，它的核心是可视化地展现任务、时间与进度。通过甘特图，我们可以清晰地看到一个项目包含哪些任务、每个任务的起止时间、以及它们的当前状态。我们将一步一步地学习，每个知识点都会拆解成最小的单元来讲解。强烈建议您打开 Mermaid 官方的在线编辑器 mermaid.live，一边学习一边亲手尝试下面的每一个小步骤。

---

第二部分：常用图表绘制

第5章：甘特图 (Gantt Chart) - 项目进度管理

5.1 甘特图声明与配置

在绘制任何任务条之前，我们需要先搭建好甘特图的“画布”，并进行一些基础设置。

5.1.1 gantt 关键字

第一步：声明图表类型

任何一个甘特图，都必须以 gantt 这个关键字开头。这行代码告诉Mermaid渲染引擎：“我接下来要画的是一个甘特图”。

我们先写下这最基本的第一行：

代码段

gantt

这行代码本身就会创建一个空的甘特图框架。

5.1.2 dateFormat 和 title

第二步：为你的图表添加标题 (title)

一个好的图表应该有一个清晰的标题。

代码段

gantt
  title 我的第一个项目计划

这行代码会在图表的顶部显示出标题 “我的第一个项目计划”。

第三步：定义日期格式 (dateFormat)

这是绘制甘特图至关重要的一步。你必须明确地告诉Mermaid，你接下来在定义任务时，将使用哪种日期格式。

最常用、最推荐的格式是 YYYY-MM-DD (年-月-日)。

代码段

gantt
  title 我的第一个项目计划
  dateFormat YYYY-MM-DD

• 注意：dateFormat 和 title 这些配置项，都应该写在 gantt 关键字之后，所有实际任务定义之前。

---

5.2 定义区域 (Sections)

1. 核心概念

为了让复杂的项目计划更有条理，我们可以使用 section 关键字将任务分组。每个section代表项目的一个主要阶段或类别。

好比说：如果整个项目是一本书，那么每个 section 就是书里的一个章节，比如“第一章：准备工作”、“第二章：核心开发”。

2. 一步一步定义区域

第一步：使用 section 关键字

你只需要写下 section 后面跟着这个区域的标题即可。

代码段

gantt
  title 我的第一个项目计划
  dateFormat YYYY-MM-DD

  section 规划阶段

  section 开发阶段
  
  section 测试与发布

执行后，你会看到图表的纵轴上出现了这三个阶段性的标题，接下来我们就可以在这些章节里填充具体的任务了。

---

5.3 定义任务 (Tasks)

任务是甘特图的核心内容，它表示一个需要完成的具体工作项。

5.3.1 任务语法与时间定义

第一步：学习任务的基本语法

一个任务的定义格式是：任务名称 : [状态], [ID], [起始时间], [结束时间或时长]

• 其中 状态 和 ID 是可选的。

第二步：使用“绝对日期”定义任务

这是最精确的方式，你明确地指定任务的开始日期和结束日期。

代码段

gantt
  dateFormat YYYY-MM-DD
  section 规划阶段
    市场调研 : 2025-09-22, 2025-09-25

• 这行代码定义了一个名为“市场调研”的任务，它从2025年9月22日开始，到2025年9月25日结束。

第三步：使用“相对时长”定义任务

你可以定义一个任务在另一个任务结束后开始，并持续一段时长。这在计划依赖性任务时非常有用。

第四步：为任务添加ID

要使用相对时长，我们必须先给前一个任务一个唯一的ID。

代码段

# 任务“需求评审”的ID是 review_done
需求评审 : review_done, 2025-09-26, 1d

• 这里的 1d 表示这个任务的持续时长是1天 (day)。

第五步：定义依赖于ID的任务

代码段

# after review_done 表示这个任务在ID为 review_done 的任务结束后立刻开始
# 5d 表示这个任务持续5天
原型设计 : after review_done, 5d

• 常用时长单位：h (小时), d (天), w (周), m (月)。

5.3.2 任务状态 (done, active, crit)

为了更直观地展示项目进度，我们可以为任务标记不同的状态。

第六步：标记为 done (已完成)

这通常会使任务条显示为灰色或带有删除线。

代码段

# 在任务名称和时间定义之间插入 done
市场调研 : done, 2025-09-22, 2025-09-25

第七步：标记为 active (进行中)

这通常会使任务条高亮显示。

代码段

原型设计 : active, after review_done, 5d

第八步：标记为 crit (关键任务)

crit (critical) 会将任务标记为“关键路径”上的任务，通常会用红色等醒目的颜色来显示，提醒项目经理需要重点关注。

代码段

核心功能开发 : crit, 2025-10-01, 2w

---

5.4 定义里程碑 (Milestones)

1. 核心概念

里程碑 (Milestone) 不是一个持续一段时间的“任务”，而是一个标记重要时间节点的“事件”。它没有时长，只有一个确切的日期。

好比说：里程碑就像是项目地图上插的一面小旗子，标记着“项目启动日”、“版本发布日”、“合同签署日”等关键时刻。

2. 一步一步定义里程碑

第一步：使用 milestone 关键字

它的语法是：里程碑名称 : milestone, 日期

第二步：在图表中添加里程碑

代码段

gantt
  dateFormat YYYY-MM-DD
  title 项目里程碑
  
  section 启动阶段
    项目启动会议 : milestone, 2025-09-22
    完成原型设计 : 2025-09-23, 5d

  section 发布阶段
    完成功能开发 : 2025-10-20, 2w
    V1.0版本正式发布 : milestone, 2025-10-31

在渲染出的图表中，你会看到里程碑通常被显示为一个菱形或其他特殊的标记。

---

5.5 声明任务间的依赖关系

1. 核心概念

在甘特图中，任务间的依赖关系主要通过时间上的前后衔接来体现。Mermaid中最直接的依赖关系是“完成-开始 (Finish-to-Start)”，即一个任务必须在另一个任务完成后才能开始。

2. 一步一步声明依赖

第一步：回顾 after 关键字

我们之前在 5.3.1 节学过的 after 关键字，就是声明这种“完成-开始”依赖关系的核心语法。

我们来创建一个更清晰的依赖链：

代码段

gantt
  dateFormat YYYY-MM-DD
  
  section 开发流程
    任务A：设计数据库 : taskA, 2025-09-22, 2d
    任务B：开发后端API : taskB, after taskA, 3d
    任务C：开发前端页面 : after taskB, 4d

• 解读：

  • taskB, after taskA 明确声明了任务B依赖于任务A。

  • after taskB 明确声明了任务C依赖于任务B。

• 在图表上，你会看到这三个任务条一个接一个地排列，清晰地展示了它们的依赖关系和时间上的先后顺序。

第二步：理解Mermaid甘特图的局限性

• 重要知识点：当前的Mermaid甘特图语法，主要支持这种简单的“完成-开始”依赖。一个任务只能 after 一个直接的前置任务。

• 它不支持像专业项目管理软件（如Microsoft Project）那样绘制更复杂的依赖关系（如“开始-开始”、“完成-完成”）或可视化的依赖箭头。

• 结论：对于展示清晰的、线性的项目阶段和时间排期，Mermaid甘特图非常出色。对于需要表现极其复杂的网状依赖关系的项目，它可能不是最佳工具。