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

Mermaidはコードを入力するだけですぐにガントチャートを作成可能です。その方法は、AIの発展により、より実用的になってきました。AIにガントチャートの要素を伝え、コードを生成してもらい、Mermaidエディタに張り付けるだけで、自動的にガントチャートなどの図を作成できます。

本稿では、Mermaidを使用したガントチャートの作成方法をステップバイステップでご紹介します。また、csvファイルをインポートし、見栄えの良いテンプレートを選んでガントチャートを作成する別の方法もご紹介します。

1.Mermaidでガントチャートを描くメリット

・テキストベースで作成するため、非常にシンプルかつコードの中身さえ覚えれば作成可能。また、図表を手動で作成する手間が省ける。

・テキストファイルで保存でき、ファイルの管理がしやすい。

・Mermaid Live Editorというコード入力と作図が同時に行えるツールがあり、ブラウザ上で使用できるため作成しやすい。

・ブラウザ上で作成するため、作図専用ツールのダウンロードが不要。

・コードを入力・修正した際にリアルタイムでガントチャートに反映されるため編集しやすい。

・ GitHubやWiki、Notionなどでも併用でき、Mermaidで作成したテキストをそのまま張り付けることでガントチャートの作成が可能。

上記のメリットをまとめると、MermaidはWeb上で数行のコードを入力するだけで、リアルタイムにシンプルで見やすいガントチャートを簡単に作成できるツールです。

2.ガントチャートの主要構成要素

【タスク名（Task）】

実行する作業や工程を指します。アルファベット・日本語どちらでも表記可能です。

【開始日（Start Date）】

タスクの開始日を指します。基本的に「YYYY-MM-DD」で表記し、【期間】と併せて指定することでタスクの期間を設定できます。Mermaidの仕様上、「MM-DD」のみを指定すると2001年が表記されるため、YYYYも指定する必要があります。

【期間（Duration）】

タスクにかかる日数を指します。日数を指定することで、開始日から終了日を指定できます。「Xd（Xは日数を指定）」という日数で指定するか、あるいは「YYYY-MM-DD」のように直接的に期間を指定するか選択できます。

【依存関係（Dependencies）】

タスク同士の順序関係を指します。タスクIDを作成し指定することで、指定したタスクIDを持つタスクと依存関係を構築できます。

主に使用される「after <タスクID>」コードを設定することで、指定したタスクIDのタスクが完了次第開始するよう設定できます。

【進捗状況（Progress）】

タスクの進捗状況を指します。キーワードを指定することでタスクの状態を表現できます。

以下の3種類がキーワードとして使用できます。

・active：現在進行中のタスク。青色や 緑色で表示されます。

・done：完了したタスク。グレーで表示されることが多いです。

・crit：重要な（クリティカル）タスク。主に赤色で強調されます。

3.Mermaidでガントチャートを描く具体的手順

Step 1: Mermaidの基本構文を理解する

Mermaidはテキスト形式で作成するツールのため、コマンドや構文を理解することが最も大切です。ここではMermaid Live Editor画面でのガントチャート作成の流れをご紹介します。 Mermaid Live Editorは図表ごとにテンプレートが用意されているので、初めてMermaidを使う人にとっておすすめです。

はじめに画面左下にある「Sample Diagrams」より 「Gannt」をクリックしてガントチャートのテンプレートを表示させます。テンプレートには2章でご紹介した主要構成要素などが表示されます。

以下テンプレート例を見ながら基本的な構文を理解していきましょう。

＜テンプレート例＞

①はタイトル名を指定します。「title」の後に任意のタイトル名を指定すると、ガントチャートのタイトル名が表示されます。

②で日付のフォーマットを指定します。「dateFormat」で指定した日付形式とコード内の日付形式をそろえない場合、該当コードが正しく認識されないので注意が必要です。デフォルトでは「YYYY-MM-DD」が指定されています。

③はセクション名を指定します。詳しくはStep3で説明します。

④と⑤はタスク情報を示しており、【タスク名】：【開始日】,【期間】を指定することでタスクが作成されます。また、【開始日】の前にある「a1」はタスクIDで、任意の文字を指定できます。

Step 2: タスクの追加と期間設定

⑤のように④のタスク情報の下に同じ形式で値を入力することで、新しいタスクを作成できます。依存関係を構築すれば、よりきれいな図になります。

