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

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

## セクションとタスク

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

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

![Build というセクションに 2 本の棒が前後して並ぶガントチャート。](/diagrams/gantt/tasks.svg)

## 状態タグ

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

```mermaid
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 本目は赤でハイライトされています。](/diagrams/gantt/status.svg)

## ほかのタスクに依存する

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

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

![ガントチャートの棒 3 本が横一列に並び、それぞれが直前の棒が終わった場所から始まっています。](/diagrams/gantt/dependencies.svg)

## マイルストーン

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

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

![作業を表すガントチャートの棒と、その右端の Launch を示すひし形の印。](/diagrams/gantt/milestone.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。