Mengumumkan Dukungan Diagram D2 di VPasCode: Editor D2 Gratis Utama dan Alat D2 Online

Kami sangat senang mengumumkan pembaruan besar untuk VPasCode: dukungan penuh untuk D2 bahasa diagram-as-code! Dengan pembaruan ini, arsitek, pengembang, dan penulis teknis dapat langsung mengubah skrip teks D2 deklaratif menjadi diagram visual yang bersih dan profesional tanpa hambatan.

Apakah Anda sedang memetakan arsitektur awan yang kompleks, topologi mikroservis, atau alur kerja organisasi, VPasCode berfungsi sebagai editor D2 gratis yang Anda andalkan dan alat D2 online yang kaya fitur.editor D2 gratis dan alat D2 online yang kaya fituralat D2 online. Rasakan visualisasi yang mulus dan real-time langsung di dalam browser Anda.

Untuk mempelajari lebih lanjut tentang kemampuan dan pembaruan platform kami, kunjungi halaman resmi Halaman VPasCode.

Cara Kerja Integrasi D2 di VPasCode

Menggunakan D2 di VPasCode cepat, intuitif, dan dirancang untuk memaksimalkan produktivitas Anda. Ruang kerja memiliki tata letak samping-samping yang nyaman:

• Panel Kiri (Editor Kode):Cukup tempel, ketik, atau edit skrip D2 Anda. Deteksi format otomatis VPasCode langsung mengenali kode Anda tanpa perlu beralih bahasa secara manual.
• Panel Kanan (Visualizer Langsung): Amati diagram Anda dirender secara dinamis secara real-time saat Anda mengetik atau mengubah blok kode.

Video di bawah ini menunjukkan cara membuat diagram D2 di editor diagram-as-code Visual Paradigm VPasCode.

Siap mencobanya sendiri? Langsung mulai dengan Editor VPasCode.

Fitur Utama yang Disertakan dengan Dukungan D2

Selain tampilan langsung, integrasi D2 baru kami dilengkapi berbagai pilihan kolaborasi dan output yang fleksibel agar sesuai dengan alur kerja Anda:

1. Pilihan Ekspor yang Fleksibel: Unduh diagram selesai Anda secara instan sebagai grafik vektor SVG yang dapat diskalakan atau gambar PNG beresolusi tinggi untuk laporan, presentasi, dan dokumentasi.

   

2. Integrasi Papan Klip:Salin gambar diagram yang telah dirender ke papan klip Anda dengan satu klik untuk menempelkan langsung ke Slack, email, atau prosesor kata.
3. Berbagi URL Instan:Bagikan karya Anda dengan mudah kepada rekan kerja atau klien melalui tautan langsung. Yang terbaik dari semua, tidak diperlukan login bagi penonton untuk memeriksa diagram yang Anda bagikan.

Demonstrasi: Membangun Diagram Jaringan Dasar di D2

Untuk melihat betapa mudahnya memodelkan sistem menggunakan ini editor D2 gratis, pertimbangkan contoh berikut tentang arsitektur jaringan multi-tier dasar.

Kode Sumber D2

arah: kanan
client -> load_balancer: HTTPS
load_balancer -> app1: HTTP
load_balancer -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
client.shape: orang
load_balancer.shape: persegi panjang
app1.shape: segienam
app2.shape: segienam
redis.shape: silinder
postgres.shape: silinder
redis.style.fill: "#fee2e2"
postgres.style.fill: "#dcfce7"

Bagaimana Ini Dirender di Alat D2 Online Kami

Ketika Anda menempelkan skrip di atas ke VPasCode, mesin akan memproses hubungan, arah, dan gaya bentuk khusus secara otomatis:

• Yang clientdiberi gaya sebagai ikon orang yang jelas, memulai permintaan HTTPS ke sebuah load_balancer.
• Lalu lintas terbagi dengan jelas di antara dua node aplikasi segienam (app1 dan app2).
• Kedua node aplikasi mengakses lapisan penyimpanan sementara backend secara aman (redis, diberi gaya dengan warna merah lembut) dan penyimpanan data relasional (postgres, diberi gaya dengan warna hijau lembut).

Contoh Diagram D2 Lainnya

Bentuk Dasar

server -> client: HTTP
server -> db: query
client: {
  shape: person
  style.fill: "#cfe2ff"
}
db: {
  shape: cylinder
  style.fill: "#d1e7dd"
}
server.style.fill: "#fff3cd"

Kontainer

network: {
  web: {
    shape: hexagon
    style.fill: "#e7f1ff"
  }
  api: {
    shape: rectangle
    style.fill: "#fff3cd"
  }
  db.primary: {
    shape: cylinder
    style.fill: "#d1e7dd"
  }
  db.cache: {
    shape: cylinder
    style.fill: "#f8d7da"
  }
  web -> api: REST
  api -> db.primary: SQL
  api -> db.cache: lookup
}

Dengan Gaya

vars: {
  d2-config: {
    sketch: true
    layout-engine: elk
  }
}
aws: {
  vpc: {
    web: {
      shape: rectangle
      style: {
        fill: "#fef3c7"
        stroke: "#d97706"
        stroke-width: 2
        font: mono
      }
    }
    api: {
      shape: rectangle
      style.fill: "#dbeafe"
    }
    db: {
      shape: cylinder
      style.fill: "#dcfce7"
    }
  }
}
user -> aws.vpc.web: HTTPS {
  style.animated: true
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.db: SQL {
  style.stroke-dash: 5
}

Urutan

shape: sequence_diagram
user -> api: GET /users
api -> db: SELECT *
db -> api: rows
api -> user: 200 OK
user -> api: POST /users
api -> db: INSERT
db -> api: row
api -> user: 201 Created

Catatan: Anda mungkin ingin membuat Diagram Urutan dengan PlantUML. Cek cara melakukannya di:

Panduan Lengkap untuk Diagram Urutan PlantUML: Sintaks, Contoh, dan Praktik Terbaik

Apa itu VPasCode?

Jika Anda baru mengenal platform kami, Visual Paradigm VPasCode adalah solusi diagram sebagai kode yang terpadu, berbasis browser, yang dibuat untuk tim teknis modern. Ini menghilangkan kesulitan penggunaan alat gambar manual dengan menyeret dan menjatuhkan dengan memungkinkan Anda mendefinisikan arsitektur dan model data sepenuhnya melalui kode.

Selain D2, VPasCode mendukung berbagai format diagram populer dan bahasa terstruktur, termasuk PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, dan bahasa pemrograman utama seperti Java, Python, Rust, dan TypeScript. Pengeditan kode inti, pratinjau langsung, dan ekspor gambar sepenuhnya gratis.

Mulai Menciptakan Hari Ini

Tingkatkan dokumentasi teknis dan pemodelan arsitektur Anda hari ini. Rasakan kecepatan dan kemudahan fitur D2 baru kami dengan langsung meluncurkan aplikasi sekarang di Editor VPasCode.