ネタバレ:  を使用して DOT 言語で書かれた DAG をレンダリングする Vizdom.dev ソフトウェア開発者として、私は時々 DAG を扱うことがありますが、そのほとんどは DAG の視覚化に関係しています。多くの場合、迅速なレンダリングが難しく、ツールを探していることに気づきました。 幸いなことに、信頼できる人がいます DOT 言語で書かれたグラフをレンダリングできるツール — 完璧です! グラフビズ を除外する… ウェブではうまく機能しません* インストールする必要があります DOT/GV ファイルはオンラインでは管理されません 考慮事項 *OK、 Graphviz は WebAssembly にコンパイルでき、数人の才能ある人々が dreampuf のようないくつかのきちんとしたプロジェクトを構築することができました。 、ナイキの 、そしてマグジャックの — それぞれに独自の工夫が施されています。これらのレンダリングを SVG (または他のメディア) にエクスポートせずに埋め込むのにまだ苦労しています。 技術的には 編集者 エドトルネット 編集者 たとえば、グラフを次のように保存したいとします。 リンクを貼り付けるだけで、グラフが自動的に表示されます。   Notion.so 使えるよ これはグラフを非常にきれいにレンダリングし、驚くほどうまく機能します。これが、それが機能する多くの理由の 1 つです。 。マークダウンを使用して、Notion/GitHub にグラフを埋め込むこともできます。 マーメイドJS  GitHub で 64k+ が開始 残念ながら、DOT を Mermaid が必要とするマークダウンのフレーバーに変換する必要があります。小さなテキスト表現の場合は、ChatGPT を使用して変換できますが、頻繁に文法上の間違いが発生し、グラフのレンダリングが拒否されるため、自動化のソースとしては信頼できません。 それから、 これは、 図を管理するには素晴らしいことですが、マーメイドの悩みと同様に、DOT を D2 に確実に変換することができません。図を手動で作成する場合、これは許容できる 1 回限りのコストだと思います。一般的に、これは素晴らしいツールです。称賛の声！   Terrastruct.com 手作りの 問題 生成された DOT 出力をレンダリングしたいのですが、どのツールもその目標の達成に役立つとは思えません。 プログラムで グラフをレンダリングするリンクを埋め込みたい。 更新のためにレンダリングをオンラインで保存したり、他のグラフと視覚的に比較したりしたいと考えています。 ソリューション はい、私は そのために🎉 アプリ  …そして、これは完全に Rust で構築されています 🦀 に感謝します。 レプトス   tl;dr — DAG をオンラインで高速にレンダリングするためのシンプルな専用アプリ NP 困難な課題として認識されているグラフ生成時のエッジ交差を最小限に抑えることが、視覚的に魅力的なグラフを作成するための鍵となります。 Terrastruct のチームは優れた成果物を発表しました。 このトピックを掘り下げます。 DagreJS レイアウト アルゴリズムと洞察力に富んだ論文「  ¹」から多大なインスピレーションを得て、私は Rust でバリアントを開発しました。 ブログ投稿 有向グラフを描画するテクニック このバージョンは、この問題の複雑さを利用して、階層グラフのレンダリングに特に効果的です。  Graphviz では、大規模な DAG (500 以上のノード/エッジ) のレンダリングが多少遅くなる傾向があります。ダグレ + D3 ( およびその派生版) はかなり高速になり、優れたアニメーション/スタイルのカスタマイズが可能になります。しかし、私は、DOT 言語が提供する機能を見逃しているように感じました。つまり、スタイル属性は、Graphviz でレンダリングしている場合にのみ尊重されることがよくあります。   d3-graphviz Dagre と非常によく似た結果が生成されますが、より DOT 仕様と Graphviz のスタイル動作に合わせたものになります。ただし、Graphviz と同等の機能はなく、サポートされていないステートメント/属性は単に無視されます。 ビズダム これは、プログラムで生成された DOT が使用する属性の種類を考慮した、良い妥協案だと思います。  Vizdomの機能 🚀 超高速レンダリング 💾 グラフをリンクに保存 0️⃣ 依存関係がなく、インストールは不要です レンダリング速度 まあ、それはリンゴとオレンジの比較です。 Graphviz は引き続き ビジュアライゼーションを生成し、より多くの機能をサポートします , 主観的に比較しているので、 Graphviz の DOT エンジンに対して、対象を DAG のみに絞り込み、 DOT 言語の狭い機能のリストに絞り込みます。 優れた レイアウトエンジン ビズダム さらに はい、Graphviz の 30 年以上の実績と長年の経験とツールを比較するのはひどいことだとはわかっていますが、私の狭いユースケースでは、これは驚くほど高速です。私の M1 Macbook Pro でのレンダリングにかかった時間をいくつか示します。 ~400 ノードの場合: かなり大きなグラフ ネイティブ Graphviz: ~30 秒 Chrome (WASM) Graphviz: クラッシュ*  Chrome (JavaScript) DagreJS: ~10 秒 クロム (WASM) ビズダム :  ~1秒**   * emscripten フラグ ALLOW_MEMORY_GROWTH=1 が設定されていないためクラッシュし、合計メモリが 16MB に制限されます。これは修正できますが、問題のグラフを処理できるオンライン プロジェクトが見つかりませんでした。   を選択すると表示されます。   ** グラフの例は、 エディター ビューで Example 14 グラフ内に保持される URI が大きすぎるため、ページを更新すると 414 が発生します。私は、より大きなグラフを保存するためのより良いソリューションに取り組んでいます。 グラフをリンクに保存する DOT ファイルに変更を加えると、URL によっていくつかのクエリ パラメータが即座に更新され、グラフとレイアウトのオプションが保存されるため、リンクを保存するだけで常にデータのコピーを参照できるようになります。 落とし穴があります。グラフが大きいと、URI が AWS にとって大きすぎる傾向があります (ここで、 は現在ホストされています）および他のロードバランサー。 ビズダム 私は現在、より大きなグラフを処理するためのソリューションに取り組んでいますが、それまでの間、グラフを永続化して保存する方法をいくつか組み込みました。 グラフを最大化するビューを自動的にレンダリングする埋め込み可能なリンクをコピーします。  iframe スニペットをコピーして、レンダリングをサポートするアプリケーションに埋め込みます。 または、レンダリングされた SVG をダウンロードするだけです。 以下は、エディター ビューがどのように見えるかの例です。 :   deflate の pprof トレース に移動し、  をロードします。 エディター ビュー Example 42 差分ビュー 時々、自分で生成した 2 つのグラフを比較しようとしていることがあるので、そのついでに、 2 つの異なるグラフ間の変化を視覚的に確認します。 差分ビューア 色の凡例: 赤: 削除済み オレンジ: 変更済み 緑色: 追加されました ここにいくつかのスナップがあります: Click me: ノード ID を「e」から「f」に変更します クリックしてください: 「cluster=true」を追加 今後の方向性 はまだ進行中の作業であり、進化し続けているため、このツールを完成させるまでの道のりは、グラフ視覚化の分野そのものと同じくらいダイナミックであることを私は認識しています。何を誇りに思いながらも、 これまでのところ、その可能性についてはさらに興奮しています。そこで登場するのは、読者であり潜在的なユーザーであるあなたです。 ビズダム ビズダム ご意見がございましたら、お気軽にメッセージください。 または 。 ギッター 不和 読んでいただきありがとうございます — この記事が気に入ったら、 ください。 フォローして  [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。 でも公開されています ここ

This post provides insights into new product. 

This story contains new, firsthand information uncovered by the writer.

Render DAGs with Vizdom

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

DAG に Graphviz を使用すべきではない理由: 代わりに何を使用すべきか

About Author

コメント

ラベル

この記事は

Related Stories

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps