Perlu Graphviz? Kenapa tidak bikin sendiri saja?

 (spidermonkey.dev)
3 poin oleh GN⁺ 2025-10-30 | 1 komentar | Bagikan ke WhatsApp
  • Untuk memvisualisasikan proses kompilasi JavaScript·WebAssembly di engine SpiderMonkey, alat internal dirombak total dan ditambahkan kemampuan menghasilkan grafik interaktif
  • iongraph berbasis Graphviz yang lama memiliki tata letak yang tidak stabil dan struktur yang kurang intuitif, sehingga efisiensi debugging rendah; untuk menggantikannya, tim merancang sendiri algoritme tata letak baru
  • Algoritme baru ini menyederhanakan metode Sugiyama untuk menampilkan struktur loop dengan jelas, serta mewujudkan tata letak yang stabil dan cepat dalam kurang dari 1000 baris kode JavaScript
  • Grafik menggunakan edge lurus bergaya diagram rel kereta untuk meningkatkan keterbacaan, dan mencapai kecepatan rendering ribuan kali lebih cepat dibanding Graphviz
  • Alat ini telah terintegrasi ke Firefox Profiler, dan ada rencana pengembangan fitur lanjutan seperti pencarian dan visualisasi register

Perombakan alat visualisasi SpiderMonkey

  • Alat baru dibangun untuk memvisualisasikan graf internal yang dihasilkan oleh kompiler optimasi Ion di SpiderMonkey
    • Pengguna dapat memasukkan kode JavaScript di halaman web dan menjelajahi proses optimasi fungsi dalam bentuk grafik secara real-time
    • Grafik dapat diperiksa perubahan per tahap melalui drag, zoom, dan slider
  • iongraph berbasis Graphviz sebelumnya menghasilkan output PDF, tetapi tidak selaras dengan struktur kode sumber dan ketidakstabilan outputnya sangat serius
    • Perubahan kecil pada kode pun bisa mengubah posisi node secara drastis, sehingga sulit membandingkan antar-pass
    • Struktur loop dan conditional terdistorsi secara visual, sehingga alur kontrol sulit dipahami

Batasan Graphviz dan pendekatan baru

  • Algoritme Sugiyama di Graphviz cocok untuk optimasi graf umum, tetapi tidak mencerminkan karakteristik control-flow graph (CFG)
    • Loop di JavaScript·WebAssembly hanya memiliki satu titik masuk dan memiliki alur kontrol reducible
    Iklan
  • Tim SpiderMonkey memanfaatkan batasan ini untuk merancang algoritme khusus yang disederhanakan
    • Penghapusan siklus: mengabaikan back edge loop
    • Pelapisan (Leveling): menempatkan blok setelah loop lebih ke bawah agar mencerminkan alur kode
    • Melewati minimisasi crossing: memprioritaskan stabilitas dengan mempertahankan urutan cabang true/false
    • Mempertahankan struktur pohon loop: menampilkan loop bertingkat dengan jelas secara visual
  • Hasilnya, tercapai tata letak yang ringkas, cepat, dan stabil, dengan implementasi awal sekitar 1000 baris JavaScript

Tahapan algoritme tata letak iongraph

  • Tahap 1: Layering
    • Mengurutkan blok per lapisan sambil mencerminkan hubungan internal dan eksternal loop
    • Setelah loop berakhir, blok ditempatkan ke bawah sebesar tinggi keseluruhan loop
  • Tahap 2: Pembuatan dummy node
    • Menambahkan dummy node pada edge yang melintasi beberapa lapisan untuk mencegah benturan visual
    • Edge yang menuju tujuan yang sama digabungkan untuk mengurangi noise visual
  • Tahap 3: Perapian edge (Straighten)
    • Menyelaraskan node parent dan child agar bentuk garis vertikal tetap terjaga, sambil menerapkan indentasi loop
    • Dummy node juga ikut dalam proses perapian untuk mencegah tumpang tindih dan menjaga struktur
  • Tahap 4: Pelacakan edge horizontal
    • Edge horizontal diatur dalam unit track agar tidak saling tumpang tindih
    • Dipisahkan ke atas dan bawah sesuai arah edge, dan edge yang bisa digabungkan disatukan
    Iklan
  • Tahap 5: Penempatan vertikal (Verticalize)
    • Memberikan koordinat Y pada tiap lapisan untuk tinggi yang seragam dan keterbacaan yang lebih baik
  • Tahap 6: Rendering (Render)
    • Menggunakan edge lurus bergaya diagram rel kereta
    • Edge hanya berpotongan secara vertikal dan horizontal, sehingga arah dan strukturnya jelas

