Typora绘制-甘特图

**注意：**甘特图的高亮新旧版本会正常显示

甘特图

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, 7d
```
after 任务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

复制代码

gantt
    title 项目开发甘特图
    dateFormat  YYYY-MM-DD
    axisFormat  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

复制代码

gantt
    title 系统迭代甘特图
    dateFormat  YYYY-MM-DD
    axisFormat  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
MM-DD MM-DD MM-DD MM-DD MM-DD MM-DD MM-DD MM-DD 需求调研需求评审前端开发后端开发功能测试上线发布需求分析开发实现测试上线项目开发甘特图

示例2
MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日 MM月DD日需求收集原型设计接口开发前端页面数据库设计接口测试系统联调预发布验证正式上线线上监控产品规划技术开发质量保障发布上线系统迭代甘特图

4、老版本语法

gantt新版本功能可以支持更丰富的内容，旧版本写法上几乎没有什么变动，头部声明也没有变化，就不介绍太多了。

复制代码

gantt
    title 基础甘特图
    dateFormat  YYYY-MM-DD
    section 需求阶段
        需求分析 : req, 2026-02-08, 3d
        需求评审 : after req, 2d
    section 上线阶段
        正式上线 : milestone, 2026-02-15, 0d

2026-02-08 2026-02-08 2026-02-09 2026-02-09 2026-02-10 2026-02-10 2026-02-11 2026-02-11 2026-02-12 2026-02-12 2026-02-13 2026-02-13 2026-02-14 2026-02-14 2026-02-15 需求分析需求评审正式上线需求阶段上线阶段基础甘特图

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 版本）。