如何用 Mermaid 画甘特图

2026-03-04 · MermZen 教程

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

基本结构

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

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`	菱形里程碑节点
不标记	默认颜色（待开始）

里程碑（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 中试试 →

速查表

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

下一步

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

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