Efek dari algoritme yang sederhana

  • Alih-alih optimasi yang rumit, penempatan berbasis aturan yang dapat diprediksi menghasilkan keterbacaan dan stabilitas
    • Urutan node dipertahankan tetap, edge disederhanakan, sehingga konsistensi antar-pass terjaga
  • Dengan menyingkirkan constraint solver, struktur yang lebih mudah dipahami manusia dapat diwujudkan
    • Tata letak di dalam loop atau penempatan blok lanjutan ke bawah memungkinkan desain yang berpusat pada makna
    Iklan
  • Peningkatan performa: graf fungsi zlib yang di Graphviz memerlukan 10 menit, kini dapat dirender dalam 20 milidetik
    • Memberikan kecepatan ribuan kali lebih tinggi dan kemampuan eksplorasi yang lebih baik

Rencana ke depan

  • iongraph telah selesai diintegrasikan ke Firefox Profiler, sehingga grafik dapat diperiksa saat analisis performa
    • Saat ini hanya dapat digunakan di build shell SpiderMonkey, belum termasuk dalam build browser
  • Usulan fitur ke depan
    • Fitur navigasi lanjutan, pencarian, visualisasi alokasi register, dan lain-lain
    • Belum ada roadmap yang jelas, dan kontribusi open source sangat disambut
  • Untuk eksperimen lokal, setelah membuat /tmp/ion.json dengan pengaturan IONFLAGS=logs,
    file tersebut dapat dimuat di rilis mandiri
  • Kode sumber tersedia di GitHub,
    dan pengembang dapat dihubungi langsung melalui ruang obrolan Matrix

Bacaan terkait

