D2: Bahasa Skrip Diagram

 (d2lang.com)
3 poin oleh GN⁺ 2025-10-27 | 1 komentar | Bagikan ke WhatsApp
  • D2 adalah bahasa skrip berbasis teks untuk membuat diagram, yang menyediakan cara menghasilkan materi visual secara otomatis melalui kode
  • Pengguna cukup mendefinisikan node dan relasi dengan sintaks sederhana, lalu mesin tata letak otomatis akan menempatkannya secara visual
  • Setiap cuplikan kode di dalam dokumen dapat langsung dijalankan dan diedit di Playground, sehingga hasilnya bisa segera dilihat
  • Namun, ada pengecualian bahwa beberapa contoh yang menggunakan import tidak dapat langsung dijalankan di Playground
  • Ini bermakna bagi pengembang sebagai alat untuk meningkatkan otomatisasi dokumentasi visual dan efisiensi kolaborasi

Gambaran Umum D2

  • D2 adalah bahasa skrip deklaratif untuk menulis diagram sebagai kode, yang menyediakan kemampuan mendefinisikan struktur kompleks dalam bentuk teks lalu memvisualisasikannya secara otomatis
    • Pengguna dapat menuliskan node, edge, grup, dan lainnya dengan sintaks sederhana
    • Hasilnya akan dirapikan secara otomatis, dan berbagai gaya dapat diterapkan
  • Bahasa ini menguntungkan untuk kontrol versi dan kolaborasi, serta mudah diintegrasikan ke code review atau pipeline otomatisasi dokumentasi

Fitur Playground

  • Setiap cuplikan kode dalam dokumentasi D2 menyediakan fitur interaktif untuk langsung dibuka, diedit, dan dijalankan di Playground
    • Pengguna dapat mengarahkan mouse ke atas cuplikan untuk mengaktifkan tautan Playground
    • Dengan ini, diagram dapat disesuaikan secara real-time dan hasilnya dapat diperiksa secara visual
  • Namun, cuplikan yang menggunakan pernyataan import memiliki keterbatasan karena memerlukan sumber daya eksternal, sehingga tidak bisa langsung dijalankan di Playground

Makna Penggunaan

  • D2 mendukung otomatisasi dokumentasi visual, sehingga rancangan sistem atau alur data dapat dikelola bersama kode
  • Dengan pengembang dan desainer mendefinisikan diagram dalam bahasa yang sama, efisiensi kolaborasi meningkat
  • Di ekosistem open source, D2 dinilai sebagai alat yang mendorong standardisasi penulisan diagram berbasis kode

Bacaan terkait

