HTML ページ中の Graphviz 定義を自動的にクライアント側で SVG 変換し表示させる他2件 (2019-06-26)

2019年6月26日 (水)

一昨日に引き続き今日は、北陸新幹線かがやきの金沢から東京への指定券をえきねっとで購入。これでホテルと往復の新幹線を押さえられたので金沢旅行確定だ。

復路は競争が激しいのか、残念ながらトクだ値では取れなかった(ボタンはまだ△で表示されていたのだけれど、席を選んだりしているうちに予定数に達してしまった)。

昨日 HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるようにしたらいい感じなので、勢いで Graphviz の DOT 言語で書かれたグラフ定義も Viz.js を使って SVG 変換できるようにしてみた。

mermaid では HTML ページ中の mermaid クラスをもつ要素を SVG 要素に変換するコードが入っているのだけれど Viz.js にはそれは無さそう。なので mermaid の実装を参考に dot クラスの要素を変換するようにしてみた。

 <div class="dot">
 digraph {
   graph [rankdir = LR];
   a -> b;
   a -> c;
 }
 </div>

と書いたら以下のように変換される。

digraph { graph [rankdir = LR]; a -> b; a -> c; }

mermaid よりずっとメジャーな Graphviz (互換)が使えるとさらに捗って嬉しいぞ。

Viz.js は mermaid よりさらに大きいので、さすがに全ページで読み込ませるのはまずい。なので Viz.js と mermaid についてそれぞれの定義があった場合のみ動的ロードするようにしておいた。

で、まずます動くようになったのでちょっとしたノートを置いておくスペース nNote だけでなく nDiki でも動くように設定しちゃった。Viz.js や mermaid が使えなくなった時のことを考えて記事の寿命が長い nDiki の方では多用はしないつもりではある。

06:15 方眼 RICOH GR III #GR #GRIII #GR3 https://t.co/tad9jykPQB
09:44 2019年6月26日 #朝の渋谷順調解体。 RICOH GR III Posi #GR #GRIII #GR3 https://t.co/yV17vx24bE
20:39 渋谷駅で山手線に乗るの、南口じゃなくて新南口からだとどうなんだろと思って試してみたけど予想の範囲内だった。
23:45 JavaScript コードを書くとか、不慣れなことをした。