de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Menguasai Diagram Kontainer C4: Memperbesar Pemilihan Teknologi, Tanggung Jawab, dan Komunikasi (dengan Contoh PlantUML)

Apa itu Diagram Kontainer C4?

Diagram Kontainer adalah Tingkat 2 dalam model C4 Simon Brown. Ini memperbesar satu sistem perangkat lunak (didefinisikan pada Tingkat 1 – Konteks Sistem) untuk menunjukkan:

The Ultimate Guide to C4 Model Visualization with Visual Paradigm's AI Tools - ArchiMetric

  • The bentuk tingkat tinggi arsitektur di dalam batas sistem Anda.

  • Unit-unit utama unit yang dapat di-deploy/dijalankan yang disebut kontainer.

  • Pemilihan teknologi untuk setiap kontainer.

  • Bagaimana kontainer berinteraksi satu sama lain dan dengan aktor/sistem eksternal.

Penjelasan penting: Sebuah “kontainer” dalam C4 bukan tentu saja sebuah kontainer Docker. Ini adalah unit yang dapat di-deploy/dijalankan secara terpisah yang menjalankan kode atau menyimpan data. Contoh:

  • Aplikasi web / Aplikasi Halaman Tunggal (SPA)

  • Aplikasi mobile

  • API sisi server / mikroservis

  • Database (skema)

  • Penyimpanan file (bucket S3, folder sistem file)

  • Broker pesan / antrian (ketika dimodelkan secara eksplisit)

  • Aplikasi desktop / CLI

  • Proses batch / pekerjaan yang dijadwalkan

Diagram ini tetap tingkat tinggi — tidak ada detail kelas atau kode internal (itu adalah Komponen Tingkat 3 atau Kode Tingkat 4).

Kapan Membuat Diagram Container

Buat (dan pertahankan) diagram Container ketika:

  • Anda telah menyelesaikan (atau setidaknya menggambar sketsa) Konteks Sistem diagram dan perlu menjawab: “Apa blok pembangun utama di dalam sistem kita?”

  • Onboarding pengembang baru, arsitek, atau staf operasi — mereka perlu memahami tumpukan teknologi dan tanggung jawab tingkat tinggi secara cepat.

  • Membuat keputusan teknologi atau arsitektur yang signifikan (monolit → mikroservis, menambahkan aplikasi mobile, memilih basis data, memperkenalkan antrean pesan, migrasi ke awan).

  • Dokumentasi untuk audit, kepatuhan, tinjauan keamanan, atau respons insiden (membantu menunjukkan permukaan serangan, aliran data).

  • Anda ingin ‘arsitektur sebagai kode’ yang tinggal di repositori dan berkembang bersama sistem.

  • Kebanyakan tim berhenti di sini — Simon Brown sendiri mencatat bahwa Konteks Sistem + Container diagram cukup memadai bagi sebagian besar tim perangkat lunak. Hanya lanjutkan lebih dalam (Komponen/Kode) jika kompleksitas di dalam container dapat dibenarkan.

Lewati atau tunda jika:

  • Sistem sangat sederhana (satu proses + basis data).

  • Anda sedang melakukan ideasi sangat awal dan hanya membutuhkan konteks gambaran besar.

Mengapa Menggunakan Diagram Container? (Manfaat Utama)

  • Kejelasan bagi audiens yang berbeda
    Pengembang melihat teknologi dan titik integrasi.
    Tim Ops/infra melihat unit yang dapat di-deploy dan jalur komunikasi.
    Arsitek melihat batas tanggung jawab dan risiko utang teknologi.
    Manajer melihat pandangan yang cukup netral terhadap teknologi namun tetap konkret.

  • Menghindari masalah ‘satu diagram besar’
    Mencegah memasukkan semua hal (pengguna + infrastruktur + kelas + ikon awan) ke dalam satu gambar yang terlalu penuh.

  • Menyoroti keputusan penting
    Secara jelas mengungkap pilihan seperti SPA + API + DB relasional vs. rendering sisi server + NoSQL, atau sinkron vs. berbasis peristiwa.

  • Komunikasi dan kolaborasi
    Bertindak sebagai peta bersama selama sesi desain, evaluasi insiden, pemodelan ancaman, dan perencanaan jalan.

  • Dokumentasi hidup
    Ketika ditulis dalam PlantUML / Structurizr DSL / serupa → dikelola versinya di Git, dihasilkan ulang secara otomatis di CI, selalu terkini.

