PCECAKE BLOG

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

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

投稿日: 2023/5/18

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

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

Markdownで図が書きたい。そんな時はMermaid。

今回は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時間表記）（２桁）
aAM 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 a1a1（識別名）の後から開始
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 a1a1（識別名）の後から開始
2d2日かかる
    開発（モジュールB） :active, a3, after a2, 3d

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

記載意味
開発（モジュールC）タスク名
a4識別名
after a3a3（識別名）の後から開始
5d5日かかる
    テスト準備 :done, b1, 2023-02-10  , 2d

記載意味
テスト準備タスク名
done完了済みタスク
b1識別名
2023-02-102023年2月10日から開始
2d2日かかる
    テスト（モジュールA） :crit, active, b2, after a2 b1  , 2d

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

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

ちょっと複雑ですがこのように記載することでガントチャートが作れます。

最後は閉じるのを忘れないように。


## まだまだあります  
すべてはこの記事に乗せられないので、さらに細かなガントチャートを書きたい場合は公式をあわせて参照してください。  

こんなのが書きたい！というのがあればコメントを頂ければ追記しますのでぜひコメントまで。  

[https://mermaid.js.org/syntax/gantt.html](https://mermaid.js.org/syntax/gantt.html)