HN’de yayımlandı: Mermaid sınıf diyagramı düzenleme için GUI

Mermaid sınıf diyagramlarını düzenlemek için GUI

• Mermaid grafiklerinin avantajları: Karmaşık diyagramları hızlıca ifade etmeyi sağlayan Mermaid grafikleri, son güncellemeyle birlikte sınıf diyagramı düzenlemeyi daha sezgisel ve kolay hale getirdi. Yeni özellikler görsel editörü genişleterek sınıf diyagramlarıyla doğrudan etkileşimi destekliyor ve kullanıcılara diyagram deneyimini geliştirecek çeşitli araçlar sunuyor.

Sınıf diyagramı nedir?

• Sınıf diyagramı tanımı: UML'nin (Birleşik Modelleme Dili) bir türü olarak, sistemin yapısını modelleyip sınıfları, özellikleri, metotları ve nesneler arasındaki ilişkileri gösterir. Nesne yönelimli tasarımda vazgeçilmez bir araçtır ve sistemin farklı bölümlerinin nasıl etkileştiğini görselleştirmeye yardımcı olur.
• Temel öğeler:
  • Sınıf: Bir nesneyi veya kavramı temsil eder.
  • Özellik: Sınıfın niteliği ya da özelliği.
  • Metot: Sınıfın gerçekleştirebildiği iş ya da işlem.
  • İlişki: Sınıflar arasındaki bağlantı veya etkileşimi gösterir.

Yeni görsel editör araçları

• Araçlara giriş: Görsel editör araç çubuğu, sınıf diyagramları için çeşitli yeni araçlar sunuyor.
  • Diyagram oluşturma yönünü değiştirme: Diyagramın yerleşimini ayarlar.
  • Yeni sınıf ekleme: Diyagrama kolayca yeni bir sınıf ekler.
  • Başlık ve not ekleme: Diyagrama başlık ekler veya belirli bir sınıfa bağlı olmayan notlar yerleştirir.
  • Boş namespace ekleme: Belirli bir namespace'e ait sınıflar için yer tutucu tanımlar.
  • Diyagram yapılandırmasını güncelleme: boş üye kutuları gibi seçenekleri açıp kapatarak temiz bir görünüm sağlar.
  • Tema ve yerleşim değiştirme: Farklı temalar seçip diyagramın görünümünü ayarlar.

Yeni sınıflar ve ilişkiler oluşturma

• Sınıf ve ilişki oluşturma yöntemleri:
  • Var olan bir ilişkiden yeni sınıf oluşturma: Diyagramdaki mevcut bir sınıfa tıklayıp boş alana sürükleyerek yeni bir sınıf oluşturabilir ve bunu özgün sınıfla doğrudan ilişkilendirebilirsiniz.
  • Mevcut sınıflar arasında ilişki oluşturma: Bir sınıftan diğerine ilişki çizgisini sürükleyerek hızlıca ilişki kurabilirsiniz.

Sınıf ayrıntılarını düzenleme

• Sınıf özelliklerini değiştirme: Görsel editör, kod yazmadan sınıf özelliklerini düzenlemeye imkan veren güçlü bir etkileşimli arayüz sunuyor. Sınıfın her bir özelliği ayrıntılı biçimde yapılandırılabiliyor.
  • Özellikler: Görünürlük belirleyicisini tanımlama, veri tipini ayarlama, özellik adını belirleme.
  • Metotlar: Metot görünürlüğünü ayarlama, dönüş tipini tanımlama, metot adını ve parametrelerini belirleme.

Diyagramı optimize etmek için ek ipuçları

• Farklı yerleşimleri deneyin: Yerleşim ve tema seçeneklerini kullanarak diyagram için en uygun görünümü bulun.
• Notlarla bağlam ekleyin: Not özelliğini kullanarak diyagramın bazı bölümlerini açıklayın ve karmaşık ilişkileri netleştirin.

Başlarken

• Mermaid görsel editör araçlarından yararlanın: Yeni özellikleri keşfederek sınıf diyagramlarını daha verimli ve erişilebilir hale getirin. İster sıfırdan yeni bir diyagram oluşturun ister mevcut bir diyagramı iyileştirin, bu güncellemeler zamandan ve emekten tasarruf etmenizi sağlayarak sistemin tasarımı ve yapısına odaklanmanıza yardımcı olur.

[GN⁺]

