Menguasai Visualisasi Arsitektur: Cara Membuat Diagram Konteks Sistem C4 di PlantUML

Mengapa Menggunakan Pendekatan Diagram-sebagai-Kode untuk Model C4?

Alat gambar seret-lepas tradisional sering kali menyebabkan kotak yang tidak sejajar, gaya yang tidak konsisten, dan pembaruan manual yang melelahkan setiap kali arsitektur berkembang. Dengan memanfaatkan alat diagram-sebagai-kodeseperti editor PlantUML gratis, dokumentasi Anda tetap tersinkronisasi dengan kode, terkendali versi, dan rapi. Dengan menggunakan VPasCode, Anda mendapatkan rendering real-time dan deteksi format otomatis yang membuat visualisasi arsitektur perangkat lunak menjadi mudah.

Studi Kasus Masterclass: Arsitektur Toko Online

Untuk mendemonstrasikan cara menyusun diagram konteks sistem yang kuat, mari kita lihat platform Toko Online. Arsitektur ini perlu menangkap pengguna akhir, pengemudi pengiriman eksternal, sistem inti toko, dan layanan pihak ketiga seperti gerbang pembayaran dan penyedia logistik.

Berikut adalah kode sumber PlantUML lengkap yang akan kami uraikan langkah demi langkah:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
skinparam vpDiagramType C4modelSystemContextDiagram

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagram Konteks Sistem untuk Toko Online

Person(customer, "Pelanggan", "Menjelajahi toko, memesan kebutuhan, dan menjadwalkan pengiriman")
Person_Ext(driver, "Pengemudi Pengiriman", "Mengirimkan pesanan kepada pelanggan")

Enterprise_Boundary(grocery_co, "Toko Online") {
  System(grocery_system, "Sistem Toko Online", "Memungkinkan pelanggan memesan kebutuhan secara online dan mengelola pemenuhan")
}

System_Ext(payment, "Gerbang Pembayaran", "Memproses pembayaran kartu dan dompet digital")
System_Ext(shipping, "Penyedia Logistik", "Merencanakan rute pengiriman dan menjadwalkan pengemudi")

Rel(customer, grocery_system, "Menjelajahi produk dan memesan", "HTTPS")
Rel(grocery_system, payment, "Memproses pembayaran melalui", "HTTPS/API")
Rel(grocery_system, shipping, "Membuat tugas pengiriman melalui", "HTTPS/API")
Rel(driver, grocery_system, "Melihat penugasan pengiriman", "HTTPS")

@enduml

Penjelasan Kode Langkah demi Langkah

1. Menyiapkan Lingkungan Dasar

Saya mulai dengan menginisialisasi skrip menggunakan tag PlantUML standar dan mengimpor makro pustaka standar resmi C4-PlantUML. Dengan merujuk C4_Context.puml, kita membuka elemen semantik yang dirancang khusus untuk diagram konteks sistem.

• Penggabungan Pustaka: !include .../C4_Context.pumlmemuat bentuk, warna, dan aturan gaya standar untuk orang, sistem, dan batas.
• Pengetikan dan Tata Letak Diagram:Mengatur skinparam vpDiagramType C4modelSystemContextDiagrammemastikan integrasi yang tepat di dalam VPasCode, sementara LAYOUT_TOP_DOWN()mengatur hierarki visual dengan rapi dari atas ke bawah. Saya juga mengaktifkan LAYOUT_WITH_LEGEND() untuk secara otomatis menghasilkan panduan referensi yang bermanfaat di sudut kanan bawah kanvas.

2. Mendefinisikan Aktor dan Pengguna

Selanjutnya, saya perlu mendefinisikan aktor manusia yang berinteraksi dengan ekosistem kami. Saya membedakan antara pengguna sistem standar dan entitas eksternal menggunakan makro C4 khusus:

• Pengguna Inti: Saya membuat pengguna utama menggunakan Person(customer, "Pelanggan", ...) yang memulai pesanan dan menelusuri inventaris.
• Aktor Eksternal: Saya mendefinisikan seorang kurir pengiriman menggunakan Person_Ext(driver, "Kurir Pengiriman", ...) untuk menyoroti bahwa meskipun mereka berinteraksi dengan alur pemenuhan kami, mereka berada di luar perimeter keamanan internal inti kami.

3. Menetapkan Batasan Organisasi dan Sistem Inti

Kejelasan arsitektur memerlukan batasan yang jelas. Untuk mengemas apa yang dimiliki perusahaan kami versus apa yang bergantung pada vendor eksternal, saya menetapkan batasan perusahaan:

• Batasan Perusahaan: Menggunakan Enterprise_Boundary(grocery_co, "Toko Grosir Online") membuat kotak wadah putus-putus yang secara visual mengelompokkan infrastruktur internal.
• Sistem Internal: Di dalam batasan ini, saya menempatkan aset perangkat lunak utama kami menggunakan System(grocery_system, "Sistem Toko Grosir Online", ...).

4. Mengintegrasikan Sistem Eksternal

Tidak ada platform e-commerce modern yang beroperasi secara terisolasi. Saya mendefinisikan ketergantungan eksternal di luar batasan perusahaan menggunakan makro sistem eksternal khusus:

• Pemrosesan Pembayaran: System_Ext(payment, "Gerbang Pembayaran", ...) mewakili transaksi keuangan pihak ketiga.
• Logistik & Pengiriman: System_Ext(shipping, "Penyedia Logistik", ...) menangani perencanaan rute dan penugasan pengemudi.

5. Memetakan Hubungan dan Protokol

Untuk menyatukan arsitektur, saya memetakan interaksi berarah dan protokol komunikasi menggunakan Rel() makro:

• Alur Pelanggan: Rel(customer, grocery_system, "Menjelajahi produk dan melakukan pemesanan", "HTTPS") mengilustrasikan bagaimana pengguna terhubung secara aman ke platform inti.
• Integrasi Backend: Saya memetakan ketergantungan backend seperti pemrosesan pembayaran dan penyedia pengiriman dengan label protokol eksplisit ("HTTPS/API") untuk memberikan konteks teknis langsung kepada insinyur.

Kesimpulan & Coba Sendiri

Membuat diagram arsitektur perangkat lunak yang bersih tidak memerlukan alat desktop yang rumit atau konfigurasi file yang kompleks. Dengan menggabungkan sintaks C4 yang kuat dari PlantUML dengan VPasCode, Anda dapat menulis, merender, dan berbagi diagram arsitektur dalam hitungan detik.

Siap mencoba membangun arsitektur sistem Anda sendiri? Kunjungi editor online VPasCode gratis, tempelkan potongan kode ini, dan saksikan diagram Anda dirender secara real-time!