Mermaidを使うと、Markdownに近い短いテキストからガントチャートを作れます。専用ソフトを開かなくても、タスクの日程や依存関係をコードとして管理できるのが利点です。
ガントチャートとは、複数のタスクについて開始日・終了日・依存関係・進捗を時間軸上で整理する図です。プロジェクト全体の日程と、どの作業が次の作業に影響するかをひと目で確認できます。
まず動かしたい場合は、次のコードをMermaid対応エディタへ貼り付けてください。
gantt
title Webサイト更新プロジェクト
dateFormat YYYY-MM-DD
axisFormat %m/%d
tickInterval 1week
excludes weekends
section 調査
検索意図を確認 :done, research, 2026-08-17, 2d
記事構成を作る :active, outline, after research, 2d
section 制作
初稿を書く :crit, draft, after outline, 3d
画像とコードを確認 :check, after draft, 2d
公開判断 :milestone, release, after check, 0d
このコードでは、開始日を直接指定する方法と、前のタスクが終わってから開始する方法の両方を使っています。
Mermaidガントチャートの基本構造
最低限必要なのは、先頭のganttとタスクです。実務では、入力日付の形式を示すdateFormatも明示しておくと安全です。
gantt
dateFormat YYYY-MM-DD
section 準備
要件整理 :task1, 2026-08-17, 3d
タスクの基本形は次のとおりです。
タスク名 :状態, タスクID, 開始日または依存関係, 終了日または期間状態は省略できます。タスクIDを付けると、別のタスクからafter task1のように参照できます。
日付と期間を指定する
開始日と終了日を直接指定
gantt
dateFormat YYYY-MM-DD
執筆 :write, 2026-08-17, 2026-08-20
開始日と作業期間を指定
gantt
dateFormat YYYY-MM-DD
執筆 :write, 2026-08-17, 3d
期間にはd（日）、w（週）、h（時間）などを使えます。公式仕様では月のMと分のmが区別されるため、大文字・小文字に注意してください。
前のタスクが終わってから開始
gantt
dateFormat YYYY-MM-DD
構成 :outline, 2026-08-17, 2d
執筆 :write, after outline, 3d
校正 :proof, after write, 1d
日付を何度も書くより、依存関係をafterで表す方が変更に強くなります。構成作成が1日延びても、後続タスクの開始位置が連動します。
sectionでタスクをグループ化する
sectionは、調査・制作・レビューのような作業のまとまりを作ります。
gantt
dateFormat YYYY-MM-DD
section 調査
公式資料の確認 :docs, 2026-08-17, 2d
検索意図の確認 :search, 2026-08-17, 2d
section 制作
初稿 :draft, after docs search, 3d
after docs searchのように複数IDを並べると、参照したタスクのうち最も遅い終了時点から開始します。
done・active・critで状態を色分けする
タスクの先頭には次のタグを付けられます。
| タグ | 意味 | 使いどころ |
|---|---|---|
done |
完了 | 終わった作業 |
active |
進行中 | 現在対応している作業 |
crit |
重要・クリティカル | 遅延させたくない作業 |
milestone |
マイルストーン | 公開日や判断日 |
タグは組み合わせることもできます。
gantt
dateFormat YYYY-MM-DD
調査完了 :done, research, 2026-08-17, 2d
初稿 :active, draft, after research, 3d
最終確認 :crit, review, after draft, 1d
公開判断 :milestone, release, after review, 0d
色を細かく指定する前に、まずdone・active・critで意味を分ける方が、コードを読みやすく保てます。テーマや埋め込み先によって実際の色は変わります。
土日や休日を除外する
excludes weekendsを使うと、土日を作業日数から除外できます。
gantt
dateFormat YYYY-MM-DD
excludes weekends
調査 :research, 2026-08-17, 5d
除外日は棒の途中に空白を作るのではなく、その日数分だけタスクの終了を後ろへ延ばして表現されます。特定日も追加できます。
gantt
dateFormat YYYY-MM-DD
excludes weekends
excludes 2026-08-20 2026-08-21
調査 :research, 2026-08-17, 5d
weekdaysという指定は使えません。週末以外を除外したい場合は、曜日または日付を個別に指定します。
横軸の日付表示を変える
入力の形式はdateFormat、横軸の見た目はaxisFormatで指定します。
gantt
dateFormat YYYY-MM-DD
axisFormat %m/%d
tickInterval 1week
タスクA :a, 2026-08-17, 2w
dateFormat YYYY-MM-DD: コードへ入力する日付の形式axisFormat %m/%d: 横軸を「月/日」で表示tickInterval 1week: 目盛りを1週間ごとに表示
長期間の計画ではaxisFormat %Y-%m、短期間では%m/%dが見やすい出発点です。
今日を示す線を変更・非表示にする
現在日を示す線はtodayMarkerで設定できます。
gantt
dateFormat YYYY-MM-DD
todayMarker stroke-width:3px,stroke:#e11d48,opacity:0.6
タスクA :a, 2026-08-17, 7d
非表示にする場合は次のように書きます。
todayMarker offよくあるエラー
日付が意図どおり解釈されない
dateFormatと実際の日付をそろえます。YYYY-MM-DDを指定したなら、2026-8-1ではなく2026-08-01へ統一すると確認しやすくなります。
afterで参照できない
参照先のタスクIDを確認してください。表示名ではなく、draftやreviewなどコロン以降に付けたIDを使います。
タスクが一瞬で終わる
期間の書式が不正だと、ゼロ期間として扱われることがあります。3d、2wのように、数値と単位を続けて書きます。
NotionやWordPressで同じ表示にならない
Mermaidの対応バージョンや埋め込み方法はサービスごとに異なります。公式のMermaid Live Editorで表示できるのに埋め込み先で失敗する場合は、そのサービスが対応する構文を確認してください。
まとめ
Mermaidのガントチャートは、次の順で作ると迷いにくくなります。
ganttとdateFormatを書くsectionで作業を分ける- 各タスクへIDを付ける
- 後続タスクを
afterでつなぐ done・active・critで状態を示す- 必要なら
excludes、axisFormat、tickIntervalを追加する
線・矢印を使ったフローチャートを作りたい場合は、Mermaidの線・矢印・点線まとめも参照してください。
コメント