Hacker News yorumları

• Mermaid için frontend olarak genelde Claude kullanıyorum. Karmaşık fikirleri açıklamam gerektiğinde Claude’un hızlıca oluşturduğu diyagramlar anlatımı çok daha kolay hale getiriyor
  Mermaid ücretli hesabım da var ama zaten en çok Claude’u kullandığım için hâlâ ilk giriş noktam Claude oluyor. GUI’den beklentim, bu şekilde oluşturulan hızlı diyagramlara stil ve renk eklemek ve otomatik yerleşimin yaptığından daha iyi ok yönleri elde etmek için kutuları biraz oynatabilmek
  Blog yazısına bakınca tek tek kutuların renk ve stilini değiştirme özelliği olmayabilir gibi görünüyor; oysa bunu kodla elle yapmak en çok zaman alan kısım, bu yüzden zengin araçlar olsa iyi olur

  • İlginç, ama takıldığı noktalar olmadı mı diye merak ediyorum. Geçen hafta Claude’a oyuncak bir dilbilgisinin sözdizim diyagramını yaptırdım ve escape edilmemiş özel karakterler yüzünden Mermaid kaynağında sözdizimi hatası oluştu
    Claude’un kendi Mermaid widget’ı olmasına rağmen kendi kod hatasını düzelttiremedim

