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

  • Mermaid記法を自作アプリに組み込んでみよう

    Mermaid記法を自作アプリに組み込んでみよう

Mermaid記法とは？

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

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

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

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

  • Mermaid記法で簡単なチャートを書いたところ

    Mermaid記法で簡単なチャートを書いたところ

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

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

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

  • シーケンスダイアログのサンプル

    シーケンスダイアログのサンプル

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

  • リアルタイムにMermaid記法が試せるライブエディタ

    リアルタイムにMermaid記法が試せるライブエディタ

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

ところで、コラムの冒頭で挙げたように、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に貼り付けるだけで利用できます。

<script src="https://cdn.jsdelivr.net/npm/mermaid@10.5.0/dist/mermaid.min.js">
</script>

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

<html><meta charset="utf-8"><body>
<!-- ライブラリを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.5.0/dist/mermaid.min.js"></script>
<!-- 以下にMermaid記法を記述 -->
<pre class="mermaid">
graph LR
    Start --> 何か --> End
</pre>
</body></html>

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

  • 一番簡単なmermaid.jsの使い方

    一番簡単なmermaid.jsの使い方

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

<pre class="mermaid">
  ここにMermaid記法
</pre>

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

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

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

この記事は
Members+会員の方のみ御覧いただけます

ログイン／無料会員登録

会員サービスの詳細はこちら