1 komentar

 
GN⁺ 2025-10-27
Komentar Hacker News

  • Sebagai salah satu kreator D2, ia sedang memikirkan ide untuk memperluas fitur animasi
    Diskusi terkait sudah diposting di GitHub Discussion dan ia ingin mendengar pendapat orang lain

    • Belakangan ini ia menggunakan LLM untuk memvisualisasikan keputusan arsitektur dengan cepat
      Ia biasanya memakai mermaid, tetapi penasaran apakah D2 bisa menawarkan antarmuka yang lebih fleksibel
      Ia juga ingin tahu apakah ada rencana untuk fitur pemanggilan tool yang terhubung dengan LLM atau antarmuka ramah pengguna seperti MCP
    • Menurutnya D2 adalah alat yang benar-benar keren. Terutama sangat berguna saat mengotomatisasi layout jaringan AWS
      Ia menyukai bahwa saat merender banyak objek, tidak perlu berjuang melawan engine
      Namun, dokumentasi sdk/d2lib kurang memadai sehingga pada awalnya ia sempat mengalami trial and error
    • Ia sudah memakai D2 sejak beberapa bulan lalu dan terkejut karena alat ini mudah dipelajari
      Tetapi ia tidak merasa animasi yang mencolok benar-benar diperlukan. Saat perlu penekanan, sekadar mengganti warna terasa lebih intuitif
    • Ia penasaran apa tujuan animasi. Jika saat presentasi elemen bertambah setiap kali diklik dan koneksi disorot dengan mulus, itu akan bagus
      Namun jika seluruh diagram bergoyang hanya karena perubahan teks, itu justru bisa mengganggu
      Ia juga berharap ada dukungan resmi untuk diagram Swimlane
    • Sambil berkata “Level 4 - dramatic mode ;)”, ia membagikan contoh SVG dramatis

  • Ia sedang mencoba membungkus tool seperti D2 atau Penrose dengan Python untuk membuat scripting diagram berbasis data
    Namun kebanyakan tool deklaratif tidak mendukung alur kerja “declare, then tweak”, sehingga terasa merepotkan
    Penrose mudah disunting, tetapi hasilnya punya sisi acak dan sulit diprediksi

    • Penyesuaian layout kustom di D2 hanya tersedia pada engine proprietari
      Hal ini tidak bisa dilakukan di engine open source, tetapi sebagian penyesuaian dimungkinkan melalui fitur Freehand

  • Ia penasaran seberapa dekat sintaks D2 bisa diimplementasikan dalam bahasa pemrograman umum
    Di Python, DSL yang benar-benar sama sulit dibuat karena keterbatasan operator overloading, tetapi bisa dicoba mendekati itu dengan operator overloading pada string

    • Bahkan di Python, dengan sedikit trik, sintaks seperti a <- b | "edge" bisa ditiru
      Namun ia bercanda bahwa jika benar-benar dipakai, ia akan menghantui orang yang melakukannya
    • Di Scala, operator buatan pengguna dimungkinkan sehingga DSL seperti "x" --> "y" | "hello world" bisa dibuat
      Namun, pemakaian berlebihan tetap tidak disarankan
    • Di Ruby juga dimungkinkan membuat DSL internal sederhana dalam bentuk x >> y << "label"
      Kita juga bisa membangun model objek di kelas Diagram lalu memasang renderer di atasnya

  • Sebagai penulis utama proyek mgmt, ia sering menangani DAG
    Saat menambah atau menghapus node dan edge, ia membutuhkan diagram yang stabil secara visual dan mendukung transisi animasi
    Graphviz terasa merepotkan karena layout berubah-ubah di setiap snapshot

    • Dengan fitur watch di d2, efek serupa bisa dicapai lewat hack skrip sederhana yang mengganti file langkah demi langkah

  • Mode Sketch dan fitur interaktif di D2 sangat berguna
    Berkat tooltip dan link, kegunaan diagram meningkat jauh

  • Ia sudah lama menggunakan D2 dan juga aktif merekomendasikannya di internal
    Namun biaya lisensi enterprise terlalu mahal sehingga ia hanya memakainya untuk keperluan pribadi
    Lisensi TALA seharga 3000 dolar per tahun, bahkan versi pribadi pun 120 dolar, terasa membebani
    Fitur yang memasukkan Helm chart atau penjelasan sistem ke LLM untuk membuat diagram secara otomatis menurutnya revolusioner

    • Secara pribadi, ia merasa kualitas output TALA justru yang paling buruk. Ia kebanyakan memakai engine ELK

  • Dukungan rendering ASCII di D2 baru-baru ini menjadi topik hangat
    Diskusi terkait berlanjut di posting sebelumnya

  • D2 sudah cukup lama ada, tetapi masih terasa kurang dikenal dibanding mermaid
    Secara fungsional ia jauh lebih unggul, jadi semoga lebih banyak orang mengetahuinya

    • Saya juga lebih menyukai D2, tetapi mermaid adalah pilihan praktis karena mendapat dukungan bawaan di banyak platform
    • Saya baru pertama kali mengetahui D2; saya penasaran apa yang membuatnya lebih baik daripada mermaid

  • Di platform AI kami zo.computer, kami mengadopsi D2 sebagai alat pembuat diagram
    D2 lebih ekspresif daripada mermaid sehingga cocok untuk visualisasi berbasis AI

    • Ia bertanya bagaimana cara implementasinya. Apakah mereka membangun server MCP untuk D2 sendiri?
    • Ia menyapa, “Ben, terima kasih sudah membuat LinkedIn/X jadi lebih bisa ditoleransi.”

  • D2 memang hebat, tetapi dibanding PlantUML atau mermaid, masih kurang pembeda yang benar-benar menentukan
    Ia masih menunggu “killer app untuk kode diagram”

    • Jika tool seperti ini bisa dipakai untuk menjelajahi codebase besar secara visual, itu akan menjadi keunggulan besar
    • Kelebihan D2 adalah ia merupakan compiler standalone dan mendukung rendering ASCII
      Ia juga menyukai bahwa tidak perlu instalasi npm
      Namun, mermaid unggul dalam integrasi dengan Obsidian dan layanan lain
    • Ia melontarkan pertanyaan, “Fitur apa yang seharusnya dimiliki killer program itu?”