{"id":12353,"date":"2026-10-29T13:20:02","date_gmt":"2026-10-29T05:20:02","guid":{"rendered":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"},"modified":"2026-10-29T13:29:23","modified_gmt":"2026-10-29T05:29:23","slug":"from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","title":{"rendered":"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm"},"content":{"rendered":"<h2 data-nodeid=\"28688\">Pendahuluan<\/h2>\n<p data-nodeid=\"28689\">Dalam rekayasa perangkat lunak modern, kesenjangan antara desain arsitektur dan dokumentasi teknis sering kali menjadi titik di mana proyek kehilangan momentum. Diagram menjadi tangkapan layar yang sudah usang, dokumentasi menjauh dari realitas, dan proses onboarding anggota tim baru berubah menjadi latihan melelahkan untuk mengartefak warisan.<\/p>\n<p data-nodeid=\"28690\">Ekosistem Visual Paradigm yang didukung AI mengatasi tantangan ini dengan mengubah cara tim membuat dan memelihara dokumentasi teknis. Dengan menghubungkan diagramming berbasis percakapan, pemodelan C4 terstruktur, alur kerja aset terpusat, dan dokumentasi hidup ke dalam satu alur kerja yang mulus, ekosistem ini memastikan bahwa arsitektur dan dokumentasi Anda berkembang bersama sebagai satu sumber kebenaran.<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-22363\" decoding=\"async\" height=\"1122\" loading=\"lazy\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png 1402w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7-300x240.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7-1024x819.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7-768x615.png 768w\" width=\"1402\"\/><\/p>\n<p data-nodeid=\"28691\">Panduan ini menyediakan panduan langkah demi langkah yang komprehensif untuk alur kerja lengkap ini\u2014dari brainstorming awal dengan AI hingga penerbitan dokumentasi hidup yang memperbarui dirinya sendiri\u2014dilengkapi dengan contoh PlantUML yang luas dan praktik terbaik.<\/p>\n<hr data-nodeid=\"28692\"\/>\n<h2 data-nodeid=\"28693\">Bagian 1: Konsep Kunci dan Gambaran Ekosistem<\/h2>\n<h3 data-nodeid=\"28694\">Empat Pilar<\/h3>\n<p data-nodeid=\"28695\">Ekosistem Visual Paradigm terdiri dari empat pilar AI yang saling terhubung yang bekerja sama untuk menciptakan alur kerja tertutup:<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-22365\" decoding=\"async\" height=\"941\" loading=\"lazy\" sizes=\"auto, (max-width: 1672px) 100vw, 1672px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492.png 1672w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-300x169.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-1024x576.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-768x432.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d89068492-1536x864.png 1536w\" width=\"1672\"\/><\/p>\n<table data-nodeid=\"28697\">\n<thead data-nodeid=\"28698\">\n<tr data-nodeid=\"28699\">\n<th data-nodeid=\"28701\"><strong data-nodeid=\"29387\">Pilar<\/strong><\/th>\n<th data-nodeid=\"28702\"><strong data-nodeid=\"29391\">Tujuan<\/strong><\/th>\n<th data-nodeid=\"28703\"><strong data-nodeid=\"29395\">Kapan Digunakan<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28707\">\n<tr data-nodeid=\"28708\">\n<td data-nodeid=\"28709\"><strong data-nodeid=\"29399\">Chatbot Pemodelan Visual AI<\/strong><\/td>\n<td data-nodeid=\"28710\">Mitra kolaborasi ide berbasis percakapan; menghasilkan diagram dari bahasa alami<\/td>\n<td data-nodeid=\"28711\">Brainstorming, pembuatan prototipe cepat, mengatasi sindrom &#8220;kanvas kosong&#8221;<\/td>\n<\/tr>\n<tr data-nodeid=\"28712\">\n<td data-nodeid=\"28713\"><strong data-nodeid=\"29411\">Aplikasi &amp; Studio AI (C4-PlantUML Studio)<\/strong><\/td>\n<td data-nodeid=\"28714\">Pemodelan terarah yang didorong metodologi dengan wizard langkah demi langkah<\/td>\n<td data-nodeid=\"28715\">Penyempurnaan terstruktur, pemodelan C4, kepatuhan, onboarding<\/td>\n<\/tr>\n<tr data-nodeid=\"28716\">\n<td data-nodeid=\"28717\"><strong data-nodeid=\"29417\">OpenDocs<\/strong><\/td>\n<td data-nodeid=\"28718\">Platform manajemen pengetahuan hidup dengan diagram yang dapat diedit secara langsung<\/td>\n<td data-nodeid=\"28719\">Dokumentasi teknis, onboarding, laporan pemangku kepentingan, wiki<\/td>\n<\/tr>\n<tr data-nodeid=\"28720\">\n<td data-nodeid=\"28721\"><strong data-nodeid=\"29423\">VP Desktop<\/strong><\/td>\n<td data-nodeid=\"28722\">Pemodelan presisi profesional, validasi, dan rekayasa kode<\/td>\n<td data-nodeid=\"28723\">Arsitektur perusahaan, validasi semantik, generasi kode, keterlacakan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-nodeid=\"28724\">Alur Kerja OpenDocs<\/h3>\n<p data-nodeid=\"28725\">Alur kerja ini berfungsi sebagai pusat transit terpusat yang aman dan di-host di cloud yang menghubungkan kelima lingkungan eksekusi dalam ekosistem Visual Paradigm. Alur kerja ini memungkinkan tim untuk mengalirkan artefak dari berbagai sumber langsung ke dokumentasi teknis yang terpadu tanpa transfer file manual atau tangkapan layar.<\/p>\n<p data-nodeid=\"28725\"><img alt=\"Generator Peta Pikiran AI Sekarang Terhubung ke Alur Kerja | Visual Paradigm\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6aab4fe26afbe.png\"\/><\/p>\n<p data-nodeid=\"28726\"><strong data-nodeid=\"29432\">Karakteristik Utama<\/strong>:<\/p>\n<ul data-nodeid=\"28727\">\n<li data-nodeid=\"28728\">\n<p data-nodeid=\"28729\"><strong data-nodeid=\"29437\">Repositori yang di-host di cloud<\/strong>: Akses artefak dari perangkat apa pun<\/p>\n<\/li>\n<li data-nodeid=\"28730\">\n<p data-nodeid=\"28731\"><strong data-nodeid=\"29442\">Sadar versi<\/strong>: Pelacakan revisi otomatis dengan catatan komit<\/p>\n<\/li>\n<li data-nodeid=\"28732\">\n<p data-nodeid=\"28733\"><strong data-nodeid=\"29447\">Kemampuan diedit tetap terjaga<\/strong>: Diagram tetap terhubung ke model sumber, bukan gambar statis<\/p>\n<\/li>\n<li data-nodeid=\"28734\">\n<p data-nodeid=\"28735\"><strong data-nodeid=\"29452\">Akses berbasis peran<\/strong>: Konfigurasi izin per proyek, tim, atau artefak<\/p>\n<\/li>\n<li data-nodeid=\"28736\">\n<p data-nodeid=\"28737\"><strong data-nodeid=\"29457\">Terintegrasi AI<\/strong>: Dukungan native untuk diagram yang dihasilkan dan disempurnakan oleh AI<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"28738\"><strong data-nodeid=\"29462\">Lima Lingkungan Eksekusi<\/strong>:<\/p>\n<table data-nodeid=\"28740\">\n<thead data-nodeid=\"28741\">\n<tr data-nodeid=\"28742\">\n<th data-nodeid=\"28744\"><strong data-nodeid=\"29466\">Platform<\/strong><\/th>\n<th data-nodeid=\"28745\"><strong data-nodeid=\"29470\">Pemodelan Alam<\/strong><\/th>\n<th data-nodeid=\"28746\"><strong data-nodeid=\"29476\">Siklus Hidup &amp; Versi<\/strong><\/th>\n<th data-nodeid=\"28747\"><strong data-nodeid=\"29480\">Kasus Penggunaan Ideal<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28752\">\n<tr data-nodeid=\"28753\">\n<td data-nodeid=\"28754\">1. Chatbot AI<\/td>\n<td data-nodeid=\"28755\">Didorong kode \/ Berbasis prompt<\/td>\n<td data-nodeid=\"28756\">Potongan Statis<\/td>\n<td data-nodeid=\"28757\">Brainstorming cepat, generasi diagram dari teks<\/td>\n<\/tr>\n<tr data-nodeid=\"28758\">\n<td data-nodeid=\"28759\">2. Editor Online<\/td>\n<td data-nodeid=\"28760\">Didorong kanvas visual<\/td>\n<td data-nodeid=\"28761\">Pelacakan Manual<\/td>\n<td data-nodeid=\"28762\">Penyesuaian gaya, pengeditan kolaboratif berbasis browser<\/td>\n<\/tr>\n<tr data-nodeid=\"28763\">\n<td data-nodeid=\"28764\">3. OpenDocs<\/td>\n<td data-nodeid=\"28765\">Penulisan Konsumen &amp; Native<\/td>\n<td data-nodeid=\"28766\">Sisipan Tautan Langsung<\/td>\n<td data-nodeid=\"28767\">Perakitan dokumentasi akhir, silang-referensi<\/td>\n<\/tr>\n<tr data-nodeid=\"28768\">\n<td data-nodeid=\"28769\">4. Aplikasi Desktop<\/td>\n<td data-nodeid=\"28770\">Didorong model &amp; Tervalidasi<\/td>\n<td data-nodeid=\"28771\">Revisi Otomatis<\/td>\n<td data-nodeid=\"28772\">Arsitektur perusahaan, model teknik yang tervalidasi<\/td>\n<\/tr>\n<tr data-nodeid=\"28773\">\n<td data-nodeid=\"28774\">5. Aplikasi Web (C4 Wizards)<\/td>\n<td data-nodeid=\"28775\">Pemandu Berbasis Konteks<\/td>\n<td data-nodeid=\"28776\">Arsitektur Struktural<\/td>\n<td data-nodeid=\"28777\">Pemodelan kerangka kerja yang kompleks, desain terpandu langkah demi langkah<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-nodeid=\"28778\">Model C4<\/h3>\n<p data-nodeid=\"28779\">Model C4, yang dibuat oleh Simon Brown, adalah pendekatan hierarkis untuk memvisualisasikan arsitektur perangkat lunak di empat tingkatan:<\/p>\n<p data-nodeid=\"28779\"><img decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_69faed56dfc7a.png\"\/><\/p>\n<table data-nodeid=\"28781\">\n<thead data-nodeid=\"28782\">\n<tr data-nodeid=\"28783\">\n<th data-nodeid=\"28785\"><strong data-nodeid=\"29523\">Tingkat<\/strong><\/th>\n<th data-nodeid=\"28786\"><strong data-nodeid=\"29527\">Tujuan<\/strong><\/th>\n<th data-nodeid=\"28787\"><strong data-nodeid=\"29531\">Contoh<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28791\">\n<tr data-nodeid=\"28792\">\n<td data-nodeid=\"28793\"><strong data-nodeid=\"29535\">Konteks<\/strong><\/td>\n<td data-nodeid=\"28794\">Menampilkan sistem dalam lingkungannya, termasuk pengguna dan sistem eksternal<\/td>\n<td data-nodeid=\"28795\">\u201cPlatform e-commerce yang berinteraksi dengan pengguna, gerbang pembayaran, dan sistem inventaris\u201d<\/td>\n<\/tr>\n<tr data-nodeid=\"28796\">\n<td data-nodeid=\"28797\"><strong data-nodeid=\"29543\">Kontainer<\/strong><\/td>\n<td data-nodeid=\"28798\">Memecah sistem menjadi unit yang dapat dideploy (aplikasi, basis data, mikro layanan)<\/td>\n<td data-nodeid=\"28799\">\u201cFrontend (React), Backend (Node.js), Database (PostgreSQL)\u201d<\/td>\n<\/tr>\n<tr data-nodeid=\"28800\">\n<td data-nodeid=\"28801\"><strong data-nodeid=\"29551\">Komponen<\/strong><\/td>\n<td data-nodeid=\"28802\">Merinci modul internal dan interaksinya<\/td>\n<td data-nodeid=\"28803\">\u201cLayanan Pengguna, Layanan Pesanan, Pemroses Pembayaran\u201d<\/td>\n<\/tr>\n<tr data-nodeid=\"28804\">\n<td data-nodeid=\"28805\"><strong data-nodeid=\"29560\">Kode<\/strong> (Opsional)<\/td>\n<td data-nodeid=\"28806\">Menyelami detail tingkat kelas<\/td>\n<td data-nodeid=\"28807\">\u201cUserRepository, OrderController\u201d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"28808\">Tampilan dinamis (Urutan, Penempatan) melengkapi struktur statis, menampilkan perilaku saat runtime dan infrastruktur.<\/p>\n<hr data-nodeid=\"28809\"\/>\n<h2 data-nodeid=\"28810\">Bagian 2: Panduan Alur Kerja Langkah demi Langkah<\/h2>\n<h3 data-nodeid=\"28811\">Langkah 1: Ideasi dengan Chatbot AI<\/h3>\n<p data-nodeid=\"28812\"><strong data-nodeid=\"29572\">Tujuan<\/strong>: Ubah ide yang samar menjadi prototipe visual dalam hitungan detik.<\/p>\n<p data-nodeid=\"28813\"><strong data-nodeid=\"29577\">Alur Kerja<\/strong>:<\/p>\n<ol data-nodeid=\"28814\">\n<li data-nodeid=\"28815\">\n<p data-nodeid=\"28816\"><strong data-nodeid=\"29585\">Akses Chatbot AI<\/strong> melalui ruang kerja Visual Paradigm Anda atau <a data-nodeid=\"29584\" href=\"https:\/\/chat.visual-paradigm.com\/\">chat.visual-paradigm.com<\/a><\/p>\n<\/li>\n<li data-nodeid=\"28817\">\n<p data-nodeid=\"28818\"><strong data-nodeid=\"29590\">Berikan perintah kepada AI menggunakan bahasa alami<\/strong> mendeskripsikan sistem atau skenario Anda:<\/p>\n<pre class=\"lang-text\" data-nodeid=\"28819\"><code data-language=\"text\">\"Buat diagram Konteks Sistem C4 untuk platform e-commerce\"\r\n\"Buat diagram urutan untuk alur autentikasi mikro layanan kami\"\r\n\"Tunjukkan diagram kasus penggunaan untuk aplikasi pengiriman makanan\"\r\n<\/code><\/pre>\n<\/li>\n<li data-nodeid=\"28820\">\n<p data-nodeid=\"28821\"><strong data-nodeid=\"29595\">Tinjau dan perbaiki secara iteratif<\/strong> menggunakan perintah lanjutan:<\/p>\n<ul data-nodeid=\"28822\">\n<li data-nodeid=\"28823\">\n<p data-nodeid=\"28824\">&#8220;Tambahkan aktor administrator yang dapat mereset kata sandi&#8221;<\/p>\n<\/li>\n<li data-nodeid=\"28825\">\n<p data-nodeid=\"28826\">&#8220;Sisipkan loop percobaan ulang jika validasi OTP gagal (maksimal 3 kali percobaan)&#8221;<\/p>\n<\/li>\n<li data-nodeid=\"28827\">\n<p data-nodeid=\"28828\">&#8220;Tampilkan pesan paralel: setelah pembayaran berhasil, beri tahu pelanggan dan perbarui inventaris secara bersamaan&#8221;<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28829\">\n<p data-nodeid=\"28830\"><strong data-nodeid=\"29612\">Ekspor ke Pipeline<\/strong>: Klik ikon Ekspor \u2192 Pilih <strong data-nodeid=\"29613\">Kirim ke Pipeline OpenDocs<\/strong><\/p>\n<\/li>\n<li data-nodeid=\"28831\">\n<p data-nodeid=\"28832\"><strong data-nodeid=\"29622\">Tambahkan Metadata<\/strong>: Sertakan komentar deskriptif seperti &#8220;Draf alur autentikasi dasar \u2013 Q2 2026&#8221; untuk identifikasi versi<\/p>\n<\/li>\n<\/ol>\n<blockquote data-nodeid=\"28833\">\n<p data-nodeid=\"28834\"><strong data-nodeid=\"29627\">\ud83d\udca1 Tips Pro<\/strong>: Gunakan Chatbot untuk iterasi cepat pada konsep tahap awal. Setelah diagram stabil, pindahkan ke Desktop untuk validasi semantik dan sinkronisasi otomatis.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28835\">Contoh PlantUML untuk Diagram Konteks C4<\/h4>\n<p data-nodeid=\"28836\"><img alt=\"\" data-nodeid=\"29630\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc80f5c2c1.png\"\/><\/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:TLFBRjim4BmRy3-mFhc0RLrwwYcf6YG16bI8qdD0Ksk9C1ygkPJZl--kB1jqu9wqud9cTsQakuWoOB9cFlkYdJAf0T4Xzl5xKGHvsBGQkxHD4OBo3i7XHdbRz4Ow1gqZDaPlY_BRkkAZFo-_2YiZGg2Zzv8H7xZfH_hv33KQ4FMH-bPCJV5JopP8AzRYOLrwQsaG22B3dG-MKHM4wDrIfOYUkYknAAToGNNT-Rwd6s8R_25grmhf6j6de3evllR1DqbXN7ozKCd6QaVOUtxgY46Y7ybUf9Cjn0jc9Nne2BCQITc4aMO-EsbOWfeM9koDxPdojpFQWGY0KXiHJzexeZFPSa99bCQtAn5P3dSKfN8zlfT7I_vVRV3-y87BgK73gbCb7YN2GHvvVXMyWXX9b0hGQ1uLhhao9kq6ElNXIC3dSpq5blj3zgkzC320YUDkksHssXZc_4GPEzrFszLKZjfg28DMm8nFx0GnZa950qOFG2EPas9HUxf-qliA9li4SkD_SF109aMGb3fNK_nPaap255FqEVx_eLy2PsG6oGo_k7jsL0nQZiBUtghw1ZQtkEn0xMEH-eRocbnbx7trV0EPEVaAVnD46dO-or3psHsuXlwuVm00\" 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:TPDDRzf048RlIFo7BISg0Rxqr5CY6hLHWsILz1oDxQazUB-qksx3l--CCR1fwCdsxBxFlFFXkvWWfC7e-Um3sLeF3Qek9Hy_5qM0FvkMKZTKGyHGEvlGfatjJE4rM16jOseqLSNsqxgKqC_TKs4W9WmSUjcAuZLj_8YVpn8bZUeBGHl0gEzosaUr9xvlr5en8VromQY7zTOPmnbHL2M6wEoo7c9o75ofHOcSgst1BiOFKw4cTUIGCcWFV7Y0ZbG3bhzFXpwuPkWN7oyqQ0nPLj_Bamq4I2u8ReUsHUqqJ9gLyXZ10byMeEVZTh0WgFbiVnJhIwmdksBdVH62dOeCb50hPpLPl3Zc1rXIFIJGhhtaxJ60FSYTIkezm3ihfe8ZyANSpCl3QrfwE38tSTwl62f1bDVBOv66iqIC6OJpynweFc13IOWPZ-nlnhbml5RoE8OWK7pRjKIsvKeK3wi_sqGxT2UN6JDsv2UJJ-o0osAJjgL0vcpot1b_YKz43JNquzlOZrFzFr1dIvBFP7VTYfKql6RRgnkx8OHfCVwH_sybydKGTIQxpk1cjmqRqWD9eT-Udylz3KBUTMPWe3v2mRQz33KCD3PP2FVbumrzrc6M4qyhwsGccy_kq3RyZ_u5\" \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\" data-nodeid=\"28837\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\ntitle Diagram Konteks Sistem - Platform E-Commerce\r\n\r\nPerson(customer, \"Pelanggan\", \"Pembeli yang menjelajahi dan membeli produk\")\r\nPerson(admin, \"Administrator\", \"Mengelola produk, pesanan, dan pengguna\")\r\n\r\nSystem(ecommerce, \"Platform E-Commerce\", \"Sistem ritel online yang menangani katalog produk, keranjang belanja, pesanan, dan pembayaran\")\r\n\r\nSystem_Ext(payment, \"Gerbang Pembayaran\", \"Memproses pembayaran kartu kredit\")\r\nSystem_Ext(inventory, \"Sistem Inventaris\", \"Mengelola tingkat stok dan pemenuhan\")\r\nSystem_Ext(shipment, \"Layanan Pengiriman\", \"Menangani pengiriman dan pelacakan pesanan\")\r\n\r\nRel(customer, ecommerce, \"Menjelajahi, mencari, membeli produk\")\r\nRel(admin, ecommerce, \"Mengelola produk, pesanan, pengguna\")\r\nRel(ecommerce, payment, \"Memproses pembayaran melalui\", \"HTTPS\")\r\nRel(ecommerce, inventory, \"Memeriksa\/memperbarui stok\", \"API\")\r\nRel(ecommerce, shipment, \"Meminta pengiriman\", \"API\")\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPDDRzf048RlIFo7BISg0Rxqr5CY6hLHWsILz1oDxQazUB-qksx3l--CCR1fwCdsxBxFlFFXkvWWfC7e-Um3sLeF3Qek9Hy_5qM0FvkMKZTKGyHGEvlGfatjJE4rM16jOseqLSNsqxgKqC_TKs4W9WmSUjcAuZLj_8YVpn8bZUeBGHl0gEzosaUr9xvlr5en8VromQY7zTOPmnbHL2M6wEoo7c9o75ofHOcSgst1BiOFKw4cTUIGCcWFV7Y0ZbG3bhzFXpwuPkWN7oyqQ0nPLj_Bamq4I2u8ReUsHUqqJ9gLyXZ10byMeEVZTh0WgFbiVnJhIwmdksBdVH62dOeCb50hPpLPl3Zc1rXIFIJGhhtaxJ60FSYTIkezm3ihfe8ZyANSpCl3QrfwE38tSTwl62f1bDVBOv66iqIC6OJpynweFc13IOWPZ-nlnhbml5RoE8OWK7pRjKIsvKeK3wi_sqGxT2UN6JDsv2UJJ-o0osAJjgL0vcpot1b_YKz43JNquzlOZrFzFr1dIvBFP7VTYfKql6RRgnkx8OHfCVwH_sybydKGTIQxpk1cjmqRqWD9eT-Udylz3KBUTMPWe3v2mRQz33KCD3PP2FVbumrzrc6M4qyhwsGccy_kq3RyZ_u5\" \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:TLFBRjim4BmRy3-mFhc0RLrwwYcf6YG16bI8qdD0Ksk9C1ygkPJZl--kB1jqu9wqud9cTsQakuWoOB9cFlkYdJAf0T4Xzl5xKGHvsBGQkxHD4OBo3i7XHdbRz4Ow1gqZDaPlY_BRkkAZFo-_2YiZGg2Zzv8H7xZfH_hv33KQ4FMH-bPCJV5JopP8AzRYOLrwQsaG22B3dG-MKHM4wDrIfOYUkYknAAToGNNT-Rwd6s8R_25grmhf6j6de3evllR1DqbXN7ozKCd6QaVOUtxgY46Y7ybUf9Cjn0jc9Nne2BCQITc4aMO-EsbOWfeM9koDxPdojpFQWGY0KXiHJzexeZFPSa99bCQtAn5P3dSKfN8zlfT7I_vVRV3-y87BgK73gbCb7YN2GHvvVXMyWXX9b0hGQ1uLhhao9kq6ElNXIC3dSpq5blj3zgkzC320YUDkksHssXZc_4GPEzrFszLKZjfg28DMm8nFx0GnZa950qOFG2EPas9HUxf-qliA9li4SkD_SF109aMGb3fNK_nPaap255FqEVx_eLy2PsG6oGo_k7jsL0nQZiBUtghw1ZQtkEn0xMEH-eRocbnbx7trV0EPEVaAVnD46dO-or3psHsuXlwuVm00\" 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<p data-nodeid=\"28838\"><a data-nodeid=\"29633\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLFBRjim4BmRy3-mFhc0RLrwwYcf6YG16bI8qdD0Ksk9C1ygkPJZl--kB1jqu9wqud9cTsQakuWoOB9cFlkYdJAf0T4Xzl5xKGHvsBGQkxHD4OBo3i7XHdbRz4Ow1gqZDaPlY_BRkkAZFo-_2YiZGg2Zzv8H7xZfH_hv33KQ4FMH-bPCJV5JopP8AzRYOLrwQsaG22B3dG-MKHM4wDrIfOYUkYknAAToGNNT-Rwd6s8R_25grmhf6j6de3evllR1DqbXN7ozKCd6QaVOUtxgY46Y7ybUf9Cjn0jc9Nne2BCQITc4aMO-EsbOWfeM9koDxPdojpFQWGY0KXiHJzexeZFPSa99bCQtAn5P3dSKfN8zlfT7I_vVRV3-y87BgK73gbCb7YN2GHvvVXMyWXX9b0hGQ1uLhhao9kq6ElNXIC3dSpq5blj3zgkzC320YUDkksHssXZc_4GPEzrFszLKZjfg28DMm8nFx0GnZa950qOFG2EPas9HUxf-qliA9li4SkD_SF109aMGb3fNK_nPaap255FqEVx_eLy2PsG6oGo_k7jsL0nQZiBUtghw1ZQtkEn0xMEH-eRocbnbx7trV0EPEVaAVnD46dO-or3psHsuXlwuVm00\">Edit Plantuml di VPasCode<\/a><\/p>\n<h4 data-nodeid=\"28839\">Contoh PlantUML untuk Diagram Urutan<\/h4>\n<p data-nodeid=\"28840\"><img alt=\"\" data-nodeid=\"29636\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc84cf2db8.png\"\/><\/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:ZLHDRzim3BqRy7yWSagmvTBUSXZQ8Uqme4E7EjlEj4N4mcJ9a-Xu_VUZv8yuxT1D1uEc7lcU7mdV14RFNMFoZ3KRWe9-TMGhWht6eyS6jl0ja8S7TzGMUiqr77gtlSUAdOVRZckoh2jaxMoUvTcGNyMQ5M20Je8yQuL4Lxf5ox3wGILyzAwV8EKGlq1TjXPT_gGhIWKeLo_GnPS2FY5JZyy94fgGPmePImmqo87z-9e0gengephOVfWaxE3EicGgJofoemdfY_H9MfzrZa4iZ59sInje7NjQREWzj1X2xxpQB9eCskCpbgjo1z_HQ1Ml_iuQXQeIjZDPmakEBY1IOHYkxc_b4x0q90YGCn697pjuYhCD38-7h-Fjr27P5JCI9AekkL6GLMVqWd76TnS-3ExD1IE9IOoJRXZFe6pfVT5L5OK0x-3WVf8zGsU_Ps5FfBIdYe6TZ3NKfKC_zYOZ0uzyd-qfCiAwmTzm3SXCJSjXyvQ4E-zbUzTJgRJPl2MZg5q_r9nHrea_NXzhZZBPFuDnhWNTj8OQ6Uyq6R4spvBOEBIz3g-czazl_jkNn7MnCiCQBXBpSjy8MFu7Vm00\" 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:ZLJBRjj03BmBq3yGFjbeVMblFXHnu2I79cY0kEsPihOIiIzX7mtwz-MktaOGH0U1u0uvmrbADpwW2r6hiWWKb80JOUDGmqyN0nhOmwDjoC2pC4qJ3KBD0UUFCGWJIA8dE4M4UvJ1kh8e2xnm09knO0Fe8Nh1PnqpqOKwD04slqK5jyw-yac6L7ryXNh4VsZMT1cDCRHNq0VXAZGDl3ozP8ZNlYng35YX5x0vZT5AM5qboKaUxB-D6WxmX3vAoRpI2HxO4wey6Ft586QfGv1Aaw33KkOsDJMenMVeqFjNw-hTeaS_G7gdwhewm2zKL2Sxt-HCGkiAzXDLXdDEh21SeG9ykJ_2KGRwKnR0pyZ2Zl1eP0B2Z_FpS3PMPxjIXeDC4xCJtycHdk4BkgaWhYoOh9jg1YBMnQbHDmnFhstf_QrmBTkWu1EShHHcnavsJ-gEYjfyJRotwDlAeXjw2yLNdVZERAhiMM6hKNhIgE0hTC9TR8LeTk-9kNEEbtbxrMZtdgOpwevKKfMBPwYnx9gZfWq7_gXiDqk0gDBcraIwKqBp2h41t64OnV1CUPvqhoSorc2wt0dmKGy_wbycNArMlwsBnFG9t32O_nx_0G00\" \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\" data-nodeid=\"28841\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\ntitle Diagram Urutan - Login Pengguna dengan Autentikasi Dua Faktor\r\n\r\nactor \"Pengguna\" as user\r\nparticipant \"Web Browser\" as browser\r\nparticipant \"Layanan Autentikasi\" as auth\r\nparticipant \"Gerbang SMS\" as sms\r\ndatabase \"Database Pengguna\" as db\r\n\r\nuser -&gt; browser: Masukkan kredensial\r\nactivate browser\r\nbrowser -&gt; auth: Autentikasi(username, password)\r\nactivate auth\r\nauth -&gt; db: Validasi kredensial\r\nactivate db\r\ndb --&gt; auth: Valid\r\ndeactivate db\r\n\r\nalt 2FA Aktif\r\n    auth -&gt; sms: Minta OTP\r\n    activate sms\r\n    sms --&gt; user: Kirim OTP\r\n    deactivate sms\r\n    user -&gt; auth: Masukkan OTP\r\n    \r\n    alt OTP Valid\r\n        auth --&gt; browser: Berhasil + Token\r\n        browser --&gt; user: Alihkan ke Dashboard\r\n    else OTP Tidak Valid (maksimal 3 percobaan)\r\n        auth --&gt; browser: Error (OTP Tidak Valid)\r\n        browser --&gt; user: Tampilkan Error\r\n        note right: Loop percobaan ulang diimplementasikan\r\n    end\r\nelse 2FA Dinonaktifkan\r\n    auth --&gt; browser: Berhasil + Token\r\n    browser --&gt; user: Alihkan ke Dashboard\r\nend\r\n\r\ndeactivate auth\r\ndeactivate browser\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZLJBRjj03BmBq3yGFjbeVMblFXHnu2I79cY0kEsPihOIiIzX7mtwz-MktaOGH0U1u0uvmrbADpwW2r6hiWWKb80JOUDGmqyN0nhOmwDjoC2pC4qJ3KBD0UUFCGWJIA8dE4M4UvJ1kh8e2xnm09knO0Fe8Nh1PnqpqOKwD04slqK5jyw-yac6L7ryXNh4VsZMT1cDCRHNq0VXAZGDl3ozP8ZNlYng35YX5x0vZT5AM5qboKaUxB-D6WxmX3vAoRpI2HxO4wey6Ft586QfGv1Aaw33KkOsDJMenMVeqFjNw-hTeaS_G7gdwhewm2zKL2Sxt-HCGkiAzXDLXdDEh21SeG9ykJ_2KGRwKnR0pyZ2Zl1eP0B2Z_FpS3PMPxjIXeDC4xCJtycHdk4BkgaWhYoOh9jg1YBMnQbHDmnFhstf_QrmBTkWu1EShHHcnavsJ-gEYjfyJRotwDlAeXjw2yLNdVZERAhiMM6hKNhIgE0hTC9TR8LeTk-9kNEEbtbxrMZtdgOpwevKKfMBPwYnx9gZfWq7_gXiDqk0gDBcraIwKqBp2h41t64OnV1CUPvqhoSorc2wt0dmKGy_wbycNArMlwsBnFG9t32O_nx_0G00\" \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:ZLHDRzim3BqRy7yWSagmvTBUSXZQ8Uqme4E7EjlEj4N4mcJ9a-Xu_VUZv8yuxT1D1uEc7lcU7mdV14RFNMFoZ3KRWe9-TMGhWht6eyS6jl0ja8S7TzGMUiqr77gtlSUAdOVRZckoh2jaxMoUvTcGNyMQ5M20Je8yQuL4Lxf5ox3wGILyzAwV8EKGlq1TjXPT_gGhIWKeLo_GnPS2FY5JZyy94fgGPmePImmqo87z-9e0gengephOVfWaxE3EicGgJofoemdfY_H9MfzrZa4iZ59sInje7NjQREWzj1X2xxpQB9eCskCpbgjo1z_HQ1Ml_iuQXQeIjZDPmakEBY1IOHYkxc_b4x0q90YGCn697pjuYhCD38-7h-Fjr27P5JCI9AekkL6GLMVqWd76TnS-3ExD1IE9IOoJRXZFe6pfVT5L5OK0x-3WVf8zGsU_Ps5FfBIdYe6TZ3NKfKC_zYOZ0uzyd-qfCiAwmTzm3SXCJSjXyvQ4E-zbUzTJgRJPl2MZg5q_r9nHrea_NXzhZZBPFuDnhWNTj8OQ6Uyq6R4spvBOEBIz3g-czazl_jkNn7MnCiCQBXBpSjy8MFu7Vm00\" 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<p data-nodeid=\"28842\"><a data-nodeid=\"29639\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZLHDRzim3BqRy7yWSagmvTBUSXZQ8Uqme4E7EjlEj4N4mcJ9a-Xu_VUZv8yuxT1D1uEc7lcU7mdV14RFNMFoZ3KRWe9-TMGhWht6eyS6jl0ja8S7TzGMUiqr77gtlSUAdOVRZckoh2jaxMoUvTcGNyMQ5M20Je8yQuL4Lxf5ox3wGILyzAwV8EKGlq1TjXPT_gGhIWKeLo_GnPS2FY5JZyy94fgGPmePImmqo87z-9e0gengephOVfWaxE3EicGgJofoemdfY_H9MfzrZa4iZ59sInje7NjQREWzj1X2xxpQB9eCskCpbgjo1z_HQ1Ml_iuQXQeIjZDPmakEBY1IOHYkxc_b4x0q90YGCn697pjuYhCD38-7h-Fjr27P5JCI9AekkL6GLMVqWd76TnS-3ExD1IE9IOoJRXZFe6pfVT5L5OK0x-3WVf8zGsU_Ps5FfBIdYe6TZ3NKfKC_zYOZ0uzyd-qfCiAwmTzm3SXCJSjXyvQ4E-zbUzTJgRJPl2MZg5q_r9nHrea_NXzhZZBPFuDnhWNTj8OQ6Uyq6R4spvBOEBIz3g-czazl_jkNn7MnCiCQBXBpSjy8MFu7Vm00\">Edit Plantuml di VPasCode<\/a><\/p>\n<hr data-nodeid=\"28843\"\/>\n<h3 data-nodeid=\"28844\">Langkah 2: Penyempurnaan Terstruktur dengan C4-PlantUML Studio<\/h3>\n<p data-nodeid=\"28845\"><strong data-nodeid=\"29645\">Tujuan<\/strong>: Kembangkan sketsa yang dihasilkan AI menjadi model C4 yang lengkap dan sesuai standar.<\/p>\n<p data-nodeid=\"28846\"><strong data-nodeid=\"29650\">Alur Kerja<\/strong>:<\/p>\n<ol data-nodeid=\"28847\">\n<li data-nodeid=\"28848\">\n<p data-nodeid=\"28849\"><strong data-nodeid=\"29655\">Buka Panduan Arsitektur C4<\/strong>dari menu Aplikasi Web<\/p>\n<\/li>\n<li data-nodeid=\"28850\">\n<p data-nodeid=\"28851\"><strong data-nodeid=\"29660\">Tentukan Pernyataan Masalah<\/strong> \u2013 Gunakan Asisten AI untuk menghasilkan deskripsi lengkap:<\/p>\n<ul data-nodeid=\"28852\">\n<li data-nodeid=\"28853\">\n<p data-nodeid=\"28854\">Nama Proyek<\/p>\n<\/li>\n<li data-nodeid=\"28855\">\n<p data-nodeid=\"28856\">Tujuan Sistem<\/p>\n<\/li>\n<li data-nodeid=\"28857\">\n<p data-nodeid=\"28858\">Pengguna Utama<\/p>\n<\/li>\n<li data-nodeid=\"28859\">\n<p data-nodeid=\"28860\">Integrasi Utama<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28861\">\n<p data-nodeid=\"28862\"><strong data-nodeid=\"29669\">Hasilkan Setiap Lapisan C4 Secara Bertahap<\/strong>:<\/p>\n<ul data-nodeid=\"28863\">\n<li data-nodeid=\"28864\">\n<p data-nodeid=\"28865\"><strong data-nodeid=\"29674\">Tingkat 1 \u2013 Konteks Sistem<\/strong>: Masukkan batas sistem, pengguna eksternal, dan sistem yang bergantung<\/p>\n<\/li>\n<li data-nodeid=\"28866\">\n<p data-nodeid=\"28867\"><strong data-nodeid=\"29679\">Tingkat 2 \u2013 Wadah<\/strong>: Konfigurasi aplikasi yang dapat dideploy, basis data, dan layanan eksternal<\/p>\n<\/li>\n<li data-nodeid=\"28868\">\n<p data-nodeid=\"28869\"><strong data-nodeid=\"29684\">Tingkat 3 \u2013 Komponen<\/strong>: Sempurnakan modul kode internal dan interaksinya<\/p>\n<\/li>\n<li data-nodeid=\"28870\">\n<p data-nodeid=\"28871\"><strong data-nodeid=\"29689\">Tingkat 4 \u2013 Kode<\/strong> (opsional): Peta ke struktur kode yang sebenarnya<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28872\">\n<p data-nodeid=\"28873\"><strong data-nodeid=\"29694\">Tambahkan Pandangan Pendukung<\/strong>:<\/p>\n<ul data-nodeid=\"28874\">\n<li data-nodeid=\"28875\">\n<p data-nodeid=\"28876\"><strong data-nodeid=\"29699\">Diagram Dinamis\/Urutan<\/strong>: Tampilkan interaksi saat runtime<\/p>\n<\/li>\n<li data-nodeid=\"28877\">\n<p data-nodeid=\"28878\"><strong data-nodeid=\"29704\">Diagram Deploy<\/strong>: Peta perangkat lunak ke infrastruktur<\/p>\n<\/li>\n<li data-nodeid=\"28879\">\n<p data-nodeid=\"28880\"><strong data-nodeid=\"29709\">Diagram Lanskap<\/strong>: Tampilkan sistem dalam konteks perusahaan yang lebih luas<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28881\">\n<p data-nodeid=\"28882\"><strong data-nodeid=\"29718\">Alirkan ke Pipa<\/strong>: Klik <strong data-nodeid=\"29719\">Struktur Alur ke Pipelina<\/strong> untuk mengekspor seluruh blok model hierarkis<\/p>\n<\/li>\n<\/ol>\n<blockquote data-nodeid=\"28883\">\n<p data-nodeid=\"28884\"><strong data-nodeid=\"29724\">\ud83c\udfaf Kasus Penggunaan<\/strong>: Ideal untuk dewan tinjauan arsitektur, dokumentasi onboarding, dan presentasi pemangku kepentingan di mana kejelasan multi-lapis sangat penting.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28885\">Contoh Diagram Kontainer C4 (PlantUML)<\/h4>\n<p data-nodeid=\"28886\"><img alt=\"\" data-nodeid=\"29727\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc88c626bb.png\"\/><\/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:TLJ1RXen4BqZyGzJJaHAmgMddf90rAPA50f5EKPUxx1OzThks0lTLlttZktiiYYK2sOyysRclMTkV10KcbgFHn-KaRef4NOXEFzfDYDnkAvKs3L5uv6aDG5Dk9QsdZajJ2owyg7KgfZDFrujOsZpz3YhXGz877gTSuLG1kdQfGRZKL118_HnM2XHaQZX2bu4uSvo7tWIHbHOSojOjmnLny8bahTcoiDkjvSmEMQlOsJ2eQMIF_mbE96-X2d1xvJpOAdasib5Zr4dV3f1oJqfuZplEGsH2nsI2CeQdz0uGxT1oI6KjfNoCSPrZzqPlgEe8r86zQ1COHjJpcmJqY4D5lTBKEDHtlBrBju9QgU7sfyPRa38v0B-Z4V0dvx9wG4BuLoimm9kdTDAfk7Z82iKCYIEoEvLoIDj7c1h2GvzZqHi7ESKLJWLw-_Nt-5s-H0XrewKgU3EseJuXQdH3CWEuGBl8L8Y4s6Mv0vzo1o-X_R14gyL8VC9dbrGjVgTyc6Dj5SIpxJiQMKcW8qeCpMn9M4WXNkXpspIoSS8jzrvs6NPXbscwpEQg3ot87IMGjPV6Q-gNTRi17fHJCk2onxCdkUmrC921548ds6j3nNX-jlZv6tLv8YtrCitUsR3QfirEzj32gOpYLag3_FuQzBzZ8SKyR0b_Damk6v1ICcAO0abpnCX_mxSTlyhJ96YOUvNoyvN0tQtoWWZbT1vUqTMDfIOZaW349lS-XpNEEFKWKNIfg3L5cKhDMRlhr1tZxftyCPZOY3UzO_rxEtW_RsxpnbTE1jvBhHEP4L7To3fwkZ6FgTQBUSdEKCB_HyfUO5VNEbdByGUJLbV5tUdM4SrJnEpklnEWvLM7_T8HLclTMlOkKdJS_sp7XjN9WTdqfdXq9oCEnxTe2dvN_aV\" 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:VLJBRjim4BmRy3-mFZc04rzwwYc97HHfRLIrK_GOhAoDl2L54dpKDOh-UvUKv4Vhn1TPukxiS6R8Mn_0XTYeuU0TwOsA5Ofj2DP_c4uTx6vg2jjOHezkOtH07MusffbQ1JerNVjGAIgdi_VNHVhqRRcODk03ElxqFECE88tknkO1mq6We53C2Me7ZVZShujhiIRkQiGIDFp01hNu62lGTMegq7cZnqpqvMKYHcj-TgiZVbrYGugs4y5DDVBmYU2b_4QE6id_BNg6rQEh0rR3xpMwr9u7kZD0NSCEF0bZqQLdmkCoHO7a2OWoDPEc3KySFL4Z5ksxx45G6GKyl2MIE86FSYfHHN09PpXOxzEkd-zDr1Mu_NZN9B1Nj1XTYT_3WU3VGTZn3akmbdlkh2APo7x7CX5O8Mn2nsIF5O7Ccs2pcoXRLdNK82BxA4NILjJTb7zdWAK4-B1-4dV5Oy9SMqUw5lV6z2Eu4JI990cZb-Gr-QoRSH9zI3B-3-o3SMm38onWdnmINsnWfNWN1REcncRRBWuygejS5hYtoaupZwOapg8Wrl32PjZ7VMTQF_MkzvQ_5VkmDReVicKkAYcdm3BNTiWkfQEDqndsl1nN9JVEcKu97iMZ_eb9SV8PsVXGErn_NVIsv0qAEbHD-gIs4LP6NfADnsnWiqsopT9JhDXUtthU_M7mNC8m0GHliXPyW9E2AGWUVGBzSnB0XrzXZCuUi_UmAiw5bXYpnqUPAsWrE84mb-DRTEVlB2gUf8fURAcAzlI43WShLFrXFyHxsULLjaMfv726toewEQElbRM5_MeRThvKc6PDQjGblyVBoyVSdjNLgs9sLdUQjRSHSswuf8GDJ9bVLAsHd-Rtvv2zynTg2sU2aKPrUJZiBFUrvkRGQUcCbjd901VPj3Ro2Bx_Id2HqlqGs2nxDB9l6WvkKLTylVy5\" \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\" data-nodeid=\"28887\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n\r\ntitle Diagram Kontainer - Sistem Manajemen Gudang\r\n\r\nPerson(staff, \"Staf Gudang\", \"Memilih, mengemas, dan mengirimkan pesanan\")\r\nPerson(manager, \"Manajer Gudang\", \"Mengawasi operasi dan analitik\")\r\nPerson(logistics, \"Tim Logistik\", \"Mengelola pengiriman masuk\/keluar\")\r\n\r\nSystem_Boundary(wms, \"Sistem Manajemen Gudang\") {\r\n    Container(webapp, \"Aplikasi Web\", \"React\", \"Menyediakan antarmuka pengguna untuk staf gudang\")\r\n    Container(api, \"REST API\", \"Spring Boot\", \"Menangani logika bisnis dan orkestrasi\")\r\n    Container(storage, \"Layanan Optimasi Penyimpanan\", \"Spring Boot\", \"Mengelola penempatan dan pengambilan item\")\r\n    Container(analytics, \"Layanan Analitik\", \"Python\", \"Menghasilkan laporan dan wawasan\")\r\n    ContainerDb(db, \"Database Inventaris\", \"PostgreSQL\", \"Menyimpan inventaris, pesanan, dan lokasi\")\r\n    ContainerDb(cache, \"Cache Redis\", \"Redis\", \"Mencache data yang sering diakses\")\r\n}\r\n\r\nSystem_Ext(erp, \"Sistem ERP\", \"Mengelola keuangan dan pengadaan\")\r\nSystem_Ext(oms, \"Sistem Manajemen Pesanan\", \"Menangani siklus hidup pesanan\")\r\n\r\nRel(staff, webapp, \"Menggunakan\")\r\nRel(manager, webapp, \"Menggunakan\")\r\nRel(logistics, webapp, \"Menggunakan\")\r\n\r\nRel(webapp, api, \"Memanggil\", \"REST\")\r\nRel(api, storage, \"Memanggil\", \"gRPC\")\r\nRel(api, analytics, \"Memanggil\", \"REST\")\r\nRel(api, db, \"Membaca\/Menulis\", \"JDBC\")\r\nRel(api, cache, \"Membaca\/Menulis\", \"Protokol Redis\")\r\n\r\nRel(api, erp, \"Menyinkronkan data\", \"REST\")\r\nRel(api, oms, \"Memperbarui status pesanan\", \"REST\")\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLJBRjim4BmRy3-mFZc04rzwwYc97HHfRLIrK_GOhAoDl2L54dpKDOh-UvUKv4Vhn1TPukxiS6R8Mn_0XTYeuU0TwOsA5Ofj2DP_c4uTx6vg2jjOHezkOtH07MusffbQ1JerNVjGAIgdi_VNHVhqRRcODk03ElxqFECE88tknkO1mq6We53C2Me7ZVZShujhiIRkQiGIDFp01hNu62lGTMegq7cZnqpqvMKYHcj-TgiZVbrYGugs4y5DDVBmYU2b_4QE6id_BNg6rQEh0rR3xpMwr9u7kZD0NSCEF0bZqQLdmkCoHO7a2OWoDPEc3KySFL4Z5ksxx45G6GKyl2MIE86FSYfHHN09PpXOxzEkd-zDr1Mu_NZN9B1Nj1XTYT_3WU3VGTZn3akmbdlkh2APo7x7CX5O8Mn2nsIF5O7Ccs2pcoXRLdNK82BxA4NILjJTb7zdWAK4-B1-4dV5Oy9SMqUw5lV6z2Eu4JI990cZb-Gr-QoRSH9zI3B-3-o3SMm38onWdnmINsnWfNWN1REcncRRBWuygejS5hYtoaupZwOapg8Wrl32PjZ7VMTQF_MkzvQ_5VkmDReVicKkAYcdm3BNTiWkfQEDqndsl1nN9JVEcKu97iMZ_eb9SV8PsVXGErn_NVIsv0qAEbHD-gIs4LP6NfADnsnWiqsopT9JhDXUtthU_M7mNC8m0GHliXPyW9E2AGWUVGBzSnB0XrzXZCuUi_UmAiw5bXYpnqUPAsWrE84mb-DRTEVlB2gUf8fURAcAzlI43WShLFrXFyHxsULLjaMfv726toewEQElbRM5_MeRThvKc6PDQjGblyVBoyVSdjNLgs9sLdUQjRSHSswuf8GDJ9bVLAsHd-Rtvv2zynTg2sU2aKPrUJZiBFUrvkRGQUcCbjd901VPj3Ro2Bx_Id2HqlqGs2nxDB9l6WvkKLTylVy5\" \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:TLJ1RXen4BqZyGzJJaHAmgMddf90rAPA50f5EKPUxx1OzThks0lTLlttZktiiYYK2sOyysRclMTkV10KcbgFHn-KaRef4NOXEFzfDYDnkAvKs3L5uv6aDG5Dk9QsdZajJ2owyg7KgfZDFrujOsZpz3YhXGz877gTSuLG1kdQfGRZKL118_HnM2XHaQZX2bu4uSvo7tWIHbHOSojOjmnLny8bahTcoiDkjvSmEMQlOsJ2eQMIF_mbE96-X2d1xvJpOAdasib5Zr4dV3f1oJqfuZplEGsH2nsI2CeQdz0uGxT1oI6KjfNoCSPrZzqPlgEe8r86zQ1COHjJpcmJqY4D5lTBKEDHtlBrBju9QgU7sfyPRa38v0B-Z4V0dvx9wG4BuLoimm9kdTDAfk7Z82iKCYIEoEvLoIDj7c1h2GvzZqHi7ESKLJWLw-_Nt-5s-H0XrewKgU3EseJuXQdH3CWEuGBl8L8Y4s6Mv0vzo1o-X_R14gyL8VC9dbrGjVgTyc6Dj5SIpxJiQMKcW8qeCpMn9M4WXNkXpspIoSS8jzrvs6NPXbscwpEQg3ot87IMGjPV6Q-gNTRi17fHJCk2onxCdkUmrC921548ds6j3nNX-jlZv6tLv8YtrCitUsR3QfirEzj32gOpYLag3_FuQzBzZ8SKyR0b_Damk6v1ICcAO0abpnCX_mxSTlyhJ96YOUvNoyvN0tQtoWWZbT1vUqTMDfIOZaW349lS-XpNEEFKWKNIfg3L5cKhDMRlhr1tZxftyCPZOY3UzO_rxEtW_RsxpnbTE1jvBhHEP4L7To3fwkZ6FgTQBUSdEKCB_HyfUO5VNEbdByGUJLbV5tUdM4SrJnEpklnEWvLM7_T8HLclTMlOkKdJS_sp7XjN9WTdqfdXq9oCEnxTe2dvN_aV\" 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<p data-nodeid=\"28888\"><a data-nodeid=\"29730\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLJ1RXen4BqZyGzJJaHAmgMddf90rAPA50f5EKPUxx1OzThks0lTLlttZktiiYYK2sOyysRclMTkV10KcbgFHn-KaRef4NOXEFzfDYDnkAvKs3L5uv6aDG5Dk9QsdZajJ2owyg7KgfZDFrujOsZpz3YhXGz877gTSuLG1kdQfGRZKL118_HnM2XHaQZX2bu4uSvo7tWIHbHOSojOjmnLny8bahTcoiDkjvSmEMQlOsJ2eQMIF_mbE96-X2d1xvJpOAdasib5Zr4dV3f1oJqfuZplEGsH2nsI2CeQdz0uGxT1oI6KjfNoCSPrZzqPlgEe8r86zQ1COHjJpcmJqY4D5lTBKEDHtlBrBju9QgU7sfyPRa38v0B-Z4V0dvx9wG4BuLoimm9kdTDAfk7Z82iKCYIEoEvLoIDj7c1h2GvzZqHi7ESKLJWLw-_Nt-5s-H0XrewKgU3EseJuXQdH3CWEuGBl8L8Y4s6Mv0vzo1o-X_R14gyL8VC9dbrGjVgTyc6Dj5SIpxJiQMKcW8qeCpMn9M4WXNkXpspIoSS8jzrvs6NPXbscwpEQg3ot87IMGjPV6Q-gNTRi17fHJCk2onxCdkUmrC921548ds6j3nNX-jlZv6tLv8YtrCitUsR3QfirEzj32gOpYLag3_FuQzBzZ8SKyR0b_Damk6v1ICcAO0abpnCX_mxSTlyhJ96YOUvNoyvN0tQtoWWZbT1vUqTMDfIOZaW349lS-XpNEEFKWKNIfg3L5cKhDMRlhr1tZxftyCPZOY3UzO_rxEtW_RsxpnbTE1jvBhHEP4L7To3fwkZ6FgTQBUSdEKCB_HyfUO5VNEbdByGUJLbV5tUdM4SrJnEpklnEWvLM7_T8HLclTMlOkKdJS_sp7XjN9WTdqfdXq9oCEnxTe2dvN_aV\">Edit Plantuml di VPasCode<\/a><\/p>\n<h4 data-nodeid=\"28889\">Contoh Diagram Komponen (PlantUML)<\/h4>\n<p data-nodeid=\"28890\"><img alt=\"\" data-nodeid=\"29733\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc8d80b6a9.png\"\/><\/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:VPDDRnen48RlIFo7AIUGIhZqr5DIe5Aae4PiK8vey4uMArxRjMT9ITN_tl5-a1MqS5gFvtqVpmUtaJ5mLPhXu9EsobGvmPxPnw-pMS2tcqBpljfLaO9obidoZNBbp1kqIJIDd1kzcys_J1zJQBDwc9KOcOA4jdDNUcUJnjU0uO0r6u9J71OQYu0bJ25Z5x0W-E5Pb_eTMJiB6OM3LfIKSw6ZjXIstrnbSmp7SMmads5qJJoQmE_X0EHtmexHeZb67NlIkpO4Iri8PYHNTUYT8cYc4afte3AzsIDBVJO2sXnSGvGaQOcg4qQJSroK1F6xJpQPVCCSZQeC2ZfnkbD7ohNOH2cXGRoHBlOCBovSOxm4-bcHLSSEzBqBd1eXDqy1rMkBEP1nIlEnXdZdvGb1ZfVMWRmXg-C-aSLatJ_ttLVIrqAg22IZKQ_Q5i115mM5fX8q53XsW3FCOZUMzzIZ4wk7zXCMoBZ3UF7wBhTnRbS157fKRH5_qjfaHrd6Shly9KFtEZr-cJt1tUCzZ9zNsQHjluadXzYKKxVRUGeD9FaD1sioZKjlVzQfov5xy-zsebOcOIqxATfbs4IAbvVzAVuxezUZDM4UPyyoj8_4nhsNjF4vzkvxWFyddGty2d8uk2MRov_xBm00\" 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:VLHBQzj04BuR_1-sETbGHvUUUafYfn1YKnFNz6X6qbGUjA_kWrOj_U-TrIEH7P1Eqkptc9dzq9qFu49KSZxxGBgGiKHn3i7wprdcuDTjHU4Sy-ZH5KO7rE6sC2gp4dGYhNme9UNP-jDgdqh7tJPJu0CwBftMHbcZ4yUs1lDPe21HR0Wg1qeyz-TY9RRGW0Ojljf0B41YZxeXPLCn4TTi3gJHdHvCr2MuPk63SL3XHt4pHRvPYh_pcU3djPi5rsNZoJDrXvwqkES2SU62s9xg2eOpQoG8Ywv21pMxKK0bIdvHZ3AjjKnrYnfP8YJlQsTFVrB3puoC4dW0SQoZOz8JYmsEPmfHLw8a5kPXaaNEdg5pZBpuUjBaXyEV4NNHZ5RpnM4TMxat9ma5rAB60bkXriWQouqv2k1Rk_Vg3gr4JVxCtOMH0w-kuZtnsv6JK0t3eEpMfgY8dGCwugs6RbCz9RQKtklASPClf2aWaD6ikM5c3Xx5rjHyrUD9P5jvkvSQB7-dIUmu3_FPlvIeGyCnLQV7tvm7IoppydZu9kxtJsBnVNTOTiAAswf82jaFEHBgByBmFAcFPT9yGTc9NIHC4MTNc26SbrVNKbxHVJxIuggeKypUOyRNEmaSROsRo7b76UCZftd0TdQNE9ud1nTfm8pife5NmPXsdy_kK9VyL_WF\" \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\" data-nodeid=\"28891\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\ntitle Diagram Komponen - Layanan Optimasi Penyimpanan\r\n\r\nContainer_Boundary(storage, \"Layanan Optimasi Penyimpanan\") {\r\n    Component(analysis, \"Mesin Analisis Penyimpanan\", \"Menganalisis pola pergerakan item dan mengoptimalkan penempatan\")\r\n    Component(size, \"Kalkulator Ukuran Item\", \"Menghitung dimensi dan berat item untuk penempatan\")\r\n    Component(frequency, \"Layanan Frekuensi Item\", \"Melacak kecepatan dan popularitas item\")\r\n    Component(replenishment, \"Layanan Pengisian Ulang\", \"Mengelola pemicu dan peringatan pengisian ulang\")\r\n    \r\n    ComponentDb(location, \"Database Lokasi\", \"Melacak lokasi item dan kapasitas penyimpanan\")\r\n}\r\n\r\nSystem_Ext(api, \"REST API (WMS)\", \"Memanggil layanan penyimpanan untuk operasi\")\r\n\r\nRel(api, analysis, \"Meminta optimasi penempatan\")\r\nRel(analysis, size, \"Menggunakan\")\r\nRel(analysis, frequency, \"Menggunakan\")\r\nRel(analysis, location, \"Membaca\/Menulis\")\r\nRel(size, location, \"Memperbarui\")\r\nRel(frequency, location, \"Memperbarui\")\r\nRel(replenishment, location, \"Membaca\/Menulis\")\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBQzj04BuR_1-sETbGHvUUUafYfn1YKnFNz6X6qbGUjA_kWrOj_U-TrIEH7P1Eqkptc9dzq9qFu49KSZxxGBgGiKHn3i7wprdcuDTjHU4Sy-ZH5KO7rE6sC2gp4dGYhNme9UNP-jDgdqh7tJPJu0CwBftMHbcZ4yUs1lDPe21HR0Wg1qeyz-TY9RRGW0Ojljf0B41YZxeXPLCn4TTi3gJHdHvCr2MuPk63SL3XHt4pHRvPYh_pcU3djPi5rsNZoJDrXvwqkES2SU62s9xg2eOpQoG8Ywv21pMxKK0bIdvHZ3AjjKnrYnfP8YJlQsTFVrB3puoC4dW0SQoZOz8JYmsEPmfHLw8a5kPXaaNEdg5pZBpuUjBaXyEV4NNHZ5RpnM4TMxat9ma5rAB60bkXriWQouqv2k1Rk_Vg3gr4JVxCtOMH0w-kuZtnsv6JK0t3eEpMfgY8dGCwugs6RbCz9RQKtklASPClf2aWaD6ikM5c3Xx5rjHyrUD9P5jvkvSQB7-dIUmu3_FPlvIeGyCnLQV7tvm7IoppydZu9kxtJsBnVNTOTiAAswf82jaFEHBgByBmFAcFPT9yGTc9NIHC4MTNc26SbrVNKbxHVJxIuggeKypUOyRNEmaSROsRo7b76UCZftd0TdQNE9ud1nTfm8pife5NmPXsdy_kK9VyL_WF\" \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:VPDDRnen48RlIFo7AIUGIhZqr5DIe5Aae4PiK8vey4uMArxRjMT9ITN_tl5-a1MqS5gFvtqVpmUtaJ5mLPhXu9EsobGvmPxPnw-pMS2tcqBpljfLaO9obidoZNBbp1kqIJIDd1kzcys_J1zJQBDwc9KOcOA4jdDNUcUJnjU0uO0r6u9J71OQYu0bJ25Z5x0W-E5Pb_eTMJiB6OM3LfIKSw6ZjXIstrnbSmp7SMmads5qJJoQmE_X0EHtmexHeZb67NlIkpO4Iri8PYHNTUYT8cYc4afte3AzsIDBVJO2sXnSGvGaQOcg4qQJSroK1F6xJpQPVCCSZQeC2ZfnkbD7ohNOH2cXGRoHBlOCBovSOxm4-bcHLSSEzBqBd1eXDqy1rMkBEP1nIlEnXdZdvGb1ZfVMWRmXg-C-aSLatJ_ttLVIrqAg22IZKQ_Q5i115mM5fX8q53XsW3FCOZUMzzIZ4wk7zXCMoBZ3UF7wBhTnRbS157fKRH5_qjfaHrd6Shly9KFtEZr-cJt1tUCzZ9zNsQHjluadXzYKKxVRUGeD9FaD1sioZKjlVzQfov5xy-zsebOcOIqxATfbs4IAbvVzAVuxezUZDM4UPyyoj8_4nhsNjF4vzkvxWFyddGty2d8uk2MRov_xBm00\" 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<p data-nodeid=\"28892\"><a data-nodeid=\"29736\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPDDRnen48RlIFo7AIUGIhZqr5DIe5Aae4PiK8vey4uMArxRjMT9ITN_tl5-a1MqS5gFvtqVpmUtaJ5mLPhXu9EsobGvmPxPnw-pMS2tcqBpljfLaO9obidoZNBbp1kqIJIDd1kzcys_J1zJQBDwc9KOcOA4jdDNUcUJnjU0uO0r6u9J71OQYu0bJ25Z5x0W-E5Pb_eTMJiB6OM3LfIKSw6ZjXIstrnbSmp7SMmads5qJJoQmE_X0EHtmexHeZb67NlIkpO4Iri8PYHNTUYT8cYc4afte3AzsIDBVJO2sXnSGvGaQOcg4qQJSroK1F6xJpQPVCCSZQeC2ZfnkbD7ohNOH2cXGRoHBlOCBovSOxm4-bcHLSSEzBqBd1eXDqy1rMkBEP1nIlEnXdZdvGb1ZfVMWRmXg-C-aSLatJ_ttLVIrqAg22IZKQ_Q5i115mM5fX8q53XsW3FCOZUMzzIZ4wk7zXCMoBZ3UF7wBhTnRbS157fKRH5_qjfaHrd6Shly9KFtEZr-cJt1tUCzZ9zNsQHjluadXzYKKxVRUGeD9FaD1sioZKjlVzQfov5xy-zsebOcOIqxATfbs4IAbvVzAVuxezUZDM4UPyyoj8_4nhsNjF4vzkvxWFyddGty2d8uk2MRov_xBm00\">Edit Plantuml di VPasCode<\/a><\/p>\n<h4 data-nodeid=\"28893\">Contoh Diagram Deployment (PlantUML)<\/h4>\n<p data-nodeid=\"28894\"><img alt=\"\" data-nodeid=\"29739\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc900ada9c.png\"\/><\/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:bLLDZzem4BqZyH-cd7QbBaZTzjBJGbZrGsoR4heSqJYnWbKdjcm7H2l-UySEaB10o-OIUpplEVFc8m_MeN5L8RkTDw9CPPLnM3gdxSV1mE2wdmkth5XbkKbLwNZf-gag1bfYwK5trcLIi47q_YxsffzFaq61rd53fiMOQwasXGVfS4EtuuIJ79e360lC3HPm1tCqVAde9dZ24dCUZfCDaHKUsM0MtrJ6Rt1jtq9lE4yWaghAUhVmfzi1UbuwhdHAZiznrBYSSzCLao9Ts8gLt14W3dj8mluOUWuk6M4c2ZCO8IcHSjFRVTvmCZg5-oSYGL6KtDoiEKEjoN_E6GorfelH2LLwYYd7r7aZB1LfaO4g8RdltHxpRPjjQ_cFQ8rOeUEjS6l3rV4oJ7_nCbkWpGazgdSmh9o294KfoXm-6LNfyw5VObiLBRA4cnKtyFpaPNYCtb6DkFk-H9Fpywp7eg8MNhx7P0R3-8ldI2Xg-gwHKgxnUwdaAP5rob0zUe9w1T-r4uNuVSZHrSJRYraxJjSvZJBMP6kC3XdQo-cwG43zxPkppH3Lfb1gumHYAhBSyEJ7XEJEMDzyk5hnCRkfUxykfmBD1lRN_5Tb0jCaAZEs2Jg75KnvQ8Khb3oLxvm2AQPBtX8Xylks0e-I0X2rUSepOKc407gb3W4JcjTp1BxNbSDkIQ-j7tvJBWz38aoQq1lMS_eZRzgLkweSsMdrUJQBaxr3E6pgE48fWrC-zMEnvND888sTp0xcHkpelev7nvvDYCUETSYnKKwbIkuXUzucnxlSkZgARkU1Mfv-4dy1\" 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:bLLTRzem57r7uZzuFBNI2jAwlUofV5JT1zaoqgsFw2Qv2XwERTaE5PhwttjlA0sKT8Myu5oVSsAV-y6L3-12LQfkvvtKcQfo58iGhFyy63YuxnSoBAgqykWoemFgqCzCER0AD9CkVCYLJ0VZZnSnXtv7qq49Fg2Zq7o2LfbroIHRVw7R2J8e51C9XODID01n8H99l594eE4lKapSL3deWbaDRlx3v7W6z_wzw0tl4Z5Mfifxv-9VjoFeUGbSsOo0V-9n0sc3sIfLCflxAjKOY93K2n5pUBbFRQEhb3XJ0xaO0RcGeUiz7Myu7HtI-HcJcI0rkhDxJC5Qnblw67WfxZ3jxRxF4B8WrkI5oEN2-23hbKWkU-VxoW_DwyxoF_TsSWK13ozUnz--U0hP4dK-1ryG-SPLLWohO4IIWU93ZZRxxHQy9hOgEMMHID2jq3rhKF1w_87g95ps5RW2srNtpGKhYJUxJcx5CFxA6j-tUoAXs_CPZGalVJmKyi4uA904VjeWIqvBZ7ejIqlbgayIVdWrP_l9QlCeJmzoDO40ANWypcGIe1xd1kKZgxfL6mdsQfA8c6giS9ZycfBTUTftduvsV9AURVgVfBQoN4ubzSJvsrmQHZfFrtmEhCjV99l84KOUkjTcG0RP0biy67EyBZ8EoFgLEY-NdZoeIIVQK7D8RqVfj6fuMjBF0y_06QhdML4Fd0WLq52GhCgR7DpKUuIk2hZSrEMNsziusMBg_QQM8onfgXHICR2OyPZSmJqdac3Kd328K5UAha6XRvFHFdXxtHPix4mmIwCQ4vYrLMzIJiV6fvd7e6xdYlgU_ZSU0G00\" \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\" data-nodeid=\"28895\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntitle Diagram Deployment - Sistem Manajemen Gudang\r\n\r\nDeployment_Node(aws, \"AWS Cloud\") {\r\n    Deployment_Node(vpc, \"VPC\") {\r\n        Deployment_Node(public_subnet, \"Subnet Publik\") {\r\n            Deployment_Node(lb, \"Load Balancer\", \"AWS ALB\") {\r\n                Container(webapp, \"Aplikasi Web\", \"Aplikasi React yang dihosting di S3\")\r\n            }\r\n        }\r\n        \r\n        Deployment_Node(private_subnet, \"Subnet Privat\") {\r\n            Deployment_Node(backend_asg, \"Grup Auto Scaling Backend\") {\r\n                Deployment_Node(backend_vm, \"VM Server Backend\", \"EC2 - t3.large\") {\r\n                    Container(api, \"REST API\", \"Kontainer Spring Boot\")\r\n                    Container(storage, \"Optimasi Penyimpanan\", \"Kontainer Spring Boot\")\r\n                }\r\n            }\r\n            \r\n            Deployment_Node(db_subnet, \"Subnet Database\") {\r\n                Deployment_Node(db_cluster, \"Klaster Database\", \"RDS PostgreSQL - db.r5.large\") {\r\n                    ContainerDb(master, \"Database Primer\")\r\n                    ContainerDb(standby, \"Replika Standby\")\r\n                }\r\n                \r\n                Deployment_Node(cache_cluster, \"Klaster Cache\", \"ElastiCache Redis - cache.r5.large\") {\r\n                    ContainerDb(cache, \"Cache Redis\")\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\nRel(webapp, lb, \"Melayani\")\r\nRel(lb, api, \"Merutekan\", \"HTTPS\")\r\nRel(api, storage, \"Memanggil\", \"gRPC\")\r\nRel(api, master, \"Membaca\/Menulis\", \"JDBC\")\r\nRel(api, cache, \"Membaca\/Menulis\", \"Protokol Redis\")\r\nRel(master, standby, \"Mereplikasi\")\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTRzem57r7uZzuFBNI2jAwlUofV5JT1zaoqgsFw2Qv2XwERTaE5PhwttjlA0sKT8Myu5oVSsAV-y6L3-12LQfkvvtKcQfo58iGhFyy63YuxnSoBAgqykWoemFgqCzCER0AD9CkVCYLJ0VZZnSnXtv7qq49Fg2Zq7o2LfbroIHRVw7R2J8e51C9XODID01n8H99l594eE4lKapSL3deWbaDRlx3v7W6z_wzw0tl4Z5Mfifxv-9VjoFeUGbSsOo0V-9n0sc3sIfLCflxAjKOY93K2n5pUBbFRQEhb3XJ0xaO0RcGeUiz7Myu7HtI-HcJcI0rkhDxJC5Qnblw67WfxZ3jxRxF4B8WrkI5oEN2-23hbKWkU-VxoW_DwyxoF_TsSWK13ozUnz--U0hP4dK-1ryG-SPLLWohO4IIWU93ZZRxxHQy9hOgEMMHID2jq3rhKF1w_87g95ps5RW2srNtpGKhYJUxJcx5CFxA6j-tUoAXs_CPZGalVJmKyi4uA904VjeWIqvBZ7ejIqlbgayIVdWrP_l9QlCeJmzoDO40ANWypcGIe1xd1kKZgxfL6mdsQfA8c6giS9ZycfBTUTftduvsV9AURVgVfBQoN4ubzSJvsrmQHZfFrtmEhCjV99l84KOUkjTcG0RP0biy67EyBZ8EoFgLEY-NdZoeIIVQK7D8RqVfj6fuMjBF0y_06QhdML4Fd0WLq52GhCgR7DpKUuIk2hZSrEMNsziusMBg_QQM8onfgXHICR2OyPZSmJqdac3Kd328K5UAha6XRvFHFdXxtHPix4mmIwCQ4vYrLMzIJiV6fvd7e6xdYlgU_ZSU0G00\" \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:bLLDZzem4BqZyH-cd7QbBaZTzjBJGbZrGsoR4heSqJYnWbKdjcm7H2l-UySEaB10o-OIUpplEVFc8m_MeN5L8RkTDw9CPPLnM3gdxSV1mE2wdmkth5XbkKbLwNZf-gag1bfYwK5trcLIi47q_YxsffzFaq61rd53fiMOQwasXGVfS4EtuuIJ79e360lC3HPm1tCqVAde9dZ24dCUZfCDaHKUsM0MtrJ6Rt1jtq9lE4yWaghAUhVmfzi1UbuwhdHAZiznrBYSSzCLao9Ts8gLt14W3dj8mluOUWuk6M4c2ZCO8IcHSjFRVTvmCZg5-oSYGL6KtDoiEKEjoN_E6GorfelH2LLwYYd7r7aZB1LfaO4g8RdltHxpRPjjQ_cFQ8rOeUEjS6l3rV4oJ7_nCbkWpGazgdSmh9o294KfoXm-6LNfyw5VObiLBRA4cnKtyFpaPNYCtb6DkFk-H9Fpywp7eg8MNhx7P0R3-8ldI2Xg-gwHKgxnUwdaAP5rob0zUe9w1T-r4uNuVSZHrSJRYraxJjSvZJBMP6kC3XdQo-cwG43zxPkppH3Lfb1gumHYAhBSyEJ7XEJEMDzyk5hnCRkfUxykfmBD1lRN_5Tb0jCaAZEs2Jg75KnvQ8Khb3oLxvm2AQPBtX8Xylks0e-I0X2rUSepOKc407gb3W4JcjTp1BxNbSDkIQ-j7tvJBWz38aoQq1lMS_eZRzgLkweSsMdrUJQBaxr3E6pgE48fWrC-zMEnvND888sTp0xcHkpelev7nvvDYCUETSYnKKwbIkuXUzucnxlSkZgARkU1Mfv-4dy1\" 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<p data-nodeid=\"28896\"><a data-nodeid=\"29742\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLDZzem4BqZyH-cd7QbBaZTzjBJGbZrGsoR4heSqJYnWbKdjcm7H2l-UySEaB10o-OIUpplEVFc8m_MeN5L8RkTDw9CPPLnM3gdxSV1mE2wdmkth5XbkKbLwNZf-gag1bfYwK5trcLIi47q_YxsffzFaq61rd53fiMOQwasXGVfS4EtuuIJ79e360lC3HPm1tCqVAde9dZ24dCUZfCDaHKUsM0MtrJ6Rt1jtq9lE4yWaghAUhVmfzi1UbuwhdHAZiznrBYSSzCLao9Ts8gLt14W3dj8mluOUWuk6M4c2ZCO8IcHSjFRVTvmCZg5-oSYGL6KtDoiEKEjoN_E6GorfelH2LLwYYd7r7aZB1LfaO4g8RdltHxpRPjjQ_cFQ8rOeUEjS6l3rV4oJ7_nCbkWpGazgdSmh9o294KfoXm-6LNfyw5VObiLBRA4cnKtyFpaPNYCtb6DkFk-H9Fpywp7eg8MNhx7P0R3-8ldI2Xg-gwHKgxnUwdaAP5rob0zUe9w1T-r4uNuVSZHrSJRYraxJjSvZJBMP6kC3XdQo-cwG43zxPkppH3Lfb1gumHYAhBSyEJ7XEJEMDzyk5hnCRkfUxykfmBD1lRN_5Tb0jCaAZEs2Jg75KnvQ8Khb3oLxvm2AQPBtX8Xylks0e-I0X2rUSepOKc407gb3W4JcjTp1BxNbSDkIQ-j7tvJBWz38aoQq1lMS_eZRzgLkweSsMdrUJQBaxr3E6pgE48fWrC-zMEnvND888sTp0xcHkpelev7nvvDYCUETSYnKKwbIkuXUzucnxlSkZgARkU1Mfv-4dy1\">Edit Plantuml di VPasCode<\/a><\/p>\n<hr data-nodeid=\"28897\"\/>\n<h3 data-nodeid=\"28898\">Langkah 3: Sempurnakan dan Kaya Hubungannya<\/h3>\n<p data-nodeid=\"28899\"><strong data-nodeid=\"29748\">Tujuan<\/strong>: Ubah model C4 awal menjadi arsitektur yang presisi dan mudah dipelihara dengan hubungan yang tepat.<\/p>\n<p data-nodeid=\"28900\"><strong data-nodeid=\"29753\">Pola Hubungan Utama<\/strong>:<\/p>\n<table data-nodeid=\"28902\">\n<thead data-nodeid=\"28903\">\n<tr data-nodeid=\"28904\">\n<th data-nodeid=\"28906\"><strong data-nodeid=\"29757\">Hubungan<\/strong><\/th>\n<th data-nodeid=\"28907\"><strong data-nodeid=\"29761\">Tujuan<\/strong><\/th>\n<th data-nodeid=\"28908\"><strong data-nodeid=\"29765\">Contoh<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"28912\">\n<tr data-nodeid=\"28913\">\n<td data-nodeid=\"28914\"><strong data-nodeid=\"29769\">\u00abinclude\u00bb<\/strong><\/td>\n<td data-nodeid=\"28915\">Perilaku bersama yang wajib digunakan kembali di berbagai kasus penggunaan<\/td>\n<td data-nodeid=\"28916\">\u201cPemesanan Meja\u201d menyertakan \u201cProses Pembayaran\u201d<\/td>\n<\/tr>\n<tr data-nodeid=\"28917\">\n<td data-nodeid=\"28918\"><strong data-nodeid=\"29781\">\u00abextend\u00bb<\/strong><\/td>\n<td data-nodeid=\"28919\">Perilaku opsional atau bersyarat<\/td>\n<td data-nodeid=\"28920\">\u201cTerapkan Diskon\u201d memperluas \u201cPemesanan Meja\u201d ketika kode promosi dimasukkan<\/td>\n<\/tr>\n<tr data-nodeid=\"28921\">\n<td data-nodeid=\"28922\"><strong data-nodeid=\"29794\">Generalisasi<\/strong><\/td>\n<td data-nodeid=\"28923\">Pewarisan antara aktor atau kasus penggunaan<\/td>\n<td data-nodeid=\"28924\">\u201cAdmin\u201d mewarisi dari \u201cUser\u201d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"28925\"><strong data-nodeid=\"29807\">Penyempurnaan yang Disarankan oleh AI<\/strong>:<\/p>\n<ul data-nodeid=\"28926\">\n<li data-nodeid=\"28927\">\n<p data-nodeid=\"28928\"><strong data-nodeid=\"29812\">Ekstraksi Kesamaan<\/strong>: Mengidentifikasi langkah-langkah yang berulang \u2192 sarankan hubungan \u00abinclude\u00bb<\/p>\n<\/li>\n<li data-nodeid=\"28929\">\n<p data-nodeid=\"28930\"><strong data-nodeid=\"29821\">Percabangan Logika Bersyarat<\/strong>: Mendeteksi skenario \u201cjika-maka\u201d \u2192 sarankan hubungan \u00abextend\u00bb<\/p>\n<\/li>\n<li data-nodeid=\"28931\">\n<p data-nodeid=\"28932\"><strong data-nodeid=\"29826\">Generalisasi Aktor<\/strong>: Menemukan tanggung jawab yang tumpang tindih \u2192 sarankan hierarki<\/p>\n<\/li>\n<li data-nodeid=\"28933\">\n<p data-nodeid=\"28934\"><strong data-nodeid=\"29831\">Dekomposisi Kompleksitas<\/strong>: Mengidentifikasi kasus penggunaan yang terlalu besar \u2192 pecah menjadi sub-diagram<\/p>\n<\/li>\n<\/ul>\n<blockquote data-nodeid=\"28935\">\n<p data-nodeid=\"28936\"><strong data-nodeid=\"29836\">Wawasan Utama<\/strong>: AI menghilangkan pekerjaan mekanis menggambar panah dan mengenali pola, sementara pengetahuan domain Anda memastikan hubungan tersebut memiliki makna bisnis yang nyata.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28937\">Diagram Kasus Penggunaan Contoh dengan Hubungan yang Disempurnakan<\/h4>\n<p data-nodeid=\"28938\"><img alt=\"\" data-nodeid=\"29839\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc924bda49.png\"\/><\/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:XLHDJzmm4Br7odyOvG8SThcZLGGiLU60X6YhNhWCzh1hrR4jsu6k4F-zOpjXLqRQvX2D9-_DnvjnBaD47yT1jqrKKHCyqeio9E5N85WZlsuKRZmEi83lTlG3nKSAv5yJahcZHnFXohcsQHjDBn6Y1QyssmXIUH9HMTCsAABrqDrmPDy11lx6rgV_7WrkfYz3iLEuH4UpuQAwAlMFNOWqTF3UDi3F64YaKhjhQ_y0mazyrfIZFREZmZnuMbWloSCzeSuevobxAkGQZI0D9IccJZ9QP7U5BIqSOiD1EmLSKQx6k2KJbS18IUxIFxBtIyLMK0ZmWBk12QNaOjSXdTCxdbWGTkInhEtefgBbvAi8jsWaw_iRUVOgbD1lq-6mw1EuCqAFai2JBkrjbGjmolr9v27kpWem2GxBPP_xW0jOhLGXzdq1p5eV1HM9ZqAAi4SXLKMJPFyjwWXk5kFRtqX6rbfObmwepuKrKXNxK9RLSlavXnoTSfY-VpAdd93JEsy72y9AgddpK6gUiH3JjlFYlABIoMJgHxe--Ox1Oj5Fjs1_tk_xtZTlzNJ_iczUthQvv7pya_W7\" 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:XLJRJjj047stv7yOvQNX8U6zYYoe8e4K8Q6M7nZRWrdsPksbDAhwxynwOsmC3NxRcNFcTcPyvGEw4BKgYo228jWBx1ngEA2F7kx9T5qqY0QEQ3hsUj9zT0ObcpPmtIiXqGluIJvOnxOR6vscm6zolwaioW8TFe4KJe0aO1eQjZMCXjLU678hy5HZXmBQz7nptZ6qcxjrDgIOZfh0zN2zgr_21zABl2luMnR0N_JKe6VOFMdoAJdSqJDEGMjhvV-XEDJBRHinKNf7rhMfa7Uq7nXGGIw0HpBX6pGDgGNwGCeg_0oUsypm1Uaw1Z8XJtoKPY9Y34_BLfprb6JKDHvP23Fh0e-QWoq83-ImJzeUOczJurvQCrV8DpP-PB4MQ0JiyP7N2HvYAcrYlI2l5iiqx-aRtCOw9Xe8qwZO4gnVy5dK5zcVT87jjXgwWk-msvrWLPK1emfdGNdqPo5vt6SXYufEa_kog3Eu3pEWFwni2slRUs4DgikQd4-AXVayTjljcmH3s4ohAhFMVAyo2ISjZx9tLjibSvHXmGoYHGdO8cY-30YSc5g1pFwNJcquIjXigjEfJE_f3YRRkEkdMnriuqANnHMdv7_DAm00\" \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\" data-nodeid=\"28939\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\ntitle Diagram Kasus Penggunaan yang Disempurnakan - Aplikasi Restoran GourmetReserve\r\n\r\narah kiri ke kanan\r\nactor \"Diner\" sebagai diner\r\nactor \"Manager\" sebagai manager\r\n\r\nrectangle \"Sistem GourmetReserve\" {\r\n    usecase \"Pemesanan Meja\" sebagai book\r\n    usecase \"Pemesanan Makanan Dini\" sebagai preorder\r\n    usecase \"Batal Reservasi\" sebagai cancel\r\n    usecase \"Kelola Reservasi\" sebagai manage\r\n    \r\n    usecase \"Autentikasi Pengguna\" sebagai auth\r\n    usecase \"Proses Pembayaran\" sebagai payment\r\n    usecase \"Terapkan Kupon Diskon\" sebagai discount\r\n    usecase \"Tangani Daftar Tunggu\" sebagai waitlist\r\n    \r\n    ' Hubungan include (wajib)\r\n    book ..&gt; auth : &lt;&lt;include&gt;&gt;\r\n    preorder ..&gt; auth : &lt;&lt;include&gt;&gt;\r\n    cancel ..&gt; auth : &lt;&lt;include&gt;&gt;\r\n    manage ..&gt; auth : &lt;&lt;include&gt;&gt;\r\n    \r\n    book ..&gt; payment : &lt;&lt;include&gt;&gt;\r\n    preorder ..&gt; payment : &lt;&lt;include&gt;&gt;\r\n    \r\n    ' Hubungan extend (opsional\/bersyarat)\r\n    book &lt;.. discount : &lt;&lt;extend&gt;&gt;n(masukkan kode promo)\r\n    book &lt;.. waitlist : &lt;&lt;extend&gt;&gt;n(tidak ada meja tersedia)\r\n}\r\n\r\ndiner --&gt; book\r\ndiner --&gt; preorder\r\ndiner --&gt; cancel\r\nmanager --&gt; manage\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLJRJjj047stv7yOvQNX8U6zYYoe8e4K8Q6M7nZRWrdsPksbDAhwxynwOsmC3NxRcNFcTcPyvGEw4BKgYo228jWBx1ngEA2F7kx9T5qqY0QEQ3hsUj9zT0ObcpPmtIiXqGluIJvOnxOR6vscm6zolwaioW8TFe4KJe0aO1eQjZMCXjLU678hy5HZXmBQz7nptZ6qcxjrDgIOZfh0zN2zgr_21zABl2luMnR0N_JKe6VOFMdoAJdSqJDEGMjhvV-XEDJBRHinKNf7rhMfa7Uq7nXGGIw0HpBX6pGDgGNwGCeg_0oUsypm1Uaw1Z8XJtoKPY9Y34_BLfprb6JKDHvP23Fh0e-QWoq83-ImJzeUOczJurvQCrV8DpP-PB4MQ0JiyP7N2HvYAcrYlI2l5iiqx-aRtCOw9Xe8qwZO4gnVy5dK5zcVT87jjXgwWk-msvrWLPK1emfdGNdqPo5vt6SXYufEa_kog3Eu3pEWFwni2slRUs4DgikQd4-AXVayTjljcmH3s4ohAhFMVAyo2ISjZx9tLjibSvHXmGoYHGdO8cY-30YSc5g1pFwNJcquIjXigjEfJE_f3YRRkEkdMnriuqANnHMdv7_DAm00\" \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:XLHDJzmm4Br7odyOvG8SThcZLGGiLU60X6YhNhWCzh1hrR4jsu6k4F-zOpjXLqRQvX2D9-_DnvjnBaD47yT1jqrKKHCyqeio9E5N85WZlsuKRZmEi83lTlG3nKSAv5yJahcZHnFXohcsQHjDBn6Y1QyssmXIUH9HMTCsAABrqDrmPDy11lx6rgV_7WrkfYz3iLEuH4UpuQAwAlMFNOWqTF3UDi3F64YaKhjhQ_y0mazyrfIZFREZmZnuMbWloSCzeSuevobxAkGQZI0D9IccJZ9QP7U5BIqSOiD1EmLSKQx6k2KJbS18IUxIFxBtIyLMK0ZmWBk12QNaOjSXdTCxdbWGTkInhEtefgBbvAi8jsWaw_iRUVOgbD1lq-6mw1EuCqAFai2JBkrjbGjmolr9v27kpWem2GxBPP_xW0jOhLGXzdq1p5eV1HM9ZqAAi4SXLKMJPFyjwWXk5kFRtqX6rbfObmwepuKrKXNxK9RLSlavXnoTSfY-VpAdd93JEsy72y9AgddpK6gUiH3JjlFYlABIoMJgHxe--Ox1Oj5Fjs1_tk_xtZTlzNJ_iczUthQvv7pya_W7\" 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<p data-nodeid=\"28940\"><a data-nodeid=\"29842\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLHDJzmm4Br7odyOvG8SThcZLGGiLU60X6YhNhWCzh1hrR4jsu6k4F-zOpjXLqRQvX2D9-_DnvjnBaD47yT1jqrKKHCyqeio9E5N85WZlsuKRZmEi83lTlG3nKSAv5yJahcZHnFXohcsQHjDBn6Y1QyssmXIUH9HMTCsAABrqDrmPDy11lx6rgV_7WrkfYz3iLEuH4UpuQAwAlMFNOWqTF3UDi3F64YaKhjhQ_y0mazyrfIZFREZmZnuMbWloSCzeSuevobxAkGQZI0D9IccJZ9QP7U5BIqSOiD1EmLSKQx6k2KJbS18IUxIFxBtIyLMK0ZmWBk12QNaOjSXdTCxdbWGTkInhEtefgBbvAi8jsWaw_iRUVOgbD1lq-6mw1EuCqAFai2JBkrjbGjmolr9v27kpWem2GxBPP_xW0jOhLGXzdq1p5eV1HM9ZqAAi4SXLKMJPFyjwWXk5kFRtqX6rbfObmwepuKrKXNxK9RLSlavXnoTSfY-VpAdd93JEsy72y9AgddpK6gUiH3JjlFYlABIoMJgHxe--Ox1Oj5Fjs1_tk_xtZTlzNJ_iczUthQvv7pya_W7\">Edit PlantUML di VPasCode<\/a><\/p>\n<hr data-nodeid=\"28941\"\/>\n<h3 data-nodeid=\"28942\">Langkah 4: OpenDocs \u2013 Pusat Dokumentasi yang Hidup<\/h3>\n<p data-nodeid=\"28943\"><strong data-nodeid=\"29848\">Tujuan<\/strong>: Kompilasi dan terbitkan dokumentasi hidup di mana diagram memperbarui secara otomatis ketika model sumber berubah.<\/p>\n<p data-nodeid=\"28944\"><strong data-nodeid=\"29853\">Alur Kerja<\/strong>:<\/p>\n<ol data-nodeid=\"28945\">\n<li data-nodeid=\"28946\">\n<p data-nodeid=\"28947\"><strong data-nodeid=\"29858\">Buka panduan teknis Anda<\/strong> di editor dokumen OpenDocs<\/p>\n<\/li>\n<li data-nodeid=\"28948\">\n<p data-nodeid=\"28949\"><strong data-nodeid=\"29863\">Posisikan kursor<\/strong> pada titik sisip yang diinginkan<\/p>\n<\/li>\n<li data-nodeid=\"28950\">\n<p data-nodeid=\"28951\"><strong data-nodeid=\"29868\">Sisipkan Artefak Pipeline<\/strong>:<\/p>\n<ul data-nodeid=\"28952\">\n<li data-nodeid=\"28953\">\n<p data-nodeid=\"28954\">Toolbar \u2192 <strong data-nodeid=\"29878\">Sisipkan<\/strong> \u2192 <strong data-nodeid=\"29879\">Pipeline<\/strong> (bilah sisi kiri)<\/p>\n<\/li>\n<li data-nodeid=\"28955\">\n<p data-nodeid=\"28956\">Jelajahi koleksi tim yang dibagikan<\/p>\n<\/li>\n<li data-nodeid=\"28957\">\n<p data-nodeid=\"28958\">Filter berdasarkan komentar, tanggal, atau platform sumber<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28959\">\n<p data-nodeid=\"28960\"><strong data-nodeid=\"29886\">Render secara inline<\/strong>: Diagram muncul secara instan dengan resolusi penuh dan kemampuan interaktif<\/p>\n<\/li>\n<li data-nodeid=\"28961\">\n<p data-nodeid=\"28962\"><strong data-nodeid=\"29891\">Tulis konteks sekitarnya<\/strong> menggunakan Markdown dengan pratinjau langsung:<\/p>\n<ul data-nodeid=\"28963\">\n<li data-nodeid=\"28964\">\n<p data-nodeid=\"28965\">Pengeditan teks kaya<\/p>\n<\/li>\n<li data-nodeid=\"28966\">\n<p data-nodeid=\"28967\">Tabel, blok kode, folder hierarkis<\/p>\n<\/li>\n<li data-nodeid=\"28968\">\n<p data-nodeid=\"28969\">Semua sambil diagram tetap interaktif<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-nodeid=\"28970\">\n<p data-nodeid=\"28971\"><strong data-nodeid=\"29899\">Kelola Pembaruan<\/strong>:<\/p>\n<ul data-nodeid=\"28972\">\n<li data-nodeid=\"28973\">\n<p data-nodeid=\"28974\">Sebuah mengambang <strong data-nodeid=\"29905\">Indikator Revisi (\ud83d\udd04)<\/strong> muncul di sebelah diagram tertanam ketika versi Pipeline yang lebih baru tersedia<\/p>\n<\/li>\n<li data-nodeid=\"28975\">\n<p data-nodeid=\"28976\">Klik indikator untuk melihat stempel waktu kronologis, catatan commit, dan platform sumber secara berdampingan<\/p>\n<\/li>\n<li data-nodeid=\"28977\">\n<p data-nodeid=\"28978\">Ganti versi untuk memperbarui dokumen utama Anda secara instan<\/p>\n<\/li>\n<li data-nodeid=\"28979\">\n<p data-nodeid=\"28980\">Versi sebelumnya tetap dapat diakses untuk jejak audit atau skenario rollback<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<blockquote data-nodeid=\"28981\">\n<p data-nodeid=\"28982\"><strong data-nodeid=\"29913\">\ud83d\udca1 Konsep Kunci<\/strong>: Tidak seperti platform teks standar di mana gambar adalah tangkapan statis, visual yang disematkan dalam OpenDocs tetap berupa vektor hidup. Pengguna dapat mengklik elemen langsung di dalam dokumen untuk membuka model sumber dan memperbaruinya.<\/p>\n<\/blockquote>\n<h4 data-nodeid=\"28983\">Contoh Struktur Konten OpenDocs<\/h4>\n<pre class=\"lang-text\" data-nodeid=\"28984\"><code data-language=\"text\">\ud83d\udcc1 Dokumentasi Proyek\r\n\u251c\u2500\u2500 \ud83d\udcc4 01 - Ringkasan Eksekutif\r\n\u2502   \u2514\u2500\u2500 [Ringkasan Pemangku Kepentingan yang Dihasilkan AI dengan Diagram Konteks Sistem]\r\n\u251c\u2500\u2500 \ud83d\udcc4 02 - Gambaran Arsitektur\r\n\u2502   \u251c\u2500\u2500 [Diagram Konteks C4 - Live]\r\n\u2502   \u251c\u2500\u2500 [Diagram Kontainer C4 - Live]\r\n\u2502   \u2514\u2500\u2500 Keputusan Tumpukan Teknologi\r\n\u251c\u2500\u2500 \ud83d\udcc4 03 - Desain Detail\r\n\u2502   \u251c\u2500\u2500 [Diagram Komponen - Live]\r\n\u2502   \u251c\u2500\u2500 [Diagram Urutan - Live]\r\n\u2502   \u2514\u2500\u2500 Spesifikasi API\r\n\u251c\u2500\u2500 \ud83d\udcc4 04 - Arsitektur Deployment\r\n\u2502   \u251c\u2500\u2500 [Diagram Deployment - Live]\r\n\u2502   \u2514\u2500\u2500 Persyaratan Infrastruktur\r\n\u2514\u2500\u2500 \ud83d\udcc4 05 - Penjaminan Kualitas\r\n    \u251c\u2500\u2500 [Kasus Uji dari Generator AI]\r\n    \u2514\u2500\u2500 Metrik Cakupan\r\n<\/code><\/pre>\n<hr data-nodeid=\"28985\"\/>\n<h3 data-nodeid=\"28986\">Langkah 5: Penjaminan Kualitas dan Pengujian<\/h3>\n<p data-nodeid=\"28987\"><strong data-nodeid=\"29920\">Tujuan<\/strong>: Secara otomatis menghasilkan kasus uji yang dapat ditelusuri dari model Anda.<\/p>\n<p data-nodeid=\"28988\"><strong data-nodeid=\"29925\">Aset Uji yang Dihasilkan AI<\/strong>:<\/p>\n<table data-nodeid=\"28990\">\n<thead data-nodeid=\"28991\">\n<tr data-nodeid=\"28992\">\n<th data-nodeid=\"28994\"><strong data-nodeid=\"29929\">Artefak Uji<\/strong><\/th>\n<th data-nodeid=\"28995\"><strong data-nodeid=\"29933\">Sumber<\/strong><\/th>\n<th data-nodeid=\"28996\"><strong data-nodeid=\"29937\">Contoh<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29000\">\n<tr data-nodeid=\"29001\">\n<td data-nodeid=\"29002\">Kasus Uji<\/td>\n<td data-nodeid=\"29003\">Spesifikasi kasus penggunaan, tabel keputusan, Diagram Aktivitas\/Urutan<\/td>\n<td data-nodeid=\"29004\">TC-001 \u2013 Jalur Sukses, TC-002 \u2013 Kegagalan Pembayaran<\/td>\n<\/tr>\n<tr data-nodeid=\"29005\">\n<td data-nodeid=\"29006\">Prasyarat<\/td>\n<td data-nodeid=\"29007\">Alur kasus penggunaan<\/td>\n<td data-nodeid=\"29008\">\u201cPemesan masuk, meja tersedia, ukuran kelompok 4\u201d<\/td>\n<\/tr>\n<tr data-nodeid=\"29009\">\n<td data-nodeid=\"29010\">Tautan Keterlacakan<\/td>\n<td data-nodeid=\"29011\">Dari persyaratan ke elemen desain hingga kasus uji<\/td>\n<td data-nodeid=\"29012\">\u201cLacak: Langkah alur utama 1\u20137, Aturan Tabel Keputusan R1\u201d<\/td>\n<\/tr>\n<tr data-nodeid=\"29013\">\n<td data-nodeid=\"29014\">Metrik Cakupan<\/td>\n<td data-nodeid=\"29015\">Dasbor Proyek<\/td>\n<td data-nodeid=\"29016\">\u201c92% dari aturan tabel keputusan telah diuji\u201d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29017\"><strong data-nodeid=\"29960\">Contoh Kasus Uji yang Dihasilkan AI<\/strong>:<\/p>\n<pre class=\"lang-text\" data-nodeid=\"29018\"><code data-language=\"text\">TC-001 \u2013 Jalur Sukses \u2013 Tidak Perlu Setoran\r\nPrioritas: Tinggi\r\nPrasyarat: Pemesan masuk (loyalitas Gold), meja tersedia, di luar jam sibuk, ukuran kelompok 4\r\nLangkah:\r\n  1. Cari meja \u2192 pilih slot\r\n  2. Tinjau ringkasan (tidak ada setoran yang ditampilkan)\r\n  3. Konfirmasi pemesanan\r\nHasil yang Diharapkan: Pemesanan dikonfirmasi, konfirmasi dikirim, tidak ada layar pembayaran\r\nLacak: Langkah alur utama 1\u20137, Aturan Tabel Keputusan R1\r\n\r\nTC-002 \u2013 Setoran Diperlukan \u2013 Pembayaran Gagal\r\nPrioritas: Tinggi\r\nPrasyarat: Ukuran kelompok 10, jam sibuk, bukan Gold, kartu valid tetapi dana tidak mencukupi\r\nLangkah:\r\n  1. Pilih slot \u2192 lanjutkan ke pembayaran\r\n  2. Masukkan kartu \u2192 kirim\r\nHasil yang Diharapkan: Pesan kesalahan \"Pembayaran ditolak\", pemesanan tidak dibuat, kembali ke pemilihan slot\r\nLacak: Aturan Tabel Keputusan R5, Alur pengecualian 4b\r\n<\/code><\/pre>\n<hr data-nodeid=\"29019\"\/>\n<h3 data-nodeid=\"29020\">Langkah 6: Sinkronisasi dan Pembaruan Berkelanjutan<\/h3>\n<p data-nodeid=\"29021\"><strong data-nodeid=\"29966\">Tujuan<\/strong>: Pertahankan satu sumber kebenaran tunggal di seluruh semua artefak.<\/p>\n<p data-nodeid=\"29022\"><strong data-nodeid=\"29974\">Alur Kerja Loop Tertutup<\/strong>:<br \/>\n<img alt=\"\" data-nodeid=\"29973\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc99b3ad7d.png\"\/><\/p>\n<p data-nodeid=\"29023\"><strong data-nodeid=\"29979\">Manajemen Sinkronisasi Dua Arah<\/strong>:<\/p>\n<ul data-nodeid=\"29024\">\n<li data-nodeid=\"29025\">\n<p data-nodeid=\"29026\">Perbarui sebuah kelas di Desktop \u2192 diperbarui secara otomatis di OpenDocs<\/p>\n<\/li>\n<li data-nodeid=\"29027\">\n<p data-nodeid=\"29028\">Sempurnakan sebuah prompt di Chatbot \u2192 dorong perubahan kembali ke Studios<\/p>\n<\/li>\n<li data-nodeid=\"29029\">\n<p data-nodeid=\"29030\">Sinkronisasi akun tunggal<\/p>\n<\/li>\n<li data-nodeid=\"29031\">\n<p data-nodeid=\"29032\">Riwayat versi dan keterlacakan penuh<\/p>\n<\/li>\n<li data-nodeid=\"29033\">\n<p data-nodeid=\"29034\">Nol pekerjaan ulang manual<\/p>\n<\/li>\n<\/ul>\n<hr data-nodeid=\"29035\"\/>\n<h2 data-nodeid=\"29036\">Bagian 3: Pedoman dan Praktik Terbaik<\/h2>\n<h3 data-nodeid=\"29037\">1. Praktik Terbaik AI Chatbot<\/h3>\n<p data-nodeid=\"29038\"><strong data-nodeid=\"29991\">Teknik Perumusan Prompt yang Efektif<\/strong>:<\/p>\n<table data-nodeid=\"29040\">\n<thead data-nodeid=\"29041\">\n<tr data-nodeid=\"29042\">\n<th data-nodeid=\"29044\"><strong data-nodeid=\"29995\">Lakukan<\/strong><\/th>\n<th data-nodeid=\"29045\"><strong data-nodeid=\"30001\">Jangan<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29048\">\n<tr data-nodeid=\"29049\">\n<td data-nodeid=\"29050\">Sebutkan nama peserta dengan jelas di awal: \u201cUser, Browser, AuthService\u201d<\/td>\n<td data-nodeid=\"29051\">Permintaan yang samar seperti \u201cBuat diagram sistem\u201d<\/td>\n<\/tr>\n<tr data-nodeid=\"29052\">\n<td data-nodeid=\"29053\">Gunakan bahasa alur kendali: \u201cif\u2026then\u2026else\u201d, \u201cwhile\u201d, \u201cin parallel\u201d<\/td>\n<td data-nodeid=\"29054\">Anggap AI mengetahui lapisan arsitektur yang belum Anda sebutkan<\/td>\n<\/tr>\n<tr data-nodeid=\"29055\">\n<td data-nodeid=\"29056\">Spesifikasikan lapisan arsitektur: \u201cController \u2192 Service \u2192 Repository\u201d<\/td>\n<td data-nodeid=\"29057\">Campurkan beberapa skenario yang tidak terkait dalam satu prompt<\/td>\n<\/tr>\n<tr data-nodeid=\"29058\">\n<td data-nodeid=\"29059\">Minta anotasi: \u201cTambahkan catatan untuk pra-kondisi\u201d<\/td>\n<td data-nodeid=\"29060\">Harapkan tata letak yang sempurna pada percobaan pertama<\/td>\n<\/tr>\n<tr data-nodeid=\"29061\">\n<td data-nodeid=\"29062\">Minta variasi: \u201cTampilkan jalur kegagalan secara terpisah\u201d<\/td>\n<td data-nodeid=\"29063\">Lupa untuk melakukan iterasi dan penyempurnaan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29064\"><strong data-nodeid=\"30044\">Perintah Penyempurnaan Iteratif<\/strong>:<\/p>\n<pre class=\"lang-text\" data-nodeid=\"29065\"><code data-language=\"text\">\"Tambahkan loop percobaan ulang jika validasi OTP gagal (maksimal 3 percobaan)\"\r\n\"Sisipkan langkah dua faktor hanya jika pengguna mengaktifkan 2FA (gunakan fragmen opt)\"\r\n\"Tampilkan pesan paralel: setelah pembayaran berhasil, beri tahu pelanggan dan perbarui inventaris secara bersamaan\"\r\n\"Ubah garis hidup PaymentGateway untuk menampilkan waktu habis setelah 30 detik\"\r\n\"Tambahkan pesan mandiri pada OrderService untuk menghitung total sebelum memanggil PaymentGateway\"\r\n<\/code><\/pre>\n<h3 data-nodeid=\"29066\">2. Praktik Terbaik Pemodelan C4<\/h3>\n<p data-nodeid=\"29067\"><strong data-nodeid=\"30050\">Pedoman Khusus Lapisan<\/strong>:<\/p>\n<table data-nodeid=\"29069\">\n<thead data-nodeid=\"29070\">\n<tr data-nodeid=\"29071\">\n<th data-nodeid=\"29073\"><strong data-nodeid=\"30054\">Lapisan<\/strong><\/th>\n<th data-nodeid=\"29074\"><strong data-nodeid=\"30058\">Praktik Terbaik<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29077\">\n<tr data-nodeid=\"29078\">\n<td data-nodeid=\"29079\"><strong data-nodeid=\"30062\">Konteks<\/strong><\/td>\n<td data-nodeid=\"29080\">Tampilkan hanya batas sistem dan interaksi eksternal langsung; satu kotak untuk seluruh sistem<\/td>\n<\/tr>\n<tr data-nodeid=\"29081\">\n<td data-nodeid=\"29082\"><strong data-nodeid=\"30067\">Kontainer<\/strong><\/td>\n<td data-nodeid=\"29083\">Tampilkan unit yang dapat dideploy (aplikasi, basis data, layanan); hindari menampilkan detail teknologi dalam hubungan<\/td>\n<\/tr>\n<tr data-nodeid=\"29084\">\n<td data-nodeid=\"29085\"><strong data-nodeid=\"30072\">Komponen<\/strong><\/td>\n<td data-nodeid=\"29086\">Tampilkan pengelompokan logis kelas; pastikan setiap komponen memiliki tanggung jawab yang jelas<\/td>\n<\/tr>\n<tr data-nodeid=\"29087\">\n<td data-nodeid=\"29088\"><strong data-nodeid=\"30077\">Penempatan<\/strong><\/td>\n<td data-nodeid=\"29089\">Peta komponen ke infrastruktur aktual; sertakan informasi redundansi dan penskalaan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29090\"><strong data-nodeid=\"30083\">Prinsip Umum C4<\/strong>:<\/p>\n<ul data-nodeid=\"29091\">\n<li data-nodeid=\"29092\">\n<p data-nodeid=\"29093\">Setiap tingkat harus memberikan perspektif yang berbeda, bukan hanya lebih banyak detail<\/p>\n<\/li>\n<li data-nodeid=\"29094\">\n<p data-nodeid=\"29095\">Diagram harus dapat dipahami sendiri dengan teks minimal<\/p>\n<\/li>\n<li data-nodeid=\"29096\">\n<p data-nodeid=\"29097\">Jaga konsistensi terminologi di semua tingkat<\/p>\n<\/li>\n<li data-nodeid=\"29098\">\n<p data-nodeid=\"29099\">Gunakan kode warna untuk membedakan komponen sistem vs. eksternal<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29100\">3. Praktik Terbaik Pipa<\/h3>\n<p data-nodeid=\"29101\"><strong data-nodeid=\"30093\">Manajemen Metadata<\/strong>:<\/p>\n<table data-nodeid=\"29103\">\n<thead data-nodeid=\"29104\">\n<tr data-nodeid=\"29105\">\n<th data-nodeid=\"29107\"><strong data-nodeid=\"30097\">Praktik<\/strong><\/th>\n<th data-nodeid=\"29108\"><strong data-nodeid=\"30101\">Mengapa<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29111\">\n<tr data-nodeid=\"29112\">\n<td data-nodeid=\"29113\">Tambahkan catatan commit yang deskriptif<\/td>\n<td data-nodeid=\"29114\">Membantu identifikasi versi dan jejak audit<\/td>\n<\/tr>\n<tr data-nodeid=\"29115\">\n<td data-nodeid=\"29116\">Gunakan konvensi penamaan yang konsisten<\/td>\n<td data-nodeid=\"29117\">Aktifkan penyaringan dan pencarian di seluruh koleksi tim<\/td>\n<\/tr>\n<tr data-nodeid=\"29118\">\n<td data-nodeid=\"29119\">Sertakan informasi platform sumber<\/td>\n<td data-nodeid=\"29120\">Lacak asal-usul artefak<\/td>\n<\/tr>\n<tr data-nodeid=\"29121\">\n<td data-nodeid=\"29122\">Berikan tag dengan pengenal sprint atau rilis<\/td>\n<td data-nodeid=\"29123\">Fasilitasi rollback dan perbandingan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29124\"><strong data-nodeid=\"30114\">Manajemen Versi<\/strong>:<\/p>\n<ul data-nodeid=\"29125\">\n<li data-nodeid=\"29126\">\n<p data-nodeid=\"29127\">Tinjau revisi sebelum mengganti dokumen<\/p>\n<\/li>\n<li data-nodeid=\"29128\">\n<p data-nodeid=\"29129\">Jaga agar versi sebelumnya tetap dapat diakses untuk jejak audit<\/p>\n<\/li>\n<li data-nodeid=\"29130\">\n<p data-nodeid=\"29131\">Gunakan Indikator Revisi (\ud83d\udd04) untuk mengidentifikasi diagram yang sudah usang<\/p>\n<\/li>\n<li data-nodeid=\"29132\">\n<p data-nodeid=\"29133\">Lakukan pembaruan secara batch jika memungkinkan untuk menjaga koherensi dokumen<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29134\">4. Praktik Terbaik OpenDocs<\/h3>\n<p data-nodeid=\"29135\"><strong data-nodeid=\"30124\">Struktur Dokumentasi<\/strong>:<\/p>\n<table data-nodeid=\"29137\">\n<thead data-nodeid=\"29138\">\n<tr data-nodeid=\"29139\">\n<th data-nodeid=\"29141\"><strong data-nodeid=\"30128\">Praktik<\/strong><\/th>\n<th data-nodeid=\"29142\"><strong data-nodeid=\"30132\">Deskripsi<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29145\">\n<tr data-nodeid=\"29146\">\n<td data-nodeid=\"29147\">Gunakan Ruang Terstruktur Pohon<\/td>\n<td data-nodeid=\"29148\">Organisasi dokumentasi menggunakan folder bersarang hierarkis; tiru arsitektur sistem<\/td>\n<\/tr>\n<tr data-nodeid=\"29149\">\n<td data-nodeid=\"29150\">Sematkan, Jangan Tempel<\/td>\n<td data-nodeid=\"29151\">Sisipkan artefak Pipeline langsung daripada tangkapan layar statis<\/td>\n<\/tr>\n<tr data-nodeid=\"29152\">\n<td data-nodeid=\"29153\">Jaga Pemisahan Kepentingan<\/td>\n<td data-nodeid=\"29154\">Pisahkan diagram arsitektur dari dokumen implementasi terperinci<\/td>\n<\/tr>\n<tr data-nodeid=\"29155\">\n<td data-nodeid=\"29156\">Aktifkan Kolaborasi<\/td>\n<td data-nodeid=\"29157\">Bagikan tautan tunggal; pemangku kepentingan berkomentar langsung pada diagram atau teks<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29158\"><strong data-nodeid=\"30147\">Jalur Sematan JIT (Just-in-Time)<\/strong>:<\/p>\n<ol data-nodeid=\"29159\">\n<li data-nodeid=\"29160\">\n<p data-nodeid=\"29161\"><strong data-nodeid=\"30152\">Sematan Ad Hoc<\/strong>: Klik Sisipkan &gt; Diagram langsung di dalam halaman dokumen<\/p>\n<\/li>\n<li data-nodeid=\"29162\">\n<p data-nodeid=\"29163\"><strong data-nodeid=\"30157\">Pembuatan Berbasis AI<\/strong>: Gunakan bahasa alami untuk membuat diagram di dalam narasi teks<\/p>\n<\/li>\n<li data-nodeid=\"29164\">\n<p data-nodeid=\"29165\"><strong data-nodeid=\"30162\">Pipeline Aset Terpusat<\/strong>: Dorong dari Desktop\/Online ke Pipeline; tarik ke dalam dokumen<\/p>\n<\/li>\n<\/ol>\n<h3 data-nodeid=\"29166\">5. Praktik Terbaik Penjaminan Kualitas<\/h3>\n<p data-nodeid=\"29167\"><strong data-nodeid=\"30168\">Persyaratan Keterlacakan<\/strong>:<\/p>\n<table data-nodeid=\"29169\">\n<thead data-nodeid=\"29170\">\n<tr data-nodeid=\"29171\">\n<th data-nodeid=\"29173\"><strong data-nodeid=\"30172\">Artefak<\/strong><\/th>\n<th data-nodeid=\"29174\"><strong data-nodeid=\"30176\">Persyaratan Keterlacakan<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29177\">\n<tr data-nodeid=\"29178\">\n<td data-nodeid=\"29179\">Kasus Penggunaan<\/td>\n<td data-nodeid=\"29180\">Tautkan ke persyaratan dan kasus uji<\/td>\n<\/tr>\n<tr data-nodeid=\"29181\">\n<td data-nodeid=\"29182\">Tabel Keputusan<\/td>\n<td data-nodeid=\"29183\">Pastikan setiap aturan dicakup oleh setidaknya satu uji<\/td>\n<\/tr>\n<tr data-nodeid=\"29184\">\n<td data-nodeid=\"29185\">Diagram Aktivitas\/Urutan<\/td>\n<td data-nodeid=\"29186\">Tautkan langkah uji ke elemen diagram tertentu<\/td>\n<\/tr>\n<tr data-nodeid=\"29187\">\n<td data-nodeid=\"29188\">Aspek non-fungsional<\/td>\n<td data-nodeid=\"29189\">Sertakan dalam catatan atau batasan; uji secara terpisah<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p data-nodeid=\"29190\"><strong data-nodeid=\"30189\">Metrik Cakupan Uji<\/strong>:<\/p>\n<ul data-nodeid=\"29191\">\n<li data-nodeid=\"29192\">\n<p data-nodeid=\"29193\">Pantau kelengkapan melalui Dasbor Proyek<\/p>\n<\/li>\n<li data-nodeid=\"29194\">\n<p data-nodeid=\"29195\">Lacak cakupan di seluruh: kasus penggunaan, tabel keputusan, skenario (jalur sukses, alternatif, pengecualian, kasus batas)<\/p>\n<\/li>\n<li data-nodeid=\"29196\">\n<p data-nodeid=\"29197\">Prioritisasi kasus uji yang tersisa berdasarkan risiko<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"29198\">6. Praktik Terbaik Pelaporan dan Dokumentasi<\/h3>\n<p data-nodeid=\"29199\"><strong data-nodeid=\"30198\">Struktur Laporan yang Dihasilkan AI<\/strong>:<\/p>\n<table data-nodeid=\"29201\">\n<thead data-nodeid=\"29202\">\n<tr data-nodeid=\"29203\">\n<th data-nodeid=\"29205\"><strong data-nodeid=\"30202\">Bagian<\/strong><\/th>\n<th data-nodeid=\"29206\"><strong data-nodeid=\"30206\">Konten<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29209\">\n<tr data-nodeid=\"29210\">\n<td data-nodeid=\"29211\">Ringkasan Eksekutif<\/td>\n<td data-nodeid=\"29212\">Narasi tingkat tinggi tentang tujuan sistem<\/td>\n<\/tr>\n<tr data-nodeid=\"29213\">\n<td data-nodeid=\"29214\">Model Logika Visual<\/td>\n<td data-nodeid=\"29215\">Diagram Kasus Penggunaan, Aktivitas, dan Urutan yang Dirender<\/td>\n<\/tr>\n<tr data-nodeid=\"29216\">\n<td data-nodeid=\"29217\">Spesifikasi Fungsional<\/td>\n<td data-nodeid=\"29218\">Alur peristiwa terperinci (Jalur Utama, Alternatif, Pengecualian)<\/td>\n<\/tr>\n<tr data-nodeid=\"29219\">\n<td data-nodeid=\"29220\">Matriks Keterlacakan<\/td>\n<td data-nodeid=\"29221\">Persyaratan \u2192 Desain \u2192 Kasus Uji<\/td>\n<\/tr>\n<tr data-nodeid=\"29222\">\n<td data-nodeid=\"29223\">Skema Data<\/td>\n<td data-nodeid=\"29224\">Diagram Entitas-Relasi dan struktur kelas<\/td>\n<\/tr>\n<tr data-nodeid=\"29225\">\n<td data-nodeid=\"29226\">Rencana Penempatan<\/td>\n<td data-nodeid=\"29227\">Persyaratan infrastruktur dan topologi<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr data-nodeid=\"29228\"\/>\n<h2 data-nodeid=\"29229\">Bagian 4: Contoh Alur Kerja End-to-End<\/h2>\n<h3 data-nodeid=\"29230\">Skenario: Membangun Sistem Manajemen Gudang<\/h3>\n<p data-nodeid=\"29231\"><strong data-nodeid=\"30224\">Langkah 1: Chatbot AI \u2013 Ideasi<\/strong><\/p>\n<pre class=\"lang-text\" data-nodeid=\"29232\"><code data-language=\"text\">Perintah: \"Buat diagram Konteks Sistem C4 untuk Sistem Manajemen Gudang \nyang terintegrasi dengan ERP dan Manajemen Pesanan\"\n<\/code><\/pre>\n<p data-nodeid=\"29233\"><strong data-nodeid=\"30229\">Output<\/strong>: Diagram Konteks awal yang menampilkan pengguna (Staf Gudang, Manajer, Logistik) dan sistem eksternal (ERP, OMS).<\/p>\n<p data-nodeid=\"29234\"><strong data-nodeid=\"30233\">Langkah 2: Studio C4-PlantUML \u2013 Penyempurnaan Terarah<\/strong><\/p>\n<ul data-nodeid=\"29235\">\n<li data-nodeid=\"29236\">\n<p data-nodeid=\"29237\">Tentukan pernyataan masalah dengan Bantuan AI<\/p>\n<\/li>\n<li data-nodeid=\"29238\">\n<p data-nodeid=\"29239\">Buat Diagram Kontainer: Aplikasi Web (React), Layanan Optimasi Penyimpanan (Spring Boot), Basis Data Inventaris (PostgreSQL)<\/p>\n<\/li>\n<li data-nodeid=\"29240\">\n<p data-nodeid=\"29241\">Buat Diagram Komponen: Mesin Analisis Penyimpanan, Kalkulator Ukuran Item, Layanan Frekuensi Item, Layanan Pengisian Ulang<\/p>\n<\/li>\n<li data-nodeid=\"29242\">\n<p data-nodeid=\"29243\">Buat Diagram Penempatan: Arsitektur AWS dengan EC2, RDS, ElastiCache<\/p>\n<\/li>\n<li data-nodeid=\"29244\">\n<p data-nodeid=\"29245\">Tambahkan Pandangan Dinamis: Diagram Urutan untuk pelacakan pergerakan inventaris<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"29246\"><strong data-nodeid=\"30244\">Langkah 3: Penyempurnaan Relasi<\/strong><br \/>\nAI mengidentifikasi dan menyarankan:<\/p>\n<ul data-nodeid=\"29247\">\n<li data-nodeid=\"29248\">\n<p data-nodeid=\"29249\">\u00abinclude\u00bb \u2192 Autentikasi Pengguna untuk semua kasus penggunaan<\/p>\n<\/li>\n<li data-nodeid=\"29250\">\n<p data-nodeid=\"29251\">\u00abinclude\u00bb \u2192 Proses Pembayaran untuk Pemesanan Meja dan Pemesanan Makanan Dini<\/p>\n<\/li>\n<li data-nodeid=\"29252\">\n<p data-nodeid=\"29253\">\u00abextend\u00bb \u2192 Terapkan Kupon Diskon (bersyarat pada kode promosi)<\/p>\n<\/li>\n<li data-nodeid=\"29254\">\n<p data-nodeid=\"29255\">\u00abextend\u00bb \u2192 Tangani Daftar Tunggu (bersyarat jika tidak ada meja tersedia)<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"29256\"><strong data-nodeid=\"30252\">Langkah 4: OpenDocs \u2013 Dokumentasi Hidup<\/strong><\/p>\n<ul data-nodeid=\"29257\">\n<li data-nodeid=\"29258\">\n<p data-nodeid=\"29259\">Sisipkan semua artefak Pipeline ke halaman dokumentasi<\/p>\n<\/li>\n<li data-nodeid=\"29260\">\n<p data-nodeid=\"29261\">Tulis penjelasan Markdown dengan diagram langsung yang tertanam<\/p>\n<\/li>\n<li data-nodeid=\"29262\">\n<p data-nodeid=\"29263\">Tambahkan kasus uji yang dihasilkan secara otomatis dari kasus penggunaan dan tabel keputusan<\/p>\n<\/li>\n<li data-nodeid=\"29264\">\n<p data-nodeid=\"29265\">Terbitkan ke portal pemangku kepentingan melalui tautan berbagi aman<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"29266\"><strong data-nodeid=\"30260\">Langkah 5: Sinkronisasi<\/strong><\/p>\n<ul data-nodeid=\"29267\">\n<li data-nodeid=\"29268\">\n<p data-nodeid=\"29269\">Dua minggu kemudian, teknik mengubah algoritma optimasi penyimpanan<\/p>\n<\/li>\n<li data-nodeid=\"29270\">\n<p data-nodeid=\"29271\">Arsitek mengedit diagram di VP Desktop<\/p>\n<\/li>\n<li data-nodeid=\"29272\">\n<p data-nodeid=\"29273\">OpenDocs menandai perubahan sinkronisasi kepada tim penulis<\/p>\n<\/li>\n<li data-nodeid=\"29274\">\n<p data-nodeid=\"29275\">Tim beralih ke revisi baru tanpa merusak pemformatan manual<\/p>\n<\/li>\n<li data-nodeid=\"29276\">\n<p data-nodeid=\"29277\">Semua pemangku kepentingan melihat dokumentasi yang diperbarui secara instan<\/p>\n<\/li>\n<\/ul>\n<hr data-nodeid=\"29278\"\/>\n<h2 data-nodeid=\"29279\">Bagian 5: Ringkasan dan Poin Penting<\/h2>\n<h3 data-nodeid=\"29280\">Proposisi Nilai<\/h3>\n<p data-nodeid=\"29281\">Ekosistem AI Visual Paradigm mengubah alur kerja \u201cKonsep ke Dokumen\u201d yang terpecah menjadi satu pipa otomatis yang terpadu, di mana model visual dan dokumentasi berkembang bersama sebagai satu sumber kebenaran.<\/p>\n<p data-nodeid=\"29282\"><strong data-nodeid=\"30279\">Manfaat Utama<\/strong>:<\/p>\n<table data-nodeid=\"29284\">\n<thead data-nodeid=\"29285\">\n<tr data-nodeid=\"29286\">\n<th data-nodeid=\"29288\"><strong data-nodeid=\"30283\">Untuk Tim Teknis<\/strong><\/th>\n<th data-nodeid=\"29289\"><strong data-nodeid=\"30287\">Untuk Pemangku Kepentingan Bisnis<\/strong><\/th>\n<th data-nodeid=\"29290\"><strong data-nodeid=\"30291\">Untuk Organisasi<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29294\">\n<tr data-nodeid=\"29295\">\n<td data-nodeid=\"29296\">Beban pemeliharaan yang berkurang<\/td>\n<td data-nodeid=\"29297\">Pemahaman yang lebih baik terhadap sistem kompleks<\/td>\n<td data-nodeid=\"29298\">Satu sumber kebenaran<\/td>\n<\/tr>\n<tr data-nodeid=\"29299\">\n<td data-nodeid=\"29300\">Akurasi yang lebih baik<\/td>\n<td data-nodeid=\"29301\">Pengambilan keputusan yang lebih cepat<\/td>\n<td data-nodeid=\"29302\">Silo informasi yang dihilangkan<\/td>\n<\/tr>\n<tr data-nodeid=\"29303\">\n<td data-nodeid=\"29304\">Kolaborasi yang ditingkatkan<\/td>\n<td data-nodeid=\"29305\">Risiko miskomunikasi yang berkurang<\/td>\n<td data-nodeid=\"29306\">Manajemen pengetahuan yang dapat diskalakan<\/td>\n<\/tr>\n<tr data-nodeid=\"29307\">\n<td data-nodeid=\"29308\">Efisiensi berbasis AI<\/td>\n<td data-nodeid=\"29309\">Informasi terkini selalu tersedia<\/td>\n<td data-nodeid=\"29310\">Penerbitan yang tahan masa depan<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 data-nodeid=\"29311\">Ringkasan Alur Kerja Akhir<\/h3>\n<p data-nodeid=\"29312\"><img alt=\"\" data-nodeid=\"30306\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6a4cc9f44192b.png\"\/><\/p>\n<h3 data-nodeid=\"29313\">Referensi Cepat: Alat Mana untuk Tugas Mana<\/h3>\n<table data-nodeid=\"29315\">\n<thead data-nodeid=\"29316\">\n<tr data-nodeid=\"29317\">\n<th data-nodeid=\"29319\"><strong data-nodeid=\"30311\">Tugas<\/strong><\/th>\n<th data-nodeid=\"29320\"><strong data-nodeid=\"30315\">Alat<\/strong><\/th>\n<th data-nodeid=\"29321\"><strong data-nodeid=\"30319\">Mengapa<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"29325\">\n<tr data-nodeid=\"29326\">\n<td data-nodeid=\"29327\">Brainstorming dan pembuatan prototipe cepat<\/td>\n<td data-nodeid=\"29328\">Chatbot AI<\/td>\n<td data-nodeid=\"29329\">Cara tercepat dari ide ke visual<\/td>\n<\/tr>\n<tr data-nodeid=\"29330\">\n<td data-nodeid=\"29331\">Pemodelan C4 terstruktur<\/td>\n<td data-nodeid=\"29332\">Studio C4-PlantUML<\/td>\n<td data-nodeid=\"29333\">Alur kerja terpandu memastikan kelengkapan<\/td>\n<\/tr>\n<tr data-nodeid=\"29334\">\n<td data-nodeid=\"29335\">Dokumentasi hidup<\/td>\n<td data-nodeid=\"29336\">OpenDocs<\/td>\n<td data-nodeid=\"29337\">Diagram diperbarui secara otomatis; satu sumber kebenaran<\/td>\n<\/tr>\n<tr data-nodeid=\"29338\">\n<td data-nodeid=\"29339\">Rekayasa presisi<\/td>\n<td data-nodeid=\"29340\">VP Desktop<\/td>\n<td data-nodeid=\"29341\">Validasi, generasi kode, fitur perusahaan<\/td>\n<\/tr>\n<tr data-nodeid=\"29342\">\n<td data-nodeid=\"29343\">Generasi kasus uji<\/td>\n<td data-nodeid=\"29344\">Studio Kasus Penggunaan AI<\/td>\n<td data-nodeid=\"29345\">Dari kasus penggunaan dan tabel keputusan hingga aset uji<\/td>\n<\/tr>\n<tr data-nodeid=\"29346\">\n<td data-nodeid=\"29347\">Pelaporan<\/td>\n<td data-nodeid=\"29348\">Pelaporan AI<\/td>\n<td data-nodeid=\"29349\">Ringkasan eksekutif, panduan teknis, jejak audit<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr data-nodeid=\"29350\"\/>\n<h2 data-nodeid=\"29351\">Lampiran: Referensi Cepat Potongan Kode PlantUML<\/h2>\n<h3 data-nodeid=\"29352\">Konteks C4<\/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:TKwx3e904En9-0UaWaIunieMwTGG3JKvZerSSg_SBH7_taM8bLQpEu_TsKaZr3H0CYAwS6JCysVva3XE_HJ02siG39R2QkOKDpXfLGGSbEnPTIYQXMelPwPvGF14TTMIcB5qv8oZ1dom9bjExPEq9KW9Jn24bmwbDMaUH_SNXNKMFa3okYTNhk6lkwjdpEWFUCCLcUfjJ5RvH-u6QklnVKHzmk9il4Khh4hpDm00\" 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:TOv13u8m38Nl9lm7v8I9i8idhyfD395u9XCRNDWwidOH_xsR6Y_6KzlNx_LrgR3N_WhfZNcYhH1Etij1ySrVF87hBJ8WbxqrOj8IsHjT45-rkeZTfcYYTAuFmaXYS47gTj4nSpa5CbaquCXY7a-jqwm170QFCWlz7cXqQYALhP95-mXsazEhXELH6fcsAav_sAwQEGyvu53gWBpXj1hfBVtOJg0_RtnJwiyxeyI8Dywo7QtELay0\" \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\" data-nodeid=\"29353\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\nPerson(user, \"Pengguna\", \"Deskripsi\")\r\nSystem(system, \"Nama Sistem\", \"Deskripsi\")\r\nSystem_Ext(external, \"Sistem Eksternal\", \"Deskripsi\")\r\nRel(user, system, \"Menggunakan\", \"Protokol\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TOv13u8m38Nl9lm7v8I9i8idhyfD395u9XCRNDWwidOH_xsR6Y_6KzlNx_LrgR3N_WhfZNcYhH1Etij1ySrVF87hBJ8WbxqrOj8IsHjT45-rkeZTfcYYTAuFmaXYS47gTj4nSpa5CbaquCXY7a-jqwm170QFCWlz7cXqQYALhP95-mXsazEhXELH6fcsAav_sAwQEGyvu53gWBpXj1hfBVtOJg0_RtnJwiyxeyI8Dywo7QtELay0\" \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:TKwx3e904En9-0UaWaIunieMwTGG3JKvZerSSg_SBH7_taM8bLQpEu_TsKaZr3H0CYAwS6JCysVva3XE_HJ02siG39R2QkOKDpXfLGGSbEnPTIYQXMelPwPvGF14TTMIcB5qv8oZ1dom9bjExPEq9KW9Jn24bmwbDMaUH_SNXNKMFa3okYTNhk6lkwjdpEWFUCCLcUfjJ5RvH-u6QklnVKHzmk9il4Khh4hpDm00\" 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<p data-nodeid=\"29354\"><a data-nodeid=\"30342\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TKwx3e904En9-0UaWaIunieMwTGG3JKvZerSSg_SBH7_taM8bLQpEu_TsKaZr3H0CYAwS6JCysVva3XE_HJ02siG39R2QkOKDpXfLGGSbEnPTIYQXMelPwPvGF14TTMIcB5qv8oZ1dom9bjExPEq9KW9Jn24bmwbDMaUH_SNXNKMFa3okYTNhk6lkwjdpEWFUCCLcUfjJ5RvH-u6QklnVKHzmk9il4Khh4hpDm00\">Edit Plantuml di VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29355\">Kontainer C4<\/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:JOpB2i8m44NtWlyGish1DXjNRjjbbKfrBNaCRI0laYdYtvi85dTpphrt3jf9ioeW2s98PyOYVxMpncKLQu8elKDms4flMJ3SuMfDar0PBLXtQiQY7fU1MPuGObRFBY-uTX3RaBlxtSQL_5r7GZTBhjm2pUOESd7U-FbTg8SaemwelQFrtvDUL4gKd2CNF7sNeqyuHvXkGw49VOH4L2xG-WC0\" 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:JOox3i8m34Lt9FuXT0A9DWiJ8tI38X0m8xUrMeky5Bj2_3t906BpEVTUByXrPkfHZIA1jrf7U5K3oJYr4sFil1DqKdNUwc30oMHDoT8RQlL-KvwpkZT7RO45OrAFVLe0EOnLIDtvxCVBxdkjLN422-hm5KKoDtmwR_n06MhaPwJ0LAp-FjJjiczJkWCcLZK8vExPimmHhvTZfWRTcsm0f_gShpu0\" \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\" data-nodeid=\"29356\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\nContainer(container, \"Nama Kontainer\", \"Teknologi\", \"Deskripsi\")\r\nContainerDb(db, \"Basis Data\", \"PostgreSQL\", \"Menyimpan data\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:JOox3i8m34Lt9FuXT0A9DWiJ8tI38X0m8xUrMeky5Bj2_3t906BpEVTUByXrPkfHZIA1jrf7U5K3oJYr4sFil1DqKdNUwc30oMHDoT8RQlL-KvwpkZT7RO45OrAFVLe0EOnLIDtvxCVBxdkjLN422-hm5KKoDtmwR_n06MhaPwJ0LAp-FjJjiczJkWCcLZK8vExPimmHhvTZfWRTcsm0f_gShpu0\" \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:JOpB2i8m44NtWlyGish1DXjNRjjbbKfrBNaCRI0laYdYtvi85dTpphrt3jf9ioeW2s98PyOYVxMpncKLQu8elKDms4flMJ3SuMfDar0PBLXtQiQY7fU1MPuGObRFBY-uTX3RaBlxtSQL_5r7GZTBhjm2pUOESd7U-FbTg8SaemwelQFrtvDUL4gKd2CNF7sNeqyuHvXkGw49VOH4L2xG-WC0\" 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<p data-nodeid=\"29357\"><a data-nodeid=\"30346\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:JOpB2i8m44NtWlyGish1DXjNRjjbbKfrBNaCRI0laYdYtvi85dTpphrt3jf9ioeW2s98PyOYVxMpncKLQu8elKDms4flMJ3SuMfDar0PBLXtQiQY7fU1MPuGObRFBY-uTX3RaBlxtSQL_5r7GZTBhjm2pUOESd7U-FbTg8SaemwelQFrtvDUL4gKd2CNF7sNeqyuHvXkGw49VOH4L2xG-WC0\">Edit Plantuml di VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29358\">Komponen C4<\/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:FSkn3i8m30JG7Ob_29b0eit2n5h6WbYOKPfQD59YMx4ZVfzqeDlTqzqXOaXr1hEeiboTA_xRVw8kTQe29H0geFQ1ikFaKMjEdUYSukI6I_TSwNKVNVQYK1gz1yfCk7wuRVUxhH_3FvsDtTGyV0RRv0OIIcIDXFRq0m00\" 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:FSin2y8m40NWNV0_f9aKRBCukTQjAYxEagQ73IQN8tUXVzyKrEszZ_SQZowK2TGiGdmo9jkbUtcPorWOiaieWDAv50q5Yr9YQ5ccu4VJ7zlxIe_hnKJB0hdIiq-H4guVgjljvjztxfSEIjzij6huWgvm1dvdJ-pr_WC0\" \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\" data-nodeid=\"29359\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\nComponent(component, \"Nama Komponen\", \"Deskripsi\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FSin2y8m40NWNV0_f9aKRBCukTQjAYxEagQ73IQN8tUXVzyKrEszZ_SQZowK2TGiGdmo9jkbUtcPorWOiaieWDAv50q5Yr9YQ5ccu4VJ7zlxIe_hnKJB0hdIiq-H4guVgjljvjztxfSEIjzij6huWgvm1dvdJ-pr_WC0\" \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:FSkn3i8m30JG7Ob_29b0eit2n5h6WbYOKPfQD59YMx4ZVfzqeDlTqzqXOaXr1hEeiboTA_xRVw8kTQe29H0geFQ1ikFaKMjEdUYSukI6I_TSwNKVNVQYK1gz1yfCk7wuRVUxhH_3FvsDtTGyV0RRv0OIIcIDXFRq0m00\" 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<p data-nodeid=\"29360\"><a data-nodeid=\"30350\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:FSkn3i8m30JG7Ob_29b0eit2n5h6WbYOKPfQD59YMx4ZVfzqeDlTqzqXOaXr1hEeiboTA_xRVw8kTQe29H0geFQ1ikFaKMjEdUYSukI6I_TSwNKVNVQYK1gz1yfCk7wuRVUxhH_3FvsDtTGyV0RRv0OIIcIDXFRq0m00\">Edit Plantuml di VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29361\">C4 Deployment<\/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:HOkn3W8X44Hx4_y1gJJnZiRALakzM6XzuM1paC0kWINc_bweR2PlNcOE7ase5eHZJkMgLDRVSVNiwb8BP4F8W3mQYYe5ZLnZ60hRu1TrkmolhZxFXugwCEIcvZkaG5lifzJ6-zrVp1DPE6ABiv2TnQGZo5RUO1nIe7MJfny0\" 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:HSin2y8m40NWNV0_r4mAjbcSN7NKug1pIPEZ3LxkGd91_FScayk3z_7UpfF5ug1RHM8-QvtCPrYyh6Kk6P9b4Y0PB0STqP2KW7qMXtxMbrF_QFIwttGmMI1LcguGaR-XdM8TRpT_c4PsiASQnqwD9fYkWQhb2MzYvCMhmmy0\" \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\" data-nodeid=\"29362\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include https:\/\/raw.githubusercontent.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\nDeployment_Node(node, \"Nama Node\", \"Teknologi\")\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HSin2y8m40NWNV0_r4mAjbcSN7NKug1pIPEZ3LxkGd91_FScayk3z_7UpfF5ug1RHM8-QvtCPrYyh6Kk6P9b4Y0PB0STqP2KW7qMXtxMbrF_QFIwttGmMI1LcguGaR-XdM8TRpT_c4PsiASQnqwD9fYkWQhb2MzYvCMhmmy0\" \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:HOkn3W8X44Hx4_y1gJJnZiRALakzM6XzuM1paC0kWINc_bweR2PlNcOE7ase5eHZJkMgLDRVSVNiwb8BP4F8W3mQYYe5ZLnZ60hRu1TrkmolhZxFXugwCEIcvZkaG5lifzJ6-zrVp1DPE6ABiv2TnQGZo5RUO1nIe7MJfny0\" 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<p data-nodeid=\"29363\"><a data-nodeid=\"30354\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HOkn3W8X44Hx4_y1gJJnZiRALakzM6XzuM1paC0kWINc_bweR2PlNcOE7ase5eHZJkMgLDRVSVNiwb8BP4F8W3mQYYe5ZLnZ60hRu1TrkmolhZxFXugwCEIcvZkaG5lifzJ6-zrVp1DPE6ABiv2TnQGZo5RUO1nIe7MJfny0\">Edit Plantuml di VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29364\">Diagram Urutan<\/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:IqmkoIzIK784Ktw9kQbA2ed52eaWBYzNGM9HIMPoPa5YNec2KW220rQ39CdB1TQWe6k7B6gbu9jQN9oOdWgMpYnBB4b5rOHil2vGBzWGAuMWr9BIeZnUhfHKRDe0\" 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:ROn12e0W54JtWdVukFS2BeBMGNI5gVv2IXFzTFxCbK6xOTwymIPN9ZCZWCQZPaCeXBVLAY6Bttn2538B5yw2nZkWLHkJ7VhMKPqZDkXl27-L_jXMirqucZYiEBrME_zv3m00\" \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\" data-nodeid=\"29365\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">actor \"Nama Aktor\" as actor\r\nparticipant \"Peserta\" as participant\r\nactor -&gt; participant: Pesan\r\nactivate participant\r\nparticipant --&gt; actor: Kembali\r\ndeactivate participant\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ROn12e0W54JtWdVukFS2BeBMGNI5gVv2IXFzTFxCbK6xOTwymIPN9ZCZWCQZPaCeXBVLAY6Bttn2538B5yw2nZkWLHkJ7VhMKPqZDkXl27-L_jXMirqucZYiEBrME_zv3m00\" \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:IqmkoIzIK784Ktw9kQbA2ed52eaWBYzNGM9HIMPoPa5YNec2KW220rQ39CdB1TQWe6k7B6gbu9jQN9oOdWgMpYnBB4b5rOHil2vGBzWGAuMWr9BIeZnUhfHKRDe0\" 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<p data-nodeid=\"29366\"><a data-nodeid=\"30358\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK784Ktw9kQbA2ed52eaWBYzNGM9HIMPoPa5YNec2KW220rQ39CdB1TQWe6k7B6gbu9jQN9oOdWgMpYnBB4b5rOHil2vGBzWGAuMWr9BIeZnUhfHKRDe0\">Edit Plantuml di VPasCode<\/a><\/p>\n<h3 data-nodeid=\"29367\">Diagram Kasus Penggunaan<\/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:IqmkoIzIK0ejJYrIKaWiLYW5CdYvW6HoOd4gM5p16SY2o2M3POeKT7Nj89na1JqzEuNClEISqfJK50Kh1HiRACVE3YnjewUda5fHafe7auPmxEm0\" 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:DOf12e0m30JlWdzOUcyV82KVyE8NGWmYI8J6WizNMhqC33CirraG5hLjgyO1xAYkPHnU2hiYpEpLyHzi_P5s5CH8NGGf4NQJewwwOaBEdn2rd5E2tfVQdxiGFG00\" \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\" data-nodeid=\"29368\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">actor \"Pengguna\" as user\r\nusecase \"Kasus Penggunaan\" as uc\r\nuser --&gt; uc\r\nuc ..&gt; included : &lt;&lt;include&gt;&gt;\r\nuc &lt;.. extended : &lt;&lt;extend&gt;&gt;\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:DOf12e0m30JlWdzOUcyV82KVyE8NGWmYI8J6WizNMhqC33CirraG5hLjgyO1xAYkPHnU2hiYpEpLyHzi_P5s5CH8NGGf4NQJewwwOaBEdn2rd5E2tfVQdxiGFG00\" \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:IqmkoIzIK0ejJYrIKaWiLYW5CdYvW6HoOd4gM5p16SY2o2M3POeKT7Nj89na1JqzEuNClEISqfJK50Kh1HiRACVE3YnjewUda5fHafe7auPmxEm0\" 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<p data-nodeid=\"29369\"><a data-nodeid=\"30362\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:IqmkoIzIK0ejJYrIKaWiLYW5CdYvW6HoOd4gM5p16SY2o2M3POeKT7Nj89na1JqzEuNClEISqfJK50Kh1HiRACVE3YnjewUda5fHafe7auPmxEm0\">Edit Plantuml di VPasCode<\/a><\/p>\n<hr data-nodeid=\"29370\"\/>\n<h2 data-nodeid=\"29371\">Kesimpulan<\/h2>\n<p data-nodeid=\"29372\">Ekosistem Visual Paradigm yang didukung AI merupakan lompatan signifikan dalam cara tim teknis mengelola kompleksitas. Dengan mengintegrasikan ideasi yang digerakkan oleh AI, pemodelan C4 yang terstruktur, dan dokumentasi hidup ke dalam satu alur kerja, ekosistem ini menghilangkan gesekan tradisional antara desain dan dokumentasi.<\/p>\n<p class=\"\" data-nodeid=\"29373\">Baik Anda sedang melakukan brainstorming untuk arsitektur mikroservice baru, menyempurnakan strategi deployment tingkat perusahaan, atau memastikan dokumen onboarding Anda tetap terkini, alur kerja ini memastikan bahwa model visual dan penjelasan tekstual Anda tetap tersinkronisasi, akurat, dan mudah diakses. Mulailah dengan AI Chatbot untuk ideasi cepat, gunakan C4-PlantUML Studio untuk penyempurnaan terstruktur, dan lengkapi siklus dengan OpenDocs untuk dokumentasi hidup yang secara otomatis tetap tersinkronisasi dengan arsitektur Anda yang terus berkembang.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pendahuluan Dalam rekayasa perangkat lunak modern, kesenjangan antara desain arsitektur dan dokumentasi teknis sering kali menjadi titik di mana proyek<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","source_url":"","source_h1_title":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[82,110,120],"tags":[],"asset-category":[],"class_list":["post-12353","post","type-post","status-publish","format-standard","hentry","category-ai","category-c4-model","category-vpascode-editor"],"source_url":"","source_h1_title":"","fifu_image_url":"","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm - 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\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm - Media Maya\" \/>\n<meta property=\"og:description\" content=\"Pendahuluan Dalam rekayasa perangkat lunak modern, kesenjangan antara desain arsitektur dan dokumentasi teknis sering kali menjadi titik di mana proyek\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\" \/>\n<meta property=\"og:site_name\" content=\"Media Maya\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-29T05:20:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-29T05:29:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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=\"12 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm\",\"datePublished\":\"2026-10-29T05:20:02+00:00\",\"dateModified\":\"2026-10-29T05:29:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\"},\"wordCount\":2538,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\",\"articleSection\":[\"AI\",\"C4 Model\",\"VPasCode Editor\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\",\"url\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\",\"name\":\"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm - Media Maya\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\",\"datePublished\":\"2026-10-29T05:20:02+00:00\",\"dateModified\":\"2026-10-29T05:29:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm\"}]},{\"@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":"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm - 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\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","og_locale":"id_ID","og_type":"article","og_title":"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm - Media Maya","og_description":"Pendahuluan Dalam rekayasa perangkat lunak modern, kesenjangan antara desain arsitektur dan dokumentasi teknis sering kali menjadi titik di mana proyek","og_url":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","og_site_name":"Media Maya","article_published_time":"2026-10-29T05:20:02+00:00","article_modified_time":"2026-10-29T05:29:23+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","type":"","width":"","height":""}],"author":"curtis","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"curtis","Estimasi waktu membaca":"12 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm","datePublished":"2026-10-29T05:20:02+00:00","dateModified":"2026-10-29T05:29:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"},"wordCount":2538,"image":{"@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","articleSection":["AI","C4 Model","VPasCode Editor"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","url":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/","name":"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm - Media Maya","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","datePublished":"2026-10-29T05:20:02+00:00","dateModified":"2026-10-29T05:29:23+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#primaryimage","url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png","contentUrl":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6ae2d830db3d7.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/id\/from-prompt-to-living-docs-mastering-visual-paradigms-ai-powered-c4-workflow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/id\/"},{"@type":"ListItem","position":2,"name":"Dari Perintah ke Dokumen Hidup: Menguasai Alur Kerja C4 Berbasis AI Visual Paradigm"}]},{"@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\/12353","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=12353"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12353\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media?parent=12353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/categories?post=12353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/tags?post=12353"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/asset-category?post=12353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}