D2'de (metinden diyagram aracı) artık ASCII render desteği var

• D2 0.7.1 sürümüyle metin diyagramlarını ASCII olarak render etme özelliği eklendi
• Kod yorumlarında basit ASCII diyagramları kullanarak fonksiyon veya sınıf akışını açıklamak mümkün
• Varsayılan olarak Unicode kutu çizim karakterleri kullanılıyor, ancak seçenek bayrağıyla standart ASCII tercih edilebiliyor
• Bu özellik alfa aşamasında ve bazı stilleri, özel karakterleri ve belirli şekilleri henüz desteklemiyor
• D2 Playground ve Vim eklentisi gibi ortamlarda ASCII render'ı doğrudan deneyimlemek mümkün

---

D2 ASCII render'ına giriş

D2'nin en yeni sürümüyle (0.7.1) birlikte metin diyagramları için ASCII çıktı özelliği eklendi.
.txt uzantılı çıktı dosyaları otomatik olarak ASCII renderer ile render ediliyor.
Örnekler D2 Vim eklentisinde görülebiliyor; .d2 dosyasını açıp önizleme penceresi üzerinden her kaydedişte ASCII diyagram çıktısının durumunu gerçek zamanlı olarak görmek mümkün.

Kod dokümantasyonunda kullanım

ASCII diyagramları, kaynak kod yorumlarına eklendiğinde en pratik kullanım alanını sunuyor.

• Küçük bir fonksiyonun veya sınıfın yanına basit bir diyagram eklemek, akışı metinle anlatmaktan daha sezgisel biçimde kodun anlaşılmasına yardımcı olabilir
• Vim eklentisinde D2 kodu yazıp seçili alanı doğrudan ASCII diyagrama dönüştürmek mümkün

Unicode ve standart ASCII arasında seçim

Varsayılan ASCII render, daha iyi görünen bir çıktı sağlamak için Unicode kutu çizim karakterlerini kullanıyor.

• Eğer azami taşınabilirlik isteniyorsa, --ascii-mode=standard seçenek bayrağıyla normal ASCII karakterleriyle de render almak mümkün

Mevcut sınırlamalar

Bu ASCII render özelliği şu anda alfa aşamasında.

• Köşe durumları, iyileştirme alanları ve çeşitli hatalar bulunabilir
• Web sitesi üzerinden hata raporu veya geri bildirim gönderilmesi teşvik ediliyor

Başlıca kısıtlar

• Stil desteği yok
  • Animasyon, font gibi öğeler ASCII'de anlam taşımıyor
  • İleride terminal renkleri gibi bazı sınırlı stil destekleri değerlendirilebilir
  • Temalar da desteklenmiyor
  • double-border, multiple gibi seçenekler gelecekte iyileştirilecekler listesinde yer alıyor
• Düzensiz aralıklar
  • ASCII'ye dönüştürme sürecinde kutuların yerleşimi SVG'ye kıyasla daha düzensiz olabilir
• Render edilemeyen öğeler
  • Markdown, Latex, kod gibi özel metin türleri için destek henüz uygulanmadı
  • Görseller ve ikonlar, UML sınıfları, SQL tabloları gibi öğeler render edilemiyor
  • Bu tür öğelerin kaldırılması veya yer tutucu olarak gösterilmesi konusu ileride belirlenecek
• Bazı şekiller desteklenmiyor
  • Bulut, daire gibi eğrisel şekiller ASCII'de iyi ifade edilemiyor
  • Bu şekiller dikdörtgenle değiştirilip sol üst köşeye küçük bir ikon eklenerek tür ayrımı yapılıyor

Doğrudan deneyin

Bu özellik D2 Playground üzerinden hemen kullanılabiliyor.

• Verilen kod bloğunu açarak ASCII render'ı doğrudan deneyebilirsiniz

[GN⁺]

Hacker News yorumu

• Merhaba geliştiriciler. Bu sabah eklediğim yeni özelliği paylaşmak istiyorum. Henüz alfa aşamasında ve şimdiden bir GitHub issue’su açıldı. Blog yazısını atlayıp doğrudan bakmak isterseniz buradan inceleyebilirsiniz. Biraz daha büyük bir örnek de bu bağlantıda mevcut

  • Playground’da siyah arka plan üzerinde siyah yazıyla render ediliyor, bu yüzden çalışmıyor sandım. Muhtemelen dark mode açık olduğu için. Diğer renderer’lar düzgün çalışıyor ama ASCII görünmüyor
  • TFA’de bunun yalnızca ELK üzerinden downscale edilmesi anlamına mı geldiğini merak ediyorum. Bu özelliği kullanmak için ELK’yi açıkça ayarlamak gerekiyor mu, yoksa .txt olarak çıktı alınca otomatik mi etkinleşiyor? D2 diyagramlarım için zaten çoğunlukla ELK kullanıyorum

