Diagram D2

Berikut adalah contoh siap pakai untuk diagram perangkat lunak umum yang dibuat dengan D2 di VPasCode. Anda dapat menyalin potongan kode ini langsung ke Editor Langsung VPasCode untuk menghasilkan diagram visual yang bersih secara instan.

Catatan: Anda dapat mengatur arah tata letak menggunakan arah: kanan atau arah: bawah di bagian atas blok kode D2 Anda.

1. Diagram Arsitektur Sistem

Arsitektur web awan multi-lapisan yang menampilkan server dan komponen penyimpanan bersarang.

D2


Edit D2 di VPasCode
D2 Edit D2 in VPasCode 
arah: kanan

Pengguna: {
  bentuk: orang
}

Aplikasi Web: {
  CDN: {
    bentuk: awan
  }
  
  Pemecah Beban
  
  Server Aplikasi: {
    Server 1
    Server 2
  }
  
  Tingkat Data: {
    Basis Data PostgreSQL: {
      bentuk: silinder
    }
    Cache Redis: {
      bentuk: silinder
    }
  }
}

Pengguna -> Aplikasi Web.CDN: Permintaan Halaman
Aplikasi Web.CDN -> Aplikasi Web.Pemecah Beban: Rute Lalu Lintas
Aplikasi Web.Pemecah Beban -> Aplikasi Web.Server Aplikasi.Server 1
Aplikasi Web.Pemecah Beban -> Aplikasi Web.Server Aplikasi.Server 2

Aplikasi Web.Server Aplikasi.Server 1 -> Aplikasi Web.Tingkat Data.Cache Redis: Periksa Cache
Aplikasi Web.Server Aplikasi.Server 1 -> Aplikasi Web.Tingkat Data.Basis Data PostgreSQL: Permintaan Data
Edit D2 in VPasCode



Edit D2 di VPasCode

D2 multi-tier cloud web system architecture featuring CDN, Load Balancer, App Servers, PostgreSQL, and Redis - Text to diagram editor - VPasCode

 

2. Skema Basis Data (Diagram Tabel SQL)

D2 memiliki dukungan bawaan untuk menampilkan tabel SQL dan hubungan entitas secara bersih menggunakan sql_table bentuk.

D2


Edit D2 di VPasCode
D2 Edit D2 in VPasCode 
pengguna: {
  bentuk: sql_table
  id: int {kendala: primary_key}
  username: varchar
  email: varchar
  created_at: timestamp
}

pesanan: {
  bentuk: sql_table
  id: int {kendala: primary_key}
  user_id: int {kendala: foreign_key}
  total_amount: decimal
  status: varchar
}

item_pesanan: {
  bentuk: sql_table
  id: int {kendala: primary_key}
  order_id: int {kendala: foreign_key}
  product_name: varchar
  quantity: int
}

pengguna.id -> pesanan.user_id: 1-ke-Banyak
pesanan.id -> item_pesanan.order_id: 1-ke-Banyak
Edit D2 in VPasCode



Edit D2 di VPasCode

D2 SQL table ERD diagram showing 1-to-Many entity relationships between users, orders, and order_items - Text to diagram editor - VPasCode

 

3. Pipeline Penyebaran Otomatis (CI/CD)

Rancang langkah-langkah penyebaran perangkat lunak dari pemeriksaan kode hingga rilis produksi langsung.

D2


Edit D2 di VPasCode
D2 Edit D2 in VPasCode 
arah: kanan

Pengembang -> GitHub: 1. Unggah Kode

GitHub Pipelines: {
  Langkah Bangun -> Langkah Uji -> Gambar Docker
}

GitHub -> GitHub Pipelines: 2. Aktifkan Aksi
GitHub Pipelines.Gambar Docker -> Registry Docker: 3. Simpan Bangunan

Registry Docker -> Server Produksi: 4. Deploy Container
Edit D2 in VPasCode



Edit D2 di VPasCode

D2 CI/CD automated deployment workflow diagram mapping code push from GitHub to Docker Registry and Production Server - Text to diagram editor - VPasCode

 

Scroll to Top