Nomnoml: Metin sözdizimiyle çizilen UML diyagramları

 (nomnoml.com)
2 puan yazan GN⁺ 2023-10-03 | 1 yorum | WhatsApp'ta paylaş
  • UML diyagramlarını kod yazar gibi oluşturmanızı sağlayan bir araç; soldaki metin sözdizimini düzenlediğinizde render edilen diyagram da birlikte değişir
  • Sınıf, bileşen, akış şeması, kullanım senaryosu, veritabanı·tablo gibi çeşitli diyagram öğelerini ve ilişki çizgisi gösterimlerini destekler
  • Düzenleme içeriği tarayıcının localStorage alanına kaydedilir ve bir sonraki ziyarette kalmış olabilir; ancak kaydın garanti edildiği söylenemez
  • Kanvas, sağdaki 1/3’lük alanda sürükleme ve kaydırma ile taşınabilir ve yakınlaştırılıp/uzaklaştırılabilir; düzenleyici Sublime Text tuş eşlemelerinin bir kısmını destekler
  • # direktifleri ve . stil direktifleriyle yazı tipi, yön, aralık, renk, çizgi biçimi ve özel sınıflandırıcı stilleri ayarlanabilir

Metin sözdizimiyle oluşturulan diyagramlar

  • Nomnoml, metin tabanlı sözdizimiyle diyagram yazıp render eden bir araçtır

  • İlişki çizgisi gösterimleri

    • association, dependency, generalization, implementation, composition, aggregation, ball and socket, note, hidden gibi gösterimler kullanılabilir
    • Örnek: [Car]->[Engine]
    • Örnek: [Car] +-> 0..* [RustPatch]
    • Örnek: [Car]o->[Manufacturer]
    • Örnek: [Car]<:-[Pickup]

  • Desteklenen sınıflandırıcılar

    • Sınıf diyagramlarında temel sınıfın yanı sıra abstract, instance, reference, package, frame desteklenir
    • Bileşen diyagramlarında socket, lollipop gösterimleri kullanılabilir
    • Akış şeması öğeleri arasında start, end, state, choice, sync, input, sender, receiver, transceiver bulunur
    • Kullanım senaryosu diyagramları actor, usecase destekler
    • Diğer öğeler olarak note, label, hidden, database, pipe, table kullanılabilir
      • Tablo örneği şu biçimdedir: [<table>Fruits| Apples | 17 || Oranges | 4711]

