Markdown（Typora）でガントチャート

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 の記述方法については、下記のシリーズで紹介しています。