甘特圖
甘特圖是一種長條圖，用於展示專案進度以及完成某個專案所需的時間。甘特圖顯示了專案終端元素和彙總元素的起始日期與完成日期之間的天數。
注意事項
甘特圖將每一項計畫任務記錄為一條從左向右延伸的連續長條。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
可以在甘特圖中輸入註解，解析器將忽略該註解。註解需要獨佔一行，並且必須以 %% （雙百分比符號）開頭。註解開始後到下一個換行字元的任何文字都將被視為註解，包括任何圖表語法。
複製
嵌入
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
