Mermaidを使ってガントチャートを書こう。

Mermaidでガントチャートを書いてみよう

Mermaidについては以下の記事を参照ください。

Markdownで図は書けるのかMarkdownを使っていると、少し図を入れたいなどと思うことがあります。ありものの図であれば画像ファイル化して埋め込めばいいのですが、自分で作る図となるとそうはいきません。ちなみに、図といってもフローチャ...

今回はMermaidを使ってガントチャートを書いてみます。

gantt（ガントチャート）の書き方

シーケンス図はある動作に対する処理の流れを記載したものです。

以下のサンプルをもとに説明していきます。

    ```mermaid
    gantt
        title プロジェクトA
        dateFormat  YYYY-MM-DD
        excludes    weekends

        section  
            プロジェクト開始 : milestone, m1, 2023-02-01, 0d
            開発開始 : milestone, m2, after a1, 0d
            開発完了 : milestone, m3, after a4, 0d
            テスト完了 : milestone, m3, after b4, 0d

        section 開発
            開発準備 :done,a1, 2023-02-06, 2d
            開発（モジュールA） :done,a2, after a1, 2d
            開発（モジュールB） :active, a3, after a2, 3d
            開発（モジュールC） :a4, after a3, 5d
        section テスト
            テスト準備 :done, b1, 2023-02-10  , 2d
            テスト（モジュールA） :crit, active, b2, after a2 b1  , 2d
            テスト（モジュールB） :crit, b3, after a3 b2  , 2d
            テスト（モジュールC） :crit, b4, after a4 b3  , 2d
    ```

    ```mermaid

まずは、「ここからMermaidを書くぞ」の記載です。
これはMarkdownのコードを書く書式と同じで、コード名を「mermaid」とするだけです。

    gantt

次に「Mermaid」の中の「gantt」だと指定します。

        title プロジェクトA

続けてガントチャートのタイトルを定義します。

「title」に続けてタイトルを記載します。
これはガントチャートのタイトル部分に表示されます。

        dateFormat  YYYY-MM-DD

続いて、日付等のフォーマットを定義します。
ここは一般的なフォーマットを使用して記載できます。

抜粋ですが、以下の表の感じです。

フォーマット	意味
YYYY	年（４桁）
YY	年（２桁）
M	月（最小１桁）
MM	月（２桁）
MMM	月（英語略３文字）
MMMM	月（英語）
D	日（最小１桁）
DD	日（２桁）
H	時間（24時間表記）（最小１桁）
HH	時間（24時間表記）（２桁）
h	時間（12時間表記）（最小１桁）
hh	時間（12時間表記）（２桁）
a	AM or PM
m	分（最小１桁）
mm	分（２桁）
s	秒（最小１桁）
ss	秒（２桁）
z	オフセット

これを使えば、時間単位のガントチャートも作成できます。

        excludes    weekends

これは使わない場合も多いと思いますが、週末を除外するという意味です。
ちなみに残念ながら日本の祝日は定義されていないので、祝日を除外することはできません。

        section  
            プロジェクト開始 : milestone, m1, 2023-02-01, 0d
            開発開始 : milestone, m2, after a1, 0d
            開発完了 : milestone, m3, after a4, 0d
            テスト完了 : milestone, m3, after b4, 0d

        section 開発
            開発準備 :done,a1, 2023-02-06, 2d
            開発（モジュールA） :done,a2, after a1, 2d
            開発（モジュールB） :active, a3, after a2, 3d
            開発（モジュールC） :a4, after a3, 5d
        section テスト
            テスト準備 :done, b1, 2023-02-10  , 2d
            テスト（モジュールA） :crit, active, b2, after a2 b1  , 2d
            テスト（モジュールB） :crit, b3, after a3 b2  , 2d
            テスト（モジュールC） :crit, b4, after a4 b3  , 2d

では、本体部分です。

セクション

ガントチャートを例えばフェーズごとに分けたいなどの場合、セクションを使えます。

        section  
            プロジェクト開始 : milestone, m1, 2023-02-01, 0d
            開発開始 : milestone, m2, after a1, 0d
            開発完了 : milestone, m3, after a4, 0d
            テスト完了 : milestone, m3, after b4, 0d

        section 開発
            開発準備 :a1, 2023-02-06, 2d
            開発（モジュールA） :a2, after a1, 2d
            開発（モジュールB） :a3, after a2, 3d
            開発（モジュールC） :a4, after a3, 5d

「section」の後にセクション名を記載します。
セクション名がない場合は「半角スペース」を2つ入れればOKです。

タスクの書き方

ガントチャートの場合、形は「マイルストーン」か「棒状のタスク」となります。

    プロジェクト開始 : milestone, m1, 2023-02-01, 0d
    開発開始 : milestone, m2, after a1, 0d
    開発準備 :done,a1, 2023-02-06, 2d
    開発（モジュールA） :done,a2, after a1, 2d
    開発（モジュールB） :active, a3, after a2, 3d
    開発（モジュールC） :a4, after a3, 5d
    テスト準備 :done, b1, 2023-02-10  , 2d
    テスト（モジュールA） :crit, active, b2, after a2 b1  , 2d
    テスト（モジュールB） :crit, b3, after a3 b2  , 2d
    テスト（モジュールC） :crit, b4, after a4 b3  , 2d

これらは書き方の決まりがあります。が、少し複雑です。

マイルストーン

    プロジェクト開始 : milestone, m1, 2023-02-01, 0d
    開発開始 : milestone, m2, after a1, 0d

この２つの例を使ってマイルストーンの書き方を確認します。

    プロジェクト開始 : milestone, m1, 2023-02-01, 0d

記載	意味
プロジェクト開始	マイルストーン名
milestone	マイルストーン（固定値）
m1	識別名
2023-02-01	開始日
0d	期間

    開発開始 : milestone, m2, after a1, 0d

記載	意味
開発開始	マイルストーン名
milestone	マイルストーン（固定値）
m2	識別名
after a1	a1（識別名）の後から開始
0d	期間

タスク

    開発（モジュールA） :done,a2, after a1, 2d
    開発（モジュールB） :active, a3, after a2, 3d
    開発（モジュールC） :a4, after a3, 5d
    テスト準備 :done, b1, 2023-02-10  , 2d
    テスト（モジュールA） :crit, active, b2, after a2 b1  , 2d
    テスト（モジュールB） :crit, b3, after a3 b2  , 2d

この６つの例を使ってタスクの書き方を確認します。

    開発（モジュールA） :done,a2, after a1, 2d

記載	意味
開発（モジュールA）	タスク名
done	完了済みタスク
a2	識別名
after a1	a1（識別名）の後から開始
2d	2日かかる

    開発（モジュールB） :active, a3, after a2, 3d

記載	意味
開発（モジュールB）	タスク名
active	実行中タスク
a3	識別名
after a2	a2（識別名）の後から開始
3d	3日かかる

    開発（モジュールC） :a4, after a3, 5d

記載	意味
開発（モジュールC）	タスク名
a4	識別名
after a3	a3（識別名）の後から開始
5d	5日かかる

    テスト準備 :done, b1, 2023-02-10  , 2d

記載	意味
テスト準備	タスク名
done	完了済みタスク
b1	識別名
2023-02-10	2023年2月10日から開始
2d	2日かかる

    テスト（モジュールA） :crit, active, b2, after a2 b1  , 2d

記載	意味
テスト（モジュールA）	タスク名
crit	クリティカルタスク
active	実行中タスク
b2	識別名
after a2 b1	a2（識別名）とb1（識別名）の後から開始
2d	2日かかる

    テスト（モジュールB） :crit, b3, after a3 b2  , 2d

記載	意味
テスト（モジュールC）	タスク名
crit	クリティカルタスク
b3	識別名
after a3 b2	a3（識別名）とb2（識別名）の後から開始
2d	2日かかる