• Mermaid ürün ekibinden Dominic burada. Şu anda ürünle ilgili sorunlar, iyileştirme talepleri veya konuşmak istediğiniz başka konular varsa [e-mail] adresine e-posta gönderebilir ya da takvimden zaman ayırabilirsiniz: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

  • Mermaid diyagramlarının web tarayıcısı dışında render edilmesi konusunun ne zaman geleceğini merak ediyorum: https://github.com/mermaid-js/mermaid/issues/2485
    KeenWrite(https://keenwrite.com/) adında bir Markdown düzenleyici geliştiriyorum ve üçlü backtick sözdizimiyle diyagram gömebilmeyi ekledim. diagram- önekini parse edip graphviz gibi kelimeleri Kroki’ye(https://kroki.io/) gönderiyorum; Kroki de Mermaid dahil çeşitli ASCII diyagramlarını render ediyor
    Markdown’da kaynak kod parçaları aslında üçlü backtick’ten sonra dil tanımlayıcısı eklenerek sabit genişlikli yazı tipiyle gösterilir; GitHub’ın Mermaid diyagramları için fiili bir standart oluştururken bu geleneği bozmuş olması talihsiz bir karar
  • Tarayıcısız render sorusuna katılıyorum. Şimdiye kadar Selenium ayarlarını headless build için uyarlamaya çalışırken başarısız oldum ve metinler de yanlış render edildi
    Geniş çapta benimsenmek isteyen bir araç için tarayıcısız render PoC’nin ötesine geçen temel bir özellik olarak en üst öncelik olmalı diye düşünüyorum
  • Diyagram bileşenlerinin birbiriyle çakışmamasını sağlayan yerleşim kontrolü daha iyi olsa harika olurdu. Kolay bir istek değil ama yanlış yerleştirilen bileşenlerle oldukça sık karşılaşıyorum ve bu çözülürse Mermaid’in büyük bir avantajı olabilir

• Bunu yakın zamanda denedim ve ilk başta hoşuma gitti. ChatGPT de Mermaid diyagramlarını oldukça iyi üretti ama kendi yapay zeka özelliğini denemedim
  Ancak orta düzey karmaşıklıkta bir diyagram oluşturduktan sonra Whiteboard özelliğiyle düzeni elle sürükleyerek iyileştirmeye çalışınca ciddi şekilde hayal kırıklığı yaşadım. Öğeleri istediğim konuma getirmek zor oldu, sürükleme de iyi çalışmadı ve çakışmaları çözmek de zordu. Bazı diyagram türlerinin Whiteboard desteklememesi de üzücüydü
  mermaidchart.com ile mermaid.live arasındaki işlev farkı da kafa karıştırıcı. Rakip ürünler mi yoksa benzer bir uygulamanın varyasyonları mı bilmiyorum; “Playground” ve “Live Editor” adları da kafa karıştırıyor. Yine de var olmaları sevindirici ve gelişmeye devam etmelerini umuyorum

  • Mermaid CEO’su benim. Whiteboard hâlâ erken aşamada, bu yüzden önümüzdeki birkaç ay içinde epey gelişecek
    mermaidchart.com ile mermaid.live aynı ekip tarafından yürütülüyor. Mermaid.live, 10 yıllık açık kaynak projesinin orijinal editörü ve tamamen açık kaynak, barındırılan editördür
    Mermaid’in kurucusu kısa süre önce GitLab CEO’sunun venture studio’suyla birlikte mermaidchart.com’u kurdu ve daha fazla kullanıcı ile kurumsal özellikler için ölçeklendiriyor. Şirket open core modelinde ve venture yatırımı aldı, ancak Mermaid projesi açık kaynak kalmaya devam edecek ve yatırım sürdürülmeye devam edecek
  • İstediğiniz şekilde değil de Mermaid’in “istediği” şekilde yerleşmesi, belki de Mermaid’in temel sorunu olabilir. Eskiden beri büyük boş alanlar oluşuyor ve istenen yerleşimi elde etmek zor oluyordu

• Otomatik yerleşim algoritmasına sahip diyagram araçları çoğunlukla yalnızca hata ayıklama amaçlı görselleştirmeleri programatik olarak üretirken kullanılıyor. Amaç dokümantasyonsa OmniGraffle ile elle çizmeyi tercih ediyorum
  graphviz gibi araçlarla grafiği güzel göstermek çok karmaşık oluyor ve sonuçta istenen şekli elde etmek için özellikleri dolaylı yollarla suistimal etmeye başlıyorsunuz
  Bence gerçekten ihtiyaç duyulan şey, okunabilirliği ve estetiği hesaba katabilen makine öğrenimi tabanlı grafik yerleşim algoritmaları. Şimdiye kadar bulduklarım büyük grafikleri gösterme tarafına odaklanmıştı, yani başka bir alana daha yakındı
  Mermaid, arayüzde oluşan tüm düzenleme noktalarını topluyorsa oldukça iyi bir veri kümesi olabilir

  • Böyle bir yerleşim motoru geliştirip satıyoruz; burada deneyebilirsiniz: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
    Daha büyük bir örnek burada: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
    Rakip bir başlık altında kendi tanıtımımı yapmayı sevmem ama Mermaid kendi yerleşim motorunu geliştirme yönünde bizimle rekabet etmiyor, bu yüzden bu bağlamda ilgili olduğunu düşünüyorum
  • Bu alanı incelerken bulduğum bazı ilginç bağlantılar. Graphviz'e benzer genel amaçlı bir grafik çizim kütüphanesi olup daha fazla seçenek ve kontrol sunan ELK: https://eclipse.dev/elk/
    ELK'yi geliştiren Kiel University ekibinin deneyi: https://github.com/kieler/KLighD
    Kieler proje vikisi: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
    Kısıt tabanlı grafik çizim kütüphanesi: https://www.adaptagrams.org/, JS uygulaması: https://ialab.it.monash.edu/webcola/
    Ayrıca HOLA makalesi https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, Confluent Graphs demosu https://www.aviz.fr/~bbach/confluentgraphs/, ortogonal yerleşim makalesi https://arxiv.org/pdf/1408.4626.pdf, power graph sıkıştırma makalesi https://arxiv.org/pdf/1311.6996v1.pdf da bakmaya değer
  • Ben Mermaid ürün ekibinden Dominic. Whiteboard'u, kullanıcıların istedikleri tam yerleşimi elde etmelerine yardımcı olmak için çıkardık ama hâlâ erken aşamada ve yoğun şekilde geliştiriyoruz
    Otomatik yerleşim algoritmalarının Mermaid'e hız kazandıran büyük bir çekicilik olduğunu anlıyorum, ancak mevcut yerleşim bazen biraz karmaşık biçimde dolaşabiliyor
    Makine öğrenimi modeli fikri ilginç geliyor; ayrıca okunması kolay ve göze hoş gelen diyagramların temel gereksinimlerinin ne olduğunu merak ediyorum. Örneğin köşelerin dik açılı mı yoksa yuvarlatılmış mı olması gerektiği gibi ölçütler olabilir. Düşüncelerinizi paylaşmak isterseniz [e-mail] adresine e-posta atmanızı rica ediyor
  • Diyagramları kod olarak yazma sözdizimi ile işleme kısıtlarını tanımlayan bir sözdizimini birleştiren bir araç geliştiriyorum. Örneğin bir bölümün başka bir bölümün solunda olması gerekmesi ya da bir okun başka bir okla kesişmemesi gibi
    Bunun tutarlı diyagram işleme ve son piksel seviyesindeki rötuşları çok daha kolay hâle getirmesini umuyorum. Şu anda Cassowary kullanan işleyicinin çok erken bir alfa sürümü çalışıyor ve iyi bir GUI üzerinde çalışıyorum

• “Create your account” kısmını görünce ilgim hemen kayboluyor. Hesap oluşturmadan önce editörü deneyebilmek ve beğenene kadar tarayıcının yerel depolamasına kaydedebilmek iyi olurdu

• Mermaid'in giderek daha iyi hâle gelmesi hoşuma gidiyor. Sekans diyagramları için https://sequencediagram.org/ bence en iyisi. Bununla bağlantım yok, sadece memnun bir kullanıcıyım

  • Bunu geçmişte işbirlikçi diyagram oturumlarında kullandım; kolay ve sade olması hoşuma gitmişti. Yine de Mermaid'in asıl gücü taşınabilirlik. Markdown belgelerine gömülebilmesi ve farklı editörler ile platformlarda görüntülenebilmesi önemli
  • Mermaid Chart ürün ekibi açısından bakınca Mermaid'in sekans diyagramı özelliğinin de oldukça güçlü olduğunu düşünüyorum. https://sequencediagram.org/'un Mermaid sekans diyagramlarından hangi açılarda daha iyi olduğunu merak ediyorum
  • Başka editörler de kullandım ama sonunda hep sequencediagram.org'ye geri döndüm. Sadece iyi çalışıyor ve daha az uğraştırıyor
  • MermaidChart'ın sekans diyagramı editörünün sequencediagram.org'dan daha iyi olduğunu düşünüyorum
  • sequencediagram.org muhtemelen PlantUML kullanıyor, dolayısıyla aynı işi web sitesi olmadan yerelde de yapabilirsiniz

• Felsefenin farklı olduğunu anlıyorum ama bir gün Mermaid'i LaTeX içinde kullanabilsek harika olurdu. En azından Mermaid'i TikZ'e güvenilir şekilde dönüştüren bir araç olsa, slayt hazırlamak çok daha kolaylaşırdı
  PNG/JPG olarak dışa aktarmak da mümkün ama genelde özelleştirme imkanlarının çoğu kayboluyor ve sayfaya uydurmak için boyutu büyütüp küçültmekten fazlasını yapamıyorsunuz
  Dün buna bakarken bu yazıda tanıtılan yeni GUI'yi de gördüm ve sonunda PNG olarak dışa aktarıp Beamer sayfa düzenine uydurmaya çalışırken epey uğraştım

• Draw.io'nun Mermaid diyagramlarını gömme özelliği var ve VSCode ile çeşitli IDE eklentileri de mevcut; bunun neden özel olduğunu merak ediyorum

  • Draw.io'nun Mermaid entegrasyonu ve VSCode/IDE eklentileri güzel ama esas olarak diyagramların programatik olarak düzenlenmesini destekliyor
    Mermaid Chart'ı farklı kılan şey çift yönlü düzenleme. Kodu değiştirerek diyagramı değiştirebilirsiniz ve diyagramı doğrudan değiştirirseniz bu değişiklikler otomatik olarak koda yansır
    Şu anda bu çift yönlü düzenleme sınıf diyagramları ve akış şemalarında mümkün; ileride diğer popüler diyagram türlerine de genişletilmesi planlanıyor
  • Rekabet inovasyon için iyidir ve seçenekler herkes için iyidir. Bunun ille de özel olması mı gerekiyor?

• “Theme Customization in Toolbar” görseli render edilmiyor

• Projenin kendisi harika ama felsefi açıdan bazı soru işaretlerim var
  Mermaid, diyagramların Markdown'u olmayı hedefliyor; yani düz metin olarak düzenlenebilmesi ve tüketilebilmesi en kritik şey. Görsel bir düzenleyici kullanmak gerekecekse, neden daha güçlü bir araç kullanıp bu kısıtlı formatın dışına çıkmıyoruz, anlayamıyorum
  Bu, WYSIWYG Markdown editörlerine benziyor. Elbette bunun bir niş kitlesi vardır ama o zaman neden doğrudan Google Docs ya da MS Word kullanılmasın?