Cara Membuat Diagram Container yang Hebat (Langkah demi Langkah + Praktik Terbaik)

  1. Mulai dari Level 1
    Salin Orang + Sistem Perangkat Lunak Eksternal dari diagram Konteks — mereka menjadi aktor yang berinteraksi dengan container Anda.

  2. Gambar Batas Sistem
    Gunakan Batas_Sistem di PlantUML untuk dengan jelas menentukan ruang lingkup “di dalam sistem kami”.

  3. Identifikasi Container
    Tanya: Apa saja hal-hal yang dapat dijalankan/deploy secara terpisah yang memberikan fungsi sistem?
    Pola umum:

    • Web SPA ↔ Backend API ↔ Database

    • Aplikasi Mobile ↔ Backend untuk Frontend (BFF) ↔ Layanan Bersama

    • Microservices dengan broker pesan

    • Monolit warisan + lapisan API baru

  4. Tambahkan Teknologi & Deskripsi Singkat
    Setiap container harus menampilkan: nama, teknologi, tujuan singkat.
    Jaga deskripsi < 15 kata.

  5. Tentukan Interaksi (Hubungan)
    Tampilkan arah + protokol + tujuan (misalnya, “JSON/HTTPS”, “Membaca dari dan menulis ke”, “Menerbitkan ke”, “Mengonsumsi dari”).
    Gunakan kata kerja pada hubungan.

  6. Praktik Terbaik

    • Jaga agar mudah dibaca — tujuan untuk < 10–12 container. Jika lebih → buat tampilan fokus (misalnya, “container subsistem API”).

    • Jaga konsistensi — arah tata letak yang sama (atas-bawah/kiri-kanan), tingkat detail yang sama.

    • Gunakan ikon/sprite — tambahkan daya tarik visual (PlantUML mendukung devicons, font-awesome, dll.).

    • Legenda & kunci — aktifkan legenda otomatis di PlantUML.

    • Hindari kekacauan — abaikan antrian/topik jika tidak menambah nilai; label protokol pada panah alih-alih.

    • Versi & simpan sebagai kode — komit file .puml ke repo.

    • Penyesuaian audiens — satu versi untuk pengembang (teknologi rinci), versi yang lebih ringan untuk pemangku kepentingan.

Contoh PlantUML – Sistem Perbankan Internet Klasik (gaya Big Bank plc)

Berikut adalah contoh bersih, berkualitas produksi menggunakan perpustakaan C4-PlantUML resmi.

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' Opsional: tambahkan ikon menarik (dari sprite tupadr3)
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/android.puml

title Diagram Container: Sistem Perbankan Internet

Person(customer, "Pelanggan Perbankan Pribadi", "Pelanggan Big Bank plc")

System_Boundary(c1, "Sistem Perbankan Internet") {
    Container(spa, "Aplikasi Halaman Tunggal", "JavaScript & Angular", "Menyediakan semua fungsi perbankan internet bagi pelanggan melalui peramban web mereka", $sprite="angular")
    Container(mobile, "Aplikasi Seluler", "Android/iOS (React Native)", "Fungsi perbankan internet terbatas", $sprite="android")
    Container(api, "Aplikasi API", "Java & Spring Boot", "Menyediakan fungsi perbankan internet melalui API", $sprite="java")
    ContainerDb_Ext(db, "Database Perbankan", "PostgreSQL", "Menyimpan preferensi pengguna, data cache, sesi (akun inti/transaksi tetap di mainframe)", $sprite="postgresql")
}

System_Ext(core, "Sistem Perbankan Inti", "Sistem mainframe – ada")
System_Ext(email, "Sistem Email", "Mengirim email (misalnya AWS SES)")

Rel(customer, spa, "Menggunakan", "HTTPS")
Rel(customer, mobile, "Menggunakan", "HTTPS")

Rel(spa, api, "Memanggil", "JSON/HTTPS")
Rel(mobile, api, "Memanggil", "JSON/HTTPS")

Rel(api, db, "Membaca dan menulis ke", "JDBC/SQL")
Rel(api, core, "Menggunakan", "JSON/HTTPS")
Rel(api, email, "Mengirim email menggunakan", "HTTPS")

LAYOUT_WITH_LEGEND()
LAYOUT_TOP_DOWN()

@enduml

Ini menghasilkan diagram bersih dengan:

  • Batasan sistem

  • Label teknologi

  • Sprite/ikon

  • Hubungan yang jelas

  • Legenda

Anda dapat menempelkannya langsung ke server online PlantUML atau IDE/editor yang kompatibel.

Gunakan struktur ini sebagai templat — ganti elemen dengan nama, teknologi, dan aliran sistem Anda sendiri. Untuk gaya lanjutan (tema, warna khusus), periksa contoh C4-PlantUML di GitHub.

Selamat membuat diagram — dan ingat: tujuannya adalahkomunikasi yang efektif, bukan kesempurnaan UML!

Sumber Daya Diagram Container C4

This post is also available in Deutsch, English, Español, فارسی, Français, English, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文.