ガントチャート作成にmermaidを利用してみた
概要
ある資料の作成の際に、ガントチャートを添付すると言うことがありました。ガントチャートは作業の流れがわかりやすい図ではあるのですが、作図ツールなどを利用して作るのは少々面倒です。
今回は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を使ったことがある方にとってはとても簡単です。
## 出力、画像の作成
mermaidで作成した図を画像として取得したいと言うことがあります。そのようなときには、mermaidのLiveエディタを利用します。
[Online FlowChart & Diagrams Editor - Mermaid Live Editor](https://mermaid.live/)
このサイトを利用することで、画像としてPNGやSVG形式の画像として結果をダウンロードできます。
ずっと、こちらのエディタで確認するのは面倒なので、普段はVSCodeでコードを記述して、こちらからSVGなどで保存することが多いです。このようにすることで、コードをファイルとして保存しやすいので、後からコードを変更して図を変更したいというときに作業がしやすいです。
## さいごに
mermaidはとても便利なツールだと思います。今回はガントチャートだけですが、他にも色々な図を作成することができるので、何か図を作成するときには積極的に利用していくつもりです。