Nomnoml: Diagram UML yang Digambar dengan Sintaks Teks

• Sebagai alat untuk menulis diagram UML seperti kode, saat sintaks teks di sebelah kiri diubah, diagram yang dirender juga ikut berubah
• Mendukung berbagai elemen diagram dan notasi garis relasi seperti kelas, komponen, flowchart, use case, database·tabel, dan lainnya
• Konten yang diedit disimpan di localStorage browser sehingga bisa tetap ada pada kunjungan berikutnya, tetapi penyimpanan tidak dijamin
• Kanvas dapat digeser·diperbesar/diperkecil dengan drag dan scroll di area 1/3 kanan, dan editor mendukung sebagian key mapping Sublime Text
• Dengan direktif # dan direktif gaya ., Anda dapat menyesuaikan font, arah, jarak, warna, bentuk garis, serta gaya classifier kustom

---

Diagram yang Dibangun dengan Sintaks Teks

• Nomnoml adalah alat untuk membuat dan merender diagram dengan sintaks berbasis teks

• Notasi garis relasi

  • Dapat menggunakan association, dependency, generalization, implementation, composition, aggregation, ball and socket, note, hidden, dan lainnya
  • Contoh: [Car]->[Engine]
  • Contoh: [Car] +-> 0..* [RustPatch]
  • Contoh: [Car]o->[Manufacturer]
  • Contoh: [Car]<:-[Pickup]

• Classifier yang didukung

  • Diagram kelas mendukung abstract, instance, reference, package, frame selain kelas dasar
  • Pada diagram komponen, notasi socket dan lollipop dapat digunakan
  • Elemen flowchart mencakup start, end, state, choice, sync, input, sender, receiver, transceiver
  • Diagram use case mendukung actor dan usecase
  • Elemen lain yang dapat digunakan mencakup note, label, hidden, database, pipe, table
    • Contoh tabel berbentuk [<table>Fruits| Apples | 17 || Oranges | 4711]

Pengeditan, Direktif, dan Gaya

• // di awal baris diperlakukan sebagai komentar
  • // di tengah baris seperti [not //commented] bukan komentar
• Dengan menggunakan atribut id, dua node dengan nama tampilan yang sama dapat dibuat menjadi node yang berbeda
  • Contoh: [<actor id=a>User], [<actor id=b>User], [a] -- [b]

• Menyesuaikan layout dan rendering dengan direktif #

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

• Mendefinisikan gaya classifier dengan direktif .

  • Contoh: #.box: fill=#8f8 dashed
  • Contoh: #.blob: visual=ellipse title=bold
  • Dapat menggunakan key/value seperti fill, stroke, align, direction, visual
  • Gaya teks judul dan isi dapat ditentukan seperti title=left,italic,bold, body=center,italic,bold
  • Contoh penggunaan mencakup perubahan font, layout rapat, pembuatan tabel, gaya kustom, dan pemisahan ke beberapa file
  • Pemisahan ke beberapa file menggunakan bentuk #import: blobby_styles
  • Perubahan pada layar pengeditan disimpan di localStorage browser, dan kanvas dapat digeser·diperbesar/diperkecil dengan drag dan scroll di area 1/3 kanan
  • Editor mendukung sebagian key mapping Sublime Text, dan Nomnoml di-hosting di GitHub

[GN⁺]

Opini Hacker News

• Tautan GitHub: https://github.com/skanaar/nomnoml

• Awalnya cukup membingungkan, dan baru paham setelah menemukan tombol about
  Mungkin saya beruntung karena selama ini tidak langsung mengenali UML. Awalnya saya kira ini menjelaskan semacam sintaks gaya bicara bajak laut palsu

  • Cara mengenali UML adalah banyaknya gaya panah yang tak seorang pun ingat. Saya sekitar 90% yakin itu alasan utama UML tidak pernah benar-benar meluas
    Saya rasa pendekatan seperti ini jauh lebih baik, yang kadang mengakui fakta bahwa tidak ada orang yang menghafal 10 jenis panah untuk membaca diagram UML: https://buck2.build/docs/concepts/concept_map/
  • Sepertinya ini, secara ketat, bukan UML standar
    Namun banyak tool yang memakai istilah “UML” juga begitu, dan dalam praktiknya sering kali yang dibutuhkan adalah sesuatu yang kurang presisi dan tidak terlalu bertele-tele dibanding UML teoretis

• Dulu ada situs open source yang membandingkan tool untuk mengubah “teks menjadi diagram”: https://text-to-diagram.com/
  nomnoml tidak ada dalam daftar

  • Situs itu dibuat oleh maintainer D2, jadi mungkin ada bias, tetapi menurut saya sintaks D2 tetap yang paling ramah di antara kategori ini, termasuk dibanding nomnoml
    [1]: https://d2lang.com/

• Saya suka Nomnoml. Belakangan ini saya memakainya untuk memvisualisasikan struktur tag hierarkis dalam proyek personal knowledge management (PKM) berbasis browser yang sedang saya kerjakan
  Layout-nya cenderung keluar cukup rapi. Contoh: https://imgbox.com/9A1mDyNv

• Bagian mobile tampaknya perlu diperbaiki. Saat saya membukanya di ponsel, diagram digambar di atas editor, sehingga editor tidak bisa digunakan

  • Itu hanya perilaku situs demo nomnoml. Susunannya dimaksudkan untuk menunjukkan bahwa saat teks diedit, diagram UML yang dirender berubah secara real time
    Library JavaScript di bawahnya bisa merender langsung ke HTML canvas atau SVG dari program Node.js, dan jika mau juga bisa dijalankan dari command line

• Dulu saya membuat beberapa tool dengan nomnoml, termasuk graf alur kontrol dan graf dependensi untuk kode assembly GPU
  Saya benar-benar menyukainya, tetapi sayang tidak ada cara yang andal untuk memaksa elemen-elemen tertentu ditempatkan berdekatan. Pada diagram yang sangat besar, kadang ia membuat pilihan buruk sehingga jadi berantakan
  Meski dokumentasinya belum lengkap, kodenya cukup mudah dimodifikasi, sehingga saya bisa mengakalinya agar menampilkan tooltip saat mouse diarahkan dan menautkan ke diagram lain saat kotak tertentu diklik. Bersyukur tool sebagus ini open source

• Mendapatkan layout yang bagus terlalu bergantung pada urutan definisi. Pada diagram besar ini bisa sulit diatasi pengguna, tetapi pada diagram kecil tampaknya tidak masalah
  Misalnya, jika contoh bajak laut yang sama ditulis dalam urutan berbeda, hasilnya tetap valid tetapi layout-nya buruk

  • Masalah dengan tool seperti ini adalah meskipun di dokumen kita entah bagaimana berhasil mendapatkan layout yang bagus, begitu menambah, menghapus, atau mengubah sesuatu, kita harus bergulat lagi
    Saya pernah mencoba beberapa produk diagram berbasis kode seperti ini karena membayangkan dunia tempat dokumentasi teknis, termasuk diagram, menjadi bagian dari source code proyek, tetapi sulit mendapatkan layout yang dapat diterima, bukan hanya untuk distribusi eksternal, melainkan juga untuk penggunaan internal
    Frustrasi itu biasanya berujung pada dua hasil buruk: diagram menjadi tidak terbaca, atau tidak lagi dipelihara
    Sejujurnya, gagasan bahwa dokumentasi akan di-code review saat check-in juga hampir seperti mitos. Diff untuk dokumen semacam ini sangat sulit dipahami, dan hampir mustahil memverifikasi secara bermakna apakah dokumennya benar tanpa merender dan melihat hasilnya
    Ini jenis masalah yang benar-benar saya harap bisa berhasil diselesaikan, dan mungkin suatu hari akan menjadi masalah yang sudah terpecahkan
  • Koreksi: saya kira penempatannya dari atas ke bawah, tetapi ternyata bukan, dan urutannya ditentukan dengan cara lain
    Jika membandingkan tabel Pirate asli dengan tabel Pirate dari komentar induk, atas-bawahnya terbalik. Bahkan jika beard dan parrot didefinisikan lebih dulu sesuai urutan tampilan yang diinginkan, hasilnya tetap terbalik
  • Perlu tool lain yang mengoptimalkan permutasi kalimat agar tumpang tindih pada diagram hasil menjadi seminimal mungkin
  • Contoh bajak laut ini tidak terlalu membantu untuk dipahami. Saya penasaran apakah ada cara menyusun kata-kata acak ini agar masuk akal

• Tampak bagus, dan terlihat jauh lebih baik daripada diagram kelas PlantUML
  [0]: https://plantuml.com/class-diagram

  • Bisa jadi. Namun daripada membuat standar terfragmentasi lainnya, saya bertanya-tanya apakah gaya default dari standar yang sudah cukup didukung bisa dibuat lebih enak dilihat
  • PlantUML mendukung diagram sekuens, salah satu diagram yang paling sering saya pakai. Sayangnya nomnoml tidak mendukungnya

• Mengingatkan saya pada graphviz