ガントチャート作成にmermaidを利用してみた

2022-01-19 (最終更新: 2022-01-19)

概要

ある資料の作成の際に、ガントチャートを添付すると言うことがありました。ガントチャートは作業の流れがわかりやすい図ではあるのですが、作図ツールなどを利用して作るのは少々面倒です。

今回はmermaidというツールを利用して、コードを記述するような感じでガントチャートを作成しました。

このツールを利用したガントチャート作成がとてもやりやすかったので紹介します。

ガントチャート作成のツールについて

ガントチャートを作成するためのソフトやサービスは世の中にたくさんあります。特にプロジェクト管理にガントチャートが使われるため、そのようなプロジェクト管理のソフトウェアやサービスで作成できることが多いです。しかし、これらのツールは有料であることがほとんどで、いまいち使いにくいです。

そこで、無料で使えるガントチャート作成のソフトウェアを探していました。

mermaidを見つけた

色々と探していると、mermaidというツールを見つけました。これはJavaScriptのライブラリで、コードから、様々な図を作成することができるツールです。これはフローチャートやダイアグラムなど様々な図を作成することができるのですが、その中にガントチャートがありました。

コードで文字から図を作成するため、あまり直感的とはいいにくいですが、統一性はとりやすく、ちょっとの修正でも、コード上ではほんの少し修正するだけで、図全体が状況に応じて変更されるというもののため、修正に強いものになっています。

mermaidはJavaScriptのツールということで、使い方が面倒なように思いましたが、Markdownファイルの中にコードを書くことで自動で図を作成するという使い方ができます。私は、文書作成にMarkdownを使うことがあるので、ちょうどいいです。しかし、GitLabのMarkdownでは対応していますが、GitHubのMarkdownでは対応していないなど、対応に難があります。

今回私はそのようなサービスを利用するのではなく、Visual Studio Code(VSCode)のMarkdown用のプラグインを利用する方法で、ガントチャートの作成を目指しました。

VSCodeのプラグインの設定

VSCodeでmermaidのコードから画像を作成するには、プラグインが必要です。

私が現在利用しているプラグインは次です。

Markdown All in One
Markdown Preview Enhanced
Markdown Preview Mermaid Support

基本的にmermaid用のプラグインは「Markdown Preview Mermaid Support」だけですので、こちらのみインストールすればうごくはずです。他のものは、Markdownのプレビューをいい感じにするために利用しています。

下記のようにガントチャート用のコードを書き、Markdownのプレビュー表示をするだけで、図が表示されます。

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d




VSCodeでMarkdownを使ったことがある方にとってはとても簡単です。

## 出力、画像の作成 {.wp-block-heading}

mermaidで作成した図を画像として取得したいと言うことがあります。そのようなときには、mermaidのLiveエディタを利用します。

[Online FlowChart & Diagrams Editor - Mermaid Live Editor](https://mermaid.live/)

このサイトを利用することで、画像としてPNGやSVG形式の画像として結果をダウンロードできます。

ずっと、こちらのエディタで確認するのは面倒なので、普段はVSCodeでコードを記述して、こちらからSVGなどで保存することが多いです。このようにすることで、コードをファイルとして保存しやすいので、後からコードを変更して図を変更したいというときに作業がしやすいです。

## さいごに {.wp-block-heading}

mermaidはとても便利なツールだと思います。今回はガントチャートだけですが、他にも色々な図を作成することができるので、何か図を作成するときには積極的に利用していくつもりです。