また、開始日を設定しない場合、追加したタスクの開始日が先に作成したタスクの後になるよう設定されています。前のタスクの完了日より前に設定したいときは、開始日を設定するようにしましょう。

Step 3: セクションによるタスクの分類

③のように「section」コマンドを挿入すると、セクションを作成できます。セクションを作成することで複数のタスクを1つにグループ化でき、全体構成を明確にするのに役立ちます。また、セクションごとにタスクを分類することで、タスクの時系列がそれぞれのセクション内でまとまるため、図が見やすくなります。

Step 4: 進捗率の指定

タスクの進捗状況を指定する場合、2章の【進捗状況（Progress）】で説明した値をタスク情報の先頭（例：A task:done, a1, 2014-01-01, 30d） に入力することで設定できます。ただし、現在の進捗率を指定する構文はないため、タスク名の横に進捗率を入力するなどして見やすくしましょう。

Step 5: 色の変更や表示形式の調整

少々難しい構文ですが、「%%{init: {...}}%% 」構文を使用することで、タスクの色や太さなどを変更できるので便利です。

＜構文例＞

・theme：タスクの色を設定できます。使用できるのは以下5種類です。

default：標準テーマで青を主体とした色合いです。

neutral：白と黒をベースとしており、シンプルで見やすく印刷向きです。

dark：黒がメインでダークモードなど背景が暗い場合に向いています。

forest：緑系の色合いのテーマで、自然や環境系のテーマに合います。

base：細かい部分までカスタマイズできます。構文が多く難しいため、上級者向けです。

・gantt:：レイアウトを指定する際に使用します。

・barHeight：タスクバーの高さ（太さ）を設定できます。

・fontSize：チャート全体のフォントサイズを設定できます。

4.プロ仕様のガントチャート作成ツールEdrawMax

ここではEdrawMaxを使ったガントチャートの作成方法についてご紹介します。Mermaidとの相違点はテンプレートがMermaidよりも多いことやデータの共有がしやすいことが挙げられます。

① 豊富なガントチャートテンプレート

「新規作成」から「ガントチャート」をクリックしてガントチャート作成画面を表示します。画面左側にある「テンプレート」をクリック後、検索バーに「ガント」と入力してEnterキーを押下するとガントチャートのテンプレートが複数表示されます。

複数表示されたテンプレートから用途に合ったテンプレートをクリックすることで、ガントチャートのテンプレートが表示されます。

また、「テンプレート」の下にある「図形」タブでも複数のテンプレートから選択して作成できます。

② データインポート対応

EdrawMaxで作成したテンプレートにxlsx/csv/txtファイルいずれかをインポートすることで、ガントチャートに数値を反映することができます。ただし、テンプレートのフォーマットに沿った表形式のファイルをインポートする必要があります。 

はじめは表形式をテンプレートにそろえて作成するのが難しいかもしれませんが、一度作成すれば他のインポートファイル作成に活用できるので作業効率が向上します。

インポートの方法は、ガントチャートをクリックし、タブの右端にある「詳細設計」をクリックします。その後、詳細設計配下の「インポート」をクリックすると、ファイルの選択画面が表示されるので、インポートするファイルを指定して「開く」を実行します。

③ 共有機能

EdrawMaxの優れた点は作図のしやすさだけでなく、作成したガントチャートの保存や共有機能にもあります。WordをはじめExcelやPDF、HtmlやSVGなど豊富な種類のファイル形式で保存できます。また、共有機能を使用すればリンクとして関係者にリアルタイムで資料を共有でき、仕事を効率よく円滑に進めることができます。

5.FAQ

Q1: Mermaidでガントチャートの期間を週単位で設定できますか？

週単位で期間を設定することは可能です。1期間を指定したい場合は、期間の値を「1w」と指定します。ただし、1w=7dで計算されるため、土日祝日を意識した設定が必要です。土日祝日を除外する場合は、1w-2d=「5d」や1w-3d=「4d」など工夫しましょう。

Q2: Mermaidで土日を除外したガントチャートは作れますか？

土日を除外することは可能です。「excludesweekends」コードを挿入することで土日の背景がグレー色で表示され、期間も土日を抜いた日程に変更されます。祝日を除外したい場合は、「excludes YYYY-MM-DD」コードを挿入することで該当箇所の背景がグレー色で表示されます。土日祝日をまとめて除外したい場合は、「excludes weekends YYYY-MM-DD」のように指定します。