ガントチャート
ガントチャートは、プロジェクトの進捗とプロジェクトを完了するのに必要な時間を示すための棒グラフです。ガントチャートは、プロジェクトの末端要素と要約要素の開始日と完了日の間の日数を示します。
注意事項
ガントチャートは、各計画タスクを左から右に伸びる連続したバーとして記録します。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
ただし、除外された日付が連続して開始する 2 つのタスクの間にある場合、除外された日付は図上でスキップされて空白になり、その後タスクは除外日付の終了後に開始されます。以下のとおりです:
コピー
埋め込み
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 があります。ラベルは任意ですが、使用する場合は最初に配置する必要があります。ラベルを処理した後、残りのメタデータ項目は次のように解釈されます:
- 単一の項目を指定した場合、それがタスクの終了時期を決定します。具体的な日付や時刻、または期間にできます。期間を指定した場合、タスクの開始日に加算してタスクの終了日を決定し、除外を考慮します。
- 2 つの項目を指定した場合、後の項目は前の場合と同じように解釈されます。最初の項目は、明確な開始日または時刻（形式は dateFormat で指定）を指定するか、after <otherTaskID> [[otherTaskID2 [otherTaskID3]]...] で別のタスクを参照できます。後者の場合、タスクの開始日は、参照されたタスクの最も遅い終了日に基づいて設定されます。
- 3 つの項目を指定した場合、最後の 2 つの項目は前の場合に従って解釈されます。最初の項目はタスクの 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 |
10 進数の値（例えば、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 は、ガントチャートに垂直線を追加して、締め切り、重要なイベント、チェックポイントなどの重要な日付を簡単にハイライトすることを表します。これらのマーカーは図全体に伸び、指定した日付に基づいて配置されます。マイルストーンとは異なり、垂直マーカーは 1 行を占有しません。これらは純粋に視覚的な参照点で、タイムラインを分割し、重要な瞬間をより識別しやすくするのに役立ちます。
コピー
埋め込み
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 | 10 分の 1 秒 |
| SS | 0..99 | 100 分の 1 秒 |
| SSS | 0..999 | 1000 分の 1 秒 |
| Z ZZ | +12:00 | UTC とのオフセット、形式は +-HH:mm、+-HHmm、または Z |
座標軸の日付出力形式
デフォルトの日付出力形式は YYYY-MM-DD です。axisFormat をカスタマイズできます。例えば 2026-Q1 は 2026 年の第 1 四半期を表します。
コピー
埋め込み
axisFormat %Y-%m-%d
以下の形式文字列をサポートします:
| 形式,定義 | |
|---|---|
| %a | 曜日の略称 |
| %A | 曜日の完全な名前 |
| %b | 月の略称 |
| %B | 月の完全な名前 |
| %c | ローカライズされた日付と時刻 |
| %d | 日、10 進数 [01,31] |
| %e | 日、スペースで埋められた 10 進数 [1,31]、%_d に相当します |
| %H | 時（24 時間制）、10 進数 [00,23] |
| %I | 時（12 時間制）、10 進数 [01,12] |
| %j | 年内の通算日、10 進数 [001,366] |
| %m | 月、10 進数 [01,12] |
| %M | 分、10 進数 [00,59] |
| %L | ミリ秒、10 進数 [000, 999] |
| %p | 午前または午後 |
| %S | 秒、10 進数 [00,59] |
| %U | 年内の通算週（日曜日を週の初日とする）、10 進数 [00,53] |
| %w | 曜日、スペースで埋められた 10 進数 [0,6]、ここで 0 は日曜日を表します |
| %W | 年内の通算週（月曜日を週の初日とする）、10 進数 [00,53] |
| %x | ローカライズされた日付表現、例：2026-09-18 |
| %X | ローカライズされた時刻表現、例：14:30:00 |
| %y | 世紀なしの年、10 進数 [00,99]、例えば 26 は 2026 年を表します |
| %Y | 世紀付きの年、10 進数 |
| %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
