Peluncuran di HN: GUI untuk mengedit diagram kelas Mermaid

GUI untuk mengedit diagram kelas Mermaid

• Keunggulan chart Mermaid: Chart Mermaid yang memungkinkan representasi diagram kompleks dengan cepat kini menjadi lebih intuitif dan mudah untuk pengeditan diagram kelas berkat pembaruan terbaru. Fitur baru ini memperluas editor visual untuk mendukung interaksi langsung dengan diagram kelas, serta menyediakan berbagai alat yang dapat meningkatkan pengalaman pengguna saat membuat diagram.

Apa itu diagram kelas?

• Definisi diagram kelas: Salah satu jenis UML (Unified Modeling Language) yang memodelkan struktur sistem dengan menampilkan kelas, atribut, metode, dan hubungan antarobjek. Ini adalah alat penting dalam desain berorientasi objek, yang membantu memvisualisasikan bagaimana berbagai bagian sistem saling berinteraksi.
• Elemen dasar:
  • Kelas: Mewakili objek atau konsep.
  • Atribut: Karakteristik atau properti dari suatu kelas.
  • Metode: Tindakan atau operasi yang dapat dilakukan oleh kelas.
  • Relasi: Menunjukkan koneksi atau interaksi antar kelas.

Alat editor visual baru

• Pengenalan alat: Toolbar editor visual memperkenalkan beberapa alat baru untuk diagram kelas.
  • Mengubah arah rendering diagram: Menyesuaikan tata letak diagram.
  • Menambahkan kelas baru: Menambahkan kelas baru ke diagram dengan mudah.
  • Menambahkan judul dan catatan: Menambahkan judul ke diagram atau menyisipkan catatan yang tidak terhubung ke kelas tertentu.
  • Menambahkan namespace kosong: Mendefinisikan placeholder untuk kelas yang termasuk dalam namespace tertentu.
  • Memperbarui konfigurasi diagram: Menjaga tampilan tetap rapi dengan menyalakan atau mematikan opsi seperti visibilitas "kotak anggota kosong".
  • Mengubah tema dan tata letak: Memilih berbagai tema dan menyesuaikan tampilan diagram.

Membuat kelas dan relasi baru

• Cara membuat kelas dan relasi:
  • Membuat kelas baru dari relasi yang sudah ada: Klik kelas yang sudah ada di diagram lalu tarik ke ruang kosong untuk membuat kelas baru dan menetapkan relasi langsung dengan kelas asal.
  • Membuat relasi antar kelas yang sudah ada: Tarik garis relasi dari satu kelas ke kelas lain untuk menyiapkan relasi dengan cepat.

Mengedit detail kelas

• Memodifikasi properti kelas: Editor visual menyediakan antarmuka interaktif yang kuat untuk memodifikasi properti kelas tanpa menulis kode. Setiap properti kelas dapat dikonfigurasi secara rinci.
  • Atribut: Menentukan modifier visibilitas, mengatur tipe data, dan memberi nama atribut.
  • Metode: Mengatur visibilitas metode, menentukan return type, serta menetapkan nama metode dan parameter.

Tips tambahan untuk mengoptimalkan diagram

• Bereksperimen dengan berbagai tata letak: Gunakan opsi tata letak dan tema untuk menemukan tampilan diagram yang paling optimal.
• Menambahkan konteks dengan catatan: Gunakan fitur catatan untuk menjelaskan bagian diagram dan memperjelas relasi yang kompleks.

Mulai

• Memanfaatkan alat editor visual Mermaid: Jelajahi fitur baru untuk membuat diagram kelas menjadi lebih efisien dan mudah diakses. Baik saat membuat diagram baru dari nol maupun menyempurnakan diagram yang sudah ada, pembaruan ini membantu menghemat waktu dan tenaga sehingga Anda dapat fokus pada desain dan struktur sistem.

[GN⁺]

Opini Hacker News

