{"id":2145,"date":"2026-08-03T07:51:11","date_gmt":"2026-08-03T07:51:11","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2\/"},"modified":"2026-08-03T07:51:11","modified_gmt":"2026-08-03T07:51:11","slug":"what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/id\/what-types-of-diagrams-can-you-create-with-plantuml-complete-guide-2\/","title":{"rendered":"Diagram Jenis Apa yang Bisa Anda Buat dengan PlantUML? (Panduan Lengkap)"},"content":{"rendered":"

\"Hero<\/p>\n

Dalam rekayasa perangkat lunak modern dan arsitektur sistem, alat pembuatan diagram tradisional yang menggunakan seret dan lepas sering kali tidak memadai. Mereka bisa lambat dalam pembaruan, sulit dipertahankan dalam sistem kontrol versi seperti Git, dan rentan terhadap gaya yang tidak konsisten. Di sinilah Diagram sebagai Kode (DaC)<\/strong> masuk, dan PlantUML<\/strong> berdiri sebagai salah satu bahasa pembuatan diagram berbasis teks yang paling serbaguna dan banyak digunakan dalam ekosistem pengembang.<\/section>\n
Dengan mendefinisikan visual menggunakan teks biasa, pengembang dapat menyimpan dokumentasi arsitektur tepat di samping kode sumber mereka. Tapi jenis diagram apa saja yang sebenarnya bisa Anda buat dengan ini? Baik Anda membutuhkan peta struktural UML standar, tampilan arsitektur perusahaan tingkat tinggi, atau timeline manajemen proyek, PlantUML mencakup hampir semua kebutuhan komunikasi teknis. Dalam panduan ini, kami akan mengeksplorasi berbagai jenis diagram yang didukung oleh PlantUML dan menunjukkan bagaimana menggunakan editor Editor PlantUML<\/strong> seperti VPasCode<\/a> meningkatkan pengalaman rendering dan pengeditan Anda.<\/section>\n
\n

2. Diagram Bahasa Pemodelan Terpadu (UML) Standar<\/h2>\n

Pada intinya, PlantUML dibuat untuk menyederhanakan pembuatan diagram UML resmi. Ia terbagi menjadi dua kategori utama: diagram struktural dan diagram perilaku.<\/p>\n

Diagram Struktural<\/h3>\n

Diagram Kelas & Objek<\/h4>\n

Model struktur berbasis objek, hierarki kelas, antarmuka, atribut, dan hubungan (pewarisan, agregasi, komposisi) langsung dari definisi kode.<\/p>\n

\"Main<\/p>\n

\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Plantuml<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Plantuml in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
@startuml\r\n  \r\ntitle Sistem Manajemen Hotel\r\n\r\n' Definisikan antarmuka\r\ninterface IReservable {\r\n    + buatReservasi(customer: Customer, tanggal: DateRange): boolean\r\n    + batalkanReservasi(idReservasi: String): boolean\r\n    + cekKetersediaan(tanggal: Date): boolean\r\n}\r\n\r\ninterface IPayable {\r\n    + prosesPembayaran(jumlah: double): boolean\r\n    + keluarkanRefund(idReservasi: String): boolean\r\n    + dapatkanStatusPembayaran(): String\r\n}\r\n\r\n' Definisikan kelas abstrak\r\nabstract class Person {\r\n    - id: String\r\n    - nama: String\r\n    - email: String\r\n    - telepon: String\r\n    + getId(): String\r\n    + getName(): String\r\n    + dapatkanInfoKontak(): String\r\n    + perbaruiInfoKontak(info: String): void\r\n}\r\n\r\n' Definisikan kelas konkret\r\nclass Customer {\r\n    - poinLoyalitas: int\r\n    - totalMenginap: int\r\n    - preferensi: List\r\n    + dapatkanPoinLoyalitas(biayaMenginap: double): void\r\n    + tukarkanPoinLoyalitas(poin: int): boolean\r\n    + dapatkanTingkatLoyalitas(): String\r\n    + tambahkanPreferensi(preferensi: String): void\r\n}\r\n\r\nclass Room {\r\n    - nomorKamar: String\r\n    - tipeKamar: RoomType\r\n    - kapasitas: int\r\n    - hargaPerMalam: double\r\n    - fasilitas: List\r\n    - tersedia: boolean\r\n    + pesanKamar(customer: Customer, tanggal: DateRange): boolean\r\n    + lepaskanKamar(): void\r\n    + dapatkanHarga(customer: Customer): double\r\n    + tambahkanFasilitas(fasilitas: String): void\r\n    + dapatkanStatusKamar(): String\r\n}\r\n\r\nclass Reservation {\r\n    - idReservasi: String\r\n    - tanggalCheckIn: Date\r\n    - tanggalCheckOut: Date\r\n    - totalHarga: double\r\n    - status: ReservationStatus\r\n    - permintaanKhusus: String\r\n    + hitungTotalHarga(): double\r\n    + konfirmasiReservasi(): void\r\n    + checkIn(): void\r\n    + checkOut(): boolean\r\n    + perbaruiTanggal(tanggalBaruCheckIn: Date, tanggalBaruCheckOut: Date): boolean\r\n    + dapatkanDurasi(): int\r\n}\r\n\r\n' Enumerasi\r\nenum RoomType {\r\n    STANDARD\r\n    DELUXE\r\n    SUITE\r\n    PRESIDENTIAL\r\n}\r\n\r\n' Enumerasi\r\nenum ReservationStatus {\r\n    MENUNGGU\r\n    TELAH_DIKONFIRMASI\r\n    SUDAH_CHECK_IN\r\n    SUDAH_CHECK_OUT\r\n    DIBATALKAN\r\n}\r\n\r\n' Hubungan\r\n' Implementasi antarmuka (garis putus-putus dengan segitiga)\r\nIReservable <|.. Reservation : menerapkan\r\nIPayable <|.. Reservation : menerapkan\r\n\r\n' Pewarisan abstrak (garis padat dengan segitiga)\r\nPerson <|-- Customer : memperluas ' Komposisi (diamond padat) - Kamar adalah bagian dari Reservasi Reservation *-- \"1..*\" Room : berisi >\r\n\r\n' Asosiasi (garis padat sederhana) dengan multiplicity\r\nCustomer \"1\" -- \"0..*\" Reservation : membuat >\r\n\r\n' Ketergantungan (panah putus-putus) - Customer bergantung pada RoomType\r\nCustomer ..> RoomType : memiliki tingkat loyalitas berdasarkan >\r\n\r\n' Asosiasi dengan label khusus\r\nReservation \"1\" --o \"1\" Customer : dipesan oleh >\r\n\r\n' Realisasi antarmuka oleh kelas abstrak (konektor tambahan opsional)\r\nIReservable <|.. Room : menerapkan\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
Diagram Komponen & Penempatan<\/h4>\n
Peta komponen perangkat lunak, node fisik, artefak, dan lingkungan penempatan untuk memvisualisasikan distribusi perangkat lunak di seluruh infrastruktur perangkat keras atau awan.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Diagram Komponen Aplikasi Web\r\n\r\npackage \"Lapisan Klien\" {\r\n    [Peramban Web] sebagai Browser\r\n    [Aplikasi Seluler] sebagai Mobile\r\n}\r\n\r\npackage \"Server Aplikasi\" {\r\n    [Gateway API] sebagai Gateway\r\n    [Layanan Pengguna] sebagai UserService\r\n    [Layanan Pesanan] sebagai OrderService\r\n    [Layanan Pembayaran] sebagai PaymentService\r\n}\r\n\r\npackage \"Lapisan Basis Data\" {\r\n    database \"Basis Data Pengguna\" sebagai UserDB\r\n    database \"Basis Data Pesanan\" sebagai OrderDB\r\n}\r\n\r\npackage \"Layanan Pihak Ketiga\" {\r\n    [API Stripe] sebagai Stripe\r\n}\r\n\r\n' Koneksi\r\nBrowser --> Gateway : HTTP \/ REST\r\nMobile --> Gateway : HTTP \/ REST\r\n\r\nGateway --> UserService : REST Internal\r\nGateway --> OrderService : REST Internal\r\n\r\nUserService --> UserDB : Baca \/ Tulis\r\nOrderService --> OrderDB : Baca \/ Tulis\r\nOrderService --> PaymentService : Proses Pembayaran\r\n\r\nPaymentService --> Stripe : HTTPS \/ API\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Component<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Diagram Penempatan - Aplikasi Web 3-Lapisan\r\n\r\nskinparam componentStyle rectangle\r\n\r\nnode \"Desktop Klien\" sebagai clientNode {\r\n  node \"Peramban Web\" sebagai browser {\r\n    artefak \"Frontend Aplikasi Web (HTML\/JS)\" sebagai frontend\r\n  }\r\n}\r\n\r\nnode \"Server Aplikasi\" sebagai appServerNode {\r\n  node \"Container Servlet (Tomcat)\" sebagai tomcat {\r\n    artefak \"API Backend (berkas WAR)\" sebagai appApi\r\n  }\r\n}\r\n\r\nnode \"Server Basis Data\" sebagai databaseNode {\r\n  database \"PostgreSQL\" sebagai postgres {\r\n    artefak \"Skema Basis Data Aplikasi\" sebagai dbSchema\r\n  }\r\n}\r\n\r\nclientNode -- appServerNode : HTTPS (Port 443)\r\nappServerNode -- databaseNode : JDBC (Port 5432)\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Deployment<\/p>\n
Diagram Perilaku & Interaksi<\/h3>\n
Diagram Urutan<\/h4>\n
Jenis diagram PlantUML yang paling populer. Lacak interaksi langkah demi langkah, panggilan API sinkron\/asinkron, dan alur pesan antara aktor dan sistem seiring waktu.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Alur Otorisasi Pengguna\r\n\r\naktor \"Pengguna\" sebagai user\r\npartisipan \"Aplikasi Web\" sebagai app\r\npartisipan \"API Otorisasi\" sebagai auth\r\ndatabase \"DB Pengguna\" sebagai db\r\n\r\nuser -> app : Masukkan Kredensial\r\naktifkan app\r\n\r\napp -> auth : POST \/api\/v1\/login\r\naktifkan auth\r\n\r\nauth -> db : Cari pengguna berdasarkan email\r\naktifkan db\r\ndb --> auth : Kembalikan catatan pengguna & hash\r\ntidak aktifkan db\r\n\r\nalt Kredensial Valid\r\n    auth -> auth : Verifikasi kata sandi & hasilkan JWT\r\n    auth --> app : 200 OK (Token & Profil)\r\n    app --> user : Alihkan ke Dasbor\r\nselain Kredensial Tidak Valid\r\n    auth --> app : 401 Tidak Diizinkan (Kesalahan)\r\n    app --> user : Tampilkan \"Kredensial Tidak Valid\"\r\nakhir\r\n\r\ntidak aktifkan auth\r\ntidak aktifkan app\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Sequence<\/p>\n
Diagram Kasus Penggunaan<\/h4>\n
Tentukan batas sistem, aktor, tujuan pengguna, dan cakupan fungsional.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Diagram Kasus Penggunaan Sistem Belanja Online\r\n\r\narah kiri ke kanan\r\n\r\naktor Pelanggan\r\naktor \"Pelanggan Terdaftar\" sebagai RegCustomer\r\naktor \"Gerbang Pembayaran\" sebagai PaymentSystem\r\n\r\nPelanggan <|-- RegCustomer persegi panjang \"Sistem E-Commerce\" { usecase \"Telusuri Produk\" sebagai UC_Browse usecase \"Cari Barang\" sebagai UC_Search usecase \"Kelola Keranjang\" sebagai UC_Cart usecase \"Checkout Pesanan\" sebagai UC_Checkout usecase \"Gunakan Kupon Diskon\" sebagai UC_Coupon usecase \"Proses Pembayaran\" sebagai UC_Payment usecase \"Lihat Riwayat Pesanan\" sebagai UC_History } Pelanggan --> UC_Browse\r\nPelanggan --> UC_Search\r\nPelanggan --> UC_Cart\r\nPelanggan --> UC_Checkout\r\n\r\nRegCustomer --> UC_History\r\n\r\nUC_Checkout .> UC_Payment : <>\r\nUC_Checkout <.. UC_Coupon : <>\r\n\r\nUC_Payment -- PaymentSystem\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Use<\/p>\n
Diagram Aktivitas & State<\/h4>\n
Bagan alir logika bisnis yang kompleks, alur algoritma, transisi mesin keadaan, dan konkurensi.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Proses Pemenuhan Pesanan\r\n\r\n|Pelanggan|\r\nmulai\r\n:Tempatkan Pesanan;\r\n:Kirim Detail Pembayaran;\r\n\r\n|Sistem Pesanan|\r\njika (Pembayaran Valid?) maka (ya)\r\n  :Cadangkan Persediaan;\r\n  \r\n  ' Pembagian konkurensi\r\n  fork\r\n    |Gudang|\r\n    :Ambil Barang dari Rak;\r\n    :Bungkus Barang ke Dalam Kotak;\r\n  fork lagi\r\n    |Billing|\r\n    :Hasilkan PDF Faktur;\r\n    :Tagih Metode Pembayaran;\r\n  akhiri fork\r\n\r\n  |Pengiriman|\r\n  :Lampirkan Label Pengiriman;\r\n  :Serahkan ke Kurir;\r\n  \r\n  |Pelanggan|\r\n  :Terima Paket;\r\n  berhenti\r\nselain (tidak)\r\n  |Sistem Pesanan|\r\n  :Kirim Pemberitahuan Gagal Pembayaran;\r\n  |Pelanggan|\r\n  :Perbarui Metode Pembayaran;\r\n  berhenti\r\nakhir jika\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Activity<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Siklus Hidup Pesanan E-Commerce\r\n\r\n[*] --> Menunggu : Pesanan Dibuat\r\n\r\nstate Menunggu {\r\n  [*] --> MenungguPembayaran\r\n  MenungguPembayaran --> GagalPembayaran : Kesalahan Pembayaran\r\n  GagalPembayaran --> MenungguPembayaran : Ulangi Pembayaran\r\n}\r\n\r\nMenunggu --> Diproses : Pembayaran Diperbolehkan\r\nMenunggu --> Dibatalkan : Pengguna Membatalkan Pesanan\r\n\r\nstate Diproses {\r\n  [*] --> Pengemasan\r\n  Pengemasan --> SiapDikirim : Pemeriksaan Kualitas Lulus\r\n}\r\n\r\nDiproses --> Dikirim : Serah Terima Kurir\r\nDikirim --> Diterima : Pengiriman Dikonfirmasi\r\nDikirim --> Dikembalikan : Pengiriman Gagal \/ Ditolak\r\n\r\nDiterima --> [*]\r\nDibatalkan --> [*]\r\nDikembalikan --> [*]\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"State<\/p>\n
Diagram Waktu<\/h4>\n
Rincian transisi keadaan yang tepat dan interaksi objek dalam rentang waktu diskrit\u2014ideal untuk sistem tertanam atau desain perangkat keras waktu nyata.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\ntitle Diagram Waktu Transfer Data SPI\r\n\r\nkuat \"Jam (SCLK)\" sebagai CLK\r\nbiner \"Pemilih Chip (CS)\" sebagai CS\r\nbiner \"Keluaran Utama (MOSI)\" sebagai MOSI\r\nringkas \"Bis Data (MISO)\" sebagai MISO\r\n\r\n@0\r\nCS adalah Tinggi\r\nCLK adalah Rendah\r\nMOSI adalah Rendah\r\nMISO adalah \"Idle\"\r\n\r\n@1\r\nCS adalah Rendah\r\nMISO adalah \"Header\"\r\n\r\n@2\r\nCLK adalah Tinggi\r\nMOSI adalah Tinggi\r\n\r\n@3\r\nCLK adalah Rendah\r\n\r\n@4\r\nCLK adalah Tinggi\r\nMOSI adalah Rendah\r\nMISO adalah \"Payload\"\r\n\r\n@5\r\nCLK adalah Rendah\r\n\r\n@6\r\nCS adalah Tinggi\r\nCLK adalah Rendah\r\nMOSI adalah Rendah\r\nMISO adalah \"Idle\"\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Digital<\/p>\n<\/section>\n
\n
3. Arsitektur Tingkat Tinggi & Diagram Khusus Bidang<\/h2>\n
Di luar UML tradisional, PlantUML unggul dalam merepresentasikan sistem perangkat lunak berlapis-lapis dan arsitektur data menggunakan perpustakaan ekstensi khusus.<\/p>\n
Diagram Model C4<\/h4>\n
Menggambarkan arsitektur perangkat lunak pada berbagai tingkat abstraksi\u2014Konteks, Wadah, Komponen, dan Kode\u2014yang membuat desain sistem mudah dipahami oleh para pemangku kepentingan teknis maupun non-teknis.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nJUDUL Diagram Konteks Sistem untuk Sistem Perbankan Internet\r\n\r\nOrang(customer, \"Pelanggan Perbankan Pribadi\", \"Seorang pelanggan bank, dengan rekening bank pribadi.\")\r\nSistem(banking_system, \"Sistem Perbankan Internet\", \"Memungkinkan pelanggan untuk melihat informasi tentang rekening bank mereka, dan melakukan pembayaran.\")\r\n\r\nSistem_Ext(mainframe, \"Sistem Perbankan Mainframe\", \"Menyimpan semua informasi inti perbankan tentang pelanggan, rekening, transaksi, dll.\")\r\nSistem_Ext(email_system, \"Sistem E-mail\", \"Sistem e-mail internal Microsoft Exchange.\")\r\n\r\nRel(customer, banking_system, \"Melihat saldo rekening, dan melakukan pembayaran menggunakan\")\r\nRel(banking_system, mainframe, \"Mendapatkan informasi rekening dari, dan melakukan pembayaran menggunakan\")\r\nRel(banking_system, email_system, \"Mengirim e-mail menggunakan\")\r\nRel_Back(email_system, customer, \"Mengirim e-mail ke\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"C4<\/p>\n
Diagram ArchiMate<\/h4>\n
Dukungan pemodelan arsitektur perusahaan di berbagai lapisan bisnis, aplikasi, dan teknologi untuk memetakan strategi organisasi ke sistem operasional.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!include <archimate\/Archimate>\r\n\r\njudul Contoh ArchiMate - Pembayaran Tagihan Online\r\n\r\nKelompok(business, \"Lapisan Bisnis\"){\r\n  Proses_Bisnis(payBillProcess, \"Proses Pembayaran Tagihan\")\r\n  Objek_Bisnis(bankAccount, \"Rekening Bank Pelanggan\")\r\n  Layanan_Bisnis(paymentService, \"Layanan Bisnis Pembayaran Tagihan\")\r\n}\r\n\r\nKelompok(application, \"Lapisan Aplikasi\"){\r\n  Komponen_Aplikasi(bankingApp, \"Aplikasi Perbankan Mobile\")\r\n  Fungsi_Aplikasi(paymentProcessing, \"Logika Pemrosesan Pembayaran\")\r\n  Objek_Data_Aplikasi(transactionRecord, \"Payload Data Transaksi\")\r\n}\r\n\r\nKelompok(technology, \"Lapisan Teknologi\"){\r\n  Artefak_Teknologi(jwtToken, \"Token Sesi Terenkripsi\")\r\n  Layanan_Teknologi(apiGateway, \"Layanan API Gateway\")\r\n  Layanan_Teknologi(dbService, \"Layanan Basis Data Inti\")\r\n}\r\n\r\nRel_Flow_Right(payBillProcess, bankAccount, \"\")\r\nRel_Serving_Up(paymentService, payBillProcess, \"\")\r\nRel_Specialization_Up(paymentProcessing, paymentService, \"\")\r\nRel_Flow_Right(transactionRecord, paymentProcessing, \"\")\r\nRel_Assignment_Left(bankingApp, paymentProcessing, \"\")\r\nRel_Realization_Up(jwtToken, transactionRecord, \"\")\r\nRel_Serving_Up(apiGateway, paymentProcessing, \"\")\r\nRel_Serving_Up(dbService, apiGateway, \"\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"ArchiMate<\/p>\n
Diagram Hubungan Entitas (ERD)<\/h4>\n
Hasilkan visualisasi skema basis data yang bersih, termasuk notasi kaki burung standar dan model ERD Chen.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\njudul Skema Basis Data E-Commerce (Kaki Burung)\r\n\r\n' Sembunyikan ikon lingkaran untuk entitas\r\nsembunyikan lingkaran\r\nskinparam linetype ortho\r\n\r\nentitas \"Pengguna\" sebagai user {\r\n  * user_id : INT <>\r\n  --\r\n  * email : VARCHAR(255)\r\n  * password_hash : VARCHAR(255)\r\n  * created_at : TIMESTAMP\r\n}\r\n\r\nentitas \"Profil Pelanggan\" sebagai profile {\r\n  * profile_id : INT <>\r\n  --\r\n  * user_id : INT <>\r\n  * first_name : VARCHAR(100)\r\n  * last_name : VARCHAR(100)\r\n    phone : VARCHAR(20)\r\n}\r\n\r\nentitas \"Pesanan\" sebagai order {\r\n  * order_id : INT <>\r\n  --\r\n  * user_id : INT <>\r\n  * order_date : TIMESTAMP\r\n  * total_amount : DECIMAL(10,2)\r\n  * status : VARCHAR(50)\r\n}\r\n\r\nentitas \"Item Pesanan\" sebagai item {\r\n  * order_item_id : INT <>\r\n  --\r\n  * order_id : INT <>\r\n  * product_id : INT <>\r\n  * quantity : INT\r\n  * unit_price : DECIMAL(10,2)\r\n}\r\n\r\nentitas \"Produk\" sebagai product {\r\n  * product_id : INT <>\r\n  --\r\n  * sku : VARCHAR(50)\r\n  * name : VARCHAR(150)\r\n    description : TEXT\r\n  * price : DECIMAL(10,2)\r\n}\r\n\r\n' Hubungan\r\nuser ||--o| profile : \"memiliki\"\r\nuser ||--o{ order : \"tempatkan\"\r\norder ||--|{ item : \"berisi\"\r\nproduct ||--o{ item : \"muncul dalam\"\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Entity-relationship<\/p>\n
Peta Jaringan & Infrastruktur<\/h4>\n
Hasilkan topologi jaringan, node server, koneksi awan, dan firewall dengan mudah.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startnwdiag\r\njudul Topologi Jaringan Perusahaan\r\n\r\nnwdiag {\r\n  jaringan External_Internet {\r\n    address = \"0.0.0.0\/0\"\r\n    user_client [address = \"203.0.113.15\", description = \"Pengguna Jarak Jauh\"];\r\n    edge_firewall [address = \"192.168.1.1\", description = \"FW Perimeter\"];\r\n  }\r\n\r\n  jaringan DMZ_Zone {\r\n    address = \"192.168.1.0\/24\"\r\n    edge_firewall;\r\n    load_balancer [address = \"192.168.1.10\", description = \"Load Balancer Nginx\"];\r\n    mail_server [address = \"192.168.1.25\", description = \"Server SMTP\"];\r\n    internal_firewall [address = \"192.168.1.254\", description = \"FW Internal\"];\r\n  }\r\n\r\n  jaringan Private_LAN {\r\n    address = \"10.0.1.0\/24\"\r\n    internal_firewall;\r\n    app_server_01 [address = \"10.0.1.50\", description = \"Node API 1\"];\r\n    app_server_02 [address = \"10.0.1.51\", description = \"Node API 2\"];\r\n    db_master [address = \"10.0.1.100\", description = \"Utama PostgreSQL\"];\r\n  }\r\n\r\n  jaringan Management_Subnet {\r\n    address = \"10.0.99.0\/24\"\r\n    internal_firewall;\r\n    admin_bastion [address = \"10.0.99.5\", description = \"Host Bastion SSH\"];\r\n    monitoring_node [address = \"10.0.99.20\", description = \"Host Prometheus\"];\r\n  }\r\n}\r\n@endnwdiag<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEdit Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Network<\/p>\n
\u00a0<\/p>\n<\/section>\n
\n
4. Visualisasi Perencanaan, Manajemen & Brainstorming<\/h2>\n
PlantUML tidak terbatas pada desain perangkat lunak\u2014ia juga merupakan alat yang kuat untuk manajemen proyek dan brainstorming tim.<\/p>\n
Diagram Gantt<\/h4>\n
Rencanakan jadwal proyek, ketergantungan tugas, milestone, dan alokasi sumber daya menggunakan markup teks yang bersih.<\/p>\n
\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nSunting Mermaid di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Mermaid<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
gantt\r\n    judul Jadwal Rilis Produk Perangkat Lunak\r\n    dateFormat  YYYY-MM-DD\r\n    axisFormat  %b %d\r\n\r\n    bagian Perencanaan & Desain\r\n    Pengumpulan Kebutuhan   :a1, 2026-09-01, 10d\r\n    Desain Arsitektur      :a2, setelah a1, 10d\r\n\r\n    bagian Pengembangan\r\n    Pengembangan API Backend  :b1, setelah a2, 15d\r\n    Pengembangan UI Frontend  :b2, setelah a2, 15d\r\n\r\n    bagian Pengujian & Rilis\r\n    Pengujian Integrasi      :c1, setelah b1 b2, 8d\r\n    Audit Keamanan           :c2, setelah c1, 5d\r\n    Rilis Produksi       :tahapan, m1, setelah c2, 0d<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nSunting Mermaid di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Mermaid<\/p>\n
Struktur Pemecahan Kerja (WBS)<\/h4>\n
urai proyek-proyek kompleks menjadi hasil kerja hierarkis dan bagian tugas yang dapat dikelola.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nSunting Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startwbs\r\ntitle WBS Desain Ulang Website\r\n\r\n* Proyek Desain Ulang Website\r\n** 1. Penemuan & Strategi\r\n*** 1.1 Wawancara Stakeholder\r\n*** 1.2 Audit Kompetitor\r\n*** 1.3 Persetujuan Lingkup & Strategi\r\n** 2. Desain UX\/UI\r\n*** 2.1 Wireframing\r\n**** 2.1.1 Tata Letak Desktop\r\n**** 2.1.2 Tata Letak Mobile\r\n*** 2.2 Sistem Desain\r\n**** 2.2.1 Perpustakaan Komponen\r\n**** 2.2.2 Tipografi & Panduan Gaya\r\n** 3. Pengembangan Teknis\r\n*** 3.1 Frontend\r\n**** 3.1.1 Templat Halaman\r\n**** 3.1.2 Integrasi API\r\n*** 3.2 CMS & Backend\r\n**** 3.2.1 Jenis Posting Kustom\r\n**** 3.2.2 Migrasi Basis Data\r\n** 4. QA & Peluncuran\r\n*** 4.1 Pengujian Multi-Browser\r\n*** 4.2 Migrasi Konten\r\n*** 4.3 Pemindahan DNS & Siap Rilis\r\n@endwbs<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nSunting Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Work<\/p>\n
Peta Pikiran<\/h4>\n
Tangkap ide-ide terstruktur, taksonomi fitur, dan catatan eksplorasi teknis secara cepat selama sesi tim.<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nSunting Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startmindmap\r\ntitle Peta Fitur Platform E-Commerce\r\n\r\n* Platform E-Commerce\r\n** Manajemen Akun Pengguna\r\n*** Otentikasi Sosial (Google, Apple)\r\n*** Otentikasi Faktor Ganda\r\n*** Riwayat Pesanan & Pelacakan\r\n** Katalog Produk & Pencarian\r\n*** Pencarian Berbasis Faset & Filter\r\n*** Sinkronisasi Persediaan\r\n*** Ulasan & Penilaian Produk\r\n** Checkout & Pembayaran\r\n*** Gerbang Pembayaran (Stripe, PayPal)\r\n*** Mesin Kupon & Promo\r\n*** Checkout Langsung untuk Tamu\r\n** Dukungan Pelanggan\r\n*** Asisten Obrolan Langsung\r\n*** Portal Pengembalian Otomatis\r\n@endmindmap<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nSunting Plantuml di VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"Mind<\/p>\n<\/section>\n
\n
5. Menulis dan Merender PlantUML Cepat: Keunggulan VPasCode<\/h2>\n
berbasis web yang khusus dibuat untuk tujuan iniAlat PlantUML<\/strong>menghilangkan semua hambatan ini sepenuhnya.<\/p>\n
Visual Paradigm VPasCode<\/a>adalah platform diagram sebagai kode yang terpadu yang dirancang khusus untuk menyederhanakan alur kerja dari teks ke diagram.<\/p>\n
Manfaat Utama VPasCode:<\/h3>\n