2021年末に Notionにも対応した Mermaidについてこのブログでは紹介してきました！今回の記事ではmermaidで表現できる図の一つである「ガントチャート」についてまとめていきます！
他のmermaidで作れる図についての解説はこちらから！
ガントチャート
ガントチャートとは？
ガントチャートとは、「プロジェクト管理」の全体像を把握するためによく使われる図で、それぞれのタスクにかかる時間・日程をわかりやすく可視化できる図でもあります！
今回の記事では、下記のガントチャートを作っていくのに、どのように作っていけばよいのか？について順を追いながら説明していきます！
サンプルコード
上記のガントチャートを作るには、この12行のコードを書くことで作ることができます！とは言っても、いきなりコードだけ見ても作り方は把握しにくいと思うので、簡単に要素を紹介していいきます！
- 図の形の指定 : 1行目
- 日時のフォーマット指定 : 2行目
- title の設定 : 3行目
- タスクの大分類となる「セクション」の設定(1つ目) : 5 ~ 9行目
- タスクの大分類となる「セクション」の設定(2つ目) : 10 ~ 12行目
gantt
dateFormat YYYY-MM-DD
title Gantt チャート
section Aセクション
完了タスク :done, des1, 2022-01-06,2022-01-08
進行タスク :active, des2, 2022-01-09, 3d
将来タスク : des3, after des2, 5d
将来タスク 2 : des4, after des3, 5d
section Bセクション
完了タスク :done, des1, 2022-01-06,2022-01-08
将来タスク : des3, after des1, 5d
将来タスク 2 : des4, after des3, 5d1. 図の形の指定 (必須)
gantt と 1行目に書くことで、「ガントチャート」を作ることを設定できます！
2. 日時のフォーマット指定
dateformatでは、ガントチャートで管理する時間軸を設定するとともに、ガントチャート上に表示する日時の表示の仕方を設定できます！
デフォルトでは、YYYY-MM-DD 例) 2022-03-31
この詳しい設定は、別記事で紹介できたらと思いますが、よく使う設定だと以下の通り
- YYYY : 2022 (4桁表示)
- YY : 22 (下2桁表示)
- HH : 0 ~ 24 (時間:24時間表示)
- hh : 0 ~ 12 (時間:12時間表示)
3. title の設定
ガントチャートのタイトルを設定することができます！
title の後にスペースを加え、それに続いて書いた文字列がtitleとして表示されます！
例) 「Gantt チャート」 というタイトルをつけたい場合
title Gantt チャート
4. Section の設定
ガントチャートでは、タスクごとにいつからいつまでにやるべきものなのか？を表示することができます。しかし、それだけでは、類似・関連タスクをまとめることができないので、それを解決するために、グルーピングをしてうまく表示できるようにするために、Sectionという機能があります！
Sectionで同じくくりにしたタスクは、それ以外のSectionと少し区別をすることができるようになります！上の例では、Aセクション と Bセクション というような形ですね！
設定の仕方としては、sectionの後にスペースを加えた後、入力した単語がそのセクション名となります！
範囲としては、sectionを宣言してから、次のsectionが宣言されるまでです！
5. タスクの設定
Section の中には、それぞれのタスクを設定することができます！
下の図の例では、Bセクションで 2022-01-06から 2022-01-08ｍでの「完了タスク」というタスク名のものがありました！
この図の作り方は、以下の通りです
完了タスク : done, des1, 2022-01-06, 2022-01-08
この意味としては
タスク名 : (進捗フラグ,) エイリアス(省略名), タスクの開始日時, 終了日時 or 開始日時からの期間
上の紹介でわかる方もいるかもしれないですが、この後では進捗フラグとは？エイリアスとは？といった方もいると思うのでより詳しく説明していきます！
進捗フラグ
進捗に応じて、設定することで色を変えて見やすくできるという機能です！
- done : 完了タスク
- active : 現在進行中タスク
- 無印 : TODOタスク
これから行う予定のタスクは、省略してもOKです！！
エイリアス (省略名)
タスクごとにエイリアスがつけられ、「taskA が終わってから3日かかる」タスクというような設定ができるようになります！
これができることによって、一つのタスクの遅れにより、ガントチャートのコードを複数書き換えなくてよくなるので便利です！！
タスクの開始日時
設定方法は大きく2つあります！
- そのまま入力 : 2022-01-06
- エイリアスを活用 : after des1 (des1タスクが終わってから)
終了日時 or 開始日時からの期間
終了日時の設定は、開始日時と同じような設定の方法です。
しかし、それ以外にも
after des1, 5dというように設定を行うことで、「des1タスクが終わってから 5日」のタスクといった設定を行うこともできます！！
コメント