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, 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、代码示例示例1gantt 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示例2gantt 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, 3d3、效果示例示例1MM-DDMM-DDMM-DDMM-DDMM-DDMM-DDMM-DDMM-DD需求调研需求评审前端开发后端开发功能测试上线发布需求分析开发实现测试上线项目开发甘特图示例2MM月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, 0d2026-02-082026-02-082026-02-092026-02-092026-02-102026-02-102026-02-112026-02-112026-02-122026-02-122026-02-132026-02-132026-02-142026-02-142026-02-15需求分析需求评审正式上线需求阶段上线阶段基础甘特图5、新旧版本差异甘特图的语法有新旧版本差异但核心的「任务定义、日期格式、分组」完全兼容差异主要体现在「新增特性、样式配置、细节优化」上且旧版语法在新版本中仍能正常运行。基础场景几乎无差异维度旧版Mermaid v8 及以前新版Mermaid v9Typora ≥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 版本。