ガントチャート の 作り方 : 入門編! (Mermaid)

mermaid

 2021年末に Notionにも対応した Mermaidについてこのブログでは紹介してきました!今回の記事ではmermaidで表現できる図の一つである「ガントチャート」についてまとめていきます!

他のmermaidで作れる図についての解説はこちらから!
https://ai-research-collection.com/mermaid_flowchart1/

スポンサーリンク

ガントチャート

ガントチャートとは?

 ガントチャートとは、「プロジェクト管理」の全体像を把握するためによく使われる図で、それぞれのタスクにかかる時間・日程をわかりやすく可視化できる図でもあります!

 今回の記事では、下記のガントチャートを作っていくのに、どのように作っていけばよいのか?について順を追いながら説明していきます!

file

サンプルコード

 上記のガントチャートを作るには、この12行のコードを書くことで作ることができます!とは言っても、いきなりコードだけ見ても作り方は把握しにくいと思うので、簡単に要素を紹介していいきます!

  1. 図の形の指定 : 1行目
  2. 日時のフォーマット指定 : 2行目
  3. title の設定 : 3行目
  4. タスクの大分類となる「セクション」の設定(1つ目) : 5 ~ 9行目
  5. タスクの大分類となる「セクション」の設定(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, 5d

1. 図の形の指定 (必須)

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-08mでの「完了タスク」というタスク名のものがありました!

file

この図の作り方は、以下の通りです

完了タスク : done, des1, 2022-01-06, 2022-01-08

この意味としては

タスク名 : (進捗フラグ,) エイリアス(省略名), タスクの開始日時, 終了日時 or 開始日時からの期間

上の紹介でわかる方もいるかもしれないですが、この後では進捗フラグとは?エイリアスとは?といった方もいると思うのでより詳しく説明していきます!

進捗フラグ

進捗に応じて、設定することで色を変えて見やすくできるという機能です!

  • done : 完了タスク
  • active : 現在進行中タスク
  • 無印 : TODOタスク

これから行う予定のタスクは、省略してもOKです!!

エイリアス (省略名)

 タスクごとにエイリアスがつけられ、「taskA が終わってから3日かかる」タスクというような設定ができるようになります!
 これができることによって、一つのタスクの遅れにより、ガントチャートのコードを複数書き換えなくてよくなるので便利です!!

タスクの開始日時

 設定方法は大きく2つあります!

  1. そのまま入力 : 2022-01-06
  2. エイリアスを活用 : after des1 (des1タスクが終わってから)

終了日時 or 開始日時からの期間

終了日時の設定は、開始日時と同じような設定の方法です。
しかし、それ以外にも

after des1, 5dというように設定を行うことで、「des1タスクが終わってから 5日」のタスクといった設定を行うこともできます!!

コメント

タイトルとURLをコピーしました