VS CodeでGraphviz Interactive Previewを試す
少し前からめっちゃ試したかったんですよね。
動きの感じは上記のページを見ていただく方が早いかもです。
ギャラリーから適当にサンプルをもらってきてやってみましたが、これ、いいですね。 レンダリングが早い。 仕事で使いたいなあ。プライベートはMacですが、仕事の時はWindowsかつ、ちょっとDockerの扱いも面倒という感じなのでそこさえクリアできれば全く問題ないかな（ちなみに、ローカルにGraphvizが動く環境を作る方がハードルが高そう）。在宅勤務で、口頭で説明しづらくて図解しやすいといいんですよね、こういうの。会社内でもその課題は認識しつつ、あんまり普段使いできるものに出会っていない感触なので、テキストで書いてすぐ見せられるものがあるのは強い。
地味に良い点は、変化が自動的にアニメーションするんですよね。Webページをリロードするみたいに断続的に切り替わるわけではなくて、（たぶんですけど）差分を取ってアニメーションする。例えば、矢印をつける対象を変更したりすると、可能な限りで矢印がにゅーんと少しずつ伸びていく。これはGraphviz側の挙動を素直に使うとこういった動きになるのか、それともこのVS Codeのextensionが気を利かせてそういったロジックを組んでいるのかは不明です。と思ったらREADMEにInteractive edge tracking. click on a node to highlight incoming and outgoing edges.と記述がありますね。あ、もちろん、全体的なレイアウトが変わるような場合はばばっと切り替わりますよ（擬音が多いな）。
最近、こういったグラフとかのビジュアル表示について考えることが多くて、かつ、アニメーションについて特に興味があるんですよね。だから、このテキスト変換を自動的にやってくれる機構があれば、それは間接的にGraphvizをアニメーションで動かせるということになるのでは（？）。そんな面倒なことを考えなくとも、すでに何かあるのかもしれないですけど。
注意点としては、まだこのextensionはpreviewを謳っているということ。Versionも0.0.9と控えめ。
内部的には、以下のライブラリを使っているようです。
graph engine: d3-graphviz edge tracking: jquery.graphviz.svg webview handling: vscode-graphviz
と思ったら、以下の記述を発見。カスタマイズできる？これは気になりますね。。。また機会があれば調べます。
Configurable graph options: e.g. transitionDelay, transitionDuration. Developers: you can pass a callback function that receives the webPanel when executing the preview command. This allows you to override functionality that is provided by the webPanel like handlers for click/dblClick events.
