ネタバレ: Vizdom.devを使用して DOT 言語で書かれた DAG をレンダリングする
ソフトウェア開発者として、私は時々 DAG を扱うことがありますが、そのほとんどは DAG の視覚化に関係しています。多くの場合、迅速なレンダリングが難しく、ツールを探していることに気づきました。
幸いなことに、信頼できる人がいます
を除外する…
*OK、技術的にはGraphviz は WebAssembly にコンパイルでき、数人の才能ある人々が dreampuf のようないくつかのきちんとしたプロジェクトを構築することができました。
たとえば、グラフを次のように保存したいとします。
使えるよ
残念ながら、DOT を Mermaid が必要とするマークダウンのフレーバーに変換する必要があります。小さなテキスト表現の場合は、ChatGPT を使用して変換できますが、頻繁に文法上の間違いが発生し、グラフのレンダリングが拒否されるため、自動化のソースとしては信頼できません。
それから、
はい、私は
…そして、これは完全に Rust で構築されています 🦀 に感謝します。
tl;dr — DAG をオンラインで高速にレンダリングするためのシンプルな専用アプリ
NP 困難な課題として認識されているグラフ生成時のエッジ交差を最小限に抑えることが、視覚的に魅力的なグラフを作成するための鍵となります。 Terrastruct のチームは優れた成果物を発表しました。
このバージョンは、この問題の複雑さを利用して、階層グラフのレンダリングに特に効果的です。
Graphviz では、大規模な DAG (500 以上のノード/エッジ) のレンダリングが多少遅くなる傾向があります。ダグレ + D3 (
これは、プログラムで生成された DOT が使用する属性の種類を考慮した、良い妥協案だと思います。
まあ、それはリンゴとオレンジの比較です。 Graphviz は引き続き優れたビジュアライゼーションを生成し、より多くの機能をサポートします
はい、Graphviz の 30 年以上の実績と長年の経験とツールを比較するのはひどいことだとはわかっていますが、私の狭いユースケースでは、これは驚くほど高速です。私の M1 Macbook Pro でのレンダリングにかかった時間をいくつか示します。
* emscripten フラグALLOW_MEMORY_GROWTH=1
が設定されていないためクラッシュし、合計メモリが 16MB に制限されます。これは修正できますが、問題のグラフを処理できるオンライン プロジェクトが見つかりませんでした。
** グラフの例は、エディター ビューでExample 14
を選択すると表示されます。グラフ内に保持される URI が大きすぎるため、ページを更新すると 414 が発生します。私は、より大きなグラフを保存するためのより良いソリューションに取り組んでいます。
DOT ファイルに変更を加えると、URL によっていくつかのクエリ パラメータが即座に更新され、グラフとレイアウトのオプションが保存されるため、リンクを保存するだけで常にデータのコピーを参照できるようになります。
落とし穴があります。グラフが大きいと、URI が AWS にとって大きすぎる傾向があります (ここで、
私は現在、より大きなグラフを処理するためのソリューションに取り組んでいますが、それまでの間、グラフを永続化して保存する方法をいくつか組み込みました。
以下は、エディター ビューがどのように見えるかの例です。
エディター ビューに移動し、 Example 42
をロードします。
時々、自分で生成した 2 つのグラフを比較しようとしていることがあるので、そのついでに、
色の凡例:
ここにいくつかのスナップがあります:
Click me: ノード ID を「e」から「f」に変更します
ご意見がございましたら、お気軽にメッセージください。
読んでいただきありがとうございます — この記事が気に入ったら、フォローしてください。
[1]: ER Gansner、E. Koutsofios、SC North、および K. -P. Vo、「有向グラフを描画するためのテクニック」、IEEE Transactions on Software Engineering、vol. 19、いいえ。 3、214–230ページ、1993年3月、土井:10.1109/32.221135。
ここでも公開されています