Mermaidで基本的なガントチャートを書いてみる

はじめに

この記事では、「Mermaidで基本的なガントチャートの書き方」について書いています。

最近QiitaやGitHubなどでMermaidがサポートされるなど使える場面が増えているため、書き方を試しながら学んでみようとなったのが記事を書いたきっかけです。

自分に向けた備忘録でもありますが、「Mermaidでのガントチャートを書いてみたい」な人の一助になれば嬉しいです。

ガントチャートとは何か

Mermaidでのガントチャートの書き方

簡単なサンプル

```mermaid
gantt
    title ガントチャートのサンプル
    excludes weekends

    %% Section-Aに関する記述
    section Section-A
    alpha           : id_a, 2022-11-04, 9d
    beta            : after id_a, 4d

    %% Section-Bに関する記述
    section Section-B
    gamma      : 2022-11-11, 2022-11-16
    delta      : 2022-11-15, 5d
```

gantt excludes weekends %% Section-Aに関する記述 section Section-A alpha : id_a, 2022-11-04, 9d beta : after id_a, 4d %% Section-Bに関する記述 section Section-B gamma : 2022-11-11, 2022-11-16 delta : 2022-11-15, 5d

構文

Mermaidでのガントチャートは以下のように書いていきます。上のサンプルコードを見ながら読んでみてください

ガントチャートを書く時は先頭にganttキーワードを書きます。
titleを記述します。
必要ならばセクションを記述します
- 上のサンプルではSection-A, Section-Bがタスクです。
タスクを記述します。
- 上のサンプルではalpha, beta, gamma, deltaがタスクです。

タスク

タスクは タスク名: ステータス, タスクID、開始日、終了日のように記載します。
開始日はafter タスクIDと書くと、そのタスクIDのタスクの直後から開始させることができます。
終了日は日付指定の他に、終了までの期間として記述することもできます。

その他

excludesで、任意の日を除外することができます。
- 上の例ではexcludes weekendsとして週末を除外してます。
コメントは%%を先頭につけて記述します。
（環境によるかもしれませんが）今日の所には赤い線が引かれるようです。

おわりに

「Mermaidで基本的なガントチャートの書き方」について解説しました。

シンプルな記法でガントチャートが書け、使いやすそうだなと感じました。

さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。

mermaid-js.github.io

dev.classmethod.jp