注意：甘特图的高亮新旧版本会正常显示
甘特图
mermaid官方网站文档教程链接(英文)
社区维护的中文文档站
1、新版本语法
gantt如下仅是基础的常用功能语法，如需更全面内容可参考官网教程文档
-
时间轴
dateFormat YYYY-MM-DD必选，定义日期格式（常用：
YYYY-MM-DD/MM-DD/HH:mm） -
坐标轴显示格式
axisFormat MM-DD可选，坐标轴显示格式（如
MM月DD日显示中文） -
任务分组
section 需求阶段可选，任务分组，提升可读性
-
任务定义
需求分析 : req, 2026-02-08, 5d格式：
任务名 : 任务ID, 开始时间, 结束时间/持续时长 -
依赖任务
开发 : dev, after req, 7dafter 任务ID表示依赖前序任务完成后开始 -
里程碑
上线 : milestone, 2026-02-25标记关键节点（无时长，显示为菱形）
-
注释规则
- 单行注释：
%% 注释内容（必须以%%开头，可放在行首 / 行尾）； - 多行注释：无原生支持，需每行加
%%； - 可放在行首、行尾，也可单独占一行，不影响代码解析；
- 单行注释：
-
特殊规则（避坑重点）
-
日期格式必须统一
-
dateFormat定义的格式要和任务开始 / 结束日期一致（如dateFormat YYYY-MM-DD，任务日期就不能写2026/02/08）； -
持续时长用
Nd（天）/Nh（小时），如5d表示 5 天，不能写5。
-
-
任务 ID 不能重复：每个任务的 ID（如
req1/dev1）是唯一标识，重复会导致任务渲染异常； -
里程碑必须写时长：里程碑语法是
任务名 : milestone, 日期，或任务名 : milestone, 日期, 0d，缺少0d会解析失败； -
避免任务时间重叠导致布局错乱：过多并行任务会导致甘特图纵向拉伸，可拆分多个
section分组，或简化任务名称。
-
2、代码示例
示例1
gantttitle 项目开发甘特图dateFormat YYYY-MM-DDaxisFormat MM-DD%% 需求阶段section 需求分析需求调研 : req1, 2026-02-08, 3d需求评审 : req2, after req1, 2d%% 开发阶段section 开发实现前端开发 : dev1, after req2, 5d后端开发 : dev2, after req2, 6d%% 测试上线section 测试上线功能测试 : test1, after dev1 dev2, 4d上线发布 : milestone, after test1, 0d
示例2
gantttitle 系统迭代甘特图dateFormat YYYY-MM-DDaxisFormat MM月DD日todayMarker 红色 %% 标记当天（可选）%% 需求阶段section 产品规划需求收集 : active, req_collect, 2026-02-08, 4d原型设计 : req_design, after req_collect, 3d%% 开发阶段（并行任务）section 技术开发接口开发 : dev_api, after req_design, 5d前端页面 : dev_front, after req_design, 6d数据库设计 : dev_db, 2026-02-15, 3d %% 不依赖，单独开始%% 测试阶段section 质量保障接口测试 : test_api, after dev_api, 3d系统联调 : test_join, after test_api dev_front, 4d%% 上线阶段section 发布上线预发布验证 : pre_release, after test_join, 2d正式上线 : milestone, release, after pre_release, 0d线上监控 : monitor, after release, 3d
3、效果示例
示例1
示例2
4、老版本语法
gantt新版本功能可以支持更丰富的内容，旧版本写法上几乎没有什么变动，头部声明也没有变化，就不介绍太多了。
gantttitle 基础甘特图dateFormat YYYY-MM-DDsection 需求阶段需求分析 : req, 2026-02-08, 3d需求评审 : after req, 2dsection 上线阶段正式上线 : milestone, 2026-02-15, 0d
5、新旧版本差异
甘特图的语法有新旧版本差异，但核心的「任务定义、日期格式、分组」完全兼容，差异主要体现在「新增特性、样式配置、细节优化」上，且旧版语法在新版本中仍能正常运行。
-
基础场景：几乎无差异
维度 旧版（Mermaid v8 及以前） 新版（Mermaid v9+，Typora ≥1.0） 基础声明 gantt（唯一声明方式）gantt（完全兼容）核心语法 支持 dateFormat/section/ 任务定义 / 依赖 / 里程碑完全兼容旧版核心语法 新增特性 无 active/todayMarker/ 多任务依赖支持 active（进行中任务）、todayMarker（当天标记）、after 任务1 任务2（多依赖）样式配置 无自定义样式，仅默认样式 支持 %%{init: {...}}%%自定义颜色 / 字体 / 大小中文兼容性 坐标轴中文（如 MM月DD日）易乱码优化中文渲染，支持自定义中文字体 Typora 表现 核心渲染正常，新增特性失效 完整支持所有特性，样式可控 -
高级场景：新增专属功能
- 标记 “进行中” 任务
- 新版：任务条会高亮显示（默认蓝色加深）；
- 旧版：忽略
active，任务条显示默认样式。
- 标记当天日期
- 新版：在甘特图坐标轴上用红色线标记当前日期；
- 旧版：忽略
todayMarker，无标记线。
- 多任务依赖
- 新版：需等待
dev_front和dev_api都完成后才开始； - 旧版：仅识别第一个依赖（
dev_front），忽略第二个（dev_api）。
- 新版：需等待
- 自定义样式
- 新版：任务条颜色改为蓝色；
- 旧版：忽略样式配置，用默认颜色。
- 细节优化（新版体验更好）
- 旧版：中文坐标轴格式（如
axisFormat MM月DD日）可能显示为乱码或错位； - 新版：优化中文渲染，支持自定义中文字体（如
'fontSize': 12, 'labelFont': 'Microsoft YaHei'）； - 旧版：里程碑的菱形标记大小固定，新版可通过样式配置调整。
- 旧版：中文坐标轴格式（如
- 标记 “进行中” 任务
6、版本兼容性
-
Typora 版本 < 1.0：内置 Mermaid < v10，仅支持旧版核心语法；
-
Typora 版本 ≥ 1.0：通过
%%{init: {...}}%%自定义甘特图样式，如颜色、字体，新版新增active/todayMarker/ 多依赖 / 样式配置等特性，旧版会忽略但不影响核心渲染； -
如何查版本：Typora → 帮助 → 关于 Typora（可看到 Typora 版本）。