ゼロからはじめるJavaScript 第27回 手軽にチャートを組み込めるJSライブラリ「mermaid.js」を使ってみよう

簡単な矢印や記号を使ったテキストでチャートが描画できるMermaid記法が人気です。GitHubやQiita、Notion、esa.ioなど、いろいろなサービスで利用できるため、自作のアプリにも組み込んでみたいという方も多いことでしょう。今回は、自作ツールに手軽にグラフやチャートを組み込める「mermaid.js」を使ってみましょう。

○Mermaid記法とは？

そもそも、Mermaid記法は、「A -->
B -->
C」のような簡単な矢印を使ったテキストを書くことで、グラフやフローチャート、ガンチャートや、円グラフや状態遷移図、ダイアグラムが作成できる、お手軽グラフ生成ツールです。

例えば、以下のようなテキストを記述するだけで、A,B,C,D,Eというノードを作成し、それを矢印で接続したグラフを描画できます。

graph LR
A --> B --> C
A --> D --> E

上記のテキストをMermaidに与えると次のような図を描画してくれます。

1行目にフラフの種類を記述し、2行目以降に実際のデータを記述します。ここで指定した「graph LR」というのは、左から右へと流れるグラフを描画するのに使います。

グラフの種類は、フローチャート(flowchart)、シーケンスダイアログ(sequenceDiagram)、ガンチャート(gantt)、円グラフ(pie)など、いろいろなものが用意されています。

以下は、シーケンスダイアログの例ですが、かなり複雑な図も作成できるのが分かります。

なお、リアルタイムにMermaid記法の内容を描画できる、ライブエディタも用意されており便利です。SVG形式やPNG形式で図を保存する機能も用意されており、円グラフやガンチャートなど、ちょっとしたグラフを作図するのにも利用できます。

○なぜ、いろいろなサービスに組み込まれているのか

ところで、コラムの冒頭で挙げたように、GitHubやZenn、esa.io、Notionなど多くのサービスが、Mermaid記法をサポートしています。なぜ、これほど多くのサービスに取り込まれているのかと言うと、簡単な記述で見栄えの良いグラフが描画できるからというのが一番の理由です。

Mermaidで描画できるフローチャートや遷移図、シーケンスダイアログなどの図は、ソフトウェアの構成や動作を説明するのによく使われるものです。マニュアルやプログラムの解説で役立つものです。多くのエンジニア向けのサービスで採用されているのには、こうした図を手軽に作成して見せたいという強い要望があったからでしょう。

そして、何より「mermaid.js」というJavaScriptライブラリがオープンソース(MITライセンス)で公開されており(https://github.com/mermaid-js/mermaid)、手軽にサービスに組み込めるというのも理由の一つです。
○mermaid.jsを使ってみよう

それでは、JavaScriptのライブラリ「mermaid.js」を使ってみましょう。このライブラリはオープンソースで公開されており、jsdelivr.comなどのCDN(コンテンツ配信ネットワーク)を通して手軽に利用できる仕組みとなっています。そのため、次のURLを含むJavaScriptをHTMLに貼り付けるだけで利用できます。

それで、次のようなHTMLを作成することで、図を描画させることができます。

graph LR
Start --> 何か --> End

上記のHTMLを「hello.html」という名前で保存します。そして、Webブラウザにドラッグ＆ドロップしましょう。すると下記のように表示されます。

どうなっているのかと言うと、下記のように、HTMLの各DOM要素の中で、class属性に"mermaid"と付けた部分を自動的に図に変換してくれるという仕組みとなっているのです。とても簡単です。

ここにMermaid記法

なお、最新のバージョン10.5の場合、ファイルサイズは2.9MBほどあります。

それほど苦にするサイズでもありませんが、ライブラリの読み込みによる画面表示の遅延を少しでも減らしたい場合には、下記のように、ライブラリの読み込みを非同期にすることもできます。

以下は、mermaid.jsの読み込みを非同期にして画面表示が終わってから、図の変換処理を行う例です。

graph LR
Start --> 何か --> End

なお、mermaid.jsのより詳しい使い方は、こちらに詳しく書かれています。
○まとめ - mermaid.js

以上、本稿ではMermaid記法とJavaScriptライブラリのmermaid.jsの使い方について簡単に解説しました。今回のサンプルを見れば分かるとおり、ライブラリの取り込みコードを一行書くだけで、class属性がmermaidのものを図に変換してくれます。自作のプログラムにも、手軽に組み込めます。テキストばっかりで読みづらいオンラインマニュアルも、Mermaidを使えば、手軽に図を挿入できるので活用してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「実践力をアップする Pythonによるアルゴリズムの教科書(マイナビ出版)」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。