• Untuk frontend Mermaid, biasanya saya memakai Claude. Saat harus menjelaskan ide yang kompleks, diagram yang cepat dibuat Claude membuat penjelasan jauh lebih mudah
  Saya juga punya akun berbayar Mermaid, tetapi karena pada akhirnya paling sering memakai Claude, Claude tetap menjadi titik masuk pertama. Yang saya harapkan dari GUI adalah kemampuan memberi gaya dan warna pada diagram cepat seperti ini, serta sedikit memindahkan kotak agar panahnya lebih baik daripada tata letak otomatis
  Melihat blognya, sepertinya fitur untuk mengubah warna dan styling tiap kotak mungkin saja tidak ada, padahal saat menanganinya secara manual lewat kode, bagian itulah yang paling memakan waktu, jadi akan menyenangkan jika ada alat yang kaya fitur

  • Menarik, tetapi saya penasaran apakah tidak ada hal yang mengganjal. Minggu lalu saya meminta Claude membuat diagram sintaks untuk tata bahasa mainan, lalu sumber Mermaid-nya mengalami galat sintaks karena karakter khusus yang tidak di-escape
    Padahal Claude punya widget Mermaid sendiri, tetapi saya tetap tidak bisa membuatnya memperbaiki galat kodenya sendiri

• Saya Dominic dari tim produk Mermaid. Jika ada masalah produk saat ini, permintaan perbaikan, atau hal yang ingin dibicarakan, silakan kirim email ke [e-mail] atau jadwalkan waktu di kalender: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

  • Saya penasaran kapan diagram Mermaid bisa dirender di luar browser web: https://github.com/mermaid-js/mermaid/issues/2485
    Saya membuat editor Markdown bernama KeenWrite(https://keenwrite.com/), dan membuatnya dapat menyematkan diagram dengan sintaks triple backtick. Editor ini mem-parsing prefiks diagram-, meneruskan kata seperti graphviz ke Kroki(https://kroki.io/), lalu Kroki merender berbagai diagram ASCII termasuk Mermaid
    Dalam Markdown, potongan kode sumber pada dasarnya ditampilkan dengan font monospace dengan menambahkan pengenal bahasa setelah triple backtick, jadi sayang sekali GitHub mematahkan konvensi ini ketika membuat standar de facto untuk diagram Mermaid
  • Saya setuju dengan pertanyaan tentang rendering tanpa browser. Sejauh ini saya gagal mencoba menyesuaikan konfigurasi Selenium untuk build headless, dan teksnya juga dirender dengan keliru
    Untuk alat yang ingin diadopsi luas, menurut saya rendering tanpa browser harus menjadi prioritas utama sebagai kemampuan dasar yang melampaui PoC
  • Akan bagus jika kontrol tata letak yang mencegah komponen diagram saling bertabrakan menjadi lebih baik. Saya tahu ini permintaan yang tidak mudah, tetapi saya cukup sering menemui komponen yang ditempatkan dengan buruk, dan jika ini terselesaikan, itu bisa menjadi keunggulan besar Mermaid

• Saya baru-baru ini mencoba ini dan awalnya menyukainya. ChatGPT juga cukup baik menghasilkan diagram Mermaid, tetapi saya belum mencoba fitur AI bawaannya
  Namun setelah membuat diagram dengan kompleksitas sedang, ketika mencoba memperbaiki layout dengan menyeretnya sendiri lewat fitur Whiteboard, semuanya jadi cukup goyah. Sulit merapikannya ke posisi yang diinginkan atau melakukan drag dengan baik, dan overlap juga sulit diatasi. Sayang juga beberapa jenis diagram tidak mendukung Whiteboard
  Perbedaan fitur antara mermaidchart.com dan mermaid.live juga membingungkan. Saya tidak tahu apakah itu produk pesaing atau variasi dari aplikasi serupa, dan nama “Playground” serta “Live Editor” juga membingungkan. Meski begitu, saya senang produk ini ada dan berharap terus membaik

  • Saya CEO Mermaid. Whiteboard masih tahap awal, jadi akan cukup banyak ditingkatkan dalam beberapa bulan ke depan
    mermaidchart.com dan mermaid.live dijalankan oleh tim yang sama. Mermaid.live adalah editor asli dari proyek open source berusia 10 tahun sekaligus editor hosting yang sepenuhnya open source
    Pencipta Mermaid baru-baru ini membuat mermaidchart.com bersama venture studio milik CEO GitLab, dan kami sedang memperluasnya untuk lebih banyak pengguna serta fitur kelas enterprise. Perusahaannya adalah open core dan telah menerima pendanaan ventura, tetapi proyek Mermaid akan tetap open source dan kami akan terus berinvestasi di dalamnya
  • Mungkin masalah mendasar Mermaid adalah penataannya hanya mengikuti cara yang “diinginkan” Mermaid, bukan cara yang kita inginkan. Sejak dulu sering muncul ruang kosong yang sangat besar, dan sulit membuat layout sesuai keinginan

• Alat diagram dengan algoritme tata letak otomatis biasanya hanya saya pakai saat membuat visualisasi untuk debugging secara terprogram. Kalau untuk dokumentasi, saya lebih suka menggambarnya manual dengan OmniGraffle
  Membuat grafik terlihat bagus dengan alat seperti graphviz itu sangat rumit, dan pada akhirnya kita jadi menyalahgunakan fitur secara akal-akalan demi mendapatkan bentuk yang diinginkan
  Menurut saya yang benar-benar dibutuhkan adalah algoritme tata letak graf berbasis machine learning yang bisa mempertimbangkan keterbacaan dan estetika. Yang saya temukan sejauh ini cenderung berfokus pada penampilan graf berukuran besar, jadi lebih dekat ke bidang lain
  Kalau Mermaid mengumpulkan semua titik edit yang terjadi di UI, itu sepertinya bisa menjadi dataset yang cukup bagus

  • Saya membuat dan menjual layout engine seperti itu, dan bisa dicoba di sini: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
    Contoh yang lebih besar ada di sini: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
    Saya tidak suka promosi diri di tulisan pesaing, tetapi karena ini tidak bersaing dengan arah Mermaid untuk membuat layout engine sendiri, saya rasa ini relevan dalam konteks ini
  • Ini beberapa tautan menarik yang saya temukan saat menelusuri bidang ini. ELK, library penggambaran graf serbaguna yang mirip Graphviz tetapi dengan opsi dan kontrol lebih banyak: https://eclipse.dev/elk/
    Eksperimen dari tim Kiel University yang mengembangkan ELK: https://github.com/kieler/KLighD
    Wiki proyek Kieler: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
    Library penggambaran graf berbasis constraint: https://www.adaptagrams.org/, implementasi JS: https://ialab.it.monash.edu/webcola/
    Selain itu, makalah HOLA https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, demo Confluent Graphs https://www.aviz.fr/~bbach/confluentgraphs/, makalah tata letak ortogonal https://arxiv.org/pdf/1408.4626.pdf, dan makalah kompresi power graph https://arxiv.org/pdf/1311.6996v1.pdf juga layak dilihat
  • Saya Dominic dari tim produk Mermaid. Kami meluncurkan Whiteboard untuk membantu pengguna mendapatkan layout persis seperti yang mereka inginkan, tetapi ini masih tahap awal dan sedang banyak kami tingkatkan
    Saya paham bahwa algoritme tata letak otomatis adalah daya tarik besar Mermaid karena memberi kecepatan, tetapi layout saat ini kadang bisa menjadi agak kusut dan rumit
    Ide model machine learning ini menarik, dan saya penasaran apa syarat dasar sebuah diagram agar mudah dibaca dan enak dilihat. Misalnya, bisa saja ada kriteria seperti apakah sudut garis harus siku-siku atau membulat. Jika bersedia berbagi pemikiran, silakan kirim email ke [e-mail]
  • Saya sedang membuat alat yang menggabungkan sintaks untuk menulis diagram sebagai kode dengan sintaks untuk mendefinisikan constraint rendering. Misalnya, bagian ini harus berada di kiri bagian itu, atau panah ini tidak boleh berpotongan dengan panah itu
    Saya berharap ini bisa sangat mempermudah rendering diagram yang konsisten dan penyempurnaan sampai tingkat piksel terakhir. Saat ini versi alfa yang sangat awal dari renderer yang memakai Cassowary sudah berjalan, dan saya sedang membuat GUI yang bagus

• Minat saya langsung hilang di “Create your account”. Akan lebih baik kalau sebelum membuat akun kita bisa mencoba editornya, lalu menyimpan ke penyimpanan lokal browser sampai merasa cocok

• Saya senang Mermaid terus membaik. Untuk sequence diagram, menurut saya https://sequencediagram.org/ adalah yang terbaik. Saya bukan pihak terkait, hanya pengguna yang puas

  • Saya pernah memakainya dalam sesi diagram kolaboratif, dan suka karena mudah dan sederhana. Namun inti Mermaid adalah portabilitas. Yang penting adalah bisa di-embed dalam dokumen Markdown dan dilihat di berbagai editor serta platform
  • Dari sudut pandang tim produk Mermaid Chart, menurut saya fitur sequence diagram Mermaid juga cukup menonjol. Saya penasaran apa keunggulan https://sequencediagram.org/ dibanding sequence diagram Mermaid
  • Saya sudah mencoba editor lain, tetapi pada akhirnya selalu kembali ke sequencediagram.org. Pokoknya bekerja dengan baik dan minim kerepotan
  • Saya merasa editor sequence diagram MermaidChart lebih baik daripada sequencediagram.org
  • sequencediagram.org tampaknya mungkin memakai PlantUML, jadi pekerjaan yang sama bisa dilakukan secara lokal tanpa situs web

• Saya paham filosofinya berbeda, tetapi saya berharap suatu hari Mermaid bisa dipakai di dalam LaTeX. Setidaknya, kalau ada alat yang bisa mengonversi Mermaid ke TikZ secara stabil, persiapan slide rasanya akan jauh lebih mudah
  Ekspor ke PNG/JPG juga bisa, tetapi biasanya banyak kustomisasi yang hilang, dan yang bisa dilakukan hanya memperbesar atau memperkecil ukuran agar pas dengan halaman
  Kemarin saat melihat-lihat soal ini, saya juga menemukan GUI baru yang diperkenalkan di tulisan ini, dan akhirnya cukup kerepotan mengekspornya sebagai PNG lalu menyesuaikannya dengan tata letak halaman Beamer

• Draw.io bisa menyematkan diagram Mermaid dan ada juga VSCode serta berbagai plugin IDE, jadi saya penasaran apa yang membuat ini istimewa

  • Integrasi Mermaid di Draw.io dan plugin VSCode/IDE memang bagus, tetapi terutama mendukung pengeditan secara pemrograman pada diagram
    Pembeda Mermaid Chart adalah pengeditan dua arah. Anda bisa mengubah diagram dengan memodifikasi kode, dan jika Anda mengubah diagram secara langsung, perubahan itu otomatis tercermin di kode
    Saat ini pengeditan dua arah ini tersedia untuk diagram kelas dan flowchart, dan ke depannya akan diperluas ke jenis diagram populer lainnya
  • Persaingan baik untuk inovasi dan pilihan baik untuk semua orang. Apakah memang harus istimewa?

• Gambar “Theme Customization in Toolbar” tidak dirender

• Proyeknya sendiri keren, tetapi dari sisi filosofi saya agak mempertanyakannya
  Mermaid ingin menjadi Markdown untuk diagram, jadi hal terpentingnya adalah bisa diedit dan dikonsumsi sebagai teks biasa. Jika harus memakai editor visual, saya tidak mengerti mengapa tidak memakai alat yang lebih kuat saja dan keluar dari format yang terbatas
  Ini mirip dengan editor Markdown WYSIWYG. Tentu saja mungkin ada ceruk pasarnya, tetapi kalau begitu bukankah lebih baik memakai Google Docs atau MS Word saja