Düzenleme, direktifler ve stiller

  • Satır başındaki // yorum olarak işlenir
    • [not //commented] gibi satır ortasındaki // yorum değildir
  • id özelliği kullanılırsa görünen adı aynı olan iki düğüm birbirinden farklı düğümler yapılabilir
    • Örnek: [<actor id=a>User], [<actor id=b>User], [a] -- [b]

  • # direktifleriyle yerleşim ve render ayarları

    • #import: filename
    • #direction: down | right
    • #edges: hard | rounded
    • #background: transparent
    • #font, #fontSize, #spacing, #padding, #stroke, #fill, #zoom
    • #ranker: network-simplex | tight-tree | longest-path

  • . direktifleriyle sınıflandırıcı stili tanımlama

    • Örnek: #.box: fill=#8f8 dashed
    • Örnek: #.blob: visual=ellipse title=bold
    • fill, stroke, align, direction, visual gibi anahtar/değerler kullanılabilir
    • title=left,italic,bold, body=center,italic,bold gibi başlık ve gövde metni stilleri belirtilebilir
    • Kullanım örnekleri yazı tipi değiştirme, sıkı yerleşim, tablo oluşturma, özel stil ve birden çok dosyaya bölmeyi içerir
    • Birden çok dosyaya bölme için #import: blobby_styles biçimi kullanılır
    • Düzenleme ekranındaki değişiklikler tarayıcının localStorage alanına kaydedilir; kanvas, sağdaki 1/3’lük alanda sürükleme ve kaydırma ile taşınabilir ve yakınlaştırılıp/uzaklaştırılabilir
    • Düzenleyici Sublime Text tuş eşlemelerinin bir kısmını destekler ve Nomnoml GitHub üzerinde barındırılır

İlgili okumalar

1 yorum

 
GN⁺ 2023-10-03
Hacker News yorumları

  • GitHub bağlantısı: https://github.com/skanaar/nomnoml

  • İlk başta epey kafam karıştı; ancak about düğmesini bulunca anladım.
    UML’i bir bakışta tanıyamıyor olmam belki de şanslı bir hayat sürdüğüm anlamına geliyordur. Başta sahte korsan konuşması sözdizimi gibi bir şeyi açıklıyor sandım.

    • UML’i tanımanın yolu, kimsenin hatırlamadığı bir sürü ok stili içermesidir. UML’in yaygın biçimde yerleşememesinin ana nedeninin de bu olduğundan %90 kadar eminim.
      Bazen bir UML diyagramını okumak için 10 çeşit oku ezberleyen kimse olmadığını kabul eden bu tür yaklaşımların çok daha iyi olduğunu düşünüyorum: https://buck2.build/docs/concepts/concept_map/
    • Bu, tam anlamıyla standart UML gibi görünmüyor.
      Ama “UML” adını kullanan araçların önemli bir kısmı da böyle; pratikte çoğu zaman teorik UML’den daha az kesin ve daha az laf kalabalığı içeren bir şeye ihtiyaç oluyor.

  • Eskiden “metinden diyagrama” dönüştüren araçları karşılaştıran açık kaynaklı bir site vardı: https://text-to-diagram.com/
    nomnoml listede yok.

    • O site D2 bakımcıları tarafından yapıldığı için yanlı olabilir; yine de D2 sözdiziminin, nomnoml dâhil bu kategorideki araçlar arasında en anlaşılır olanı olduğunu düşünüyorum.
      [1]: https://d2lang.com/

  • Nomnoml’u seviyorum. Son zamanlarda üzerinde çalıştığım tarayıcı tabanlı kişisel bilgi yönetimi (PKM) projesinde hiyerarşik etiket yapısını görselleştirmek için kullanıyorum.
    Yerleşim genelde oldukça temiz çıkıyor. Örnek: https://imgbox.com/9A1mDyNv

  • Mobil tarafın elden geçirilmesi gerekiyor gibi. Telefonda açtığımda diyagram editörün üzerine çizildiği için editörü kullanamadım.

    • Bu yalnızca nomnoml demo web sitesinin davranışı. Metni düzenlediğinizde render edilen UML diyagramının gerçek zamanlı değiştiğini göstermek için böyle kurgulanmış.
      Alttaki JavaScript kütüphanesi doğrudan HTML canvas’a veya bir Node.js programından SVG’ye render edebiliyor; isterseniz komut satırından da çalıştırılabiliyor.

  • Eskiden nomnoml ile birkaç araç yapmıştım; bunların içinde GPU assembly kodunun kontrol akışı grafikleri ve bağımlılık grafikleri de vardı.
    Gerçekten çok hoşuma gitmişti, ama belirli öğelerin birbirine yakın yerleştirilmesini güvenilir biçimde zorlamanın bir yolu olmaması üzücüydü. Çok büyük diyagramlarda bazen kötü seçimler yapıp ortalığı dağınık hale getiriyor.
    Dokümantasyon eksiksiz olmasa da kodu değiştirmek oldukça kolaydı; fareyle üzerine gelince tooltip gösterecek ve belirli bir kutuya tıklanınca başka bir diyagrama bağlanacak şekilde hackleyebilmiştim. Böyle iyi bir aracın açık kaynak olmasına minnettarım.

  • İyi bir yerleşim elde etmek tanım sırasına fazlasıyla bağlı. Büyük diyagramlarda kullanıcının çözmesi zorlaşabilir, ama küçük diyagramlarda fena görünmüyor.
    Örneğin aynı korsan örneğini farklı sırada yazınca geçerli olsa da kötü görünen bir yerleşim çıkıyor.

    • Bu tür araçların sorunu şu: dokümanda bir şekilde iyi bir yerleşim elde etseniz bile, bir şey eklediğiniz, sildiğiniz ya da değiştirdiğiniz anda tekrar uğraşmanız gerekiyor.
      Diyagramlar dâhil teknik dokümanların proje kaynak kodunun bir parçası olduğu bir dünya hayal ettiğim için bu kod tabanlı diyagram ürünlerinden birkaçını denedim; ama özellikle dış dağıtım için, hatta iç kullanım için bile kabul edilebilir yerleşim elde etmek zordu.
      Bu hayal kırıklığı genelde iki kötü sonuca yol açıyor: diyagram ya okunamaz hale geliyor ya da bakım görmez oluyor.
      Açıkçası check-in sırasında dokümanların code review’dan geçirilmesi fikri de neredeyse bir efsane. Bu tür dokümanların diff’lerini anlamak çok zor; render edip çıktıya bakmadan dokümanın doğru olup olmadığını anlamlı biçimde doğrulamak neredeyse imkânsız.
      Gerçekten iyi çalışmasını istediğim türden bir problem; belki bir gün çözülmüş bir problem haline gelir.
    • Düzeltme: Yukarıdan aşağı yerleştirildiğini sanmıştım ama öyle değilmiş; sıralamayı başka bir şekilde belirliyor.
      Orijinal Pirate tablosu ile üst yorumdaki Pirate tablosu karşılaştırılınca üst-alt ters dönüyor. beard ve parrot’u istenen gösterim sırasına göre önce tanımlasanız bile yine ters çıkıyor.
    • Sonuç diyagramda çakışmaları en aza indirecek şekilde cümle permütasyonunu optimize eden başka bir araca ihtiyaç var.
    • Bu korsan örneği anlamaya pek yardımcı olmuyor. Bu karmakarışık kelimeleri anlamlı olacak şekilde düzenlemenin bir yolu var mı merak ediyorum.

  • Güzel görünüyor ve PlantUML sınıf diyagramlarından çok daha iyi duruyor.
    [0]: https://plantuml.com/class-diagram

    • Olabilir. Ama bir başka parçalanmış standart yaratmak yerine, zaten epey desteklenen bir standardın varsayılan stilini daha güzel hale getiremez miyiz diye düşünüyorum.
    • PlantUML, en sık kullandığım diyagramlardan biri olan sequence diagram’ı destekliyor. Ne yazık ki nomnoml desteklemiyor.

  • graphviz’i akla getiriyor