日報(2021-08-10) Mermaid で双方向の矢印が使えるようになってた

はじめに

もう10数年前、どうかしたら 20年前ぐらい前なのかもしれないのですが GraphViz を初めて知った時の「なんて便利な」って驚きはすごかったです

言葉で関係を表現するのは図示するのと比べて弱く、例えば猫十字社の「黒のもんもん組」で日めくりカレンダーに「今日の失敗は昨日の怠慢の賜物である」っていう不思議な格言と、次の日には「今日の失敗は明日の惨敗の母である」というなかなかエグい格言がでていたのですが、これも GraphViz で

digraph{
昨日の怠慢->今日の失敗->明日の惨敗
}

みたいに書いて

とすると、昨日の怠慢の効果が時系列に未来に向かって作用していく因果関係がとてもわかりやすいです

こういうツールだと Visio がすでにあったのですが、ビジュアルなドローイングは見た目の良し悪しが自分の責任になってしまうのがとてもうざく、式を書けばグラフを書いてくれるありがたさは不器用かつ美的感覚のダメな人にはとてもありがたかったのでした

GraphViz には矢印の方向を表す dir (opens new window) Attribute というものがあって、dir=both で双方向矢印にすることができます

digraph{
graph [rankdir = LR];
State->UI[dir=both]
}

mermaid は双方向矢印がなかった

GraphViz はグラフを書いてくれるツールなのですが、シーケンス図やフローチャートを書いてくれる mermaid を知った時も驚いたのですが、mermaid にはなぜか双方向矢印がなく、bidirectional な関係を表現しようとするとなんかやぼったくなってしまうので使うのを避けて、双方向矢印がちゃんとドキュメント (opens new window)にも明記されているnomnoml (opens new window)とかを使ってました

#direction: right
[State]<->[UI]
[DB]<-->[State]

mermaid でも「双方向グラフを使いたい」って feature request (opens new window) はかなり昔から上がっていて、ずっとほったらかしにされてるみたいなのですが、久しぶりに見てみたらなんとこの５月にMulti directional arrows (opens new window) がはいってるよっていう回答 (opens new window)が上がってました

mermaid を最新に update して以下を試してみたら

flowchart TD
A[Common Parent] <--> B[App bar]
A <--> C[Navigation Drawer]
A <--> D[Footer]

Voilà !

Kroki

ちなみにこのページの各種グラフは全部 kroki (opens new window) で書いてます

kroki は GitLab の markdown flavor のドキュメント (opens new window)を見てて存在を知ったのですが、サイト (opens new window)で Diagram を選んで、その記法で書いたグラフを get できる URL を作ってくれるスグレモノで、上のグラフは全部その URL を image タグの src に指定しているのですが、そういう使い方だとなんの設定もなしに使えるので本当に Nice です！

もしこのブログが hashnode (opens new window)みたいに副題がつけられるブログだったら「krokiは便利！」みたいな副題をつけてたと思う

---