1 komentar

 
GN⁺ 2025-10-30
Komentar Hacker News

  • Jika ingin membandingkan secara akurat, yang dibandingkan bukan keseluruhan Graphviz melainkan dot(1)
    Graphviz adalah framework visualisasi yang mencakup beberapa layout engine (dot, neato, fdp, sfdp, circo, twopi, dll.)
    Akan sangat keren jika algoritma yang baru diusulkan ini bisa dikontribusikan ke Graphviz

    • Sedikit membingungkan. dot adalah nama bahasa sintaks Graphviz sekaligus nama layout engine
      Untuk dokumen terkait, lihat penjelasan bahasa Graphviz dan dokumentasi layout engine dot
    • Saya tidak yakin seberapa dapat digeneralisasi algoritma iongraph
      Mungkin ini bekerja baik untuk control flow graph (CFG) dengan reducible control flow, tetapi sepertinya akan ada banyak pengecualian yang rumit
    • iongraph berlisensi MPL, Graphviz berlisensi EPL
      Selain itu iongraph berbasis JavaScript, jadi untuk mengintegrasikannya ke Graphviz perlu dikonversi ke C dengan alat seperti Claude

  • Kemampuan untuk melihat langsung implementasi asli dari suatu algoritma terasa seperti superpower sungguhan
    Sebagai orang yang pernah membuat visualisasi kompleks dengan Graphviz, awalnya saya terkejut ada yang mengimplementasikannya ulang sendiri
    Tetapi setelah melihat struktur algoritmanya, saya sadar ini mungkin lebih sederhana dari dugaan
    Meski begitu, tetap sulit mengetahui kompleksitas tersembunyi sebelum implementasinya benar-benar selesai

  • Jika algoritma umum dikhususkan ke domain masalah tertentu, hasilnya bisa jauh lebih baik
    Tetapi dalam kebanyakan kasus, demi kemudahan kita tetap memakai algoritma serbaguna apa adanya

    • Saya juga pernah menulis makalah tentang topik ini
      Merancang sistem yang disesuaikan untuk aplikasi tertentu memberi peningkatan besar dalam kinerja, skalabilitas, dan toleransi kesalahan
      Tetapi saat mengejar peningkatan 1000x, 1–2 tahun bisa lewat begitu saja
    • Saya setuju dengan ini, tetapi di domain tertentu 'algoritma sederhana' justru bisa bekerja lebih baik
      Sistem layout graf umum harus menangani jauh lebih banyak kasus, sehingga mau tak mau menjadi kompleks
      Karena itu, menurut saya kompromi yang baik adalah menganalisis input, memakai algoritma cepat untuk kasus khusus, dan untuk sisanya memakai algoritma umum yang terjamin

  • Tulisannya bagus. Sebagai catatan, dot di Graphviz bukan implementasi murni dari algoritma Sugiyama
    Implementasi nyatanya dijelaskan lebih detail dalam makalah di situsnya
    Jika melihat gambar perbandingan dot dan iongraph pada graf besar, dot dioptimalkan untuk meminimalkan area, sedangkan iongraph tidak
    Visualisasi graf besar memang terlihat keren, tetapi dalam praktiknya jarang benar-benar membantu

    • Visualisasi graf besar terasa seperti 'ide jebakan aspal' — menarik di awal, tetapi hampir selalu gagal dalam praktik
      Visualisasi hanya efektif sampai beberapa puluh node; setelah itu jadi sulit dipahami karena kompleksitas edge
      Pada akhirnya ini hanya bekerja baik untuk contoh sederhana, dan di lingkungan kompleks malah mengganggu
    • Saya juga merasa tidak banyak yang didapat dari graf besar
      Sebagian besar masalah bisa diperkecil ke unit-unit kecil
      Meski begitu, bahkan pada graf kecil Graphviz kurang enak dipandang, sementara iongraph jauh lebih mudah dibaca dari sisi garisnya
      Dalam jangka panjang saya rasa diperlukan elemen interaktif seperti pencarian, sorot/sembunyikan
    • Saya juga berpikir begitu. Lihat tulisan terkait On Layers and Boxes and Lines
      Yang membuat frustrasi adalah batasan bahwa diagram tidak bisa mengirim atau menerima tautan
      Mermaid memang mendukung tautan teks, tetapi tautan pada diagram tetap terbatas
      Diskusi terkait di StackOverflow juga layak dilihat
      Diperlukan alat yang mempertimbangkan fitur semacam ini sebagai kemampuan kelas satu sejak tahap desain
    • Graf dependensi di CMake juga memakai Graphviz, tetapi untuk diagram besar mutlak perlu fitur navigasi zoom sebagian

  • Kekuatan sejati Graphviz adalah bahasa dot
    Graf yang didefinisikan dengan dot punya kompatibilitas antartool yang sangat baik, dan sintaksnya sederhana serta mudah dibaca
    Alternatif seperti Mermaid memang sudah muncul, tetapi dot tampaknya akan tetap lama bertahan sebagai format standar

    • Ini mengingatkan saya pada lelucon, “Status quo adalah yang terbaik! Karena ya itu status quo.”

  • Tulisannya benar-benar keren
    Saya penasaran apakah teknik-teknik seperti ini juga dipakai di layout engine TALA milik D2
    Lihat contoh TALA

  • Jika tertarik pada graph drawing, saya merekomendasikan kuliah Will Evans (tautan)
    Dulu saya pernah berkontribusi memperbaiki bug pada Dot lexer milik Open Graph Drawing Framework (OGDF),
    dan OGDF mengimplementasikan algoritma yang lebih cepat dan menghasilkan lebih sedikit persilangan dibanding Graphviz
    Menurut pengalaman saya, hasil OGDF jauh lebih rapi
    Untuk riwayat PR terkait, lihat tautan GitHub

  • Menarik. Saya penasaran bagaimana cara menjalankan contohnya

  • Hal bagus dari proyek ini adalah dukungannya untuk eksplorasi interaktif dengan asumsi lingkungan klien web
    Karena layout-nya dikhususkan untuk control flow graph (CFG), ini memungkinkan visualisasi yang disesuaikan dengan domain
    Graphviz juga punya fitur polyline dan kontrol urutan edge, tetapi dokumentasinya kurang
    Akan bagus jika algoritma edge routing dari Brandes dan Kopf bisa diintegrasikan
    Graphviz adalah proyek yang sudah berjalan hampir 40 tahun, dan saat ini dipelihara oleh beberapa relawan generasi kedua
    Membuat tool selalu merupakan pasar yang sulit, dan para penggunanya cerdas tetapi biasanya berada di departemen dengan anggaran kecil
    Disayangkan bahwa perkembangan tool diagram 2D deklaratif berjalan lambat

  • Siapa pun yang bekerja di bidang seperti ini selalu layak mendapat dukungan +1
    Saya juga pernah memakai mermaid dan graphviz, tetapi akhirnya kembali ke FigJam — keterbacaan dan kualitas estetikanya tinggi
    graphviz adalah biner yang sangat besar, sementara mermaid bergantung pada rendering SVG di browser, jadi terasa merepotkan
    Yang dibutuhkan hanyalah alat untuk membuat diagram dengan mudah lewat teks

    • Masalah alat-alat seperti ini adalah ketika jumlah node bertambah, ada batas keterbacaan yang cepat tercapai
      Pendekatan yang diajukan penulis menurut saya merupakan upaya yang baik untuk mengendalikan trade-off ini
    • Saya pernah memakai dokumentasi proyek yang dibuat otomatis dengan mermaid dan hasilnya cukup baik
      Saya puas kecuali pada fakta bahwa loop tidak ditangani
      Output SVG/HTML memudahkan penyesuaian gaya dan penyalinan
    • D2 juga layak dilihat. Lihat postingan yang baru-baru ini muncul di halaman depan HN
    • Saya sempat melihat seberapa besar kode graphviz, ternyata lebih dari 250 ribu baris
      Jika ingin tool diagram berbasis teks, saya merekomendasikan TikZ
      Lihat wiki TikZ
      Hanya saja, ia tidak punya umpan balik visual instan seperti FigJam
    • Saya berhasil merender dengan menggabungkan resvg-js(tautan) dan dagre/graphlib(tautan)
      Saya kurang suka terlalu banyak dependensi dan kurangnya konsistensi kode di mermaid
      Sebagai gantinya ada nomnoml(tautan) yang kodenya rapi, serta graphre yang diport ke Typescript(tautan)
      Untuk memakai mermaid bersama resvg-js, diperlukan refaktorisasi terkait pengukuran lebar teks SVG