ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Mermaid画甘特图

Mermaid画甘特图 文章目录甘特图基本语法dateFormat格式axisFormat格式甘特图甘特图从外观来看是一种水平条形图其横轴表示时间纵轴表示任务从而直观展示项目进度计划。简单示例如下08-2008-2108-2208-2308-2408-2508-2608-2708-2808-2908-3008-3109-01需求评审(已完成)架构设计(进行中)核心模块开发(关键)系统联调正式上线(里程碑)需求与设计开发与交付核心功能发布计划其代码为gantt title 核心功能发布计划 dateFormat YYYY-MM-DD axisFormat %m-%d section 需求与设计 需求评审(已完成) :done, req1, 2026-08-20, 2d 架构设计(进行中) :active, des1, 2026-08-22, 3d section 开发与交付 核心模块开发(关键) :crit, dev1, after des1, 5d 系统联调 : dev2, after dev1, 2d 正式上线(里程碑) :milestone, m1, after dev2, 0d甘特图中的四个长条名字分别是req1, des1, dev1, dev2最后的菱形里程碑则是m1。基本语法甘特图中除了时间轴和时间轴之外剩下的工作就是描述事件其基本语法为事件说明 :状态 事件代号, 开始日期, 持续时间其中状态共有四种分别是done已完成默认灰色active进行中默认深色crit关键路径/核心任务默认红色高亮milestone里程碑被渲染为菱形持续时间必须为 0dateFormat格式dateFormat为时间轴上的时间日期格式可选参数如下表所示输入示例描述YY YYYY26 2026两位四位年份Q1…4年的季度。设置月份为该季度的第一个月M MM1…12月份数字MMM MMMM一月…十二月按 dayjs.locale() 设置的区域显示的月份名称D DD1…31月中的天数DDD DDDD1…365年中的天数Do1st…31st带序数的月日X1410715640.579Unix 时间戳x1410715640579Unix 毫秒时间戳H HH0…2324 小时时间h hh1…1212 小时时间与 a A 配合使用a Aam pm上午或下午m mm0…59分钟s ss0…59秒S,SS,SSS0…9秒的小数位(S个数对应位数)Z ZZ12:00相对于 UTC 的偏移格式为 ±HH:mm、±HHmm 或 ZaxisFormat格式axisFormat是坐标轴上的输出时间格式可选代码如下表所示。格式定义%a %A星期名称缩写和完整的%b %B月份名称缩写和完整的%c日期和时间格式为 “%a %b %e %H:%M:%S %Y”%d以零填充的月份中的日期作为十进制数字 [01,31]%e月中的日期以十进制数字表示并用空格填充 [1,31]等同于 %_d%I %H小时12小时制和24小时制十进制数字 [00,23] [01,12]%j以十进制数字表示的年份中的第几天 [001,366]%m以小数形式表示的月份 [01,12]%M分钟的小数形式 [00,59]%L毫秒作为十进制数 [000, 999]%p上午或下午%S以小数形式表示的秒 [00,61]%U一年中的第几周以星期日为一周的第一天以十进制数字表示 [00,53]%w作为十进制数字的星期几 [0(星期日),6]%W一年中的第几周以星期一为一周的第一天十进制数字 [00,53]%x日期格式为 “%m/%d/%Y”%X时间格式为 “%H:%M:%S”%y无世纪年份的十进制数 [00,99]%Y以十进制数字表示的带世纪的年份%Z时区偏移例如 “-0700”%%一个字面的“%”字符
返回列表