mermaid.jsのフローチャートの書き方

mermaid.js はテキストベースでフローチャートなどの図を書くことのできる JavaScript 製のライブラリ・ツールです。簡単にテキストで書けて、図も綺麗に出力されるかなり良い環境だと思います。

以前 AsciiDoc との連携について記事にしましたが、この記事では mermaid.js のフローチャートについて書き方を記載します。

AsciiDoc との連携については下記記事を参考にしてください。

mermaid.js の公式ページ

動作確認環境

  • macOS Sierra 10.12.6
  • mermaid.js 7.1.0

環境構築

本体

mermaid.js は npm または でインストールできます。

version 7.1.0 から、mermaid のコマンドは付属しないようになりましたので、コマンドラインで実行する場合は mermaid.cli もインストールする必要があります。

または

mmdc コマンドで mermaid のテキストファイルから画像ファイルを出力できます。

プレビュー環境

AtomとVisual Studio Code のどちらにも対応する拡張機能があります。

いずれも拡張子 .mmd または .mermaid でテキストを作成してエディタ上でプレビューする事が可能です。

  • Atomであれば atom-mermaidlanguage-mermaid で問題ないかと思います。

  • Visual Studio Code の場合は Preview が良いかと思います。

    Mermaid Preview というドンピシャの名前の拡張機能もありますが、Preview の方は mermaid の言語IDが定義されるため、キーバインドが割り当てやすくオススメです。

mermaid.js のフローチャートの書き方

基本

ID[テキスト] の形式でノードを定義し、ID1 --> ID2 のように矢印を定義します。

  • テキストを指定しない場合はIDがそのまま表示されます。
  • ノードのテキスト、リンクのテキストともに <br/> で改行を入れることができます。
  • テキスト内に ( などの記号を入れると正しく解釈できない場合があります。
    その場合は ID["テキスト(括弧)"] というようにダブルクォーテーションでテキストをくくる必要があります。

グラフ全体の方向

graph TB と指定するとグラフが上から下に向かうようにノードが配置されます。

同様に指定できるものは下記

指定 方向
TB 上から下
BT 下から上
LR 左から右
RL 右から左

TB = Top Bottom という感じで名前がつけられています。

ノード形状

テキストを囲む括弧でノードの形状が変わります。

ひし形は、正確には45度傾いた正方形です。

丸とひし形はラベルが長いとノード自体の面積がかなり大きくなってしまうので、適当に<br/> 改行した方が良いかと思います。

リンク

ノード間のリンクは、実線、点線、太線でそれぞれ矢印の有無があります。

リンクのテキストは空白つきでリンクの間に書くか、パイプつきでリンクの右側に書く方法があります。

リンクの ‘-‘(ハイフン)などの数は、厳密に上の記載と一致する必要があるようです。多くても少なくても正しく図が出力されません。

グルーピング

subgraph というキーワードでノードをグルーピング出来ます。

IDは subgraph 内のスコープで閉じているわけではなく、グローバルに定義されます。別の subgraph 内で同じ IDを定義するということはでません。

注意点として、ノードは最初にIDの記載が現れた subgraph 内に配置されます。

うまく subgraph 内にノードが配置されない場合は、ノードの定義だけsubgraph 内に記載して、リンクの定義は後に記載した方が良いです。下記 s2a は意図と違う配置の例、s4a が意図通りの配置の例です。

装飾

ノードの装飾

ノードを装飾するには style を使います。

fill、stroke は # で始まる3桁または 6桁のカラーコードが使えます。

stroke-width で枠の太さを指定し、stroke-dasharray で枠を点線にできます。

これらの要素は全て書く必要はなく、必要なものだけ書けばデフォルトが上書きされます。

公式ページの方だとstroke-dasharray: 5,1 のように書いて点線の有無の間隔を指定できそうに見えるのですが、私の環境では第二引数の方を変えても何も変わりませんでした。

リンクの装飾

リンクを装飾するには linkStyle を使います。

リンクはノードと違って ID が無いため、対象の指定がかなり特殊です。

linkStyle 通し番号(0始まり) のように、0始まりでリンクの通し番号を指定します。

また、対象のリンクより先に linkStyle を書くと正しく出力されません。

正直使い辛い印象ですので、ここは今後の改善に期待したいですね。

クラス定義による装飾

ノードの装飾を個々に行わず、クラスを定義し、同じ装飾を複数のノードに設定することが出来ます。

ただ、この機能は version 7.1.0 で動作していないようです。

issueも上がっています。

7.0.0 の時は動いていたので、デグレしてる気がします。上の図は 7.0.0 で出力したものです。

その他

fontawesome のアイコン が使えたり、ブラウザ上だと ノードクリックで何か動作させる(Interaction) 機能があるそうです。

ただ、私は基本画像にして PDFなどに埋め込んでしまうので、使ったことはありません。

詳しくは公式ページをご覧ください。

さいごに

データフローとか図示すると、頭がすっきりするので、設計時に結構使ったりします。

テキストだと管理もしやすいので好みです。PlantUML などと同じ発想ですね。

今回はフローチャートの書き方だけですが、mermaidは他にもシーケンス図、ガントチャートなども書けます。また使うことがあれば紹介したいと思います。

mermaid.jsはWordPress上で使うこともできます。よかったらこちらもどうぞ


最後まで読んでいただきありがとうございます。 このブログを「いいな」と感じていただけましたら、Twiter にてフォローいただけるとうれしいです。ブログ更新情報などもお届けします。



この記事をシェアする




りゅーた
フリーランスのエンジニアしてます。Android、iOS アプリの開発、対向サーバの開発、C/C++のライブラリ開発が現在のメイン。趣味はテニス・ゲーム・自転車。2児の父

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA