树形图 
括号图 
思维笔记 
甘特图
甘特图是一种柱状图，用于展示项目进度以及完成某个项目所需的时间。甘特图显示了项目终端元素和汇总元素的起始日期与完成日期之间的天数。
注意事项
甘特图将每一项计划任务记录为一条从左向右延伸的连续条。x轴代表时间，y轴记录不同的任务及其完成的顺序。
更重要的是，当某个任务的日期、天数或特定日期集合被排除时，甘特图将通过向右延长相同天数来适应这些更改，而不是在任务内部创建间隙 。
复制
嵌入
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes 2026-03-16,2026-03-18,2026-03-19
section Section
A task :a1, 2026-03-07, 7d
Another task :after a1, 5d
但是，如果排除的日期位于两个连续开始的任务之间，排除的日期将在图表上被跳过并留空，随后任务将在排除日期结束后开始。如下所示：
复制
嵌入
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
excludes Sunday, Friday, Saturday
section Section
A task :a1, 2026-03-07, 5d
Another task :after a1, 7d
甘特图对于跟踪项目完成所需的时间很有用，但通过一些调整，它也可以用于图形化地表示“非工作日”。
语法
复制
嵌入
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2026-01-06,2026-01-08
Active task :active, des2, 2026-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2026-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2026-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
任务默认是连续进行的，下一个任务开始日期默认为上一个任务的结束日期。
任务标题和其元数据用冒号（:）分隔，元数据项之间用逗号（,）分隔。有效标签包括 active、done、crit 和 milestone。标签是可选项，但如果使用，必须放在最前面。处理完标签后，剩余的元数据项解释如下：
- 如果指定了单个项目，它将决定任务何时结束。它可以是具体的日期或时间，也可以是持续时间。如果指定了持续时间，则会将其加到任务的开始日期上，以确定任务的结束日期，同时考虑任何排除的情况。
- 如果指定了两个项目，则后一个项目的解释方式与前一种情况相同。第一个项目可以指定一个明确的开始日期或时间（格式由 dateFormat 指定），也可以通过 after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] 引用另一个任务。在后一种情况下，任务的开始日期将根据任何被引用任务的最晚结束日期来设置。
- 如果指定了三个项目，最后两个项目将按照前面的情况解释。第一个项目将表示任务的 ID，可以使用 later <taskID> 语法引用。
| 元数据语法 | 开始日期 | 结束日期 | ID |
|---|---|---|---|
| <taskID>, <startDate>, <endDate> | 使用 dateformat 解释的 startdate | 使用 dateformat 解释的 endDate | taskID |
| <taskID>, <startDate>, <length> | 使用 dateformat 解释的 startdate | 开始日期 + length | taskID |
| <taskID>, after <otherTaskId>, <endDate> | 先前指定任务 otherTaskID 的结束日期 | 使用 dateformat 解释的 endDate | taskID |
| <taskID>, after <otherTaskId>, <length> | 先前指定任务 otherTaskID 的结束日期 | 开始日期 + length | taskID |
| <taskID>, <startDate>, until <otherTaskId> | 使用 dateformat 解释的 startdate | 先前指定任务 otherTaskID 的开始日期 | taskID |
| <taskID>, after <otherTaskId>, until <otherTaskId> | 先前指定任务 otherTaskID 的结束日期 | 先前指定任务 otherTaskID 的开始日期 | taskID |
| <startDate>, <endDate> | 使用 dateformat 解释的 startdate | 使用 dateformat 解释的 enddate | 不适用 |
| <startDate>, <length> | 使用 dateformat 解释的 startdate | 开始日期 + length | 不适用 |
| after <otherTaskID>, <endDate> | 先前指定任务 otherTaskID 的结束日期 | 使用 dateformat 解释的 enddate | 不适用 |
| after <otherTaskID>, <length> | 先前指定任务 otherTaskID 的结束日期 | 开始日期 + length | 不适用 |
| <startDate>, until <otherTaskId> | 使用 dateformat 解释的 startdate | 先前指定任务 otherTaskID 的开始日期 | 不适用 |
| after <otherTaskId>, until <otherTaskId> | 先前指定任务 otherTaskID 的结束日期 | 先前指定任务 otherTaskID 的开始日期 | 不适用 |
| <endDate> | 上一个任务的结束日期 | 使用 dateformat 解释的 enddate | 不适用 |
| <length> | 上一个任务的结束日期 | 开始日期 + length | 不适用 |
| until <otherTaskId> | 上一个任务的结束日期 | 先前指定任务 otherTaskID 的开始日期 | 不适用 |
持续时间格式
在指定 <length> 时，使用一个数字，后跟以下单位后缀之一：
| 单位 | 后缀 | 示例 |
|---|---|---|
| 毫秒 | ms | 50ms |
| 秒 | s | 30s |
| 分钟 | m | 30m |
| 小时 | h | 4h |
| 天 | d | 7d |
| 周 | w | 3w |
| 月 | m | 2m |
| 年 | y | 1y |
也支持十进制值（例如，2.5d）。无效的持续时间标记（例如，3dX）将被忽略，任务将默认持续时间为零。
为简单起见，该表未显示使用 after 关键字列出的多个任务。以下是示例：
复制
嵌入
gantt
apple :a, 2026-07-20, 1w
banana :crit, b, 2026-07-23, 1d
cherry :active, c, after b a, 1d
kiwi :d, 2026-07-20, until b c
标题
title 是一个可选字符串，显示在甘特图的顶部，用于描述整个图表。
排除
excludes 是可选属性，接受特定日期（YYYY-MM-DD 格式）、星期几（例如 "sunday"）或 "weekends"，但不能使用 "weekdays" 这个词。这些日期将标记在图表上，并从任务的持续时间计算中排除。。这意味着，如果任务持续期间包含排除的日期，排除的天数将会加到任务结束时间，以确保任务的持续时间与代码中指定的一致。
周末
排除周末时，可以将周末设置为周五和周六，或者周六和周日。默认情况下，周末是周六和周日。要定义周末开始日，可以在新行中添加一个可选属性 weekend，后跟 friday 或 saturday。
复制
嵌入
gantt
title A Gantt Diagram Excluding Fri - Sat weekends
dateFormat Букмекерлар-MM-DD
excludes weekends
weekend friday
section Section
A task :a1, 2026-01-01, 30d
Another task :after a1, 20d
部分声明
你可以将图表划分为各个部分，将项目的不同部分（例如开发和文档）分开。
为此，请在一行开头使用 section 关键字并为其命名。请注意，与整个图表的标题不同，这个名称是必需的。
里程碑
你可以在图表中添加里程碑。里程碑与任务不同，因为它们代表某个具体时间，并由关键字 milestone 标识。以下是使用里程碑的示例：里程碑的确切位置由里程碑的起始日期和任务的持续时间确定，如下所示：
复制
嵌入
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial milestone : milestone, m1, 17:49, 2m
Task A : 10m
Task B : 5m
Final milestone : milestone, m2, 18:08, 4m
垂直标记
vert 表示在甘特图中添加垂直线，以便轻松高亮重要日期，例如截止日期、重要事件或检查点。这些标记会延伸到整个图表，并根据你提供的日期进行定位。与里程碑不同，垂直标记不占用一行。它们纯粹是视觉参考点，有助于分解时间线，使重要时刻更容易被识别。
复制
嵌入
gantt
dateFormat HH:mm
axisFormat %H:%M
Initial vert : vert, v1, 17:30, 2m
Task A : 3m
Task B : 8m
Final vert : vert, v2, 17:58, 4m
设置日期
dateFormat 定义甘特图元素的日期输入格式，axisFormat 定义了渲染图表时日期输出格式。
输入日期格式
默认输入日期格式为 YYYY-MM-DD，你可以自定义 dateFormat。
复制
嵌入
dateFormat YYYY-MM-DD
支持以下格式选项：
| 输入 | 示例 | 描述 |
|---|---|---|
| YYYY | 2026 | 4位数字年份 |
| YY | 26 | 2位数字年份 |
| Q | 1..4 | 季度数字 |
| M MM | 1..12 | 月份数字 |
| D DD | 1..31 | 一个月中的某一天 |
| Do | 1st..31st | 带序数的一个月中的某一天 |
| DDD DDDD | 1..365 | 一年中的某一天 |
| X | 1410715640.579 | Unix 时间戳 |
| x | 1410715640579 | Unix 毫秒时间戳 |
| H HH | 0..23 | 24小时时间 |
| h hh | 1..12 | 12小时时间，与 a A 配合使用 |
| a A | am pm | 上午或下午 |
| m mm | 0..59 | 分钟 |
| s ss | 0..59 | 秒数 |
| S | 0..9 | 十分之一秒 |
| SS | 0..99 | 百分之一秒 |
| SSS | 0..999 | 千分之一秒 |
| Z ZZ | +12:00 | 与 UTC 的偏移，格式为 +-HH:mm、+-HHmm 或 Z |
坐标轴的输出日期格式
默认输出日期格式为 YYYY-MM-DD。你可以自定义 axisFormat，例如 2026-Q1 表示2026年的第一季度。
复制
嵌入
axisFormat %Y-%m-%d
支持以下格式字符串：
| 格式,定义 | |
|---|---|
| %a | 星期的缩写名称 |
| %A | 星期的完整名称 |
| %b | 月份的缩写名称 |
| %B | 月份的完整名称 |
| %c | 本地化日期和时间 |
| %d | 日期，十进制数字 [01,31] |
| %e | 日期，用空格填充的十进制数字 [1,31]，相当于%_d |
| %H | 小时（24小时制），十进制数字 [00,23] |
| %I | 小时（12小时制），十进制数字 [01,12] |
| %j | 一年中的第几天，十进制数字 [001,366] |
| %m | 月份，十进制数字 [01,12] |
| %M | 分钟，十进制数字 [00,59] |
| %L | 毫秒，十进制数字 [000, 999] |
| %p | 上午或下午 |
| %S | 秒，十进制数字 [00,59] |
| %U | 一年中的第几周（以星期日为一周的第一天），十进制数字 [00,53] |
| %w | 星期几，用空格填充的十进制数字 [0,6]，其中 0 代表星期日 |
| %W | 一年中的第几周（以星期一为一周的第一天），十进制数字 [00,53] |
| %x | 本地化的日期表示，如：2026-09-18 |
| %X | 本地化的时间表示，如：14:30:00 |
| %y | 无世纪的年份，十进制数 [00,99]，例如 26 代表 2026 年 |
| %Y | 带世纪的年份，十进制数字 |
| %Z | 时区名称缩写，例如 "-0700" |
| %% | 转义字符，用来显示百分号 % 本身 |
坐标轴刻度
默认输出刻度为自动。你可以自定义 tickInterval，例如 1day 或 1week。
复制
嵌入
tickInterval 1day
模式是
复制
嵌入
/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/;
基于周的 tickInterval 默认从星期日开始。如果你希望指定 tickInterval 开始的其他工作日，请使用 weekday 选项，代码如下：
复制
嵌入
gantt
tickInterval 1week
weekday monday
紧凑模式输出
紧凑模式允许你在同一行中显示多个任务。通过前面的 YAML 设置来控制图形的显示模式，为甘特图启用紧凑模式。
复制
嵌入
---
displayMode: compact
---
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2026-01-01, 30d
Another task :a2, 2026-01-20, 25d
Another one :a3, 2026-02-10, 20d
可以在甘特图中输入注释，解析器将忽略该注释。注释需要独占一行，并且必须以 <code>%%</code>（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法。
复制
嵌入
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
今日标记
你可以为当前日期的标记设置样式或隐藏该标记。要设置样式，请为 todayMarker 键添加一个值。
复制
嵌入
todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
要隐藏标记，请将 todayMarker 设置为 off。
复制
嵌入
todayMarker off
示例
柱状甘特图
复制
嵌入
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
时间线（包含注释、CSS 和前置配置）
复制
嵌入
---
# Frontmatter config, YAML comments
title: Ignored if specified in chart
displayMode: compact #gantt specific setting but works at this level too
config:
# theme: forest
# themeCSS: " #item36 { fill: CadetBlue } "
themeCSS: " // YAML supports multiline strings using a newline markers:
#item36 { fill: CadetBlue }
// Custom marker workaround CSS from forum (below)
rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }
text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
"
gantt:
useWidth: 400
rightPadding: 0
topAxis: true #false
numberSectionStyles: 2
---
gantt
title Timeline - Gantt Sampler
dateFormat YYYY
axisFormat %y
%% this next line doesn't recognise 'decade' or 'year', but will silently ignore
tickInterval 1decade
section Issue19062
71 : item71, 1900, 1930
section Issue19401
36 : item36, 1913, 1935
section Issue1300
94 : item94, 1910, 1915
5 : item5, 1920, 1925
0 : milestone, item0, 1918, 1s
9 : vert, 1906, 1s %% not yet official
64 : workaround, 1923, 1s %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
