D2 (alat diagram dari teks) kini mendukung rendering ASCII

 (d2lang.com)
4 poin oleh GN⁺ 2025-08-20 | 1 komentar | Bagikan ke WhatsApp
  • Pada D2 versi 0.7.1, ditambahkan fitur untuk merender diagram teks ke ASCII
  • Dengan diagram ASCII sederhana di komentar kode, alur fungsi atau kelas bisa dijelaskan
  • Secara default menggunakan karakter Unicode, tetapi dapat memilih ASCII standar melalui flag opsi
  • Fitur ini masih dalam tahap alfa, sehingga sebagian style, karakter khusus, dan bentuk tertentu belum didukung
  • Rendering ASCII dapat dicoba langsung di D2 Playground dan ekstensi Vim

Pengenalan rendering ASCII di D2

Mulai dari rilis terbaru D2 (versi 0.7.1), ditambahkan fitur output ASCII untuk diagram teks.
File output dengan ekstensi .txt akan otomatis dirender menggunakan renderer ASCII.
Contohnya bisa dilihat di ekstensi Vim D2, dan saat membuka file .d2 serta menyimpannya melalui jendela pratinjau, hasil diagram ASCII dapat dipantau secara real-time.

Pemanfaatan dalam dokumentasi kode

Diagram ASCII paling praktis saat disisipkan ke dalam komentar source code

  • Jika menambahkan diagram sederhana di samping fungsi atau kelas kecil, pemahaman kode dapat terbantu secara lebih intuitif dibanding penjelasan alur biasa
  • Di ekstensi Vim, Anda dapat menulis kode D2 lalu langsung mengubah area yang dipilih menjadi diagram ASCII

Memilih Unicode atau ASCII standar

Rendering ASCII bawaan menggunakan karakter box-drawing Unicode untuk memberikan output yang lebih enak dilihat

  • Jika menginginkan portabilitas maksimum, Anda juga bisa merender dengan karakter ASCII biasa melalui flag opsi --ascii-mode=standard

Keterbatasan saat ini

Fitur rendering ASCII ini masih dalam tahap alfa

  • Bisa ada banyak corner case, area yang perlu ditingkatkan, dan bug
  • Pengguna didorong untuk mengirim laporan bug atau masukan melalui situs web

Batasan utama

  • Style belum didukung
    • Animasi, font, dan sejenisnya tidak bermakna dalam ASCII
    • Ke depannya akan dipertimbangkan dukungan untuk sebagian style terbatas seperti warna terminal
    • Tema juga belum didukung
    • double-border, multiple, dan sebagainya masuk dalam daftar peningkatan untuk masa depan
  • Jarak yang tidak seragam
    • Dalam proses konversi ke ASCII, penempatan kotak bisa menjadi lebih tidak teratur dibanding SVG
  • Objek yang tidak dapat dirender
    • Dukungan untuk teks khusus seperti Markdown, Latex, dan kode belum diimplementasikan
    • Gambar dan ikon, kelas UML, tabel SQL, dan sebagainya tidak dapat dirender
    • Untuk item-item ini, nantinya akan diputuskan apakah akan dihapus atau ditampilkan sebagai placeholder
  • Sebagian bentuk belum didukung
    • Bentuk melengkung seperti cloud dan lingkaran sulit direpresentasikan dengan baik dalam ASCII
    • Bentuk tersebut akan diganti dengan persegi panjang, lalu dibedakan tipenya lewat ikon kecil di kiri atas

Coba langsung

Fitur ini bisa langsung digunakan di D2 Playground

  • Anda dapat membuka blok kode yang disediakan dan mencoba sendiri rendering ASCII

Bacaan terkait

