Mermaid
gantt
title 文書の公開
dateFormat YYYY-MM-DD
todayMarker off
section 準備
構成案 :done, outline, 2026-10-05, 2d
レビュー :active, review, after outline, 3d
公開 :milestone, publish, after review, 0d読み込み中…
Mermaid 11.15.0
Mermaid ガントチャートの書き方・早見表
ガントチャートは作業の日付、期間、依存関係を表します。出来事を並べるならタイムライン、システム間のメッセージならシーケンス図を選びましょう。
ガントチャート作成ツールで作成 →クイックスタート
各タスクに固定のidを付け、afterで先行タスクの終了後に開始します。
構文リファレンス
| 構文 | 意味 |
|---|---|
| gantt / title / section | 図を開始し、タイトルを付け、タスクを区分します。 |
| dateFormat YYYY-MM-DD / axisFormat %d %b | dateFormatはDay.js、axisFormatはD3の書式を使います。 |
| tickInterval 1week / weekday monday | 目盛りの間隔と、週単位の目盛りの開始曜日を指定します。 |
| weekend friday / excludes weekends, 2026-10-12 | 週末を設定します。除外日は期間指定のタスクを延長します。 |
| includes 2026-10-10 | 指定した日付を除外対象から戻します。曜日名ではなく日付を使います。 |
| inclusiveEndDates | 明示した終了日を期間に含めます。 |
| todayMarker off / todayMarker stroke:#0070f3,stroke-width:2px | 今日の線を非表示にするか、見た目を設定します。 |
| Task :id, start, end / Task :id, start, 2d | 表示名とメタデータをコロン、各項目をカンマで区切ります。 |
| after a b / until c d | afterは最も遅い終了、untilは最も早い開始を参照します。 |
| 500ms / 30s / 30m / 4h / 3d / 2w / 1M / 1y | 大文字小文字を区別します。mは分、Mは月です。小数も使えます。 |
| done / active / crit / milestone / vert | タグはidより前に置きます。milestoneは時点、vertは行を使わない縦線です。 |
| click id href "https://example.com" / click id call callback() | リンクやコールバックは表示環境に依存し、厳格モードでは無効です。 |
| topAxis / config.gantt.topAxis / config.gantt.displayMode: compact | 上部の軸を表示し、重ならないタスクを同じ行にまとめます。 |
| %% / accTitle: / accDescr: | コメントとアクセシビリティ用の説明です。 |
作業日と時間軸
除外日はバーを分割せず、指定期間を延長します。includesで特定の日を戻せます。明示した終了日は固定され、inclusiveEndDatesを使うと最終日も含みます。
Mermaid
gantt
dateFormat YYYY-MM-DD
axisFormat %d %b
tickInterval 1week
weekday monday
excludes weekends, 2026-10-12
includes 2026-10-10
todayMarker off
section 執筆
手引き :handbook, 2026-10-09, 4d
校正 :proof, after handbook, 2d読み込み中…
タスクの依存関係
表示名ではなくidを参照します。複数のafterは最後の終了、untilは最初の開始に合わせます。未定義のidや循環参照を避けてください。
Mermaid
gantt
dateFormat YYYY-MM-DD
todayMarker off
section リリース
承認確認 :milestone, signoff, 2026-10-15, 0d
編集 :edit, 2026-10-05, until signoff
テスト :test, 2026-10-07, 3d
パッケージ :package, after edit test, 1d読み込み中…
状態とマーカー
critとdoneやactiveを組み合わせられます。期間ゼロのマイルストーンは開始時点、それ以外は期間の中点に置かれます。vertは専用の行を使いません。
Mermaid
gantt
dateFormat YYYY-MM-DD
todayMarker off
section 納品
下書き :done, draft, 2026-10-05, 2d
検証 :crit, active, validate, after draft, 3d
締め切り :vert, deadline, 2026-10-09, 0d
承認 :milestone, approval, after validate, 0d読み込み中…
リンクと安全設定
clickはURLやコールバックを割り当てます。このサイトは厳格な安全設定で図内の操作を無効にしています。信頼できないコードでは保護を維持してください。
Mermaid
gantt
dateFormat YYYY-MM-DD
todayMarker off
section 注記
手引きを読む :guide, 2026-10-05, 2d
click guide href "https://themarkdowner.com"読み込み中…
コンパクト表示と上部の軸
ganttの前にYAML設定を置きます。compactは可能な場合に行を共有しますが、リソースを割り当てません。従来の%%{init: ...}%%も利用できます。
Mermaid
---
config:
gantt:
displayMode: compact
topAxis: true
---
gantt
dateFormat YYYY-MM-DD
todayMarker off
section タスク
第1確認 :first, 2026-10-05, 2d
第2確認 :second, after first, 2d読み込み中…
よくある間違い
日付書式を混同する
YYYY-MM-DDはdateFormat、%d %bはaxisFormat用です。軸の変更では日付の読み取りは変わりません。
存在しない期間単位を使う
無効な単位は警告なしで期間ゼロになることがあります。描画した終了日を確認してください。
未対応の命令を使う
dates命令はありません。dateFormatを独立した行に書きます。
誤った構文（下に修正例があります）
gantt
dates YYYY-MM-DD Mermaid
gantt
dateFormat YYYY-MM-DD
todayMarker off
section 確認
検証する :check, 2026-10-05, 1d読み込み中…
制約
- Mermaidはクリティカルパスを計算せず、リソース容量も検証しません。
- 除外日は期間を変えますが、明示した終了日を自動で動かしません。
- 厳格モードではタスクのクリック操作が無効です。
よくある質問 (FAQ)
週末を除外するには？
excludes weekendsを使います。weekend fridayで金曜と土曜を選び、includesで特定の日を戻せます。
タスクをつなぐには？
先行タスクにidを付け、次のタスクの開始にafterとそのidを書きます。複数idなら最後の終了を待ちます。
この早見表を印刷するには？
ブラウザーの印刷でPDFを選びます。操作ボタンは消え、コードと図は残ります。