Spoiler: DOT dilinde yazılmış DAG'leri işlemek için   kullanın Vizdom.dev'i  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  DOT dilinde yazılmış grafikleri oluşturabilen araç — Mükemmel!   Grafikviz  Hariç…  Web'de iyi çalışmıyor*  Onu yüklemem gerekiyor  DOT/GV dosyalarını çevrimiçi olarak yönetmez  Hususlar  *Tamam,   Graphviz WebAssembly'ye derlenebilir ve birkaç yetenekli kişi dreampuf'unki gibi birkaç güzel proje oluşturmayı başardı.  nikeee'ninki  ve Magjac'ın  - 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. teknik olarak   editör   edator.net   editör  Örneğin, grafiğimi depolamak istiyorum  Grafiği otomatik olarak oluşturan bir bağlantıyı yapıştırmanız yeterlidir.   Notion.so  kullanabilirim  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.  . Ayrıca işaretlemeyi kullanarak Notion/GitHub'a grafikler de yerleştirebiliyorum, tatlım!   DenizkızıJS   GitHub'da 64k+ başlıyor  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  Bu,   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!   Terrastruct.com elle oluşturulmuş  Sorun    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. Programlı olarak  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  bunun için 🎉   uygulama  …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ı  bu konuyu derinlemesine inceliyoruz. DagreJS düzen algoritmalarından ve bilgilendirici "   ¹" makalesinden önemli ölçüde ilham alarak Rust'ta bir varyant geliştirdim.   Blog yazısı A Technique for Drawing Directed Graphs  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 (  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.   d3-graphviz  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.   Vizdom  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   görselleştirmeler üretiyor ve daha fazlasını destekliyor  yani subjektif olarak karşılaştırıyorum  Graphviz'in DOT motoruna karşı, kapsamı yalnızca DAG'lara indiriliyor ve hatta DOT dilinin dar özelliklerinin bir listesine   kapsamlandırılıyor. harika   düzen motorları   Vizdom kadar  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  ~400 düğüm ile:   oldukça büyük bir grafik  Yerel Graphviz: ~30 saniye  Chrome (WASM) Graphviz: çöküyor*  Chrome (Javascript) DagreJS: ~10 saniye     Krom (WASM)   Vizdom :  ~1 saniye**  *   emscripten bayrağı     , dolayısıyla toplam bellek 16 MB ile sınırlanıyor.  ALLOW_MEMORY_GROWTH=1 ayarlanmadığı için çökü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  şu anda barındırılıyor) ve diğer yük dengeleyiciler.   Vizdom  Ş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  gidin ve   yükleyin Editör Görünümüne Example 42  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.  iki farklı grafik arasındaki değişiklikleri görsel olarak görmek için.   fark görüntüleyici  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ü  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  şu ana kadar başardı, potansiyeli beni daha da heyecanlandırıyor. İşte bu noktada siz, yani okuyucu ve potansiyel kullanıcı devreye giriyor.   Vizdom   Vizdom  Herhangi bir geri bildiriminiz varsa, lütfen bana mesaj göndermekten çekinmeyin.  veya  .   Gitter   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.    da yayınlandı Burada

This post provides insights into new product. 

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

Render DAGs with Vizdom

Read My Stories

Bu ses hikayenin orijinal dilinde üretilmiştir!

İşte DAG'ler için Graphviz'i Neden Kullanmamalısınız: Bunun Yerine Ne Kullanmalısınız?

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Kullanıcı Odaklı Kripto Ürünleri Oluşturma: Müşteri Geri Bildiriminin Önemi

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps