2019年8月26日

Markdown(Typora)でガントチャート

Markdownで作成したガントチャート

Typora で Markdown シリーズの第4弾は、Mermaid を使ってのガントチャートの作成です。MarkdownエディタのTyopraは、mermaid でガントチャートを記述することができます。

Markdownで描くガントチャートには、

  • メリット
    • シンプルなガントチャート
    • 簡単にテキストベースでガントチャートが作成できる
    • テキストなので差分管理も簡単
  • デメリット
    • マイルストーンが設定できない
    • 順序を示す矢印が使用できない
    • 複雑なガントチャートには向かない

という特徴があります。


Typora でガントチャート

Typora でガントチャートを作成するために、```mermaid でEnterすると mermaid のコードが記述できるようになるので、最初の行に gantt と書きます。

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





0 件のコメント:

コメントを投稿

アクセス上位(過去7日間)