Spoiler: Verwenden Sie Vizdom.dev , um in der DOT-Sprache geschriebene DAGs darzustellen

Als Softwareentwickler habe ich gelegentlich mit DAGs gearbeitet – bei den meisten davon geht es um deren Visualisierung. In vielen Fällen fiel es mir schwer, ein schnelles Rendering zu erhalten, und ich suchte nach Werkzeugen.

Zum Glück gibt es die Vertrauenswürdigen Graphviz Tool, das in der DOT-Sprache geschriebene Diagramme rendern kann – Perfekt!

Außer…

• Im Web funktioniert es nicht gut*
• Ich muss es installieren
• Es verwaltet keine DOT/GV-Dateien online

Überlegungen

*Okay, technisch gesehen kann Graphviz zu WebAssembly kompiliert werden, und ein paar talentierten Leuten ist es gelungen, ein paar nette Projekte wie Dreampufs zu erstellen Editor , Nikeees edotor.net , und Magjacs Editor – jedes mit seiner eigenen Wendung. Ich habe immer noch Schwierigkeiten, diese Renderings einzubetten, ohne sie in eine SVG-Datei (oder ein anderes Medium) zu exportieren.

Ich möchte zum Beispiel mein Diagramm in speichern Vorstellung.so indem Sie einfach einen Link einfügen, der das Diagramm automatisch rendert.

ich könnte benutzen MermaidJS Das stellt Diagramme ziemlich sauber dar und funktioniert überraschend gut – das ist einer der vielen Gründe, warum das so ist 64k+ startet auf GitHub . Ich kann Diagramme auch in Notion/GitHub einbetten, indem ich Markdown verwende, süß!

Leider muss ich DOT in die Abschlagsvariante übersetzen, die Mermaid benötigt. Für kleinere Textdarstellungen kann ich ChatGPT verwenden, um sie für mich zu konvertieren, aber es macht häufig grammatikalische Fehler und das Diagramm lässt sich nicht rendern – was es als Automatisierungsquelle unzuverlässig macht.

Dann ist da Terrastruct.com Das ist erstaunlich für die Verwaltung von Hand erstellten Diagrammen, aber wie bei meinen Mermaid-Problemen kann ich DOT nicht zuverlässig in D2 konvertieren. Ich nehme an, wenn Sie Diagramme von Hand erstellen möchten, sind dies akzeptable einmalige Kosten. Im Allgemeinen ist es ein fantastisches Werkzeug. Ein großes Lob!

Das Problem

• Ich möchte programmgesteuert generierte DOT-Ausgaben rendern – keines der Tools scheint mir dabei zu helfen, dieses Ziel zu erreichen.

• Ich möchte Links einbetten, die Diagramme rendern.

• Ich möchte das Rendering für Aktualisierungen online speichern oder visuell mit anderen Diagrammen vergleichen.

Die Lösung

Ja, ich habe eine gebaut App dafür 🎉

…Und es ist komplett in Rust gebaut 🦀 vielen Dank an Leptos

tl;dr – eine einfache, speziell entwickelte App zum schnellen Online-Rendering von DAGs

Die Minimierung von Kantenüberschneidungen bei der Graphgenerierung, eine anerkannte NP-schwere Herausforderung, ist der Schlüssel zur Erstellung optisch ansprechender Graphen. Das Team von Terrastruct hat eine herausragende Arbeit veröffentlicht Blogeintrag sich mit diesem Thema befassen. Inspiriert durch die DagreJS-Layoutalgorithmen und den aufschlussreichen Artikel „ A Technique for Drawing Directed Graphs¹ “ habe ich eine Variante in Rust entwickelt.

Diese Version ist besonders effektiv für die Darstellung hierarchischer Diagramme und nutzt die komplexe Komplexität dieses Problems.

Das Rendern großer DAGs (mehr als 500 Knoten/Kanten) ist mit Graphviz tendenziell etwas träge. Dagre + D3 ( d3-graphviz und Derivate) sind viel schneller und bieten großartige Animationen/Styling-Anpassungen. Dennoch habe ich das Gefühl, dass ihnen die Funktionen fehlen, die die DOT-Sprache bietet – nämlich die Stilattribute werden oft nur berücksichtigt, wenn Sie mit Graphviz rendern.

Vizdom führt zu Ergebnissen, die denen von Dagre sehr ähnlich sind, sich aber eher an der DOT-Spezifikation und dem Stilverhalten von Graphviz orientieren. Es besteht jedoch keine Funktionsparität mit Graphviz und nicht unterstützte Anweisungen/Attribute werden einfach ignoriert.

Ich glaube, es ist ein guter Kompromiss für die Arten von Attributen, die programmgesteuert generiertes DOT nutzen wird.

Vizdom-Funktionen

• 🚀 Blitzschnelles Rendern
• 💾 Speichern Sie Grafiken in Links
• 0️⃣ Keine Abhängigkeiten und keine Installation erforderlich

Rendering-Geschwindigkeit

Nun, es ist ein Vergleich zwischen Äpfeln und Birnen. Graphviz erstellt immer noch großartige Visualisierungen und unterstützt mehr Layout-Engines , also vergleiche ich subjektiv Vizdom gegen die DOT-Engine von Graphviz, indem es auf nur DAGs und noch weiter auf eine Liste enger Funktionen der DOT-Sprache reduziert wird.

Ja, ich weiß, es ist schrecklich, jahrelange Erfahrung und Tools mit der über 30-jährigen Erfolgsgeschichte von Graphviz zu vergleichen, aber für meinen engen Anwendungsfall ist es wahnsinnig schnell. Hier sind einige Wandzeiten auf meinem M1 Macbook Pro zum Rendern ein ziemlich großes Diagramm mit ~400 Knoten:

• Native Graphviz: ~30 Sekunden
• Chrome (WASM) Graphviz: stürzt ab*
• Chrome (Javascript) DagreJS: ~10 Sekunden
• Chrome (WASM) Vizdom : ~1 Sekunde**

* Es stürzt ab, weil das Emscripten-Flag ALLOW_MEMORY_GROWTH=1 nicht gesetzt ist, wodurch der Gesamtspeicher auf 16 MB begrenzt wird. Dies kann behoben werden, aber ich habe kein Online-Projekt gefunden, das mit dem betreffenden Diagramm umgehen kann.

** Das Beispieldiagramm wird durch Auswahl von Example 14 in der Editoransicht gerendert. Das Aktualisieren der Seite führt dazu, dass Sie die Seite aktualisieren und einen 414-Fehler erhalten, da der im Diagramm verbleibende URI zu groß ist. Ich arbeite an einer besseren Lösung zum Speichern größerer Diagramme.

Speichern Sie Diagramme in Links

Wenn Sie Änderungen an der DOT-Datei vornehmen, werden Sie feststellen, dass die URL sofort einige Abfrageparameter aktualisiert, um die Diagramm- und Layoutoptionen zu speichern, sodass Sie immer auf eine Kopie Ihrer Daten verweisen können, indem Sie einfach den Link speichern!

Es gibt einen Haken: Große Diagramme neigen dazu, den URI für AWS zu groß zu machen (wo Vizdom wird derzeit gehostet) und andere Load Balancer.

Ich arbeite derzeit an einer Lösung für den Umgang mit größeren Diagrammen, habe aber in der Zwischenzeit einige Möglichkeiten zum Beibehalten und Speichern von Diagrammen hinzugefügt:

• Kopieren Sie einen einbettbaren Link, der automatisch eine Ansicht rendert, die das Diagramm maximiert.

• Kopieren Sie ein Iframe-Snippet, um es in jede Anwendung einzubetten, die das Rendern unterstützt.

• Oder laden Sie einfach die gerenderte SVG-Datei herunter.

Hier ist ein Beispiel dafür, wie die Editoransicht aussieht pprof Trace für Deflate :

Gehen Sie zur Editor-Ansicht und laden Sie Example 42

Diff-Ansicht

Gelegentlich habe ich versucht, zwei von mir erstellte Diagramme zu vergleichen. Während ich dabei war, habe ich noch eines hinzugefügt Diff-Viewer um Änderungen zwischen zwei verschiedenen Diagrammen visuell zu erkennen.

Farblegende:

• Rot: Gelöscht
• Orange: Geändert
• Grün: Hinzugefügt

Hier ein paar Schnappschüsse:

Klicken Sie auf mich: Ändern einer Knoten-ID von „e“ in „f“

Klicken Sie auf mich: Hinzufügen von „cluster=true“

Zukünftige Ausrichtung

Vizdom ist noch in Arbeit, und während es sich weiterentwickelt, bin ich mir bewusst, dass der Weg zur Perfektionierung dieses Tools genauso dynamisch ist wie der Bereich der Diagrammvisualisierung selbst. Während ich stolz auf was bin Vizdom Was ich bisher erreicht habe, umso mehr bin ich von seinem Potenzial begeistert. Hier kommen Sie als Leser und potenzieller Benutzer ins Spiel.

Wenn Sie Feedback haben, können Sie mir gerne eine Nachricht senden Gitter oder Zwietracht .

Vielen Dank fürs Lesen – Wenn Ihnen dieser Artikel gefallen hat, folgen Sie ihm bitte!

[1]: ER Gansner, E. Koutsofios, SC North und K. . -P. Vo, „Eine Technik zum Zeichnen gerichteter Graphen“, in IEEE Transactions on Software Engineering, Bd. 19, nein. 3, S. 214–230, März 1993, doi: 10.1109/32.221135.

Auch hier veröffentlicht