Mermaid記法は覚えるもんじゃないとつくづく思う。スニペットを用意しておいて、必要な時にコピペするものだこれは。だがそういうコピペ元を作るのは思いのほか面倒なものだが、ChatGPT-4ならさらっと作ってくれるので、便利な時代になったものだ。
……と思ったのだが、微妙に間違えたコード吐きよってからに、修正地味に手間かかったわ……。
目次
イントロ
Mermaidは、コードだけでさまざまな図を描画できる非常に便利なJavaScriptライブラリです。特に、プロジェクトの進行状況を示すのに適したガントチャートは、Mermaidを使用して簡単に作成できます。この記事では、Mermaidの基本的な記法を使用して、ガントチャートを作成する方法を紹介します。
ガントチャートの作成
基本的なガントチャートの作成
まずは、基本的なガントチャートのコードの構造を見てみましょう。
gantt
dateFormat YYYY-MM-DD
title プロジェクトの進行状況
section タスクリスト
タスク1 :task1, 2023-09-01, 10d
タスク2 :task2, 2023-09-11, 15d
gantt
dateFormat YYYY-MM-DD
title プロジェクトの進行状況
section タスクリスト
タスク1 :task1, 2023-09-01, 10d
タスク2 :task2, 2023-09-11, 15d
dateFormat
は日付の形式を指定します。title
はチャートのタイトルを設定します。section
はタスクのカテゴリやグループを示すためのラベルです。- タスクの名前の後ろのコロンの後には、開始日とタスクの期間を指定します。
2. タスクの装飾
タスクの重要度や状態に応じて、色やスタイルを変更することができます。
gantt
dateFormat YYYY-MM-DD
axisFormat %m/%d
title プロジェクトの進行状況
section タスクリスト
アクティブなタスク :active, activeTask, 2023-09-01, 10d
クリティカルなタスク :crit, critTask, 2023-09-11, 15d
一般タスク : normalTask, 2023-09-26, 10d
gantt
dateFormat YYYY-MM-DD
axisFormat %m/%d
title プロジェクトの進行状況
section タスクリスト
アクティブなタスク :active, activeTask, 2023-09-01, 10d
クリティカルなタスク :crit, critTask, 2023-09-11, 15d
一般タスク : normalTask, 2023-09-26, 10d
:active
は現在進行中のタスクを示します。:crit
はクリティカルなタスクを強調表示します。axisFormat %m/%d
は軸のフォーマットを示します。
3. 依存関係の追加
タスク間の依存関係も簡単に追加することができます。
gantt
dateFormat YYYY-MM-DD
axisFormat %m/%d
title プロジェクトの進行状況
section タスクリスト
タスク1 :task1, 2023-09-01, 10d
タスク2 :task2, 2023-09-15, 15d
タスク1に依存するタスク :task3, after task1, 10d
gantt
dateFormat YYYY-MM-DD
axisFormat %m/%d
title プロジェクトの進行状況
section タスクリスト
タスク1 :task1, 2023-09-01, 10d
タスク2 :task2, 2023-09-15, 15d
タスク1に依存するタスク :task3, after task1, 10d
after タスク名
で、指定したタスクが完了した後に開始されるタスクを設定できます。
以上、Mermaidを使用したガントチャートの基本的な作成方法を紹介しました。Mermaidには他にも多くの機能や詳細な設定がありますので、公式ドキュメントなどを参考にして、さらに詳しく学んでみてください。
後書き
なんか微妙に間違えたコードを吐き出しまくりよってからに、修正けっこう苦労してしまった。変数名と表示名を逆にしたりとか……。自分で最初から書いた方が早かったのではないか説がある。しかしイチから書くのは面倒だからなぁ。