• Mermaid ile karşılaştırıldığında hangi açıdan değerli olduğunu merak ediyorum. Tasarımı ve çalışma biçimi hoşuma gidiyor ama Mermaid’den geçmek için pratikte güçlü bir neden var mı, onu sormak istiyorum. Ayrıca bu tür araçlarda, otomatik üretilen çıktılarda kutuların konumunu ve boyutunu x/y değerleriyle elle ayarlama özelliğinin genelde eksik olduğunu düşünüyorum

  • Hangi değeri önemsediğinize bağlı. Sizin bahsettiğiniz iki nokta bazıları için yeterli oluyor; bizim gibi CLI’dan SVG render ederken chromium tarayıcısına ihtiyaç duymamasını önemli bulanlar da var (ilgili örnek). Tüm farkları göstermiyor ama kısa bir karşılaştırma sitesi de var. Ayrıca ücretli ürün reklamı yapmak istemem ama konum ve boyutu sabitleyebilen manuel ayarlama özelliğine ihtiyacınız varsa IDE içinde sunuluyor

• D2 sözdizimi çok çekici olmasına rağmen şimdiye kadar Mermaid’in toolchain’i yüzünden onu daha sık kullanıyordum. Ama bu özellik ciddi anlamda yeni ve Mermaid’de daha önce gördüğüm bir şey değil. asciiflow.com ile de güzel bir köprü kuruyor

• ASCII’den dönüştürme özelliği güzel. Ama diyagramı güncellemek gerektiğinde orijinal D2 kaynağını nasıl elde edeceğimizi merak ediyorum

• D2’yi Mermaid’den hep daha çok sevdim ama bence şu sorun yüzünden grid layout fiilen kullanışsız hale geliyor (ilgili issue). Piksel değerlerini elle hizalamak zorundaysanız bu tür bir aracın amacı ortadan kalkıyor

  • Teşekkürler! Haber verdiğiniz iyi oldu. 0.7.2’ye, yani bir sonraki sürüme eklemeyi planlıyoruz

• Tarayıcı tabanlı text-to-diagram araçlarının bir listesini tutuyor ve bunu birkaç kez paylaşmıştım. Yakın zamanda öğrendiğim şey, D2’nin çevrimiçi sürümünün tamamen tarayıcı içinde çalışmadığı, diyagramı oluşturan bir backend sunucusu kullandığı oldu. D2’nin yalnızca istemci tarafında (tarayıcıda) bağımsız çalışıp çalışamayacağını ve bu yazıda bahsedilen eklentinin çevrimdışı da çalışıp çalışmadığını merak ediyorum

  • Artık mümkün! (bir haftadır) d2 playground’un ağ sekmesine bakarsanız, D2’nin wasm portunu saran bir wrapper olan d2.js ile çalıştığını görebilirsiniz. Henüz resmi olarak duyurulmadı ama yakında ayrı bir duyuru yapılacak
  • ~~Listeyi görebilir miyim diye soracaktım~~ düzenleme: zaten buldum! Teşekkürler

• Resmî bir Python repository hazırlamanızı isterim. Notebook içinde kullanmak istiyorum ama şu anda mecburen databricks kullanmak gerekiyor, bu da rahatsız edici

• Gerçekten çok hoş görünüyor. Daha önce paylaştığınız C4 desteği yazısını da görmüştüm! Yakında C4 modelleme ihtiyacım olacak, o yüzden bakmayı planlıyorum

• Gerçekten harika bir özellik. D2’yi ilk kez duyuyorum ama terminalden doğrudan grafik oluşturabilmek ve bunu güzel şekilde render edebilmek gerçekten çok hoşuma gitti. Yakında deneyeceğim

  • D2 zaten .svg dosyasını gerçek zamanlı güncelleyen canlı bir HTTP sunucusunu da destekliyor. Tarayıcıyı ve vim’i yan yana açarsanız canlı güncellemeleri de görebilirsiniz. D2’yi bir yıl önce keşfettim ve o zamandan beri tüm diyagramlarımda kullanıyorum
  • Normalde ASCII diyagramlar için Moondraw kullanıyorum ama zaten vim ortamındaysanız bu araç çok daha iyi

• vim extension gerçekten inanılmaz iyi bir özellik

  • Ama vimscript ile yazılmış olması biraz tuhaf ve biraz da hayal kırıklığı yaratıyor