Typora で Markdown シリーズの第4弾は、Mermaid を使ってのガントチャートの作成です。MarkdownエディタのTyopraは、mermaid でガントチャートを記述することができます。
Markdownで描くガントチャートには、
- メリット
- シンプルなガントチャート
- 簡単にテキストベースでガントチャートが作成できる
- テキストなので差分管理も簡単
- デメリット
- マイルストーンが設定できない
- 順序を示す矢印が使用できない
- 複雑なガントチャートには向かない
という特徴があります。
Typora でガントチャート
Typora でガントチャートを作成するために、```mermaid でEnterすると mermaid のコードが記述できるようになるので、最初の行に gantt と書きます。
タイトル行
title に続けてタイトルを記述します。
日付フォーマット
- dateFormat
- axisFormat
dateFormat で gantt の中で使用する日付のフォーマットを定義します。ネットで検索した多くの例は、dateFormat YYYY-MM-DD となっていますが、これは、2019-08-25 のように日付を記述するという意味です。
| フォーマット | 記述形式 |
| YYYY | 年4桁 |
| YY | 年2桁 |
| MM | 月2桁 |
| DD | 日2桁 |
上記以外の記号文字はそのまま表示されます。つまり、dateFormat MM/DD とすれば、月と日をスラッシュ区切りで記述するという意味になります。
下記の例は、dateFormat で年4桁で記述すると宣言した場合の記載方法です。
```mermaid gantt dateFormat YYYY axisFormat %Y/%m task1: 2019, 2020 task2: 2020, 2021 task3: 2021, 2022 ```
次に axisFormat ですが、これは、軸の日付フォーマットになります。上記の例でもは、年4桁/月 となります。その他に下記のフォーマットが使えます。
| フォーマット | 記述形式 |
| %Y | yyyy: 年4桁 |
| %y | yy: 年2桁 |
| %m | mm: 月2桁（01-12） |
| %d | dd: 日2桁（01-31） |
上記表以外の記号文字は、そのまま表示されるので %m/%d とすれば、mm/dd の形式で表示されます。
タスクの期間の記述方法
各タスクの期間を記述する方法にはいくつかあります。
- 開始日付と終了日付+1日で記載
- e.g. 08/01,08/08
- 開始日付と日数で記載
- e.g. 08/01,7d
- 開始日と週数で記載
- e.g. 08/01,1w
- 期間だけを記載（2つ目以降のタスク）
- e.g. 7d or 1w
下記の例は、何れも1週間の期間となります。
```mermaid gantt title 1週間の表記方法 dateFormat MM/DD axisFormat %m/%d task1(08/01-08/08): 08/01,08/08 task2(08/08,7d) : 08/08,7d task3(1w) : 1w ```
後続タスクの記述方法
後続タスクは、after を使います。表示上は何ら変わらないので、すべてのタスクを開始日と終了日で記載するのであれば、afterを使う必要はありません。
下記の例では、task1の終了後にtask3が開始されます。
```mermaid gantt title 後続タスク dateFormat MM/DD axisFormat %m/%d task1: 08/01,08/08 task2: 08/05,5d task3: after task1,1w ```
また、タスク名が長い場合などには、エイリアス名を付けることも可能です。下記の例では、task1 を t1 と定義して、8行目で after t1 として利用しています。
```mermaid gantt title 後続タスク dateFormat MM/DD axisFormat %m/%d task1: t1, 08/01,08/08 task2: t2, 08/05,5d task3: t3, after t1,1w ```
タスクのステータスとクリティカルタスク
各タスクは、完了、実行中 と クリティカルタスクを示すことができます。
| 記述方法 | 意味 |
| done | 完了タスク |
| active | 実施中のタスク |
| crit | クリティカルタスク |
| crit, done | 完了したクリティカルタスク |
| crit, active | 実施中のクリティカルタスク |
```mermaid gantt title タスクステータスとクリティカルタスク dateFormat MM/DD axisFormat %m/%d task1: done, 08/08, 1w task2: crit, done, 08/15, 1w task3: crit, avtive, 08/22, 1w task4: 08/29, 1w task5: crit, 09/05, 1w ```
セクション
タスクをセクション毎に分けることができます。下記は、”準備”、”実行”、”確認”と3セクションに分けている例です。
```mermaid gantt dateFormat MM/DD axisFormat %m/%d title ガントチャート section 準備 終了タスク: done, 07/07, 4w section 実行 アクティブタスク: active, t1, 08/04, 28d 後続タスク: after t1, 09/29 section 確認 クリティカル: crit, 09/01, 09/15 最終タスク: 09/15, 2w ```
Typora で Markdown シリーズ
Typora での Markdown の記述方法については、下記のシリーズで紹介しています。
