Spoiler: DOT dilinde yazılmış DAG'leri işlemek için Vizdom.dev'i kullanın

Bir yazılım geliştiricisi olarak, çoğu zaman onları görselleştirmeyi içeren DAG'lerle zaman zaman çalıştım. Çoğu durumda hızlı bir görüntü elde etmekte zorlandım ve kendimi araçlar ararken buldum.

Neyse ki güvenilir biri var Grafikviz DOT dilinde yazılmış grafikleri oluşturabilen araç — Mükemmel!

Hariç…

• Web'de iyi çalışmıyor*
• Onu yüklemem gerekiyor
• DOT/GV dosyalarını çevrimiçi olarak yönetmez

Hususlar

*Tamam, teknik olarak Graphviz WebAssembly'ye derlenebilir ve birkaç yetenekli kişi dreampuf'unki gibi birkaç güzel proje oluşturmayı başardı. editör nikeee'ninki edator.net ve Magjac'ın editör - her biri kendi kıvrımına sahip. Hala bu görüntüleri bir SVG'ye (veya başka bir ortama) aktarmadan yerleştirmeye çalışıyorum.

Örneğin, grafiğimi depolamak istiyorum Notion.so Grafiği otomatik olarak oluşturan bir bağlantıyı yapıştırmanız yeterlidir.

kullanabilirim DenizkızıJS Grafikleri oldukça temiz bir şekilde oluşturan ve şaşırtıcı derecede iyi çalışan bu, sahip olmasının birçok nedeninden biri. GitHub'da 64k+ başlıyor . Ayrıca işaretlemeyi kullanarak Notion/GitHub'a grafikler de yerleştirebiliyorum, tatlım!

Ne yazık ki, DOT'u Denizkızı'nın ihtiyaç duyduğu indirim lezzetine çevirmem gerekiyor. Daha küçük metinsel temsilleri benim için dönüştürmek için ChatGPT'yi kullanabilirim, ancak sıklıkla dilbilgisi hataları yapıyor ve grafik görüntülenmeyi reddediyor, bu da onu bir otomasyon kaynağı olarak güvenilmez hale getiriyor.

Sonra var Terrastruct.com Bu, elle oluşturulmuş diyagramları yönetmek için harika bir şey, ancak Deniz Kızı sorunlarım gibi, DOT'u güvenilir bir şekilde D2'ye dönüştüremiyorum. Sanırım elle diyagramlar oluşturacaksanız bu kabul edilebilir, tek seferlik bir maliyettir. Genel olarak harika bir araçtır. Teşekkürler!

Sorun

• Programlı olarak oluşturulmuş DOT çıktıları oluşturmak istiyorum; araçların hiçbiri bu hedefe ulaşmama yardımcı olmuyor gibi görünüyor.

• Grafikleri oluşturan bağlantıları gömmek istiyorum.

• Oluşturmayı güncellemeler için çevrimiçi olarak depolamak veya diğer grafiklerle görsel olarak karşılaştırmak istiyorum.

Çözüm

Evet — bir inşa ettim uygulama bunun için 🎉

…Ve tamamen Rust'tan inşa edilmiştir 🦀 ve ona çok teşekkür ederiz Leptos

tl;dr — DAG'leri hızlı bir şekilde çevrimiçi hale getirmek için tasarlanmış basit bir uygulama

Grafik oluşturmada kenar geçişlerini en aza indiren, NP-zorluğu kabul edilen bir zorluk, görsel olarak çekici grafikler oluşturmanın anahtarıdır. Terrastruct ekibi olağanüstü bir çalışma yayınladı Blog yazısı bu konuyu derinlemesine inceliyoruz. DagreJS düzen algoritmalarından ve bilgilendirici " A Technique for Drawing Directed Graphs ¹" makalesinden önemli ölçüde ilham alarak Rust'ta bir varyant geliştirdim.

Bu sürüm, bu sorunun karmaşık karmaşıklığından yararlanarak hiyerarşik grafiklerin oluşturulmasında özellikle etkilidir.

Büyük DAG'lerin (500'den fazla düğüm/kenar) oluşturulması Graphviz ile biraz yavaş olma eğilimindedir. Dağ + D3 ( d3-graphviz ve türevleri) biraz daha hızlı sonuçlanıyor ve harika animasyonlar/stil özelleştirmeleri sunuyor. Yine de, DOT dilinin sağladığı özellikleri gözden kaçırdıklarını hissettim; yani stil nitelikleri genellikle yalnızca Graphviz ile işlem yapıyorsanız dikkate alınır.

Vizdom Dagre'ye çok benzer sonuçlar üretecek ancak Graphviz'in DOT spesifikasyonuna ve stil davranışlarına daha uygun olacaktır. Ancak Graphviz ile özellik benzerliği yoktur ve desteklenmeyen ifadeler/nitelikler basitçe göz ardı edilir.

