【Notion】Mermaidでガントチャート[開発スケジュール]を書いてみる（作成手順も記載）

今回はNotionで使えるMermaid記法に関して書いていきます。

Notion×Mermaidの記事はこれまで何度か投稿しています（詳細は以下リンクにて）。

前提情報

Mermaidとは？

まずはMermaidとは？に関して書いておきます。

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。
出典：グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO

詳しくは以下のリンクを見て頂ければと。
dev.classmethod.jp

ガントチャートとは？

ガントチャートとは？に関しても書いておきます。

ガントチャート（英語：gantt chart、gantt diagramm）は、さまざまなプロジェクトやプログラムに使用され、生産管理・工程管理などに用いられる表の一種です。
「計画表」「スケジュール表」「進行表」「工程表」などと呼ばれることもあります。
ガントチャートは棒グラフを用いたチャートで、縦軸にはWBSを元にしたタスクや担当者を、横軸には日時や進捗率を記します。
各タスクから横長の棒グラフ（ガントバー）が伸びており、作業の進捗や期間を示しています。
出典：ガントチャートの基本やWBSとの違いを解説！【2024年最新版】

詳しくは以下のリンクを見て頂ければと。
www.jooto.comit-trend.jpwww.lucidchart.com

作成したガントチャート

まずは手っ取り早く、今回作成したガントチャートの画像を貼ります。
ガントチャートの例として、簡単な開発スケジュールを書いてみます。

ガントチャート（画像）

開発スケジュールをガントチャートにしたのが以下画像です。

二人の担当者でこの開発スケジュールを進めるイメージです。
一人が機能Aを担当、もう一人が機能B・Cを担当するイメージです。

赤の縦線は現在時刻を示しています。
※上記の画像は2024年6月30日の18時ごろです。

ガントチャート（コード）

上記のガントチャートを生成するコードは以下の通りです。

gantt
  title 開発スケジュール
  section 機能A
    詳細設計     :a-1, 2024-06-20, 3d
    コーディング :a-2, after a-1, 5d
    テスト       :a-3, after a-2, 3d
  section 機能B
    詳細設計     :b-1, 2024-06-21, 1d
    コーディング :b-2, after b-1, 3d
    テスト       :b-3, after b-2, 1d
  section 機能C
    詳細設計     :c-1, after b-3, 1d
    コーディング :c-2, after c-1, 2d
    テスト       :c-3, after c-2, 1d

追加設定

色々と追加設定できるので、いくつかピックアップして紹介します。

テーマ（色合い）を変更する

Mermaidではテーマ（色合い）を変更することもできます。
テーマは5種類ほどあるのですが、そこから「default」を指定してみます。

コードは以下の通りです。
1行目を追加しています。
2行目以降は変更していません。

%%{init:{'theme':'default'}}%%
gantt
  title 開発スケジュール
  section 機能A
    詳細設計     :a-1, 2024-06-20, 3d
    コーディング :a-2, after a-1, 5d
    テスト       :a-3, after a-2, 3d
  section 機能B
    詳細設計     :b-1, 2024-06-21, 1d
    コーディング :b-2, after b-1, 3d
    テスト       :b-3, after b-2, 1d
  section 機能C
    詳細設計     :c-1, after b-3, 1d
    コーディング :c-2, after c-1, 2d
    テスト       :c-3, after c-2, 1d

テーマ（色合い）変更に関しては、以下記事にて詳しく書いています。
こちらも良ければぜひ。

miya-moto-memo.hatenablog.com

マイルストーンを設定する

マイルストーンを設定することが出来ます。

コードは以下の通りです。
4～7行目を追加しました。

%%{init:{'theme':'default'}}%%
gantt
  title 開発スケジュール
  section マイルストーン
    担当者1参画  :milestone, m-1, 2024-06-20, 0d
    担当者2参画  :milestone, m-2, 2024-06-21, 0d
    リリース     :milestone, m-3, 2024-07-03, 0d
  section 機能A
    詳細設計     :a-1, 2024-06-20, 3d
    コーディング :a-2, after a-1, 5d
    テスト       :a-3, after a-2, 3d
  section 機能B
    詳細設計     :b-1, 2024-06-21, 1d
    コーディング :b-2, after b-1, 3d
    テスト       :b-3, after b-2, 1d
  section 機能C
    詳細設計     :c-1, after b-3, 1d
    コーディング :c-2, after c-1, 2d
    テスト       :c-3, after c-2, 1d

進捗を設定する

進捗を設定することも出来ます。

コードは以下の通りです。
各工程に”done”や”active”を設定しています。
他に”crit”（クリティカル）も設定できますが、今回は使用していません。

%%{init:{'theme':'default'}}%%
gantt
  title 開発スケジュール
  section マイルストーン
    担当者1参画  :milestone, m-1, 2024-06-20, 0d
    担当者2参画  :milestone, m-2, 2024-06-21, 0d
    リリース     :milestone, m-3, 2024-07-03, 0d
  section 機能A
    詳細設計     :done, a-1, 2024-06-20, 3d
    コーディング :done, a-2, after a-1, 5d
    テスト       :active, a-3, after a-2, 3d
  section 機能B
    詳細設計     :done, b-1, 2024-06-21, 1d
    コーディング :done, b-2, after b-1, 3d
    テスト       :done, b-3, after b-2, 1d
  section 機能C
    詳細設計     :done, c-1, after b-3, 1d
    コーディング :done, c-2, after c-1, 2d
    テスト       :done, c-3, after c-2, 1d

目盛りを変更する

目盛りの幅を変更することが出来ます。
変更前は”1日単位”になっていましたが、”1週間単位”に変更してみます。

コードは以下の通りです。
4行目の「tickInterval 1week」を追加しただけです。

%%{init:{'theme':'default'}}%%
gantt
  title 開発スケジュール
  tickInterval 1week
  section マイルストーン
    担当者1参画  :milestone, m-1, 2024-06-20, 0d
    担当者2参画  :milestone, m-2, 2024-06-21, 0d
    リリース     :milestone, m-3, 2024-07-03, 0d
  section 機能A
    詳細設計     :done, a-1, 2024-06-20, 3d
    コーディング :done, a-2, after a-1, 5d
    テスト       :active, a-3, after a-2, 3d
  section 機能B
    詳細設計     :done, b-1, 2024-06-21, 1d
    コーディング :done, b-2, after b-1, 3d
    テスト       :done, b-3, after b-2, 1d
  section 機能C
    詳細設計     :done, c-1, after b-3, 1d
    コーディング :done, c-2, after c-1, 2d
    テスト       :done, c-3, after c-2, 1d

土日を除外する

土日を除外することも出来ます。
土日を除外することにより、土日はタスクがカウントされないようになります。

コードは以下の通りです。
4行目の「excludes weekends」を追加しただけです。
ただ、「excludes weekends」を追加した影響で目盛りが”2日単位”になっていました。

目盛りを”1日単位”に変更するため、5行目に「tickInterval 1day」も追加しました。

%%{init:{'theme':'default'}}%%
gantt
  title 開発スケジュール
  excludes weekends
  tickInterval 1day
  section マイルストーン
    担当者1参画  :milestone, m-1, 2024-06-20, 0d
    担当者2参画  :milestone, m-2, 2024-06-21, 0d
    リリース     :milestone, m-3, 2024-07-03, 0d
  section 機能A
    詳細設計     :done, a-1, 2024-06-20, 3d
    コーディング :done, a-2, after a-1, 5d
    テスト       :active, a-3, after a-2, 3d
  section 機能B
    詳細設計     :done, b-1, 2024-06-21, 1d
    コーディング :done, b-2, after b-1, 3d
    テスト       :done, b-3, after b-2, 1d
  section 機能C
    詳細設計     :done, c-1, after b-3, 1d
    コーディング :done, c-2, after c-1, 2d
    テスト       :done, c-3, after c-2, 1d