Mermaid ガントチャートのチートシート

タスク、セクション、日付を、時間軸に沿って並べたもの。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

セクションとタスク

タスクはタイトル、コロン、開始位置、長さです。dateFormat は日付の読み方を指定します。

gantt
  dateFormat YYYY-MM-DD
  title Release plan
  section Build
  Compile :a1, 2026-01-06, 3d
  Test    :a2, after a1, 5d

状態タグ

done、active、crit はタグで、リストの先頭に書く必要があります。

gantt
  dateFormat YYYY-MM-DD
  section Build
  Compile :done, a1, 2026-01-06, 3d
  Test    :active, a2, 2026-01-09, 3d
  Ship    :crit, a3, 2026-01-12, 2d

1 つのセクションに 3 本のガントチャートの棒。1 本目は塗り、2 本目は輪郭、3 本目は赤でハイライトされています。

ほかのタスクに依存する

after a1 は、id が a1 のタスクが終わったときに別のタスクを開始します。

gantt
  dateFormat YYYY-MM-DD
  section Build
  Compile :a1, 2026-01-06, 3d
  Test    :a2, after a1, 5d
  Ship    :a3, after a2, 2d

ガントチャートの棒 3 本が横一列に並び、それぞれが直前の棒が終わった場所から始まっています。

マイルストーン

マイルストーンは長さ 0 のタスクです。棒ではなく、時間軸上の印です。

gantt
  dateFormat YYYY-MM-DD
  section Release
  Work :a1, 2026-01-06, 10d
  Launch :milestone, m1, 2026-01-20, 0d

Mermaid ガントチャートのチートシート

セクションとタスク

状態タグ

ほかのタスクに依存する

マイルストーン

Mernyx で描いてみる