MENU

Mermaid記法でガントチャートを作成する方法

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には他にも多くの機能や詳細な設定がありますので、公式ドキュメントなどを参考にして、さらに詳しく学んでみてください。

後書き

なんか微妙に間違えたコードを吐き出しまくりよってからに、修正けっこう苦労してしまった。変数名と表示名を逆にしたりとか……。自分で最初から書いた方が早かったのではないか説がある。しかしイチから書くのは面倒だからなぁ。

目次