如何用 Mermaid 画甘特图

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

在线绘制工具推荐

在开始学习之前，我推荐几个实用的 Mermaid 在线绘制工具：

1. Mermaid Live Editor：官方提供的在线编辑器，功能强大，支持实时预览

   • 地址：https://mermaid.live/

2. MermZen：我开发的一个轻量级 Mermaid 图表编辑器，界面简洁，操作流畅

   • 地址：https://eric.run.place/MermZen/

这些工具都支持实时预览、一键导出图片，非常适合快速绘制和分享 Mermaid 图表。

基本结构

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

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

• 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

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

任务依赖（after 关键字）

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

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

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

里程碑（milestone）

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

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

排除工作日

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

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

常用语法速查表

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

总结

Mermaid 甘特图语法简单直观，通过纯文本就能快速创建专业的甘特图。如果你需要绘制复杂的甘特图，建议使用在线工具来提高效率。

你可以使用以下工具来练习：

• Mermaid Live：https://mermaid.live/
• MermZen：https://eric.run.place/MermZen/

希望这篇教程能帮助你快速掌握 Mermaid 甘特图的绘制方法！