Programlı olarak oluşturulan DOT'un tüketeceği nitelik türleri için bunun iyi bir uzlaşma olduğuna inanıyorum.

Vizdom'un Özellikleri

• 🚀 Çok hızlı renderleme
• 💾 Grafikleri bağlantılarda saklayın
• 0️⃣ Sıfır bağımlılık ve kurulum gerektirmez

İşleme Hızı

Bu bir elma-portakal karşılaştırması. Graphviz hala harika görselleştirmeler üretiyor ve daha fazlasını destekliyor düzen motorları yani subjektif olarak karşılaştırıyorum Vizdom Graphviz'in DOT motoruna karşı, kapsamı yalnızca DAG'lara indiriliyor ve hatta DOT dilinin dar özelliklerinin bir listesine kadar kapsamlandırılıyor.

Evet, Graphviz gibi 30 yılı aşkın bir seri etrafında yılların deneyimini ve takımlarını karşılaştırmanın korkunç olduğunu biliyorum, ancak benim dar kullanım durumum için bu çok hızlı. İşte M1 Macbook Pro'mda render için bazı duvar süreleri oldukça büyük bir grafik ~400 düğüm ile:

• Yerel Graphviz: ~30 saniye
• Chrome (WASM) Graphviz: çöküyor*
• Chrome (Javascript) DagreJS: ~10 saniye
• Krom (WASM) Vizdom : ~1 saniye**

* ALLOW_MEMORY_GROWTH=1 emscripten bayrağı ayarlanmadığı için çöküyor , dolayısıyla toplam bellek 16 MB ile sınırlanıyor. Bu düzeltilebilir ancak söz konusu grafiği işleyebilecek çevrimiçi bir proje bulamadım.

** Örnek grafik, editör görünümünde Example 14 seçilerek oluşturulur . Grafikte kalan URI çok büyük olduğundan sayfayı yenilemek sayfayı yenilemenize ve 414 almanıza neden olacaktır. Daha büyük grafikleri depolamak için daha iyi bir çözüm üzerinde çalışıyorum.

Grafikleri Bağlantılarda Saklayın

DOT dosyasında herhangi bir değişiklik yaptığınızda, URL'nin grafik ve düzen seçeneklerini saklamak için birkaç sorgu parametresini hemen güncellediğini ve yalnızca bağlantıyı kaydederek verilerinizin bir kopyasına her zaman referans vermenize olanak tanıdığını fark edeceksiniz!

Bir sorun var: büyük grafikler URI'yi AWS için çok büyük yapma eğilimindedir (burada Vizdom şu anda barındırılıyor) ve diğer yük dengeleyiciler.

Şu anda daha büyük grafikleri işlemek için bir çözüm üzerinde çalışıyorum, ancak bu arada grafikleri kalıcı kılmak ve depolamak için birkaç yol ekledim:

• Grafiği en üst düzeye çıkaran bir görünümü otomatik olarak oluşturan, yerleştirilebilir bir bağlantıyı kopyalayın.

• Oluşturmayı destekleyen herhangi bir uygulamaya yerleştirmek için bir iframe pasajını kopyalayın.

• Veya oluşturulan SVG'yi indirin.

Burada editör görünümünün nasıl göründüğüne dair bir örnek verilmiştir: deflate için pprof izlemesi :

Editör Görünümüne gidin ve Example 42 yükleyin

Fark Görünümü

Bazen kendimi oluşturduğum iki grafiği karşılaştırmaya çalışırken buldum, bu yüzden bunu yaparken bir de ekledim. fark görüntüleyici iki farklı grafik arasındaki değişiklikleri görsel olarak görmek için.

Renk Efsanesi:

• Kırmızı: Silindi
• Turuncu: Değiştirildi
• Yeşil: Eklendi

İşte birkaç fotoğraf:

Beni tıklayın: düğüm kimliğini “e”den “f”ye değiştirme

Beni tıklayın: “küme=true” ekleme

Gelecek Yönü

Vizdom halen devam eden bir çalışmadır ve gelişmeye devam ettikçe, bu aracı mükemmelleştirme yolculuğunun grafik görselleştirme alanının kendisi kadar dinamik olduğunun farkındayım. Neyle gurur duysam da Vizdom şu ana kadar başardı, potansiyeli beni daha da heyecanlandırıyor. İşte bu noktada siz, yani okuyucu ve potansiyel kullanıcı devreye giriyor.

Herhangi bir geri bildiriminiz varsa, lütfen bana mesaj göndermekten çekinmeyin. Gitter veya Anlaşmazlık .

Okuduğunuz için teşekkürler — Bu makaleyi beğendiyseniz lütfen takip edin !

[1]: ER Gansner, E. Koutsofios, SC North ve K. . -P. Vo, "Yönlendirilmiş grafiklerin çizilmesi için bir teknik", IEEE Transactions on Software Engineering, cilt. 19, hayır. 3, s. 214–230, Mart 1993, doi: 10.1109/32.221135.

Burada da yayınlandı