Mermaid記法でガントチャートを描く（入門編）

使う者の命を削るという呪いの記法ガンドアーム、じゃなくてガントチャート。君は生き残ることができるか。

Mermaid

マーメイドでどんなことができるのだろう。気になりますよね。今回はガントチャートを見てみます。

基本形

```mermaid
gantt 
タスク:  2022-11-22, 2022-11-24
```

一行目の「gantt」でガントチャートの宣言をします。考案者ヘンリー・ガントの名前から命名されました。

書式はタスク名を書いてから、開始日時と終了日時を並べます。すると下記のように表示。赤い線は「現時点」です。自動で表示されます。

gantt 
タスク:  2022-11-22, 2022-11-24

終了日時を「期間」にもできます。「2日後」であれば「2d」と書く。

```mermaid
gantt 
タスク:  2022-11-22, 2d
```

時間割

```mermaid
gantt
dateFormat HH:mm
axisFormat %H:%M
タスク:  08:20, 8h
```

1日の予定だと、こんな感じ。

gantt
dateFormat HH:mm
axisFormat %H:%M
タスク:  08:20, 8h

タスクの連続

```mermaid
gantt 
タスク1:  2022-11-22, 2d
タスク2:  3d
タスク3:  2d
```

タスクを並べます。開始日時を省略すると、一つ上のタスクに繋げます。

```mermaid
gantt
dateFormat MM/DD
section プロジェクトA
タスク1:  11/22, 2d
タスク2:  3d
タスク3:  1d
```

sectionを付けるとグループ化します。「月/日」表示にもしてみます。

```mermaid
gantt
dateFormat MM/DD
axisFormat %m/%d
section プロジェクトA
タスク1:   done, 11/22, 2d
タスク2:  active, 3d
タスク3:  crit, 1d
```

「完了」や「注意」など、タスクの種類を色で表します。

gantt
dateFormat MM/DD
axisFormat %m/%d
section プロジェクトA
タスク1:   done, 11/22, 2d
タスク2:  active, 3d
タスク3:  crit, 1d

いろいろ種類があるみたい。

実例

```mermaid
gantt
axisFormat %m/%d
title ワールドカップ2022
section 予選
グループA: a, 2022-11-20, 2022-12-02
グループB: b, 2022-11-20, 2022-12-02
グループC: c, 2022-11-20, 2022-12-02

section 決勝
決勝トーナメント: after a b c, 2022-12-14
3位決定戦: milestone, 2022-12-17
優勝決定戦: crit, milestone, 2022-12-18
```

日程の関係を視覚化します。

gantt
axisFormat %m/%d
title ワールドカップ2022
section 予選
グループA: a, 2022-11-20, 2022-12-02
グループB: b, 2022-11-20, 2022-12-02
グループC: c, 2022-11-20, 2022-12-02

section 決勝
決勝トーナメント: after a b c, 2022-12-14
3位決定戦: milestone, 2022-12-17
優勝決定戦: crit, milestone, 2022-12-18

まとめ

Todoアプリと連携する方法があれば便利そうだけど。