Mermaidでガントチャートを簡単に作成！

ガントチャートは、プロジェクトのスケジュール管理に欠かせないツールです。タスクの開始日、終了日、期間を視覚的に表現することで、プロジェクトの進捗状況を把握しやすくなります。

今回は、コードで簡単にガントチャートを作成できるツール「Mermaid」を使って、様々なガントチャートの書き方を解説していきます。

Mermaidとは？
基本的なガントチャートの作成
タスクの進捗状況の表示
タスクの依存関係の設定
週末の表示
マイルストーンの設定
期間を週で指定
まとめ

Mermaidとは？

Mermaidとは?という方は、VScodeでのインストールの方法等以下にまとめていますので、こちらを参照ください。

基本的なガントチャートの作成

まずは、基本的なガントチャートの作成方法から見ていきましょう。

gantt
    dateFormat  YYYY-MM-DD
    title       プロジェクトスケジュール

    section タスクA
    A1: 2024-10-26, 2024-10-30
    A2: A2, 2024-10-31, 2024-11-03

    section タスクB
    B1: after A2, 2024-11-06
    B2: 2024-11-07, 2024-11-10

    section タスクC
    C1: 2024-11-11, 2024-11-15

上記のコードで作成されるガントチャートは、3つのセクションに分かれており、それぞれのセクションに複数のタスクが設定されています。

dateFormat YYYY-MM-DD：日付の表示形式を指定しています。
title プロジェクトスケジュール：ガントチャートのタイトルを設定しています。
section タスクA：セクションの名前を設定しています。
A1: 2024-10-26, 2024-10-30：タスクA1の開始日と終了日を指定しています。
after A2：タスクB1は、タスクA2が完了してから開始されることを意味します。
C1: 2024-11-11, 2024-11-15：タスクC1の開始日と終了日を指定しています。

タスクの進捗状況の表示

タスクの進捗状況は、active、done、critなどのキーワードを使って表現できます。

gantt
    dateFormat  YYYY-MM-DD
    title       プロジェクトスケジュール

    section タスクA
    A1: active, 2024-10-26, 2024-10-30
    A2: done, 2024-10-31, 2024-11-03

    section タスクB
    B1: crit, after A2, 2024-11-06
    B2: 2024-11-07, 2024-11-10

active：進行中のタスク
done：完了したタスク
crit：重要なタスク

タスクの依存関係の設定

タスク間の依存関係は、after、before、dependsなどのキーワードを使って表現できます。

gantt
    dateFormat  YYYY-MM-DD
    title       プロジェクトスケジュール

    section タスクA
    A1: 2024-10-26, 2024-10-30
    A2: A2, 2024-10-31, 2024-11-03

    section タスクB
    B1: after A2, 2024-11-06
    B2: depends on B1, 2024-11-07, 2024-11-10

    section タスクC
    C1: before B2, 2024-11-09, 2024-11-11

after A2：タスクB1はタスクA2が完了してから開始されます。
depends on B1：タスクB2はタスクB1が完了してから開始されます。
before B2：タスクC1はタスクB2が開始される前に完了する必要があります。

週末の表示

週末をいれたい場合は、”excludes weekends”と”weekend friday”を入れます。
金曜が週末で色付けされます。

gantt
    dateFormat  YYYY-MM-DD
    excludes    weekends
    weekend friday
    title       プロジェクトスケジュール

    section タスクA
        A1: active, 2024-10-26, 2024-10-30
        A2: done, 2024-10-31, 2024-11-03

    section タスクB
        B1: crit, after A2, 2024-11-06
        B2: 2024-11-07, 2024-11-10

マイルストーンの設定

マイルストーンは、プロジェクトの重要な節目となるイベントを表します。マイルストーンは milestone キーワードを使って設定できます。

gantt
    dateFormat  YYYY-MM-DD
    title       プロジェクトスケジュール

    section タスクA
        A1 : crit, done,A1, 2024-10-26, 1w
        A2 : crit, active, 2024-11-06, 2024-11-12
        A3 : 2024-11-13, 2024-11-25

    section タスクB
        B1 : crit, done, B1, 2024-10-30, 2024-11-03
        B2 : after B1, 2024-11-12
        B3 : 2024-11-13 , 2024-11-25

    完成 : milestone,  2024-11-25

milestone 完成: 2024-11-25：2024年11月25日に「完成」というマイルストーンを設定しています。

期間を週で指定

タスクの期間を週で指定することもできます。

gantt
    dateFormat  YYYY-MM-DD
    title       プロジェクトスケジュール

    section タスクA
        A1 : crit, done, A1, 2024-10-26, 1w 
        A2 : crit, active, 2024-11-06, 2024-11-12 
        A3 : 2024-11-13, 2024-11-25 

    section タスクB
        B1 : crit, done, B1, 2024-10-30, 2024-11-03
        B2 : after B1, 2024-11-12
        B3 : 2024-11-13 , 2024-11-25