Mermaidで矢印をめちゃめちゃ繋ぐと楽しい

ボックスと矢印で関係性を記述したグラフがたいへん簡単に描けるMermaidというツールを使ってみたので紹介します。

構成図が描きたい

ひとつ前の『Nextcloudをロードバランシング』という記事を仲間内で見せたところ、わけわかんねえよ構成図描けよ、と言われたので、気になってたMermaidというグラフマークアップツールを使ってみました。

mermaid-js.github.io

こいつはテキストで内容物をゴジョゴジョっと書くだけでグラフ（ノードとエッジで構成された数学的な意味のグラフ…なんだけど、実はパイチャートとかも描けるらしい）が描けてしまうというツール。トップページにいろいろ載ってる。

マークアップに必要な文法の解説もいろいろあるんだけど、オレはとりあえずライブエディタにkubernetesのチュートリアルの例を突っ込んで、いろいろいじってカラダで覚えました。

それで出来た図がこれなんだけど:

こいつがこのくらいの記述でできるわけです:

graph LR

client-->thenet[Internet]-->router[FreeBSD ルータ兼 ロードバランサ 兼Redis Nextcloud予備];

router-->linux[Linux Nextcloud]

linux --> windows[Windows dbserver]

router .-> windows

subgraph home[家]

linux

windows

router

end

classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000;

classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff;

classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5;

class router,linux,windows,ingress,service,pod1,pod2 k8s;

class thenet plain;

class home,cluster cluster;

ここで使った要素は:

graph LRで左から右に行く図
文字を書くとそのままノードになる（router[FreeBSD ルータ兼 ロードバランサ 兼Redis Nextcloud予備]のように名称と表記を分けられる）
矢印で関係性を記述
囲み部分はsubgraph
色付けや装飾はclassDefで書いたものをclass宣言で割当て

という感じ。

気に入ったのが、こいつはグラフ（数学的な）記述ツールなので、エッジ（矢印）を適当に足したり引いたりしてやると、関係性のガラっと変わったグラフが一瞬で描けてしまうこと。

上図にたどり着くまでは紆余曲折あるのでお見せしましょう。まずは最初のバージョン。