Spoiler: Verwenden Sie   , um in der DOT-Sprache geschriebene DAGs darzustellen Vizdom.dev  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  Tool, das in der DOT-Sprache geschriebene Diagramme rendern kann – Perfekt!   Graphviz  Außer…  Im Web funktioniert es nicht gut*  Ich muss es installieren  Es verwaltet keine DOT/GV-Dateien online  Überlegungen  *Okay,   kann Graphviz zu WebAssembly kompiliert werden, und ein paar talentierten Leuten ist es gelungen, ein paar nette Projekte wie Dreampufs zu erstellen  , Nikeees  , und Magjacs  – 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. technisch gesehen   Editor   edotor.net   Editor  Ich möchte zum Beispiel mein Diagramm in speichern  indem Sie einfach einen Link einfügen, der das Diagramm automatisch rendert.   Vorstellung.so  ich könnte benutzen  Das stellt Diagramme ziemlich sauber dar und funktioniert überraschend gut – das ist einer der vielen Gründe, warum das so ist  . Ich kann Diagramme auch in Notion/GitHub einbetten, indem ich Markdown verwende, süß!   MermaidJS    GitHub 64k+ startet auf  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  Das ist erstaunlich für die Verwaltung   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!   Terrastruct.com von Hand erstellten  Das Problem  Ich möchte   generierte DOT-Ausgaben rendern – keines der Tools scheint mir dabei zu helfen, dieses Ziel zu erreichen. programmgesteuert  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  dafür 🎉   App  …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  sich mit diesem Thema befassen. Inspiriert durch die DagreJS-Layoutalgorithmen und den aufschlussreichen Artikel „   “ habe ich eine Variante in Rust entwickelt.   Blogeintrag A Technique for Drawing Directed Graphs¹  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 (  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.   d3-graphviz  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.   Vizdom  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   Visualisierungen und unterstützt mehr  , also vergleiche ich subjektiv  gegen die DOT-Engine von Graphviz, indem es auf nur DAGs und noch   auf eine Liste enger Funktionen der DOT-Sprache reduziert wird. großartige   Layout-Engines   Vizdom weiter  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  mit ~400 Knoten:   ein ziemlich großes Diagramm  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  wird derzeit gehostet) und andere Load Balancer.   Vizdom  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   und laden Sie  Editor-Ansicht 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  um Änderungen zwischen zwei verschiedenen Diagrammen visuell zu erkennen.   Diff-Viewer  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  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  Was ich bisher erreicht habe, umso mehr bin ich von seinem Potenzial begeistert. Hier kommen Sie als Leser und potenzieller Benutzer ins Spiel.   Vizdom   Vizdom  Wenn Sie Feedback haben, können Sie mir gerne eine Nachricht senden  oder  .   Gitter   Zwietracht  Vielen Dank fürs Lesen – Wenn Ihnen dieser Artikel gefallen hat,   bitte! folgen Sie ihm  [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   veröffentlicht hier

This post provides insights into new product. 

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

Render DAGs with Vizdom

Read My Stories

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

Hier erfahren Sie, warum Sie Graphviz nicht für DAGs verwenden sollten: Was Sie stattdessen verwenden sollten

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Management Community!

HackerNoon Decoded 2024: Wir feiern die Community unserer Technologieunternehmen!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps