{"id":12253,"date":"2026-08-25T14:29:51","date_gmt":"2026-08-25T06:29:51","guid":{"rendered":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/"},"modified":"2026-09-03T23:26:08","modified_gmt":"2026-09-03T15:26:08","slug":"comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/","title":{"rendered":"Panduan Lengkap PlantUML: Diagram sebagai Kode"},"content":{"rendered":"<div class=\"chat-messages-container\">\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<h1 dir=\"ltr\"><span>Pendahuluan: Menguasai Diagram sebagai Kode dengan PlantUML dan Visual Paradigm<\/span><\/h1>\n<div dir=\"ltr\"><span>Dalam lanskap pengembangan perangkat lunak yang serba cepat saat ini, komunikasi visual yang jelas bukan lagi kemewahan\u2014melainkan kebutuhan. Namun, alat diagram tradisional sering kali menciptakan lebih banyak hambatan daripada yang mereka selesaikan. Antarmuka seret-lepas menghasilkan file biner yang sulit dikendalikan versi, menjadi usang seketika kode berubah, dan menciptakan kesenjangan antara pengembang dan dokumentasi.<\/span><\/div>\n<div><\/div>\n<div dir=\"ltr\"><span>Muncullah<\/span><strong dir=\"ltr\"><span>PlantUML<\/span><\/strong><span>: sebuah pendekatan revolusioner yang memperlakukan diagram sebagai kode. Dengan mendeskripsikan sistem Anda dalam teks biasa, Anda membuka kekuatan kontrol versi, generasi otomatis, dan kolaborasi yang mulus. Namun, mengapa berhenti hanya pada penulisan kode ketika AI dapat membantu Anda menulisnya dengan lebih baik?<\/span><\/div>\n<div><\/div>\n<div dir=\"ltr\"><span>Panduan komprehensif ini mengeksplorasi bagaimana<\/span><strong dir=\"ltr\"><span>PlantUML<\/span><\/strong><span>, dikombinasikan dengan<\/span><strong dir=\"ltr\"><span>Chatbot AI Visual Paradigm<\/span><\/strong><span>dan<\/span><strong dir=\"ltr\"><span>VPasCode<\/span><\/strong><span><span>, mengubah pembuatan diagram dari tugas yang membosankan menjadi alur kerja yang efisien dan cerdas. Baik Anda seorang arsitek berpengalaman yang memetakan mikroservice kompleks maupun seorang manajer produk yang membuat sketsa perjalanan pengguna, Anda akan menemukan cara memanfaatkan diagram berbasis teks untuk menciptakan visual berkualitas profesional yang dapat dipelihara dan berkembang seiring proyek Anda.<br \/>\n<\/span><\/span><\/p>\n<p id=\"fweyXvg\"><img alt=\"VPasCode: Mengubah Pembuatan Diagram: PlantUML &amp; Alur Kerja Berbasis AI\" class=\"alignnone wp-image-20135 size-full\" decoding=\"async\" height=\"572\" loading=\"lazy\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8-300x168.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8-768x429.png 768w\" width=\"1024\"\/><\/p>\n<\/div>\n<div dir=\"ltr\"><span>Dari diagram kelas hingga grafik Gantt, diagram urutan hingga model arsitektur C4, kami akan menelusuri contoh praktis dan praktik terbaik yang akan meningkatkan kualitas dokumentasi Anda. Katakan selamat tinggal pada file Visio yang sudah usang dan sapa diagram yang hidup di repositori Anda, berubah seiring kode Anda, dan berbicara dalam bahasa para pengembang.<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Mengapa PlantUML untuk Diagram sebagai Kode? Apa Keuntungannya?<\/h2>\n<p>PlantUML adalah alat sumber terbuka yang memungkinkan Anda membuat diagram UML dari deskripsi teks biasa. Berikut adalah keuntungan utamanya:<\/p>\n<p id=\"rZkfDjQ\"><img alt=\"Mengapa PlantUML untuk Diagram sebagai Kode: Manfaat &amp; Kekuatan Menggunakan VPasCode\" class=\"alignnone wp-image-20139 size-full\" decoding=\"async\" height=\"572\" loading=\"lazy\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3775a2b21.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3775a2b21.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3775a2b21-300x168.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3775a2b21-768x429.png 768w\" width=\"1024\"\/><\/p>\n<h3>1.\u00a0<strong>Ramah Kontrol Versi<\/strong><\/h3>\n<ul>\n<li>\n<p>Diagram berbasis teks dapat disimpan dalam repositori Git<\/p>\n<\/li>\n<li>\n<p>Mudah melacak perubahan, meninjau perbedaan, dan berkolaborasi<\/p>\n<\/li>\n<li>\n<p>Tidak ada file biner yang sulit digabungkan<\/p>\n<\/li>\n<\/ul>\n<h3>2.\u00a0<strong>Kemudahan Pemeliharaan<\/strong><\/h3>\n<ul>\n<li>\n<p>Mudah memperbarui dan memodifikasi diagram<\/p>\n<\/li>\n<li>\n<p>Gaya yang konsisten di semua diagram<\/p>\n<\/li>\n<li>\n<p>Komponen dan templat yang dapat digunakan kembali<\/p>\n<\/li>\n<\/ul>\n<h3>3.\u00a0<strong>Berpusat pada Pengembang<\/strong><\/h3>\n<ul>\n<li>\n<p>Tulis diagram dalam kode (tanpa seret-lepas)<\/p>\n<\/li>\n<li>\n<p>Terintegrasi dengan IDE dan alat dokumentasi<\/p>\n<\/li>\n<li>\n<p>Pembuatan diagram otomatis dari kode<\/p>\n<\/li>\n<\/ul>\n<h3>4.\u00a0<strong>Integrasi Alat<\/strong><\/h3>\n<ul>\n<li>\n<p>Bekerja sama dengan Chatbot AI Visual Paradigm untuk saran diagram yang cerdas<\/p>\n<\/li>\n<li>\n<p>VPasCode memberikan pengalaman pengeditan yang ditingkatkan<\/p>\n<\/li>\n<li>\n<p>Mendukung berbagai format output (PNG, SVG, PDF)<\/p>\n<\/li>\n<\/ul>\n<h3>5.\u00a0<strong>Dukungan Diagram yang Luas<\/strong><\/h3>\n<ul>\n<li>\n<p>Diagram kelas, diagram urutan, diagram aktivitas<\/p>\n<\/li>\n<li>\n<p>Diagram kasus penggunaan, diagram komponen, diagram penempatan<\/p>\n<\/li>\n<li>\n<p>Dan banyak lagi jenis diagram khusus<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>Alat: Chatbot AI Visual Paradigm + VPasCode<\/h2>\n<p id=\"pNICRlm\"><img alt=\"Diagram yang menunjukkan Visual Paradigm AI Chatbot menghasilkan kode PlantUML untuk lingkungan VPasCode.\" class=\"alignnone size-full wp-image-20140\" decoding=\"async\" height=\"572\" loading=\"lazy\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d37f36b05b.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d37f36b05b.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d37f36b05b-300x168.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d37f36b05b-768x429.png 768w\" width=\"1024\"\/><\/p>\n<h3>Chatbot AI Visual Paradigm<\/h3>\n<ul>\n<li>\n<p><strong>Saran Cerdas<\/strong>: Dapatkan rekomendasi berbasis AI untuk struktur diagram<\/p>\n<\/li>\n<li>\n<p><strong>Bahasa Alami ke Diagram<\/strong>: Deskripsikan sistem Anda dalam bahasa Inggris sederhana, dapatkan kode PlantUML<\/p>\n<\/li>\n<li>\n<p><strong>Praktik Terbaik<\/strong>: Pelajari pola dan konvensi diagram yang optimal<\/p>\n<\/li>\n<\/ul>\n<h3>VPasCode<\/h3>\n<ul>\n<li>\n<p><strong>Editor yang Ditingkatkan<\/strong>: Penyorotan sintaks, penyelesaian otomatis, deteksi kesalahan<\/p>\n<\/li>\n<li>\n<p><strong>Pratinjau Langsung<\/strong>: Lihat diagram Anda diperbarui secara real-time saat Anda mengetik<\/p>\n<\/li>\n<li>\n<p><strong>Integrasi<\/strong>: Bekerja secara mulus dengan seluruh rangkaian alat pemodelan Visual Paradigm<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>Contoh Diagram PlantUML<\/h2>\n<h3>1. Diagram Kelas<\/h3>\n<p id=\"MeKiwtT\"><img alt=\"Diagram kelas PlantUML yang menampilkan entitas Pelanggan, Pesanan, dan Produk dengan atribut dan metode.\" class=\"alignnone size-full wp-image-20141\" decoding=\"async\" height=\"564\" loading=\"lazy\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3827692ab.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3827692ab.png 304w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3827692ab-162x300.png 162w\" width=\"304\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB1JiGW4BqtwJzCUgfkUl3AmQnnzx0NRQ8_W80R4c0Q6FHW_7UXfKsxbGF9lFUOUJmu1kAUeZLr9GmF0PvZ8BJAmqzTGLgTAC15CdWZhzsr48vRTGCfoxNPOeUhehddnNrYUyVW2xKiR1ma9tNEvrgdli_h1elojwvcUwzUhhnXhdR6HlIKsZB8Uq49YPidYz5HmZ5-cC8S13SYcgHypv9iS4CFXWirpct_SzHxb57GuccOwfshWh_iKnky5kfcQ4gjp_3EpHJOnAN0-lNPhRtb9Pk71hhk4PhxfkJ7OBnKgAkfpioicE_3GA0ZhbrI7PMJwO_y0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB1JiGW4BqtwJzCUgfkUl3AmQnnzx0NRQ8_W80R4c0Q6FHW_7UXfKsxbGF9lFUOUJmu1kAUeZLr9GmF0PvZ8BJAmqzTGLgTAC15CdWZhzsr48vRTGCfoxNPOeUhehddnNrYUyVW2xKiR1ma9tNEvrgdli_h1elojwvcUwzUhhnXhdR6HlIKsZB8Uq49YPidYz5HmZ5-cC8S13SYcgHypv9iS4CFXWirpct_SzHxb57GuccOwfshWh_iKnky5kfcQ4gjp_3EpHJOnAN0-lNPhRtb9Pk71hhk4PhxfkJ7OBnKgAkfpioicE_3GA0ZhbrI7PMJwO_y0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB1JiGW4BqtwJzCUgfkUl3AmQnnzx0NRQ8_W80R4c0Q6FHW_7UXfKsxbGF9lFUOUJmu1kAUeZLr9GmF0PvZ8BJAmqzTGLgTAC15CdWZhzsr48vRTGCfoxNPOeUhehddnNrYUyVW2xKiR1ma9tNEvrgdli_h1elojwvcUwzUhhnXhdR6HlIKsZB8Uq49YPidYz5HmZ5-cC8S13SYcgHypv9iS4CFXWirpct_SzHxb57GuccOwfshWh_iKnky5kfcQ4gjp_3EpHJOnAN0-lNPhRtb9Pk71hhk4PhxfkJ7OBnKgAkfpioicE_3GA0ZhbrI7PMJwO_y0G00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nclass Customer {\r\n    -customerId: String\r\n    -name: String\r\n    -email: String\r\n    +getCustomerInfo(): void\r\n    +updateEmail(newEmail: String): void\r\n}\r\n\r\nclass Order {\r\n    -orderId: String\r\n    -orderDate: Date\r\n    -totalAmount: Double\r\n    +calculateTotal(): Double\r\n    +placeOrder(): void\r\n}\r\n\r\nclass Product {\r\n    -productId: String\r\n    -productName: String\r\n    -price: Double\r\n    +getPrice(): Double\r\n    +updatePrice(newPrice: Double): void\r\n}\r\n\r\nCustomer \"1\" --&gt; \"*\" Order : places\r\nOrder \"*\" --&gt; \"*\" Product : contains\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB1JiGW4BqtwJzCUgfkUl3AmQnnzx0NRQ8_W80R4c0Q6FHW_7UXfKsxbGF9lFUOUJmu1kAUeZLr9GmF0PvZ8BJAmqzTGLgTAC15CdWZhzsr48vRTGCfoxNPOeUhehddnNrYUyVW2xKiR1ma9tNEvrgdli_h1elojwvcUwzUhhnXhdR6HlIKsZB8Uq49YPidYz5HmZ5-cC8S13SYcgHypv9iS4CFXWirpct_SzHxb57GuccOwfshWh_iKnky5kfcQ4gjp_3EpHJOnAN0-lNPhRtb9Pk71hhk4PhxfkJ7OBnKgAkfpioicE_3GA0ZhbrI7PMJwO_y0G00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB1JiGW4BqtwJzCUgfkUl3AmQnnzx0NRQ8_W80R4c0Q6FHW_7UXfKsxbGF9lFUOUJmu1kAUeZLr9GmF0PvZ8BJAmqzTGLgTAC15CdWZhzsr48vRTGCfoxNPOeUhehddnNrYUyVW2xKiR1ma9tNEvrgdli_h1elojwvcUwzUhhnXhdR6HlIKsZB8Uq49YPidYz5HmZ5-cC8S13SYcgHypv9iS4CFXWirpct_SzHxb57GuccOwfshWh_iKnky5kfcQ4gjp_3EpHJOnAN0-lNPhRtb9Pk71hhk4PhxfkJ7OBnKgAkfpioicE_3GA0ZhbrI7PMJwO_y0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB1JiGW4BqtwJzCUgfkUl3AmQnnzx0NRQ8_W80R4c0Q6FHW_7UXfKsxbGF9lFUOUJmu1kAUeZLr9GmF0PvZ8BJAmqzTGLgTAC15CdWZhzsr48vRTGCfoxNPOeUhehddnNrYUyVW2xKiR1ma9tNEvrgdli_h1elojwvcUwzUhhnXhdR6HlIKsZB8Uq49YPidYz5HmZ5-cC8S13SYcgHypv9iS4CFXWirpct_SzHxb57GuccOwfshWh_iKnky5kfcQ4gjp_3EpHJOnAN0-lNPhRtb9Pk71hhk4PhxfkJ7OBnKgAkfpioicE_3GA0ZhbrI7PMJwO_y0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>2. Diagram Urutan<\/h3>\n<p id=\"ZeQJLKw\"><img alt=\"Diagram urutan login yang menampilkan interaksi antara Pengguna, Peramban Web, Gerbang API, Layanan Autentikasi, dan Layanan Pengguna.\" class=\"alignnone size-full wp-image-20142\" decoding=\"async\" height=\"458\" loading=\"lazy\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38398c3e0.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38398c3e0.png 643w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38398c3e0-300x214.png 300w\" width=\"643\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP9FJmCX4CNl97o7IU-cznvCjPiq9YPkMl-SPzdH9L90cBNnsmkuQ7VZ3Txx3VDcmZOo1XvFHWfKx08yHGfI-2HgfJrQXjKBTN0Rt3avAy1Opmlgfhs3FJATyQjGqtb9ZJp0aSAdLbImB2oO7676P66wIo55yQ-kQmxOmBrxqnOEz35IP2cgaPWfHMBQX-CZhD7hjScq5DLAL4crWMSqkaygx0BrP5cZYL8Kym_Q3QJUeK763YDLUzOgIxbS8MkNSyNHyApXnKI9tnCN1ThWNhMXdn6hFt-xSBdxnNl_xY9wPtE-tsLCRHFIwEXDAcmm3ft3q4kn9TkdN_0D\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP9FJmCX4CNl97o7IU-cznvCjPiq9YPkMl-SPzdH9L90cBNnsmkuQ7VZ3Txx3VDcmZOo1XvFHWfKx08yHGfI-2HgfJrQXjKBTN0Rt3avAy1Opmlgfhs3FJATyQjGqtb9ZJp0aSAdLbImB2oO7676P66wIo55yQ-kQmxOmBrxqnOEz35IP2cgaPWfHMBQX-CZhD7hjScq5DLAL4crWMSqkaygx0BrP5cZYL8Kym_Q3QJUeK763YDLUzOgIxbS8MkNSyNHyApXnKI9tnCN1ThWNhMXdn6hFt-xSBdxnNl_xY9wPtE-tsLCRHFIwEXDAcmm3ft3q4kn9TkdN_0D\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP9FJmCX4CNl97o7IU-cznvCjPiq9YPkMl-SPzdH9L90cBNnsmkuQ7VZ3Txx3VDcmZOo1XvFHWfKx08yHGfI-2HgfJrQXjKBTN0Rt3avAy1Opmlgfhs3FJATyQjGqtb9ZJp0aSAdLbImB2oO7676P66wIo55yQ-kQmxOmBrxqnOEz35IP2cgaPWfHMBQX-CZhD7hjScq5DLAL4crWMSqkaygx0BrP5cZYL8Kym_Q3QJUeK763YDLUzOgIxbS8MkNSyNHyApXnKI9tnCN1ThWNhMXdn6hFt-xSBdxnNl_xY9wPtE-tsLCRHFIwEXDAcmm3ft3q4kn9TkdN_0D\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nactor User\r\nparticipant \"Web Browser\" as Browser\r\nparticipant \"API Gateway\" as Gateway\r\nparticipant \"Auth Service\" as Auth\r\nparticipant \"User Service\" as UserService\r\n\r\nUser -&gt; Browser : Login Request\r\nBrowser -&gt; Gateway : POST \/api\/login\r\nGateway -&gt; Auth : Validate Credentials\r\nAuth -&gt; Auth : Check Database\r\nAuth --&gt; Gateway : Authentication Result\r\nGateway -&gt; UserService : Get User Profile\r\nUserService --&gt; Gateway : User Data\r\nGateway --&gt; Browser : Login Response\r\nBrowser --&gt; User : Display Dashboard\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP9FJmCX4CNl97o7IU-cznvCjPiq9YPkMl-SPzdH9L90cBNnsmkuQ7VZ3Txx3VDcmZOo1XvFHWfKx08yHGfI-2HgfJrQXjKBTN0Rt3avAy1Opmlgfhs3FJATyQjGqtb9ZJp0aSAdLbImB2oO7676P66wIo55yQ-kQmxOmBrxqnOEz35IP2cgaPWfHMBQX-CZhD7hjScq5DLAL4crWMSqkaygx0BrP5cZYL8Kym_Q3QJUeK763YDLUzOgIxbS8MkNSyNHyApXnKI9tnCN1ThWNhMXdn6hFt-xSBdxnNl_xY9wPtE-tsLCRHFIwEXDAcmm3ft3q4kn9TkdN_0D\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP9FJmCX4CNl97o7IU-cznvCjPiq9YPkMl-SPzdH9L90cBNnsmkuQ7VZ3Txx3VDcmZOo1XvFHWfKx08yHGfI-2HgfJrQXjKBTN0Rt3avAy1Opmlgfhs3FJATyQjGqtb9ZJp0aSAdLbImB2oO7676P66wIo55yQ-kQmxOmBrxqnOEz35IP2cgaPWfHMBQX-CZhD7hjScq5DLAL4crWMSqkaygx0BrP5cZYL8Kym_Q3QJUeK763YDLUzOgIxbS8MkNSyNHyApXnKI9tnCN1ThWNhMXdn6hFt-xSBdxnNl_xY9wPtE-tsLCRHFIwEXDAcmm3ft3q4kn9TkdN_0D\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP9FJmCX4CNl97o7IU-cznvCjPiq9YPkMl-SPzdH9L90cBNnsmkuQ7VZ3Txx3VDcmZOo1XvFHWfKx08yHGfI-2HgfJrQXjKBTN0Rt3avAy1Opmlgfhs3FJATyQjGqtb9ZJp0aSAdLbImB2oO7676P66wIo55yQ-kQmxOmBrxqnOEz35IP2cgaPWfHMBQX-CZhD7hjScq5DLAL4crWMSqkaygx0BrP5cZYL8Kym_Q3QJUeK763YDLUzOgIxbS8MkNSyNHyApXnKI9tnCN1ThWNhMXdn6hFt-xSBdxnNl_xY9wPtE-tsLCRHFIwEXDAcmm3ft3q4kn9TkdN_0D\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>3. Diagram Aktivitas<\/h3>\n<p id=\"aHFktKE\"><img alt=\"Diagram aktivitas PlantUML yang mengilustrasikan alur kerja pemrosesan pesanan dengan validasi pembayaran dan pembaruan inventaris.\" class=\"alignnone size-full wp-image-20143\" decoding=\"async\" height=\"484\" loading=\"lazy\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d384ae28eb.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d384ae28eb.png 342w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d384ae28eb-212x300.png 212w\" width=\"342\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FOz12i8m44NtWTnXblKAkb0G4JTQ5Ds7v1T7cgGaKw6tTsp5tV3-CFF-heehCiRUcdcoPds51xz1bn9GDjPmHqthfeWaz70zX-sAv8b4pOIwiePetPRiKIlzrZOpl0_12UYKtefocHPwH4BvySmU2xqX1Thdr769JZWdEaJ7lOReAwX9UNbqnGjU_cfApbcucsW_LibnXdgAE-rnU_90QXP6_pNIVB1cfwcs_G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FOz12i8m44NtWTnXblKAkb0G4JTQ5Ds7v1T7cgGaKw6tTsp5tV3-CFF-heehCiRUcdcoPds51xz1bn9GDjPmHqthfeWaz70zX-sAv8b4pOIwiePetPRiKIlzrZOpl0_12UYKtefocHPwH4BvySmU2xqX1Thdr769JZWdEaJ7lOReAwX9UNbqnGjU_cfApbcucsW_LibnXdgAE-rnU_90QXP6_pNIVB1cfwcs_G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FOz12i8m44NtWTnXblKAkb0G4JTQ5Ds7v1T7cgGaKw6tTsp5tV3-CFF-heehCiRUcdcoPds51xz1bn9GDjPmHqthfeWaz70zX-sAv8b4pOIwiePetPRiKIlzrZOpl0_12UYKtefocHPwH4BvySmU2xqX1Thdr769JZWdEaJ7lOReAwX9UNbqnGjU_cfApbcucsW_LibnXdgAE-rnU_90QXP6_pNIVB1cfwcs_G00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nstart\r\n:Receive Order;\r\nif (Payment Valid?) then (yes)\r\n  :Process Payment;\r\n  :Update Inventory;\r\n  :Generate Invoice;\r\n  :Send Confirmation Email;\r\nelse (no)\r\n  :Reject Order;\r\n  :Notify Customer;\r\nendif\r\n:Ship Product;\r\nstop\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FOz12i8m44NtWTnXblKAkb0G4JTQ5Ds7v1T7cgGaKw6tTsp5tV3-CFF-heehCiRUcdcoPds51xz1bn9GDjPmHqthfeWaz70zX-sAv8b4pOIwiePetPRiKIlzrZOpl0_12UYKtefocHPwH4BvySmU2xqX1Thdr769JZWdEaJ7lOReAwX9UNbqnGjU_cfApbcucsW_LibnXdgAE-rnU_90QXP6_pNIVB1cfwcs_G00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FOz12i8m44NtWTnXblKAkb0G4JTQ5Ds7v1T7cgGaKw6tTsp5tV3-CFF-heehCiRUcdcoPds51xz1bn9GDjPmHqthfeWaz70zX-sAv8b4pOIwiePetPRiKIlzrZOpl0_12UYKtefocHPwH4BvySmU2xqX1Thdr769JZWdEaJ7lOReAwX9UNbqnGjU_cfApbcucsW_LibnXdgAE-rnU_90QXP6_pNIVB1cfwcs_G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FOz12i8m44NtWTnXblKAkb0G4JTQ5Ds7v1T7cgGaKw6tTsp5tV3-CFF-heehCiRUcdcoPds51xz1bn9GDjPmHqthfeWaz70zX-sAv8b4pOIwiePetPRiKIlzrZOpl0_12UYKtefocHPwH4BvySmU2xqX1Thdr769JZWdEaJ7lOReAwX9UNbqnGjU_cfApbcucsW_LibnXdgAE-rnU_90QXP6_pNIVB1cfwcs_G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>4. Diagram Kasus Penggunaan<\/h3>\n<p id=\"oVpEcFT\"><img alt=\"Diagram kasus penggunaan Sistem E-Commerce yang menampilkan interaksi Pelanggan dan Admin dengan Jelajahi Produk, Tempatkan Pesanan, Kelola Inventaris, Lihat Laporan, dan Proses Pengembalian Dana.\" class=\"alignnone size-full wp-image-20144\" decoding=\"async\" height=\"327\" loading=\"lazy\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d385ecbf11.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d385ecbf11.png 579w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d385ecbf11-300x169.png 300w\" width=\"579\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP6nJWCn38RtI7a7w_Qh12qB0ogS61WG5QZiKU9U8rqIv3YK2l7kkE5QAKpERt-sVolhp8QuX4ch2NSCd83yk6Tmdj2oJr4hOpaHT4F9d09I1oR3MLogzoxuM4lrfPLMfm4cZXD2zzWFAGXk4TwEcJ5qyAqLGCbeJHRWWT91ueQIAvPp7RGThXfcCndfVo4tUzWErqtzsKGp8Zp5JupYwJX3omPwztY0L_n8TDcoQhTGifYpCBiItOpSQFLpEkbyDlJztP-_VnbnLE-VvRALgrRALEc0nQ8Ak0NyOemkQxMM89_o2m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP6nJWCn38RtI7a7w_Qh12qB0ogS61WG5QZiKU9U8rqIv3YK2l7kkE5QAKpERt-sVolhp8QuX4ch2NSCd83yk6Tmdj2oJr4hOpaHT4F9d09I1oR3MLogzoxuM4lrfPLMfm4cZXD2zzWFAGXk4TwEcJ5qyAqLGCbeJHRWWT91ueQIAvPp7RGThXfcCndfVo4tUzWErqtzsKGp8Zp5JupYwJX3omPwztY0L_n8TDcoQhTGifYpCBiItOpSQFLpEkbyDlJztP-_VnbnLE-VvRALgrRALEc0nQ8Ak0NyOemkQxMM89_o2m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP6nJWCn38RtI7a7w_Qh12qB0ogS61WG5QZiKU9U8rqIv3YK2l7kkE5QAKpERt-sVolhp8QuX4ch2NSCd83yk6Tmdj2oJr4hOpaHT4F9d09I1oR3MLogzoxuM4lrfPLMfm4cZXD2zzWFAGXk4TwEcJ5qyAqLGCbeJHRWWT91ueQIAvPp7RGThXfcCndfVo4tUzWErqtzsKGp8Zp5JupYwJX3omPwztY0L_n8TDcoQhTGifYpCBiItOpSQFLpEkbyDlJztP-_VnbnLE-VvRALgrRALEc0nQ8Ak0NyOemkQxMM89_o2m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nleft to right direction\r\nactor \"Customer\" as Customer\r\nactor \"Admin\" as Admin\r\n\r\nrectangle \"E-Commerce System\" {\r\n  usecase \"Browse Products\" as UC1\r\n  usecase \"Place Order\" as UC2\r\n  usecase \"Manage Inventory\" as UC3\r\n  usecase \"View Reports\" as UC4\r\n  usecase \"Process Refund\" as UC5\r\n}\r\n\r\nCustomer --&gt; UC1\r\nCustomer --&gt; UC2\r\nAdmin --&gt; UC3\r\nAdmin --&gt; UC4\r\nAdmin --&gt; UC5\r\nUC2 ..&gt; UC5 : extends\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP6nJWCn38RtI7a7w_Qh12qB0ogS61WG5QZiKU9U8rqIv3YK2l7kkE5QAKpERt-sVolhp8QuX4ch2NSCd83yk6Tmdj2oJr4hOpaHT4F9d09I1oR3MLogzoxuM4lrfPLMfm4cZXD2zzWFAGXk4TwEcJ5qyAqLGCbeJHRWWT91ueQIAvPp7RGThXfcCndfVo4tUzWErqtzsKGp8Zp5JupYwJX3omPwztY0L_n8TDcoQhTGifYpCBiItOpSQFLpEkbyDlJztP-_VnbnLE-VvRALgrRALEc0nQ8Ak0NyOemkQxMM89_o2m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP6nJWCn38RtI7a7w_Qh12qB0ogS61WG5QZiKU9U8rqIv3YK2l7kkE5QAKpERt-sVolhp8QuX4ch2NSCd83yk6Tmdj2oJr4hOpaHT4F9d09I1oR3MLogzoxuM4lrfPLMfm4cZXD2zzWFAGXk4TwEcJ5qyAqLGCbeJHRWWT91ueQIAvPp7RGThXfcCndfVo4tUzWErqtzsKGp8Zp5JupYwJX3omPwztY0L_n8TDcoQhTGifYpCBiItOpSQFLpEkbyDlJztP-_VnbnLE-VvRALgrRALEc0nQ8Ak0NyOemkQxMM89_o2m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP6nJWCn38RtI7a7w_Qh12qB0ogS61WG5QZiKU9U8rqIv3YK2l7kkE5QAKpERt-sVolhp8QuX4ch2NSCd83yk6Tmdj2oJr4hOpaHT4F9d09I1oR3MLogzoxuM4lrfPLMfm4cZXD2zzWFAGXk4TwEcJ5qyAqLGCbeJHRWWT91ueQIAvPp7RGThXfcCndfVo4tUzWErqtzsKGp8Zp5JupYwJX3omPwztY0L_n8TDcoQhTGifYpCBiItOpSQFLpEkbyDlJztP-_VnbnLE-VvRALgrRALEc0nQ8Ak0NyOemkQxMM89_o2m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>5. Diagram Komponen<\/h3>\n<p id=\"fkzfZrN\"><img alt=\"Diagram komponen PlantUML yang menampilkan aplikasi web dan seluler frontend yang terhubung ke Gerbang API backend dan mikrolayanan seperti Pesanan, Autentikasi, dan Pembayaran.\" class=\"alignnone size-full wp-image-20145\" decoding=\"async\" height=\"452\" loading=\"lazy\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d386d88165.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d386d88165.png 729w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d386d88165-300x186.png 300w\" width=\"729\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLAx3i8m3DmhzH-ixlm20eH033ma1WR4uBO68afRfGQ44FzEueQI09jzTpxdaWmQHisNSn57DMOdF10a4rsLJ6MUm2EE0BORIc5OruNAa5LLxW0RC9Y1X9vNgIh8AeHfMo6VSUJPZanXN65D-geoQjxsmzKCfiXqmxiOkBhbBdoaajtczwZ8BELwaIvrJZfG2E9BLdW_6xT0v31VjgXOxV-jz8bkG4Bco9XYOrAENPNOWV78akrTGQ_N_sJhRYc4NI5W4D0dmbm-ynt6LuhWRm9laOZigNycBHZQT_30lAhvGIy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLAx3i8m3DmhzH-ixlm20eH033ma1WR4uBO68afRfGQ44FzEueQI09jzTpxdaWmQHisNSn57DMOdF10a4rsLJ6MUm2EE0BORIc5OruNAa5LLxW0RC9Y1X9vNgIh8AeHfMo6VSUJPZanXN65D-geoQjxsmzKCfiXqmxiOkBhbBdoaajtczwZ8BELwaIvrJZfG2E9BLdW_6xT0v31VjgXOxV-jz8bkG4Bco9XYOrAENPNOWV78akrTGQ_N_sJhRYc4NI5W4D0dmbm-ynt6LuhWRm9laOZigNycBHZQT_30lAhvGIy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLAx3i8m3DmhzH-ixlm20eH033ma1WR4uBO68afRfGQ44FzEueQI09jzTpxdaWmQHisNSn57DMOdF10a4rsLJ6MUm2EE0BORIc5OruNAa5LLxW0RC9Y1X9vNgIh8AeHfMo6VSUJPZanXN65D-geoQjxsmzKCfiXqmxiOkBhbBdoaajtczwZ8BELwaIvrJZfG2E9BLdW_6xT0v31VjgXOxV-jz8bkG4Bco9XYOrAENPNOWV78akrTGQ_N_sJhRYc4NI5W4D0dmbm-ynt6LuhWRm9laOZigNycBHZQT_30lAhvGIy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\npackage \"Frontend\" {\r\n  [Web Application] as WebApp\r\n  [Mobile App] as MobileApp\r\n}\r\n\r\npackage \"Backend Services\" {\r\n  [API Gateway] as Gateway\r\n  [Authentication Service] as AuthService\r\n  [Order Service] as OrderService\r\n  [Payment Service] as PaymentService\r\n  [Notification Service] as NotificationService\r\n}\r\n\r\ndatabase \"Database\" as DB\r\n\r\nWebApp --&gt; Gateway\r\nMobileApp --&gt; Gateway\r\nGateway --&gt; AuthService\r\nGateway --&gt; OrderService\r\nGateway --&gt; PaymentService\r\nOrderService --&gt; NotificationService\r\nAuthService --&gt; DB\r\nOrderService --&gt; DB\r\nPaymentService --&gt; DB\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLAx3i8m3DmhzH-ixlm20eH033ma1WR4uBO68afRfGQ44FzEueQI09jzTpxdaWmQHisNSn57DMOdF10a4rsLJ6MUm2EE0BORIc5OruNAa5LLxW0RC9Y1X9vNgIh8AeHfMo6VSUJPZanXN65D-geoQjxsmzKCfiXqmxiOkBhbBdoaajtczwZ8BELwaIvrJZfG2E9BLdW_6xT0v31VjgXOxV-jz8bkG4Bco9XYOrAENPNOWV78akrTGQ_N_sJhRYc4NI5W4D0dmbm-ynt6LuhWRm9laOZigNycBHZQT_30lAhvGIy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLAx3i8m3DmhzH-ixlm20eH033ma1WR4uBO68afRfGQ44FzEueQI09jzTpxdaWmQHisNSn57DMOdF10a4rsLJ6MUm2EE0BORIc5OruNAa5LLxW0RC9Y1X9vNgIh8AeHfMo6VSUJPZanXN65D-geoQjxsmzKCfiXqmxiOkBhbBdoaajtczwZ8BELwaIvrJZfG2E9BLdW_6xT0v31VjgXOxV-jz8bkG4Bco9XYOrAENPNOWV78akrTGQ_N_sJhRYc4NI5W4D0dmbm-ynt6LuhWRm9laOZigNycBHZQT_30lAhvGIy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLAx3i8m3DmhzH-ixlm20eH033ma1WR4uBO68afRfGQ44FzEueQI09jzTpxdaWmQHisNSn57DMOdF10a4rsLJ6MUm2EE0BORIc5OruNAa5LLxW0RC9Y1X9vNgIh8AeHfMo6VSUJPZanXN65D-geoQjxsmzKCfiXqmxiOkBhbBdoaajtczwZ8BELwaIvrJZfG2E9BLdW_6xT0v31VjgXOxV-jz8bkG4Bco9XYOrAENPNOWV78akrTGQ_N_sJhRYc4NI5W4D0dmbm-ynt6LuhWRm9laOZigNycBHZQT_30lAhvGIy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6. Diagram Deployment<\/h3>\n<p id=\"oDhKFeA\"><img alt=\"Diagram penyebaran PlantUML yang menampilkan penyeimbang beban, server web, server aplikasi, dan replikasi basis data.\" class=\"alignnone size-full wp-image-20147\" decoding=\"async\" height=\"650\" loading=\"lazy\" sizes=\"auto, (max-width: 609px) 100vw, 609px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d389188b6e.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d389188b6e.png 609w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d389188b6e-281x300.png 281w\" width=\"609\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP6zgiCm38LtWzz1P6-X6UzG6fCnGsc7pgeZBeR43hPJAANlVXt5IN-ucwJpMKUI3o6YZsFVIM5TIr0q3bjGsA7Lv0l008s2XnG0itwXAvp9tyZ3ZkNBUVUlMcQrbE8fnTA-6eREQ8p6sGmobihv6Ljfrm_EaerGg34OIo6DuNwDPbWrNqoD4Q7IcZ6yvvvrrNnOJzGL0xtxrkhTjbs8ukXDZ_wUTCPoMgjFwaIyp4BbTABODXrkizdF1rhZT8vKu6HTUYgLtwNNIIPX6LIATHRORlSlJ_W1FyUHWXG7ictwrJy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP6zgiCm38LtWzz1P6-X6UzG6fCnGsc7pgeZBeR43hPJAANlVXt5IN-ucwJpMKUI3o6YZsFVIM5TIr0q3bjGsA7Lv0l008s2XnG0itwXAvp9tyZ3ZkNBUVUlMcQrbE8fnTA-6eREQ8p6sGmobihv6Ljfrm_EaerGg34OIo6DuNwDPbWrNqoD4Q7IcZ6yvvvrrNnOJzGL0xtxrkhTjbs8ukXDZ_wUTCPoMgjFwaIyp4BbTABODXrkizdF1rhZT8vKu6HTUYgLtwNNIIPX6LIATHRORlSlJ_W1FyUHWXG7ictwrJy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP6zgiCm38LtWzz1P6-X6UzG6fCnGsc7pgeZBeR43hPJAANlVXt5IN-ucwJpMKUI3o6YZsFVIM5TIr0q3bjGsA7Lv0l008s2XnG0itwXAvp9tyZ3ZkNBUVUlMcQrbE8fnTA-6eREQ8p6sGmobihv6Ljfrm_EaerGg34OIo6DuNwDPbWrNqoD4Q7IcZ6yvvvrrNnOJzGL0xtxrkhTjbs8ukXDZ_wUTCPoMgjFwaIyp4BbTABODXrkizdF1rhZT8vKu6HTUYgLtwNNIIPX6LIATHRORlSlJ_W1FyUHWXG7ictwrJy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nnode \"Load Balancer\" as LB {\r\n  node \"Web Server 1\" as WS1\r\n  node \"Web Server 2\" as WS2\r\n}\r\n\r\nnode \"Application Server\" as AppServer {\r\n  component \"Business Logic\" as BL\r\n  component \"Data Access Layer\" as DAL\r\n}\r\n\r\nnode \"Database Server\" as DBServer {\r\n  database \"Primary DB\" as PrimaryDB\r\n  database \"Replica DB\" as ReplicaDB\r\n}\r\n\r\nLB --&gt; WS1\r\nLB --&gt; WS2\r\nWS1 --&gt; AppServer\r\nWS2 --&gt; AppServer\r\nAppServer --&gt; DBServer\r\nPrimaryDB ..&gt; ReplicaDB : replicates\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP6zgiCm38LtWzz1P6-X6UzG6fCnGsc7pgeZBeR43hPJAANlVXt5IN-ucwJpMKUI3o6YZsFVIM5TIr0q3bjGsA7Lv0l008s2XnG0itwXAvp9tyZ3ZkNBUVUlMcQrbE8fnTA-6eREQ8p6sGmobihv6Ljfrm_EaerGg34OIo6DuNwDPbWrNqoD4Q7IcZ6yvvvrrNnOJzGL0xtxrkhTjbs8ukXDZ_wUTCPoMgjFwaIyp4BbTABODXrkizdF1rhZT8vKu6HTUYgLtwNNIIPX6LIATHRORlSlJ_W1FyUHWXG7ictwrJy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP6zgiCm38LtWzz1P6-X6UzG6fCnGsc7pgeZBeR43hPJAANlVXt5IN-ucwJpMKUI3o6YZsFVIM5TIr0q3bjGsA7Lv0l008s2XnG0itwXAvp9tyZ3ZkNBUVUlMcQrbE8fnTA-6eREQ8p6sGmobihv6Ljfrm_EaerGg34OIo6DuNwDPbWrNqoD4Q7IcZ6yvvvrrNnOJzGL0xtxrkhTjbs8ukXDZ_wUTCPoMgjFwaIyp4BbTABODXrkizdF1rhZT8vKu6HTUYgLtwNNIIPX6LIATHRORlSlJ_W1FyUHWXG7ictwrJy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP6zgiCm38LtWzz1P6-X6UzG6fCnGsc7pgeZBeR43hPJAANlVXt5IN-ucwJpMKUI3o6YZsFVIM5TIr0q3bjGsA7Lv0l008s2XnG0itwXAvp9tyZ3ZkNBUVUlMcQrbE8fnTA-6eREQ8p6sGmobihv6Ljfrm_EaerGg34OIo6DuNwDPbWrNqoD4Q7IcZ6yvvvrrNnOJzGL0xtxrkhTjbs8ukXDZ_wUTCPoMgjFwaIyp4BbTABODXrkizdF1rhZT8vKu6HTUYgLtwNNIIPX6LIATHRORlSlJ_W1FyUHWXG7ictwrJy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>7. Diagram State<br \/>\n<img alt=\"Diagram keadaan PlantUML yang mengilustrasikan siklus hidup pesanan dari pembuatan hingga pengiriman atau pembatalan.\" class=\"alignnone size-full wp-image-20148\" decoding=\"async\" height=\"902\" loading=\"lazy\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d389e5b0fa.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d389e5b0fa.png 327w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d389e5b0fa-109x300.png 109w\" width=\"327\"\/><\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB12i8m3BqN-W_5ex0Vy232nAl2ZkAXRb4BRHrT9_ZtfYNDflFsylAIvRrkDqGTukYi58WYgDKnT11K7G2hRgNqK30hJlhjm4Tr0jyPVyyQueXQIEkdlvdWQ26nJ4xoy6nX67Wfbwne7gRlQGrXxkt1cXS4wdB5_Lhx5gmjhaebXHJdzKLLrNQoIY2JtzxKHZNZrPceSb9I_BHd4smGPqeIpTWcJt_7-AIP_g1Dld6nCd-70qfNfPVyocpMJchAAqaHbVCBcnIS6Me8l_7jN6yX0eR2zoKnPYR5DC7K3XtX3_K1\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB12i8m3BqN-W_5ex0Vy232nAl2ZkAXRb4BRHrT9_ZtfYNDflFsylAIvRrkDqGTukYi58WYgDKnT11K7G2hRgNqK30hJlhjm4Tr0jyPVyyQueXQIEkdlvdWQ26nJ4xoy6nX67Wfbwne7gRlQGrXxkt1cXS4wdB5_Lhx5gmjhaebXHJdzKLLrNQoIY2JtzxKHZNZrPceSb9I_BHd4smGPqeIpTWcJt_7-AIP_g1Dld6nCd-70qfNfPVyocpMJchAAqaHbVCBcnIS6Me8l_7jN6yX0eR2zoKnPYR5DC7K3XtX3_K1\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB12i8m3BqN-W_5ex0Vy232nAl2ZkAXRb4BRHrT9_ZtfYNDflFsylAIvRrkDqGTukYi58WYgDKnT11K7G2hRgNqK30hJlhjm4Tr0jyPVyyQueXQIEkdlvdWQ26nJ4xoy6nX67Wfbwne7gRlQGrXxkt1cXS4wdB5_Lhx5gmjhaebXHJdzKLLrNQoIY2JtzxKHZNZrPceSb9I_BHd4smGPqeIpTWcJt_7-AIP_g1Dld6nCd-70qfNfPVyocpMJchAAqaHbVCBcnIS6Me8l_7jN6yX0eR2zoKnPYR5DC7K3XtX3_K1\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nstate \"Order Created\" as Created\r\nstate \"Payment Pending\" as PaymentPending\r\nstate \"Payment Confirmed\" as PaymentConfirmed\r\nstate \"Processing\" as Processing\r\nstate \"Shipped\" as Shipped\r\nstate \"Delivered\" as Delivered\r\nstate \"Cancelled\" as Cancelled\r\n\r\n[*] --&gt; Created\r\nCreated --&gt; PaymentPending : Submit Order\r\nPaymentPending --&gt; PaymentConfirmed : Payment Success\r\nPaymentPending --&gt; Cancelled : Payment Failed\r\nPaymentConfirmed --&gt; Processing : Start Processing\r\nProcessing --&gt; Shipped : Ship Order\r\nShipped --&gt; Delivered : Delivery Complete\r\nCancelled --&gt; [*]\r\nDelivered --&gt; [*]\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB12i8m3BqN-W_5ex0Vy232nAl2ZkAXRb4BRHrT9_ZtfYNDflFsylAIvRrkDqGTukYi58WYgDKnT11K7G2hRgNqK30hJlhjm4Tr0jyPVyyQueXQIEkdlvdWQ26nJ4xoy6nX67Wfbwne7gRlQGrXxkt1cXS4wdB5_Lhx5gmjhaebXHJdzKLLrNQoIY2JtzxKHZNZrPceSb9I_BHd4smGPqeIpTWcJt_7-AIP_g1Dld6nCd-70qfNfPVyocpMJchAAqaHbVCBcnIS6Me8l_7jN6yX0eR2zoKnPYR5DC7K3XtX3_K1\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB12i8m3BqN-W_5ex0Vy232nAl2ZkAXRb4BRHrT9_ZtfYNDflFsylAIvRrkDqGTukYi58WYgDKnT11K7G2hRgNqK30hJlhjm4Tr0jyPVyyQueXQIEkdlvdWQ26nJ4xoy6nX67Wfbwne7gRlQGrXxkt1cXS4wdB5_Lhx5gmjhaebXHJdzKLLrNQoIY2JtzxKHZNZrPceSb9I_BHd4smGPqeIpTWcJt_7-AIP_g1Dld6nCd-70qfNfPVyocpMJchAAqaHbVCBcnIS6Me8l_7jN6yX0eR2zoKnPYR5DC7K3XtX3_K1\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RLB12i8m3BqN-W_5ex0Vy232nAl2ZkAXRb4BRHrT9_ZtfYNDflFsylAIvRrkDqGTukYi58WYgDKnT11K7G2hRgNqK30hJlhjm4Tr0jyPVyyQueXQIEkdlvdWQ26nJ4xoy6nX67Wfbwne7gRlQGrXxkt1cXS4wdB5_Lhx5gmjhaebXHJdzKLLrNQoIY2JtzxKHZNZrPceSb9I_BHd4smGPqeIpTWcJt_7-AIP_g1Dld6nCd-70qfNfPVyocpMJchAAqaHbVCBcnIS6Me8l_7jN6yX0eR2zoKnPYR5DC7K3XtX3_K1\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>8. Diagram Objek<\/h3>\n<p id=\"BRkYXfb\"><img alt=\"Diagram Objek PlantUML yang menampilkan hubungan antara instance Customer1, Order1, dan Product1 dengan nilai atribut tertentu.\" class=\"alignnone size-full wp-image-20149\" decoding=\"async\" height=\"373\" loading=\"lazy\" sizes=\"auto, (max-width: 245px) 100vw, 245px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38cc7cdc1.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38cc7cdc1.png 245w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38cc7cdc1-197x300.png 197w\" width=\"245\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP112i8m44NtWTmXT1z9kn2xK2hjHX4LRn3J0LkIJgbJ4CIxsxIfehkPz-4_Ph8xwOvwPpd3Qms6HDxV2HrqiNXo9eG9wwuKQn7bIiMHnursuC4URuqe44O8JbVMqtgW6JoqQoqi3BeXVN7sKPowyjEFVfxAJvT2nhDWv8McqPAeP2dLIYPgp0X9swt3lg4XJT9qaQQ_XdE7PMyeEDffcopdsH3eCLnoq2rX6vBAm7_pzozIRi89d8LJF9gTd6NGbCDBtm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP112i8m44NtWTmXT1z9kn2xK2hjHX4LRn3J0LkIJgbJ4CIxsxIfehkPz-4_Ph8xwOvwPpd3Qms6HDxV2HrqiNXo9eG9wwuKQn7bIiMHnursuC4URuqe44O8JbVMqtgW6JoqQoqi3BeXVN7sKPowyjEFVfxAJvT2nhDWv8McqPAeP2dLIYPgp0X9swt3lg4XJT9qaQQ_XdE7PMyeEDffcopdsH3eCLnoq2rX6vBAm7_pzozIRi89d8LJF9gTd6NGbCDBtm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP112i8m44NtWTmXT1z9kn2xK2hjHX4LRn3J0LkIJgbJ4CIxsxIfehkPz-4_Ph8xwOvwPpd3Qms6HDxV2HrqiNXo9eG9wwuKQn7bIiMHnursuC4URuqe44O8JbVMqtgW6JoqQoqi3BeXVN7sKPowyjEFVfxAJvT2nhDWv8McqPAeP2dLIYPgp0X9swt3lg4XJT9qaQQ_XdE7PMyeEDffcopdsH3eCLnoq2rX6vBAm7_pzozIRi89d8LJF9gTd6NGbCDBtm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nobject Customer1 {\r\n  customerId = \"C001\"\r\n  name = \"John Doe\"\r\n  email = \"john@example.com\"\r\n}\r\n\r\nobject Order1 {\r\n  orderId = \"ORD-1001\"\r\n  orderDate = \"2026-08-20\"\r\n  totalAmount = 299.99\r\n}\r\n\r\nobject Product1 {\r\n  productId = \"P001\"\r\n  productName = \"Laptop\"\r\n  price = 299.99\r\n}\r\n\r\nCustomer1 --&gt; Order1\r\nOrder1 --&gt; Product1\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP112i8m44NtWTmXT1z9kn2xK2hjHX4LRn3J0LkIJgbJ4CIxsxIfehkPz-4_Ph8xwOvwPpd3Qms6HDxV2HrqiNXo9eG9wwuKQn7bIiMHnursuC4URuqe44O8JbVMqtgW6JoqQoqi3BeXVN7sKPowyjEFVfxAJvT2nhDWv8McqPAeP2dLIYPgp0X9swt3lg4XJT9qaQQ_XdE7PMyeEDffcopdsH3eCLnoq2rX6vBAm7_pzozIRi89d8LJF9gTd6NGbCDBtm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP112i8m44NtWTmXT1z9kn2xK2hjHX4LRn3J0LkIJgbJ4CIxsxIfehkPz-4_Ph8xwOvwPpd3Qms6HDxV2HrqiNXo9eG9wwuKQn7bIiMHnursuC4URuqe44O8JbVMqtgW6JoqQoqi3BeXVN7sKPowyjEFVfxAJvT2nhDWv8McqPAeP2dLIYPgp0X9swt3lg4XJT9qaQQ_XdE7PMyeEDffcopdsH3eCLnoq2rX6vBAm7_pzozIRi89d8LJF9gTd6NGbCDBtm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NP112i8m44NtWTmXT1z9kn2xK2hjHX4LRn3J0LkIJgbJ4CIxsxIfehkPz-4_Ph8xwOvwPpd3Qms6HDxV2HrqiNXo9eG9wwuKQn7bIiMHnursuC4URuqe44O8JbVMqtgW6JoqQoqi3BeXVN7sKPowyjEFVfxAJvT2nhDWv8McqPAeP2dLIYPgp0X9swt3lg4XJT9qaQQ_XdE7PMyeEDffcopdsH3eCLnoq2rX6vBAm7_pzozIRi89d8LJF9gTd6NGbCDBtm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>9. Diagram Waktu<\/h3>\n<p id=\"EObwXSG\"><img alt=\"Diagram waktu PlantUML yang menampilkan keadaan interaksi klien dan server seiring waktu.\" class=\"alignnone size-full wp-image-20151\" decoding=\"async\" height=\"204\" loading=\"lazy\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38f22ba68.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38f22ba68.png 464w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d38f22ba68-300x132.png 300w\" width=\"464\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ROzB3i8m34JtaN87AoVWkw_44JX1QKV8KaYAdVJyk6G1GUn6Csz6zg1bb58VqJl9jwg5mYKoKWaqAZNvYQwG5VAEclJEks7dNGE9bNYEC6_VcK6HPavt4Zmhj0GZ3aQqaOrO94zGDSQYOnTzbNN9IR6rJ_s-O0Allz3vtsKsPk--0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ROzB3i8m34JtaN87AoVWkw_44JX1QKV8KaYAdVJyk6G1GUn6Csz6zg1bb58VqJl9jwg5mYKoKWaqAZNvYQwG5VAEclJEks7dNGE9bNYEC6_VcK6HPavt4Zmhj0GZ3aQqaOrO94zGDSQYOnTzbNN9IR6rJ_s-O0Allz3vtsKsPk--0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VP1B2iCm34Jt1j_1-0JzxhFliYTGi1f4Ojb8JizVDQ6ajANBuJrcX3fj86tEatTI-bbRY9U9a6DGx6402alSw1NbZhBXDNldNRVpRf6D9U0XD4em1XWRtOpkFt7Co0C9vL1HCd43u6ZYmSIrzMLcp5MAeXezVj6jHr1hONsMd7wjeKdmRft_duoSx3CF\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nrobust \"Klien\" sebagai Klien\r\nrobust \"Server\" sebagai Server\r\n\r\n@0\r\nKlien sedang tidak aktif\r\n@10\r\nKlien sedang \"mengirim permintaan\"\r\n@20\r\nServer sedang memproses\r\n@30\r\nServer sedang \"mengirim respons\"\r\n@40\r\nKlien sedang \"menerima respons\"\r\n@50\r\nKlien sedang tidak aktif\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VP1B2iCm34Jt1j_1-0JzxhFliYTGi1f4Ojb8JizVDQ6ajANBuJrcX3fj86tEatTI-bbRY9U9a6DGx6402alSw1NbZhBXDNldNRVpRf6D9U0XD4em1XWRtOpkFt7Co0C9vL1HCd43u6ZYmSIrzMLcp5MAeXezVj6jHr1hONsMd7wjeKdmRft_duoSx3CF\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ROzB3i8m34JtaN87AoVWkw_44JX1QKV8KaYAdVJyk6G1GUn6Csz6zg1bb58VqJl9jwg5mYKoKWaqAZNvYQwG5VAEclJEks7dNGE9bNYEC6_VcK6HPavt4Zmhj0GZ3aQqaOrO94zGDSQYOnTzbNN9IR6rJ_s-O0Allz3vtsKsPk--0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ROzB3i8m34JtaN87AoVWkw_44JX1QKV8KaYAdVJyk6G1GUn6Csz6zg1bb58VqJl9jwg5mYKoKWaqAZNvYQwG5VAEclJEks7dNGE9bNYEC6_VcK6HPavt4Zmhj0GZ3aQqaOrO94zGDSQYOnTzbNN9IR6rJ_s-O0Allz3vtsKsPk--0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>10. Peta Pikiran<\/h3>\n<p id=\"DMzyQwW\"><img alt=\"Diagram peta pikiran Manajemen Produk yang dibuat dengan PlantUML yang menampilkan Strategi, Eksekusi, Analitik, dan Pemangku Kepentingan.\" class=\"alignnone size-full wp-image-20153\" decoding=\"async\" height=\"752\" loading=\"lazy\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d39a30cae3.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d39a30cae3.png 560w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d39a30cae3-223x300.png 223w\" width=\"560\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL1BRi903DrNwXsypgPNWAIecoAXG0zWJQp1IiOJsGugj--GePGk_RwsD-QedbY6XFFhImC7pSCI7FOe62cHU44REBgYKxpUXgQGEf93JqQeuLp1BgUPd9ql15l1wMfibUaptkBXCA48IrmJTzyK5kSiLNESbSN_IHhuCj9IdPNf7jLY6ASSuKDpJhzHQvjpi2VNdbmVoFQjXHEPFuAxB1TIA-tGbxliVYEETCxJK9Wgsqba8IgRnUB7LD5tCexo1BIB5PaPV1B-cRl5FATrt53vR_tn3m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL1BRi903DrNwXsypgPNWAIecoAXG0zWJQp1IiOJsGugj--GePGk_RwsD-QedbY6XFFhImC7pSCI7FOe62cHU44REBgYKxpUXgQGEf93JqQeuLp1BgUPd9ql15l1wMfibUaptkBXCA48IrmJTzyK5kSiLNESbSN_IHhuCj9IdPNf7jLY6ASSuKDpJhzHQvjpi2VNdbmVoFQjXHEPFuAxB1TIA-tGbxliVYEETCxJK9Wgsqba8IgRnUB7LD5tCexo1BIB5PaPV1B-cRl5FATrt53vR_tn3m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:PP2nRiCm34Jt0lq7pLxw2qdQBWq264b-W4XOuIAB5aIg_VtI5jmb8q_lZYVkrAXQXjmpbTUN8Pn8wC6P9OnrlhVasX0kLiauOXc6S8QoXP6KQXVsGXCK6evpBcmmVFU7aIlBpHF9uzWeVD54iaP-9kNK5C_WfLI8TVsTAzmsiiJOXFvX-YLpz42tDCrn3LnB659dJcmLwSaeiJtWnltReKjNI4natbn-kFOwpcLokOKZ5nPpf9TUy1okd6HRiymVh0JPDcJa0cy65UWc-gVZch5ZFtG_zXy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startmindmap\r\n* Manajemen Produk\r\n** Strategi\r\n*** Riset Pasar\r\n*** Analisis Kompetitif\r\n*** Perencanaan Peta Jalan\r\n** Eksekusi\r\n*** Perencanaan Sprint\r\n*** Cerita Pengguna\r\n*** Perawatan Backlog\r\n** Analitik\r\n*** Metrik Pengguna\r\n*** Pengujian A\/B\r\n*** Tingkat Konversi\r\n** Pemangku Kepentingan\r\n*** Tim Teknik\r\n*** Tim Desain\r\n*** Pemimpin Bisnis\r\n*** Pelanggan\r\n@endmindmap\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:PP2nRiCm34Jt0lq7pLxw2qdQBWq264b-W4XOuIAB5aIg_VtI5jmb8q_lZYVkrAXQXjmpbTUN8Pn8wC6P9OnrlhVasX0kLiauOXc6S8QoXP6KQXVsGXCK6evpBcmmVFU7aIlBpHF9uzWeVD54iaP-9kNK5C_WfLI8TVsTAzmsiiJOXFvX-YLpz42tDCrn3LnB659dJcmLwSaeiJtWnltReKjNI4natbn-kFOwpcLokOKZ5nPpf9TUy1okd6HRiymVh0JPDcJa0cy65UWc-gVZch5ZFtG_zXy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL1BRi903DrNwXsypgPNWAIecoAXG0zWJQp1IiOJsGugj--GePGk_RwsD-QedbY6XFFhImC7pSCI7FOe62cHU44REBgYKxpUXgQGEf93JqQeuLp1BgUPd9ql15l1wMfibUaptkBXCA48IrmJTzyK5kSiLNESbSN_IHhuCj9IdPNf7jLY6ASSuKDpJhzHQvjpi2VNdbmVoFQjXHEPFuAxB1TIA-tGbxliVYEETCxJK9Wgsqba8IgRnUB7LD5tCexo1BIB5PaPV1B-cRl5FATrt53vR_tn3m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL1BRi903DrNwXsypgPNWAIecoAXG0zWJQp1IiOJsGugj--GePGk_RwsD-QedbY6XFFhImC7pSCI7FOe62cHU44REBgYKxpUXgQGEf93JqQeuLp1BgUPd9ql15l1wMfibUaptkBXCA48IrmJTzyK5kSiLNESbSN_IHhuCj9IdPNf7jLY6ASSuKDpJhzHQvjpi2VNdbmVoFQjXHEPFuAxB1TIA-tGbxliVYEETCxJK9Wgsqba8IgRnUB7LD5tCexo1BIB5PaPV1B-cRl5FATrt53vR_tn3m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>11. Wireframe (Salt)<\/h3>\n<p id=\"GwDuJzU\"><img alt=\"Wireframe halaman login dengan nama pengguna, kata sandi, tombol login, dan tautan lupa kata sandi\" class=\"alignnone size-full wp-image-20154\" decoding=\"async\" height=\"112\" loading=\"lazy\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d39b895bc4.png\" width=\"151\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAKxCAU7bgjRcvL9Gg5RooK_Fp5C8I4nFLG89A2X4AuKMfnRb9UQcMYaenSB40XABYylpYr8GOZOGhKfsCAvRVb5wVea2JAKzHAQMbmk875BpKa3s0W00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAKxCAU7bgjRcvL9Gg5RooK_Fp5C8I4nFLG89A2X4AuKMfnRb9UQcMYaenSB40XABYylpYr8GOZOGhKfsCAvRVb5wVea2JAKzHAQMbmk875BpKa3s0W00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAKxCAU7bgjRcvL9Gg5RoICn9p4tCK_39Jy_CKmA9AIX4A_a1nHG2KlFIqqlp4gqKb69X4jw99OaAmObvAPa8KHibtyJYqcmbEnZNfxGWKG6XqXuYKylB1KGEgNaf81S00000\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startsalt\r\n{+\r\n  {\"Halaman Login\"\r\n    [\"Nama Pengguna: \"]\r\n    [\"Kata Sandi: \"]\r\n    &lt;\"Masuk\"&gt;\r\n    &lt;\"Lupa Kata Sandi?\"&gt;\r\n  }\r\n}\r\n@endsalt\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAKxCAU7bgjRcvL9Gg5RoICn9p4tCK_39Jy_CKmA9AIX4A_a1nHG2KlFIqqlp4gqKb69X4jw99OaAmObvAPa8KHibtyJYqcmbEnZNfxGWKG6XqXuYKylB1KGEgNaf81S00000\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAKxCAU7bgjRcvL9Gg5RooK_Fp5C8I4nFLG89A2X4AuKMfnRb9UQcMYaenSB40XABYylpYr8GOZOGhKfsCAvRVb5wVea2JAKzHAQMbmk875BpKa3s0W00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAKxCAU7bgjRcvL9Gg5RooK_Fp5C8I4nFLG89A2X4AuKMfnRb9UQcMYaenSB40XABYylpYr8GOZOGhKfsCAvRVb5wVea2JAKzHAQMbmk875BpKa3s0W00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>12. Diagram Jaringan<\/h3>\n<p id=\"wiifxCb\"><img alt=\"Diagram jaringan yang menampilkan aliran lalu lintas dari Internet melalui Firewall ke DMZ dan server Jaringan Internal.\" class=\"alignnone size-full wp-image-20155\" decoding=\"async\" height=\"590\" loading=\"lazy\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d39ca1b16b.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d39ca1b16b.png 425w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d39ca1b16b-216x300.png 216w\" width=\"425\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL0n2iCm3DmD_eF8dY-Kj0H3XsRnOEZc40sXhXCS9nbA_rv5niITvBj3lZirIxGXhcydXPy6XEhk8mQFiGAxG0PPL6F0tJh7eZAPRXzFPcZ2Hmg0H1liGMFOCB1gz2crdIubWb9y_oDO1nt6VGgl8WgHXS5rdijV2Egm5IOssjukc2nkfw16X-NYWNcJ8aYHIqDTNxYaCloaTb8S5G-GuqXXD1FPFCsqG9OD-e6k-mC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL0n2iCm3DmD_eF8dY-Kj0H3XsRnOEZc40sXhXCS9nbA_rv5niITvBj3lZirIxGXhcydXPy6XEhk8mQFiGAxG0PPL6F0tJh7eZAPRXzFPcZ2Hmg0H1liGMFOCB1gz2crdIubWb9y_oDO1nt6VGgl8WgHXS5rdijV2Egm5IOssjukc2nkfw16X-NYWNcJ8aYHIqDTNxYaCloaTb8S5G-GuqXXD1FPFCsqG9OD-e6k-mC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:PL512i8m4Bm7yeUbztv1L4f0GIyv1BnjwL82CPPjh0VnxwQf8SMUaftPpCnkzcD03i-xay8_EeBgv0Enfr31I2tsQ24ZkKDPfXSwLpgKoLnpkHKu5l2M0c3X3BMWYIVYqc9quPkhtl0Ha-AJrS_8rlVeVv7G_OT4jpOy3CD6C6AQfvKf1cnnf9NbiR3AEjf8p63IYBcaoDk1kjwbHIYJhd5uAUODp4LE9uNH2SWnbdDv47ttvBlu5ry0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nnode \"Internet\" sebagai Internet\r\nnode \"Firewall\" sebagai FW\r\nnode \"DMZ\" sebagai DMZ {\r\n  node \"Web Server\" sebagai WS\r\n  node \"DNS Server\" sebagai DNS\r\n}\r\nnode \"Jaringan Internal\" sebagai Internal {\r\n  node \"App Server\" sebagai AppSrv\r\n  node \"Database\" sebagai DB\r\n  node \"File Server\" sebagai FileSrv\r\n}\r\n\r\nInternet --&gt; FW\r\nFW --&gt; DMZ\r\nDMZ --&gt; Internal\r\nWS --&gt; AppSrv\r\nAppSrv --&gt; DB\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:PL512i8m4Bm7yeUbztv1L4f0GIyv1BnjwL82CPPjh0VnxwQf8SMUaftPpCnkzcD03i-xay8_EeBgv0Enfr31I2tsQ24ZkKDPfXSwLpgKoLnpkHKu5l2M0c3X3BMWYIVYqc9quPkhtl0Ha-AJrS_8rlVeVv7G_OT4jpOy3CD6C6AQfvKf1cnnf9NbiR3AEjf8p63IYBcaoDk1kjwbHIYJhd5uAUODp4LE9uNH2SWnbdDv47ttvBlu5ry0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL0n2iCm3DmD_eF8dY-Kj0H3XsRnOEZc40sXhXCS9nbA_rv5niITvBj3lZirIxGXhcydXPy6XEhk8mQFiGAxG0PPL6F0tJh7eZAPRXzFPcZ2Hmg0H1liGMFOCB1gz2crdIubWb9y_oDO1nt6VGgl8WgHXS5rdijV2Egm5IOssjukc2nkfw16X-NYWNcJ8aYHIqDTNxYaCloaTb8S5G-GuqXXD1FPFCsqG9OD-e6k-mC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LL0n2iCm3DmD_eF8dY-Kj0H3XsRnOEZc40sXhXCS9nbA_rv5niITvBj3lZirIxGXhcydXPy6XEhk8mQFiGAxG0PPL6F0tJh7eZAPRXzFPcZ2Hmg0H1liGMFOCB1gz2crdIubWb9y_oDO1nt6VGgl8WgHXS5rdijV2Egm5IOssjukc2nkfw16X-NYWNcJ8aYHIqDTNxYaCloaTb8S5G-GuqXXD1FPFCsqG9OD-e6k-mC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>13. Diagram Gantt<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bPBDJiCm48JlaV8E-mAMx43vkLLL1U8MeN9275R9AZMuws1laVhsk4afCO43rvtzPaTZBwDWa0vPf2p4YYEeWt-bHc1ZT-GiKrcKHJ_EXkK8bQwkbBvLsXmrfQ1so6ov0wNAulcHtlSsq8uuxTwZR2aaxGLcD22tu32ceT7GuY4cUatHTWpr5YFD69CnboTcoB2c3tA-FruTOwomUQEqF15cVjLYubUTCzm5p_8lrjnCismeohcE9xRoDSbDZ5PcyMi93-by5r2ivp_HxFvrNaNl_E6xYVIYxRuPp4RfXvV9t-BYvBLC3Gm_unC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bPBDJiCm48JlaV8E-mAMx43vkLLL1U8MeN9275R9AZMuws1laVhsk4afCO43rvtzPaTZBwDWa0vPf2p4YYEeWt-bHc1ZT-GiKrcKHJ_EXkK8bQwkbBvLsXmrfQ1so6ov0wNAulcHtlSsq8uuxTwZR2aaxGLcD22tu32ceT7GuY4cUatHTWpr5YFD69CnboTcoB2c3tA-FruTOwomUQEqF15cVjLYubUTCzm5p_8lrjnCismeohcE9xRoDSbDZ5PcyMi93-by5r2ivp_HxFvrNaNl_E6xYVIYxRuPp4RfXvV9t-BYvBLC3Gm_unC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9BQuD0483lWlzX_y32hctwk8LG0hrvQ4-bXuaEsrLtb7qSykyx4MiJbTBZl3u-PcOV8lXeW6BCioRLgHDlrc5d2KNf-pEsUPPdW-yRhEBO6qIXYWUfdgNIbvgKeaIFL041a90oppvA99FSa3fES36SmKC4-XIrTPoqLmXHSyy9FRUQaCW8hSGNUCkK8mGKBnZ0RapgZSdxQNAI8eFknCLhgpbpWAf5gjVWOhS25xFI3UBeUuh_PUYdfLngxCs-nl2TR5pmj99wzyUQVeTVMSTu27PDs31wN0YX6ov7cer-Odw3EhLhgDwwtjq4tVDUng_w1W00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startgantt\r\njudul Timeline Proyek\r\n\r\nprojectstarts 2026-09-01\r\n\r\n-- Perencanaan --\r\n[Pengumpulan Persyaratan] dimulai 2026-09-01 dan berlangsung 10 hari\r\n[Fase Desain] dimulai 2026-09-11 dan berlangsung 14 hari\r\n\r\n-- Pengembangan --\r\n[Pengembangan Backend] dimulai 2026-09-25 dan berlangsung 20 hari\r\n[Pengembangan Frontend] dimulai 2026-09-25 dan berlangsung 18 hari\r\n\r\n-- Pengujian --\r\n[Pengujian Unit] dimulai 2026-10-15 dan berlangsung 10 hari\r\n[Pengujian Integrasi] dimulai 2026-10-25 dan berlangsung 7 hari\r\n\r\n-- Penempatan --\r\n[Penempatan Produksi] dimulai 2026-11-01 dan berlangsung 3 hari\r\n@endgantt\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9BQuD0483lWlzX_y32hctwk8LG0hrvQ4-bXuaEsrLtb7qSykyx4MiJbTBZl3u-PcOV8lXeW6BCioRLgHDlrc5d2KNf-pEsUPPdW-yRhEBO6qIXYWUfdgNIbvgKeaIFL041a90oppvA99FSa3fES36SmKC4-XIrTPoqLmXHSyy9FRUQaCW8hSGNUCkK8mGKBnZ0RapgZSdxQNAI8eFknCLhgpbpWAf5gjVWOhS25xFI3UBeUuh_PUYdfLngxCs-nl2TR5pmj99wzyUQVeTVMSTu27PDs31wN0YX6ov7cer-Odw3EhLhgDwwtjq4tVDUng_w1W00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bPBDJiCm48JlaV8E-mAMx43vkLLL1U8MeN9275R9AZMuws1laVhsk4afCO43rvtzPaTZBwDWa0vPf2p4YYEeWt-bHc1ZT-GiKrcKHJ_EXkK8bQwkbBvLsXmrfQ1so6ov0wNAulcHtlSsq8uuxTwZR2aaxGLcD22tu32ceT7GuY4cUatHTWpr5YFD69CnboTcoB2c3tA-FruTOwomUQEqF15cVjLYubUTCzm5p_8lrjnCismeohcE9xRoDSbDZ5PcyMi93-by5r2ivp_HxFvrNaNl_E6xYVIYxRuPp4RfXvV9t-BYvBLC3Gm_unC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bPBDJiCm48JlaV8E-mAMx43vkLLL1U8MeN9275R9AZMuws1laVhsk4afCO43rvtzPaTZBwDWa0vPf2p4YYEeWt-bHc1ZT-GiKrcKHJ_EXkK8bQwkbBvLsXmrfQ1so6ov0wNAulcHtlSsq8uuxTwZR2aaxGLcD22tu32ceT7GuY4cUatHTWpr5YFD69CnboTcoB2c3tA-FruTOwomUQEqF15cVjLYubUTCzm5p_8lrjnCismeohcE9xRoDSbDZ5PcyMi93-by5r2ivp_HxFvrNaNl_E6xYVIYxRuPp4RfXvV9t-BYvBLC3Gm_unC0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>14. Diagram Hubungan Entitas<\/h3>\n<p id=\"BMwpqin\"><img alt=\"Diagram Hubungan Entitas yang menampilkan hubungan antara tabel Pelanggan, Pesanan, Produk, dan Item_Pesanan.\" class=\"alignnone size-full wp-image-20156\" decoding=\"async\" height=\"531\" loading=\"lazy\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3a0f4db1d.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3a0f4db1d.png 578w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3a0f4db1d-300x276.png 300w\" width=\"578\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9DReGm38NtIDp1ccKbBZ0QZKRgggls1YXDh6dKnA71MOoWTs_CJw73L695_Fmmdn-vjAmY9-_A0eajt-3md5eE7kC1L0jp0LrP03o1dkhQ6ZW29V-UUwVJ5GcZOZJdi_YgQdIJyfXjBKTBLv7GA-l-ACr7eBNdkomMbDTe9exXD4C4AVOHFEALpZZ2v1UoB0yHER1ojV8X4OkCsdhbxfZUOZ19yq0rdMUkPYptaStcJKPDj1hNduVS3Fgp_afgP5WMsQPLlp3w9JAfxcBBoZx2JSp_RYcD1tG0YIpNcuK6wj-RrVTL5Rhf3n-XSKfZMnPZBSs-M-ro11s8bQLicUDVJvXCbhHBHkPSa4o-tpy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9DReGm38NtIDp1ccKbBZ0QZKRgggls1YXDh6dKnA71MOoWTs_CJw73L695_Fmmdn-vjAmY9-_A0eajt-3md5eE7kC1L0jp0LrP03o1dkhQ6ZW29V-UUwVJ5GcZOZJdi_YgQdIJyfXjBKTBLv7GA-l-ACr7eBNdkomMbDTe9exXD4C4AVOHFEALpZZ2v1UoB0yHER1ojV8X4OkCsdhbxfZUOZ19yq0rdMUkPYptaStcJKPDj1hNduVS3Fgp_afgP5WMsQPLlp3w9JAfxcBBoZx2JSp_RYcD1tG0YIpNcuK6wj-RrVTL5Rhf3n-XSKfZMnPZBSs-M-ro11s8bQLicUDVJvXCbhHBHkPSa4o-tpy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZPB1QiCm38RlWRo3w76G5oYb57RQQNk3eDeYCxFbp9OFezsxpshQDLqwwCdy-d-BJx9tMJ192RvjYCK9PbYzaKSU1kGLPDhZW0wUIvOOAC6XRG2Um9nrxooiWKlOLs-p6OWfeP3TRZNNTLEQCL2DPKcE1orHGETlAkDxv7dcksrkY3BodESrsIjCLF4OoJrkTQOMjbwePJsqA57GznXYOT4o6HVGBzXIjENZYdRIHYvmuoGVmxk45miRapCqPu1gHlFHVnPKaA_PDBTuBqAXlxy_jVxiKCCFaIvs_k-qQjoX12Zif5yCTgB__Mx7OzV5m_cvrp1wD9JRPj9g7W-pMTPW8Wiwhf7BCymxd4EEZIzM--o8RVtxFm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nentitas \"Pelanggan\" sebagai Customer {\r\n  * customer_id : number &lt;&lt;generated&gt;&gt;\r\n  --\r\n  * name : string\r\n  email : string\r\n  phone : string\r\n}\r\n\r\nentitas \"Pesanan\" sebagai Order {\r\n  * order_id : number &lt;&lt;generated&gt;&gt;\r\n  --\r\n  * customer_id : number\r\n  order_date : date\r\n  total_amount : decimal\r\n}\r\n\r\nentitas \"Produk\" sebagai Product {\r\n  * product_id : number &lt;&lt;generated&gt;&gt;\r\n  --\r\n  * product_name : string\r\n  price : decimal\r\n  stock_quantity : number\r\n}\r\n\r\nentitas \"Item_Pesanan\" sebagai OrderItem {\r\n  * order_item_id : number &lt;&lt;generated&gt;&gt;\r\n  --\r\n  * order_id : number\r\n  * product_id : number\r\n  quantity : number\r\n  unit_price : decimal\r\n}\r\n\r\nCustomer ||--o{ Order : places\r\nOrder ||--|{ OrderItem : contains\r\nProduct ||--o{ OrderItem : includes\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZPB1QiCm38RlWRo3w76G5oYb57RQQNk3eDeYCxFbp9OFezsxpshQDLqwwCdy-d-BJx9tMJ192RvjYCK9PbYzaKSU1kGLPDhZW0wUIvOOAC6XRG2Um9nrxooiWKlOLs-p6OWfeP3TRZNNTLEQCL2DPKcE1orHGETlAkDxv7dcksrkY3BodESrsIjCLF4OoJrkTQOMjbwePJsqA57GznXYOT4o6HVGBzXIjENZYdRIHYvmuoGVmxk45miRapCqPu1gHlFHVnPKaA_PDBTuBqAXlxy_jVxiKCCFaIvs_k-qQjoX12Zif5yCTgB__Mx7OzV5m_cvrp1wD9JRPj9g7W-pMTPW8Wiwhf7BCymxd4EEZIzM--o8RVtxFm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9DReGm38NtIDp1ccKbBZ0QZKRgggls1YXDh6dKnA71MOoWTs_CJw73L695_Fmmdn-vjAmY9-_A0eajt-3md5eE7kC1L0jp0LrP03o1dkhQ6ZW29V-UUwVJ5GcZOZJdi_YgQdIJyfXjBKTBLv7GA-l-ACr7eBNdkomMbDTe9exXD4C4AVOHFEALpZZ2v1UoB0yHER1ojV8X4OkCsdhbxfZUOZ19yq0rdMUkPYptaStcJKPDj1hNduVS3Fgp_afgP5WMsQPLlp3w9JAfxcBBoZx2JSp_RYcD1tG0YIpNcuK6wj-RrVTL5Rhf3n-XSKfZMnPZBSs-M-ro11s8bQLicUDVJvXCbhHBHkPSa4o-tpy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9DReGm38NtIDp1ccKbBZ0QZKRgggls1YXDh6dKnA71MOoWTs_CJw73L695_Fmmdn-vjAmY9-_A0eajt-3md5eE7kC1L0jp0LrP03o1dkhQ6ZW29V-UUwVJ5GcZOZJdi_YgQdIJyfXjBKTBLv7GA-l-ACr7eBNdkomMbDTe9exXD4C4AVOHFEALpZZ2v1UoB0yHER1ojV8X4OkCsdhbxfZUOZ19yq0rdMUkPYptaStcJKPDj1hNduVS3Fgp_afgP5WMsQPLlp3w9JAfxcBBoZx2JSp_RYcD1tG0YIpNcuK6wj-RrVTL5Rhf3n-XSKfZMnPZBSs-M-ro11s8bQLicUDVJvXCbhHBHkPSa4o-tpy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>15. Diagram Arsitektur (Gaya Model C4)<\/h3>\n<p id=\"RYVwvLg\"><img alt=\"Diagram arsitektur model C4 yang menampilkan konteks sistem dan diagram wadah untuk platform e-commerce.\" class=\"alignnone size-full wp-image-20157\" decoding=\"async\" height=\"334\" loading=\"lazy\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3a26bfc22.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3a26bfc22.png 653w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3a26bfc22-300x153.png 300w\" width=\"653\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLBBRi8m4Bn7oZ-iw9aVoA424bHLeb9eMbKzRi8IB1mxMZjGLFNVQuSae9HoyZvclBDZpun5jaqbmy3iXQgHiO8SYtt9kb6RM4lDSDm9IzS0fiAYAYKjRYF3O43093iPInN4MbdwiXFu3WE0gtxS6AihuWcWWJw1XvKeTtOX6nh1bzDOLmvH4AGIxLPprJBxf6C-CP4QKLCyLQGifAmFOjDDx8jdsYT9gOyZNhOJTIrKwR1iLSSRYcTYh1cTYJz--M69wVJneYk2TqCc38P2s-scHrvKGSOX-jeOEWoCOCxif3beGb8SY4yZoxtNA9nII0IMxiN-klv1ESphkbt5nIxyt_8NdGjtzl1pUfSnJvzRg3lll4U25dCqr4AJnUW9MYixQNv_VrS4hylipOTXS95ng-jpNtVNHf2jLx1kY8NtVqPgupxyBm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLBBRi8m4Bn7oZ-iw9aVoA424bHLeb9eMbKzRi8IB1mxMZjGLFNVQuSae9HoyZvclBDZpun5jaqbmy3iXQgHiO8SYtt9kb6RM4lDSDm9IzS0fiAYAYKjRYF3O43093iPInN4MbdwiXFu3WE0gtxS6AihuWcWWJw1XvKeTtOX6nh1bzDOLmvH4AGIxLPprJBxf6C-CP4QKLCyLQGifAmFOjDDx8jdsYT9gOyZNhOJTIrKwR1iLSSRYcTYh1cTYJz--M69wVJneYk2TqCc38P2s-scHrvKGSOX-jeOEWoCOCxif3beGb8SY4yZoxtNA9nII0IMxiN-klv1ESphkbt5nIxyt_8NdGjtzl1pUfSnJvzRg3lll4U25dCqr4AJnUW9MYixQNv_VrS4hylipOTXS95ng-jpNtVNHf2jLx1kY8NtVqPgupxyBm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLFBQiD03BmR_0yYFUS7SYX9x51A4qZgGkbHJjIDy3xCFYYXzD-xcwQsSTBULjACDDAmS-VH-g1adhc6TOiM5TIuRuGrGHyA8us5DdW-3W6MzXwraBIyZSop3W6J9wCzDGugTfxK13xp361GtvACBu5w0evg5CXG1EUD8WjtQnP7lvI1nYI9_jrO1QjfOLI4xgcdTyKV-eCbqbT3zOaEZB0bLUCfRZKOlyMJ8kqlz3UIqdoC-1lsDf6rOCjgIAwEtBQinOLT68lnk5_fADrQq-bzBt869OkWiS4eiikU8HSTCzYGQgrnv0PwH-1kRa9hWJxOWRwH9oMZI4OcRv0rsMjR5gta1Xt3AzNzTZ5OjEtVldIiYcIGgUylSsDgblG_UVlOusFmZtybUgpH3KmlboE_pYU_w4q7IWrdyBogNj8pptf1jwefJldOTWQxGFO4rMwTPtFIX_XTlW40\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nskinparam backgroundColor putih\r\nskinparam rectangleBackgroundColor putih\r\n\r\nrectangle \"Konteks Sistem\" {\r\n  rectangle \"Pelanggan\" sebagai Customer #LightBlue\r\n  rectangle \"Platform E-Commerce\" sebagai Platform #LightGreen\r\n  rectangle \"Penyedia Pembayaran\" sebagai Payment #LightYellow\r\n  rectangle \"Mitra Pengiriman\" sebagai Shipping #LightCoral\r\n}\r\n\r\nCustomer --&gt; Platform : Digunakan\r\nPlatform --&gt; Payment : Memproses Pembayaran\r\nPlatform --&gt; Shipping : Mengatur Pengiriman\r\n\r\nrectangle \"Diagram Kontainer\" {\r\n  rectangle \"Aplikasi Web\" sebagai WebApp #LightBlue\r\n  rectangle \"Aplikasi Seluler\" sebagai MobileApp #LightBlue\r\n  rectangle \"API\" sebagai API #LightGreen\r\n  rectangle \"Database\" sebagai DB #LightYellow\r\n}\r\n\r\nWebApp --&gt; API : REST API\r\nMobileApp --&gt; API : REST API\r\nAPI --&gt; DB : Query SQL\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLFBQiD03BmR_0yYFUS7SYX9x51A4qZgGkbHJjIDy3xCFYYXzD-xcwQsSTBULjACDDAmS-VH-g1adhc6TOiM5TIuRuGrGHyA8us5DdW-3W6MzXwraBIyZSop3W6J9wCzDGugTfxK13xp361GtvACBu5w0evg5CXG1EUD8WjtQnP7lvI1nYI9_jrO1QjfOLI4xgcdTyKV-eCbqbT3zOaEZB0bLUCfRZKOlyMJ8kqlz3UIqdoC-1lsDf6rOCjgIAwEtBQinOLT68lnk5_fADrQq-bzBt869OkWiS4eiikU8HSTCzYGQgrnv0PwH-1kRa9hWJxOWRwH9oMZI4OcRv0rsMjR5gta1Xt3AzNzTZ5OjEtVldIiYcIGgUylSsDgblG_UVlOusFmZtybUgpH3KmlboE_pYU_w4q7IWrdyBogNj8pptf1jwefJldOTWQxGFO4rMwTPtFIX_XTlW40\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLBBRi8m4Bn7oZ-iw9aVoA424bHLeb9eMbKzRi8IB1mxMZjGLFNVQuSae9HoyZvclBDZpun5jaqbmy3iXQgHiO8SYtt9kb6RM4lDSDm9IzS0fiAYAYKjRYF3O43093iPInN4MbdwiXFu3WE0gtxS6AihuWcWWJw1XvKeTtOX6nh1bzDOLmvH4AGIxLPprJBxf6C-CP4QKLCyLQGifAmFOjDDx8jdsYT9gOyZNhOJTIrKwR1iLSSRYcTYh1cTYJz--M69wVJneYk2TqCc38P2s-scHrvKGSOX-jeOEWoCOCxif3beGb8SY4yZoxtNA9nII0IMxiN-klv1ESphkbt5nIxyt_8NdGjtzl1pUfSnJvzRg3lll4U25dCqr4AJnUW9MYixQNv_VrS4hylipOTXS95ng-jpNtVNHf2jLx1kY8NtVqPgupxyBm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLBBRi8m4Bn7oZ-iw9aVoA424bHLeb9eMbKzRi8IB1mxMZjGLFNVQuSae9HoyZvclBDZpun5jaqbmy3iXQgHiO8SYtt9kb6RM4lDSDm9IzS0fiAYAYKjRYF3O43093iPInN4MbdwiXFu3WE0gtxS6AihuWcWWJw1XvKeTtOX6nh1bzDOLmvH4AGIxLPprJBxf6C-CP4QKLCyLQGifAmFOjDDx8jdsYT9gOyZNhOJTIrKwR1iLSSRYcTYh1cTYJz--M69wVJneYk2TqCc38P2s-scHrvKGSOX-jeOEWoCOCxif3beGb8SY4yZoxtNA9nII0IMxiN-klv1ESphkbt5nIxyt_8NdGjtzl1pUfSnJvzRg3lll4U25dCqr4AJnUW9MYixQNv_VrS4hylipOTXS95ng-jpNtVNHf2jLx1kY8NtVqPgupxyBm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>Praktik Terbaik<\/h2>\n<h3>1.\u00a0<strong>Jaga Diagram Tetap Sederhana<\/strong><\/h3>\n<ul>\n<li>\n<p>Fokuskan pada satu aspek per diagram<\/p>\n<\/li>\n<li>\n<p>Hindari kepadatan berlebihan dengan terlalu banyak elemen<\/p>\n<\/li>\n<\/ul>\n<h3>2.\u00a0<strong>Gunakan Penamaan yang Konsisten<\/strong><\/h3>\n<ul>\n<li>\n<p>Ikuti konvensi penamaan di seluruh diagram Anda<\/p>\n<\/li>\n<li>\n<p>Gunakan nama yang bermakna untuk kelas, aktor, dan komponen<\/p>\n<\/li>\n<\/ul>\n<h3>3.\u00a0<strong>Dokumentasikan Diagram Anda<\/strong><\/h3>\n<ul>\n<li>\n<p>Tambahkan judul dan deskripsi<\/p>\n<\/li>\n<li>\n<p>Gunakan catatan untuk konteks tambahan<\/p>\n<\/li>\n<\/ul>\n<h3>4.\u00a0<strong>Modularisasi Sistem yang Kompleks<\/strong><\/h3>\n<ul>\n<li>\n<p>Uraikan sistem besar menjadi diagram yang lebih kecil dan mudah dikelola<\/p>\n<\/li>\n<li>\n<p>Gunakan pengelompokan paket untuk organisasi<\/p>\n<\/li>\n<\/ul>\n<h3>5.\u00a0<strong>Manfaatkan Alat AI<\/strong><\/h3>\n<ul>\n<li>\n<p>Gunakan Chatbot AI Visual Paradigm untuk struktur diagram awal<\/p>\n<\/li>\n<li>\n<p>Sempurnakan dan sesuaikan dengan VPasCode<\/p>\n<\/li>\n<\/ul>\n<h3>6.\u00a0<strong>Kontrol Versi<\/strong><\/h3>\n<ul>\n<li>\n<p>Komit file PlantUML ke Git<\/p>\n<\/li>\n<li>\n<p>Gunakan pesan commit yang bermakna yang menggambarkan perubahan diagram<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>Memulai dengan Visual Paradigm + VPasCode<\/h2>\n<ol>\n<li>\n<p><strong>Instal Visual Paradigm<\/strong>dengan plugin VPasCode<\/p>\n<\/li>\n<li>\n<p><strong>Buat file PlantUML baru<\/strong>(.ekstensi .puml)<\/p>\n<\/li>\n<li>\n<p><strong>Mulai mengetik<\/strong>kode diagram Anda<\/p>\n<\/li>\n<li>\n<p><strong>Gunakan Chatbot AI<\/strong> untuk saran dengan menjelaskan sistem Anda<\/p>\n<\/li>\n<li>\n<p><strong>Pratinjau secara real-time<\/strong> saat Anda mengedit<\/p>\n<\/li>\n<li>\n<p><strong>Ekspor<\/strong> ke format yang Anda inginkan (PNG, SVG, PDF)<\/p>\n<\/li>\n<\/ol>\n<hr\/>\n<h2>Kesimpulan<\/h2>\n<p>PlantUML yang dikombinasikan dengan Visual Paradigm AI Chatbot dan VPasCode menyediakan pendekatan yang kuat dan ramah pengembang untuk membuat diagram profesional. Sifat berbasis teks memastikan kemudahan pemeliharaan, kompatibilitas kontrol versi, dan kolaborasi yang mudah, sementara alat yang didukung AI mempercepat pembuatan diagram dan memastikan praktik terbaik.<\/p>\n<p class=\"\">Baik Anda mendokumentasikan arsitektur perangkat lunak, merencanakan proyek, atau mengomunikasikan desain sistem, PlantUML menawarkan solusi komprehensif yang dapat disesuaikan dengan kebutuhan Anda.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pendahuluan: Menguasai Diagram sebagai Kode dengan PlantUML dan Visual Paradigm Dalam lanskap pengembangan perangkat lunak yang serba cepat saat ini,<\/p>\n","protected":false},"author":11,"featured_media":12254,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[80,117],"tags":[],"class_list":["post-12253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-chatbot","category-vpascode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Panduan Lengkap PlantUML: Diagram sebagai Kode - Media Maya<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Panduan Lengkap PlantUML: Diagram sebagai Kode - Media Maya\" \/>\n<meta property=\"og:description\" content=\"Pendahuluan: Menguasai Diagram sebagai Kode dengan PlantUML dan Visual Paradigm Dalam lanskap pengembangan perangkat lunak yang serba cepat saat ini,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/\" \/>\n<meta property=\"og:site_name\" content=\"Media Maya\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-25T06:29:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-03T15:26:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Panduan Lengkap PlantUML: Diagram sebagai Kode\",\"datePublished\":\"2026-08-25T06:29:51+00:00\",\"dateModified\":\"2026-09-03T15:26:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/\"},\"wordCount\":975,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png\",\"articleSection\":[\"AI Chatbot\",\"VPasCode\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/\",\"url\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/\",\"name\":\"Panduan Lengkap PlantUML: Diagram sebagai Kode - Media Maya\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png\",\"datePublished\":\"2026-08-25T06:29:51+00:00\",\"dateModified\":\"2026-09-03T15:26:08+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png\",\"width\":1024,\"height\":572},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Panduan Lengkap PlantUML: Diagram sebagai Kode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/id\/\",\"name\":\"Media Maya\",\"description\":\"Belajar satu hal baru setiap hari\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/id\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Panduan Lengkap PlantUML: Diagram sebagai Kode - Media Maya","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/","og_locale":"id_ID","og_type":"article","og_title":"Panduan Lengkap PlantUML: Diagram sebagai Kode - Media Maya","og_description":"Pendahuluan: Menguasai Diagram sebagai Kode dengan PlantUML dan Visual Paradigm Dalam lanskap pengembangan perangkat lunak yang serba cepat saat ini,","og_url":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/","og_site_name":"Media Maya","article_published_time":"2026-08-25T06:29:51+00:00","article_modified_time":"2026-09-03T15:26:08+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png","type":"","width":"","height":""},{"width":1024,"height":572,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d3691d85b8.png","twitter_misc":{"Ditulis oleh":"curtis","Estimasi waktu membaca":"7 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Panduan Lengkap PlantUML: Diagram sebagai Kode","datePublished":"2026-08-25T06:29:51+00:00","dateModified":"2026-09-03T15:26:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/"},"wordCount":975,"image":{"@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png","articleSection":["AI Chatbot","VPasCode"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/","url":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/","name":"Panduan Lengkap PlantUML: Diagram sebagai Kode - Media Maya","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png","datePublished":"2026-08-25T06:29:51+00:00","dateModified":"2026-09-03T15:26:08+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#primaryimage","url":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png","contentUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d3691d85b8.png","width":1024,"height":572},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/id\/comprehensive-guide-to-plantuml-diagrams-as-code-using-visual-paradigm-ai-chatbot-vpascode-tool\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/id\/"},{"@type":"ListItem","position":2,"name":"Panduan Lengkap PlantUML: Diagram sebagai Kode"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/id\/#website","url":"https:\/\/www.cybermedian.com\/id\/","name":"Media Maya","description":"Belajar satu hal baru setiap hari","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/id\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/comments?post=12253"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12253\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media\/12254"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media?parent=12253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/categories?post=12253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/tags?post=12253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}