1 komentar

 
GN⁺ 2025-08-20
Komentar Hacker News

  • Halo para developer. Saya ingin membagikan fitur baru yang saya tambahkan pagi ini. Ini masih tahap alpha, dan sudah ada satu issue di GitHub yang masuk. Kalau ingin melewati tulisan blog dan langsung mencobanya, bisa lihat di sini. Contoh yang lebih besar juga bisa dilihat di tautan ini

    • Di playground, hasilnya dirender sebagai teks hitam di atas latar hitam, jadi saya kira tidak berfungsi. Mungkin karena saya mengaktifkan dark mode. Renderer lain tampil baik, tetapi ASCII tidak terlihat
    • Di TFA, saya penasaran apakah maksudnya ini hanya di-downscale dari ELK. Untuk memakai fitur ini, apakah ELK harus diatur secara eksplisit, atau akan aktif otomatis jika output-nya .txt? Saya sudah memakai ELK untuk diagram d2 saya

  • Dibandingkan mermaid, saya penasaran apa nilai tambahnya. Saya suka desain dan cara kerjanya, tetapi ingin tahu apakah ada alasan praktis untuk pindah dari mermaid. Selain itu, saya merasa alat seperti ini umumnya kurang punya kemampuan untuk menyesuaikan posisi dan ukuran box secara manual dengan nilai x/y pada hasil yang dihasilkan otomatis

    • Itu tergantung nilai apa yang Anda anggap penting. Bagi sebagian orang, dua hal yang Anda sebutkan tadi sudah cukup. Bagi orang seperti kami, hal pentingnya adalah saat merender SVG dari CLI, tidak perlu browser Chromium (contoh terkait). Ini tidak menunjukkan seluruh perbedaannya, tetapi ada juga situs perbandingan singkat. Dan, tanpa bermaksud mengiklankan produk berbayar, jika Anda butuh penyesuaian manual untuk mengunci posisi dan ukuran, itu tersedia di IDE

  • Meski sintaks D2 sangat menarik, selama ini saya lebih sering memakai Mermaid karena tooling-nya. Namun, fitur ini terasa benar-benar baru dalam skala besar, dan belum pernah saya lihat di Mermaid. Ini juga membangun keterkaitan yang bagus dengan asciiflow.com

  • Fitur konversi dari ASCII ini bagus. Namun, saat perlu memperbarui diagram, saya penasaran bagaimana cara mendapatkan source D2 aslinya

  • Saya selalu lebih suka D2 daripada mermaid, tetapi menurut saya grid layout jadi praktis tidak berguna karena issue berikut ini (issue terkait). Kalau harus menyesuaikan satuan piksel secara manual, rasanya tujuan alat seperti ini jadi hilang

    • Terima kasih! Senang Anda memberi tahu. Ini dijadwalkan masuk ke 0.7.2 (rilis berikutnya)

  • Saya pernah mengelola dan membagikan beberapa kali daftar alat browser-based text-to-diagram. Hal yang baru saya ketahui belakangan adalah bahwa versi online D2 tidak sepenuhnya berjalan murni di browser, melainkan server backend yang menghasilkan diagram. Saya penasaran apakah D2 bisa berjalan sepenuhnya hanya di klien (browser), dan apakah fitur ekstensi yang disebutkan di tulisan ini juga bekerja secara offline

    • Sekarang sudah bisa! (sejak seminggu lalu) Kalau Anda melihat tab network di playground d2, Anda akan melihat bahwa ini berjalan lewat d2.js, wrapper untuk port wasm dari D2. Belum dirilis secara resmi, tetapi pengumuman pemisahannya akan segera datang
    • ~~Saya sempat ingin melihat daftarnya~~ Edit: saya sudah menemukannya! Terima kasih

  • Saya berharap ada repository Python resmi. Saya ingin memakainya di notebook, tetapi saat ini rasanya dipaksa harus memakai databricks, jadi kurang nyaman

  • Tampilannya sangat keren. Saya juga melihat tulisan tentang dukungan C4 yang pernah Anda unggah sebelumnya! Saya akan segera memeriksanya karena akan butuh pemodelan C4

  • Fitur yang benar-benar keren. Saya baru pertama kali mendengar D2, tetapi saya sangat suka bahwa diagram bisa dibuat langsung di terminal dan juga dirender dengan indah. Saya akan segera mencobanya

    • D2 juga sudah mendukung fitur live update .svg lewat server HTTP real-time. Kalau browser dan vim dibuka berdampingan, Anda bisa melihat pembaruan secara langsung. Saya menemukan D2 setahun lalu dan sejak itu memakainya untuk semua diagram saya
    • Biasanya saya memakai Moondraw untuk diagram ASCII, tetapi kalau Anda sudah berada di lingkungan vim, alat ini jauh lebih baik

  • extension vim-nya benar-benar luar biasa

    • Tetapi agak aneh dan sedikit disayangkan karena ditulis dengan vimscript