{"id":789,"date":"2026-06-16T01:12:15","date_gmt":"2026-06-16T01:12:15","guid":{"rendered":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/"},"modified":"2026-06-17T07:16:34","modified_gmt":"2026-06-17T07:16:34","slug":"from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams","status":"publish","type":"post","link":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/","title":{"rendered":"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile"},"content":{"rendered":"<h2>Pendahuluan<\/h2>\n<p>Dalam dunia pengembangan Agile yang serba cepat, dokumentasi sering kali menjadi hambatan. Alat diagram drag-and-drop tradisional memerlukan pergantian konteks yang konstan, mengganggu alur kerja pengembang dan menjadikan kontrol versi sebagai mimpi buruk. Bagi tim Agile yang beroperasi di dalam IDE mereka dan mengelola infrastruktur sebagai kode, diagram seharusnya tidak berbeda.<\/p>\n<p>Muncul<strong>VPasCode (Visual Paradigm sebagai Kode)<\/strong>, sebuah platform terpadu berbasis browser yang mengubah teks menjadi diagram profesional berkualitas tinggi dalam hitungan detik. Dengan menyatukan kekuatan PlantUML, Mermaid.js, dan Graphviz ke dalam satu lingkungan yang mulus, VPasCode memungkinkan insinyur perangkat lunak, arsitek sistem, dan analis bisnis untuk memperlakukan diagram persis seperti kode: ringan, dapat dikontrol versinya, dan dapat dirender secara instan. Studi kasus ini mengeksplorasi bagaimana pengguna Visual Paradigm yang berpengalaman dan pengembang Agile dapat memanfaatkan VPasCode untuk menyederhanakan alur kerja, meningkatkan kolaborasi tim, dan menjaga kejelasan arsitektur tanpa meninggalkan pola pikir editor kode.<\/p>\n<p id=\"fbzfNHZ\"><img alt=\"VPasCode: Platform Diagram-sebagai-Kode Terpadu untuk Tim Agile\" class=\"alignnone wp-image-1299 size-full\" decoding=\"async\" height=\"543\" loading=\"lazy\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" src=\"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png\" srcset=\"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png 977w, https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e-300x167.png 300w, https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e-768x427.png 768w\" width=\"977\"\/><\/p>\n<h2>Dilema Pengembang Agile: Mengapa Diagram sebagai Kode?<\/h2>\n<p>Selama bertahun-tahun, tim Agile telah berjuang dengan masalah &#8220;peluruhan diagram&#8221;. Sketsa papan tulis dari Perencanaan Sprint jarang diperbarui oleh Tinjauan Sprint. Alat drag-and-drop membuat file biner yang tidak kompatibel dengan diff Git, sehingga sulit untuk melacak siapa yang mengubah apa dalam diagram arsitektur.<\/p>\n<p>VPasCode menyelesaikan ini dengan mengadopsi<strong>Diagram sebagai Kode (DaC)<\/strong>pendekatan. Baik Anda mendefinisikan arsitektur mikro layanan yang kompleks atau perjalanan pengguna yang sederhana, Anda menuliskannya dalam teks. Ini berarti:<\/p>\n<ul>\n<li>\n<p><strong>Ramah Git-Native:<\/strong>Simpan diagram Anda sebagai file teks mentah berdampingan dengan kode sumber Anda.<\/p>\n<\/li>\n<li>\n<p><strong>Akses Cloud Tanpa Pengaturan:<\/strong>Tidak ada unduhan perangkat lunak atau dependensi lokal yang diperlukan; semuanya berjalan sepenuhnya di browser.<\/p>\n<\/li>\n<li>\n<p><strong>Pratinjau Real-Time:<\/strong>Lihat grafik Anda dirender secara langsung secara instan saat Anda mengetik, memberikan umpan balik segera.<\/p>\n<\/li>\n<\/ul>\n<h2>Ruang Kerja Terpadu: Satu Editor, Tiga Mesin Kuat<\/h2>\n<p>VPasCode membawa sintaks diagram open-source paling populer di dunia ke dalam satu editor cloud yang kohesif. Alih-alih mengelola banyak alat, Anda memiliki parsing dan rendering asli untuk tiga mesin utama:<\/p>\n<ol>\n<li>\n<p><strong>PlantUML:<\/strong>Standar emas untuk diagram arsitektur perusahaan dan perangkat lunak yang kuat.<\/p>\n<\/li>\n<li>\n<p><strong>Mermaid.js:<\/strong>Sempurna untuk grafik modern yang terinspirasi markdown, garis waktu, dan bagan alur.<\/p>\n<\/li>\n<li>\n<p><strong>Graphviz:<\/strong>Ideal untuk memanfaatkan bahasa DOT untuk topologi jaringan kompleks dan struktur data.<\/p>\n<\/li>\n<\/ol>\n<p><img alt=\"Kode diagram kelas PlantUML untuk sistem manajemen perpustakaan, sedang diedit dengan editor teks-ke-diagram VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-class-diagram-library-management-system.jpg\"\/><\/p>\n<h2>Eksplorasi Mendalam: PlantUML untuk Arsitektur Perusahaan<\/h2>\n<p>PlantUML tetap menjadi mesin utama untuk pemodelan teknis yang rinci. VPasCode mendukung perpustakaan besar jenis diagram PlantUML, termasuk Urutan, Kasus Penggunaan, Kelas, Aktivitas, Komponen, Penempatan, Status, ArchiMate, dan Diagram Relasi Entitas (ERD).<\/p>\n<h3>Pemodelan Sistem Kompleks: Contoh Manajemen Perpustakaan<\/h3>\n<p>Pertimbangkan Sistem Manajemen Perpustakaan. Menggunakan PlantUML di VPasCode, kita dapat memodelkan pewarisan, komposisi, dan agregasi dengan jelas. Kode di bawah ini mendefinisikan hubungan antara<code data-backticks=\"1\">Perpustakaan<\/code>,\u00a0<code data-backticks=\"1\">Anggota<\/code>,\u00a0<code data-backticks=\"1\">ItemPerpustakaan<\/code>, dan berbagai subkelas seperti <code data-backticks=\"1\">BukuElektronik<\/code> dan <code data-backticks=\"1\">BukuCetak<\/code>.<\/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:XLRBRjiw4DqRy3yGwQBklNNHReMYg9EqG82aBHAqm0Mw6KbZcRWKAP2Z5ExZtpiYHKMaxMHZMSFXcJDllNS4blfMBHVBHQN0EN4jImjsBtuj5qAiXOOM2t57LkecIA2kBJgN2hkTqOdUluFU3RObsbNh7uK8hoyASMza7PGijkOU4xshEk8acWntHTYk9FyKaUKWEO8tAPx0KgW3M6xnfJYuLHgZ47I4fzxgu_2Juf-3O0uNGa2VPGQ2Z2GfJ4LTNohfTaFO3iGLa3JwFmG-b9f6NBUv1wcW790IqWtI9HAVkTMBD4KEQRmabQJzYgk1UZTTdsBcFOBIaOMAH73jt9Z_Ov58L-giI7hQ6PlL23HuONfD4slFRUDLvzHc0VmmDxEL2k_aJxmvBqHjE18uoerjWL9ZjVcXbO7wgrMfp_5WbNeNp7rXFS9wRfHpeBRN9iGyjL4PNSjSx7swcrywuTeDDF1JQdm8eklnKnzQPGpGcYcglZqKLrpbzXA8Spty9i2NtouZPjrRJ-56wfxGpG1gQR6YF4KATDDpcbAfwqjVeKShREwHxwPeE--jK_C4MmPzOff4DBUJtTph8TobiTRyE3aR7klVHtKvZUSU6lsiyCrpBHqbBWSDPdcBbR5rzDtwjzptm3JbF-G8Sr6WcKkb-yn9P_LLIfMh0LJLArRyoFKqdCRkc37zE2krBV_FoK4RMdFUMBua3sby0LbdmUfW7sqVD5M8iGGzjHJ1TflRhx7ZLTIYfhIREcigNZTJeBDj4YRswOKmNh_r4NrYUJIeaVi5Rx4pbbR9MGkQ--9AtpD1O_UPey_5bUPPBGbqXPm-vRjkg5QtNCoNmDlVwxKVdKV4SI0SEUAMNYxyLFAl7mB2Ws0-jmAV2zDsnldf943NOjCq5XjFosl4DN_svammm1dxjp-B7Lo87JZnxfJMd5unJ45UBlf9_Q402kxsJfczLrukHdEfTjvI4vdy85vxy-hLFpafYrkqoCbuzEPhVzDtHZ5bV-JsN6oSCvNq8OkU3Jwir--ES0pruU-ENXtNgom-sD26K93fXDbEtrs5kE0Iiw24sxl16Te1HVZlUfo3eUpvCUHs-9pn_UBnh6nsD4CS8xA9wxi4Xs67VzUyEGKe9THedDSeLp4ehjht3CeVXdy1\" 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:XLPDRziu4Bq7o7yWieUwktNHNeqYQB9fiK6JRf2WBVOuaiOoOueKo64Ajzl_tY5fAI9j9nSd7CwyUVD9lNS4bdodZe-EZse5peahMLcm6_7p-4Y8kT3GuKBSaPMwJH9e6elEvS9-PNIczrVGkyQkGZlhuf-5ICUN2_5WP9EKB7Rc0JEzosR0oJGPxfAmcqd-MGmiWsGFtgXu04kXJc2bnrTYnweoHY7e0PwyrVlXHyLVEyaC1YcXVnGEaemaASn5lQ-KTAkGjXrn3IID_W-1BwMcBQuxUm2fe0f86UaMwGA9xzpiPLuYXxGraahIPiRTGDwDvcFEOaHGER9GaqYXdHkp7ff4kaeNJU9fPMpH8z3YtyPh6bb7RcTHTKfjai0FKpTBgV1E_i3hyuLe36S2jt9ZEw3SMME-QsMW-M9L7lDmCSkZI-vkM8-mcJhb6gZbbKavpttKHZUo5CUOxgP61qAxXXP-I8sFINGUF_iqAji4pPcYyjskkEOkjnT0NElmcm5VVBqOC1jl8uLhgJsXcm0qqc9DPOaKwDPpcNAfyrNiqBqTDeqeJjFWkvojG_i4EmPzPfiCQ6ub-sdK8TsLiTPyFxWRdfhV9tMvZESH6kEkYCDp9Hrb8ISDPdcBjR7D4BkDfpBsn3Jd7sg4fIZHBANI_Sj5P_LPJfMx0LJj5Ij-v7uAjyDqJ9X-dBJQalyloK6NHdCwMB4bTsdSW6oAPFMm6Npl35NAiGGzZXJ1SbdwRx3dfwX3JVaqzTRK_DoCYIvUaxIn3py8M_FRcD5d7eyMDVAyu2tsnj8ik-j0yrnSwWScQEoc2FI5-CTNNhSSupSErOMqJ7V_k__dyxWnzuY7FR3dYYVv-2WketZya10U1TDrbMXyCbrld7HIDCpbhBNO0X_2vV2mdxmz4MnxmX5jJeQPNOG1uqTWBSNf8TKfFIu_sk3c6UrGzOZTunhjFQpvV1hORFtcDkKqvQpAsy7sxUlNVvRiEhJ-tg-VCdiJpU9O17tThZXJQYJuGfmvpYJBXWX3BFFvwLwMkaLb50JJRMI7DBlA0oKNsX0AChqmo_6pYvkVTmp7q7l7UXjUo8_mca-j8KXD_ohMkESCwNleGij5G2lR5KqWjndvX3oCRE70YlIKhpKFFEV8OUU16voueWndsJDneGBWU_vGug_3tm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n\r\nclass Library {\r\n  - name: String\r\n  - address: String\r\n  - phone: String\r\n  + addMember(member: Member): void\r\n  + removeMember(memberId: String): void\r\n  + addItem(item: LibraryItem): void\r\n  + removeItem(itemId: String): void\r\n  + lendItem(memberId: String, itemId: String): boolean\r\n  + returnItem(itemId: String): boolean\r\n}\r\n\r\nclass LibraryItem {\r\n  # itemId: String\r\n  # title: String\r\n  # publisher: String\r\n  # publicationYear: int\r\n  # isAvailable: boolean\r\n  + getDetails(): String\r\n  + setAvailability(status: boolean): void\r\n}\r\n\r\nabstract class Book {\r\n  - isbn: String\r\n  - author: String\r\n  - pageCount: int\r\n  + getAuthor(): String\r\n}\r\n\r\nclass EBook {\r\n  - fileSizeMB: double\r\n  - format: String\r\n  - downloadUrl: String\r\n  + download(): void\r\n}\r\n\r\nclass PrintedBook {\r\n  - shelfLocation: String\r\n  - condition: String\r\n  + getShelfLocation(): String\r\n}\r\n\r\nclass Magazine {\r\n  - issueNumber: int\r\n  - volumeNumber: int\r\n  - coverDate: Date\r\n}\r\n\r\nclass DVD {\r\n  - durationMinutes: int\r\n  - director: String\r\n  - language: String\r\n  - subtitlesAvailable: boolean\r\n}\r\n\r\nclass Member {\r\n  - memberId: String\r\n  - name: String\r\n  - email: String\r\n  - phone: String\r\n  - membershipDate: Date\r\n  + borrowItem(item: LibraryItem): boolean\r\n  + returnItem(item: LibraryItem): boolean\r\n  + getBorrowedItems(): List\r\n}\r\n\r\nclass BorrowingRecord {\r\n  - recordId: String\r\n  - borrowDate: Date\r\n  - dueDate: Date\r\n  - returnDate: Date\r\n  - isOverdue(): boolean\r\n  - calculateFine(): double\r\n}\r\n\r\nclass Fine {\r\n  - fineId: String\r\n  - amount: double\r\n  - issueDate: Date\r\n  - isPaid: boolean\r\n  + payFine(): void\r\n}\r\n\r\nclass Librarian {\r\n  - staffId: String\r\n  - department: String\r\n  + processBorrowing(member: Member, item: LibraryItem): void\r\n  + processReturn(item: LibraryItem): void\r\n  + generateReport(): void\r\n  + manageInventory(): void\r\n}\r\n\r\n' Hubungan Warisan\r\nLibraryItem &lt;|-- Book\r\nLibraryItem &lt;|-- Magazine\r\nLibraryItem &lt;|-- DVD\r\nBook &lt;|-- EBook\r\nBook &lt;|-- PrintedBook \r\n\r\n' Komposisi dan Agregasi \r\n\r\nLibrary \"1\" -- \"many\" Member : memiliki &gt;\r\nLibrary \"1\" -- \"many\" LibraryItem : berisi &gt;\r\nLibrary \"1\" -- \"many\" Librarian : mempekerjakan &gt;\r\n\r\nMember \"1\" -- \"many\" BorrowingRecord : memiliki &gt;\r\nBorrowingRecord \"1\" -- \"1..*\" LibraryItem : merujuk &gt;\r\nBorrowingRecord \"1\" -- \"0..*\" Fine : menghasilkan &gt;\r\n\r\n' Asosiasi\r\nLibrarian --&gt; BorrowingRecord : mengelola &gt;\r\nMember --&gt; BorrowingRecord : membuat &gt;\r\n\r\nnote top of Library : Sistem pusat yang mengelolananggota, item, dan peminjaman\r\nnote right of LibraryItem : Kelas dasar abstraknuntuk semua materi perpustakaan\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XLPDRziu4Bq7o7yWieUwktNHNeqYQB9fiK6JRf2WBVOuaiOoOueKo64Ajzl_tY5fAI9j9nSd7CwyUVD9lNS4bdodZe-EZse5peahMLcm6_7p-4Y8kT3GuKBSaPMwJH9e6elEvS9-PNIczrVGkyQkGZlhuf-5ICUN2_5WP9EKB7Rc0JEzosR0oJGPxfAmcqd-MGmiWsGFtgXu04kXJc2bnrTYnweoHY7e0PwyrVlXHyLVEyaC1YcXVnGEaemaASn5lQ-KTAkGjXrn3IID_W-1BwMcBQuxUm2fe0f86UaMwGA9xzpiPLuYXxGraahIPiRTGDwDvcFEOaHGER9GaqYXdHkp7ff4kaeNJU9fPMpH8z3YtyPh6bb7RcTHTKfjai0FKpTBgV1E_i3hyuLe36S2jt9ZEw3SMME-QsMW-M9L7lDmCSkZI-vkM8-mcJhb6gZbbKavpttKHZUo5CUOxgP61qAxXXP-I8sFINGUF_iqAji4pPcYyjskkEOkjnT0NElmcm5VVBqOC1jl8uLhgJsXcm0qqc9DPOaKwDPpcNAfyrNiqBqTDeqeJjFWkvojG_i4EmPzPfiCQ6ub-sdK8TsLiTPyFxWRdfhV9tMvZESH6kEkYCDp9Hrb8ISDPdcBjR7D4BkDfpBsn3Jd7sg4fIZHBANI_Sj5P_LPJfMx0LJj5Ij-v7uAjyDqJ9X-dBJQalyloK6NHdCwMB4bTsdSW6oAPFMm6Npl35NAiGGzZXJ1SbdwRx3dfwX3JVaqzTRK_DoCYIvUaxIn3py8M_FRcD5d7eyMDVAyu2tsnj8ik-j0yrnSwWScQEoc2FI5-CTNNhSSupSErOMqJ7V_k__dyxWnzuY7FR3dYYVv-2WketZya10U1TDrbMXyCbrld7HIDCpbhBNO0X_2vV2mdxmz4MnxmX5jJeQPNOG1uqTWBSNf8TKfFIu_sk3c6UrGzOZTunhjFQpvV1hORFtcDkKqvQpAsy7sxUlNVvRiEhJ-tg-VCdiJpU9O17tThZXJQYJuGfmvpYJBXWX3BFFvwLwMkaLb50JJRMI7DBlA0oKNsX0AChqmo_6pYvkVTmp7q7l7UXjUo8_mca-j8KXD_ohMkESCwNleGij5G2lR5KqWjndvX3oCRE70YlIKhpKFFEV8OUU16voueWndsJDneGBWU_vGug_3tm00\" \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:XLRBRjiw4DqRy3yGwQBklNNHReMYg9EqG82aBHAqm0Mw6KbZcRWKAP2Z5ExZtpiYHKMaxMHZMSFXcJDllNS4blfMBHVBHQN0EN4jImjsBtuj5qAiXOOM2t57LkecIA2kBJgN2hkTqOdUluFU3RObsbNh7uK8hoyASMza7PGijkOU4xshEk8acWntHTYk9FyKaUKWEO8tAPx0KgW3M6xnfJYuLHgZ47I4fzxgu_2Juf-3O0uNGa2VPGQ2Z2GfJ4LTNohfTaFO3iGLa3JwFmG-b9f6NBUv1wcW790IqWtI9HAVkTMBD4KEQRmabQJzYgk1UZTTdsBcFOBIaOMAH73jt9Z_Ov58L-giI7hQ6PlL23HuONfD4slFRUDLvzHc0VmmDxEL2k_aJxmvBqHjE18uoerjWL9ZjVcXbO7wgrMfp_5WbNeNp7rXFS9wRfHpeBRN9iGyjL4PNSjSx7swcrywuTeDDF1JQdm8eklnKnzQPGpGcYcglZqKLrpbzXA8Spty9i2NtouZPjrRJ-56wfxGpG1gQR6YF4KATDDpcbAfwqjVeKShREwHxwPeE--jK_C4MmPzOff4DBUJtTph8TobiTRyE3aR7klVHtKvZUSU6lsiyCrpBHqbBWSDPdcBbR5rzDtwjzptm3JbF-G8Sr6WcKkb-yn9P_LLIfMh0LJLArRyoFKqdCRkc37zE2krBV_FoK4RMdFUMBua3sby0LbdmUfW7sqVD5M8iGGzjHJ1TflRhx7ZLTIYfhIREcigNZTJeBDj4YRswOKmNh_r4NrYUJIeaVi5Rx4pbbR9MGkQ--9AtpD1O_UPey_5bUPPBGbqXPm-vRjkg5QtNCoNmDlVwxKVdKV4SI0SEUAMNYxyLFAl7mB2Ws0-jmAV2zDsnldf943NOjCq5XjFosl4DN_svammm1dxjp-B7Lo87JZnxfJMd5unJ45UBlf9_Q402kxsJfczLrukHdEfTjvI4vdy85vxy-hLFpafYrkqoCbuzEPhVzDtHZ5bV-JsN6oSCvNq8OkU3Jwir--ES0pruU-ENXtNgom-sD26K93fXDbEtrs5kE0Iiw24sxl16Te1HVZlUfo3eUpvCUHs-9pn_UBnh6nsD4CS8xA9wxi4Xs67VzUyEGKe9THedDSeLp4ehjht3CeVXdy1\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:XLRBRjiw4DqRy3yGwQBklNNHReMYg9EqG82aBHAqm0Mw6KbZcRWKAP2Z5ExZtpiYHKMaxMHZMSFXcJDllNS4blfMBHVBHQN0EN4jImjsBtuj5qAiXOOM2t57LkecIA2kBJgN2hkTqOdUluFU3RObsbNh7uK8hoyASMza7PGijkOU4xshEk8acWntHTYk9FyKaUKWEO8tAPx0KgW3M6xnfJYuLHgZ47I4fzxgu_2Juf-3O0uNGa2VPGQ2Z2GfJ4LTNohfTaFO3iGLa3JwFmG-b9f6NBUv1wcW790IqWtI9HAVkTMBD4KEQRmabQJzYgk1UZTTdsBcFOBIaOMAH73jt9Z_Ov58L-giI7hQ6PlL23HuONfD4slFRUDLvzHc0VmmDxEL2k_aJxmvBqHjE18uoerjWL9ZjVcXbO7wgrMfp_5WbNeNp7rXFS9wRfHpeBRN9iGyjL4PNSjSx7swcrywuTeDDF1JQdm8eklnKnzQPGpGcYcglZqKLrpbzXA8Spty9i2NtouZPjrRJ-56wfxGpG1gQR6YF4KATDDpcbAfwqjVeKShREwHxwPeE--jK_C4MmPzOff4DBUJtTph8TobiTRyE3aR7klVHtKvZUSU6lsiyCrpBHqbBWSDPdcBbR5rzDtwjzptm3JbF-G8Sr6WcKkb-yn9P_LLIfMh0LJLArRyoFKqdCRkc37zE2krBV_FoK4RMdFUMBua3sby0LbdmUfW7sqVD5M8iGGzjHJ1TflRhx7ZLTIYfhIREcigNZTJeBDj4YRswOKmNh_r4NrYUJIeaVi5Rx4pbbR9MGkQ--9AtpD1O_UPey_5bUPPBGbqXPm-vRjkg5QtNCoNmDlVwxKVdKV4SI0SEUAMNYxyLFAl7mB2Ws0-jmAV2zDsnldf943NOjCq5XjFosl4DN_svammm1dxjp-B7Lo87JZnxfJMd5unJ45UBlf9_Q402kxsJfczLrukHdEfTjvI4vdy85vxy-hLFpafYrkqoCbuzEPhVzDtHZ5bV-JsN6oSCvNq8OkU3Jwir--ES0pruU-ENXtNgom-sD26K93fXDbEtrs5kE0Iiw24sxl16Te1HVZlUfo3eUpvCUHs-9pn_UBnh6nsD4CS8xA9wxi4Xs67VzUyEGKe9THedDSeLp4ehjht3CeVXdy1\">Edit PlantUML di VPasCode<\/a><\/p>\n<h3>Menangani Alur Logika: Penarikan Tunai ATM<\/h3>\n<p>Diagram sekuens sangat penting untuk memahami interaksi antara komponen sistem. Contoh berikut memodelkan penarikan tunai ATM, menyoroti alur alternatif seperti PIN tidak valid dan dana tidak mencukupi menggunakan PlantUML\u2019s <code data-backticks=\"1\">alt<\/code> blok.<\/p>\n<p><img alt=\"Kode diagram urutan PlantUML untuk skenario penarikan tunai ATM klasik, sedang diedit dengan editor teks-ke-diagram VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-sequence-diagram-atm-cash-withdrawal.jpg\"\/><\/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:ZLN1Rjim3BqRy3yGFNGRq6A7tNeOcjWTK60jkZXhCQ0NrcOIeRBiINIB_lqeoqdbn1dgWmtmaKya7qLVEaRBNQtJv1Ci5MjA4_OVc2rl84EtWGV5cyhYAseuXuB-TcHAWbpXscAT9ZvmLd9Z7Q2fe1KwLQeM3RiqGGz0rZbkQhA03h8qYLpWH8uvyNRvxY5pDC_AhA5uSqnrxpGlqgH2nYTq12SxsbbPDftXtYMVXvIsYQP91kVV-sekuDeuiYnbsIfDl6c7B0YhtWuvCIhjTdWcw9rjwfPX9RNSNT-EAAyCqs0T0kQ5cEzHAycK0kTfS114y7mkUBQXyXaoInKPLkZF4_lvNhXgZ6JcEis-ADGi5RnuAF21F9upgcyFZMg8i3DOsZUOhL6Pu6OQoTIgzOOlOBRo1Ns3bNI1Aa2MvhVipXvDwKknlZs6f7-aHOJx_sHpVpINOjEymetmm0sPBi1HJmlIL78qU0S42w-kOvZLNlW3WY1A3CRQXDxFKQCVv5FugMh5x_aF2ltgI9eqU0KqLYZhh1NfnWxX7NHotMebi-nzVdIcSW6Ra2no797jbRoqQ9pS9pyJEPNQY_1eFkVAjHftYNvvZutwaNb8nnIJHoo8Esk6w-6nNkBYOuNCsjOsBrGTC0VOvqbo_VgTCddw4O-eZ2K-7uaFaZHcfMmTjjQMhHgdEuYRqvFYxTxm8z2ifxiJI_wx3JTQTe4cfYDzY7KwT1qj5ILdBwWarVAxXv-UmRWTyxY8gPOSSFIwtJQ7m5xqC4SJ1ARws8HCAxIR7q_JlqRhTBcHrGv_cWw-Zjfr5Jml9KB-IFy0\" 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:bLNBRjim4BmBq3yiV4XR84OFlULGn9OEJPm4RkNqlh9OQokAClX0aR_lKfGbnbPIr0V1rWw7EpDB-jPOrDQrCaq-mBsh77-nPAM0hL2egK45EwUGOBLxX2NaX0UDBHIYSKAPDF7hLetjD5GCFGeZjCKqmRr_zOG6Iwp1Y18Fp96boP6tepqTKLbOCETYBFAFit91negMEz4bAkvamgwBDAdGChaHiFWX6g587KxxJRXy7JeSsyrW-RMNSWEFQ5pZzMsy0sdI2pmLrxX7o8L5acVrp2ybPH6sTq_pX7rXWAyBhln4IHKQ2bHm5H1SOa2-PW1BfCOWRBIek4z2Ze4BonF1DruiHngl2QNrBB3ZDqsef0dmnxEEBSqY8Y5dzMl8kXBX0GyKeAgp0ZGTQdl37beXESmlq30M3comlEPOlAAABDQeqaH83iIpljVHV2yxR8yalN-FGZbujjXY04KURqbIFStc1Kb8vfu76kkBnMD0SJtEwHH3WRBgEAO7QibE8eQmlZkXNm8crEAamj82qSAT6bmCJvzOZWe7mrdatZNkE60kZ0f4Rs9ZupGgWmsFLqwsazYeZvENFSsdQLqMpxZ57ZCIpD9lH5joOD59yO0-w5xEluJaP8Hrlzqb-v2AK2yedHwlcjakta55abPjoUTadgMFPzEfNwHRVnR3jSRT3RIlsn-opaL95iOBvWeoDitEEHOFmTPRffstNqXXy2rhfkGkS97qZA-X1ZP_-8ofU4S_KAUthAFrepzLPvsv9Ebp35Esgd06SCQpymCsnwEg_vYU-UQYwV9i_UFLlRlZyzboannV3P_vVwSc7MUH9hUyY0_tNm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n' Judul\r\ntitle Penarikan Tunai ATM - Diagram Sekuens\r\n\r\n' Aktor dan peserta\r\nactor Nasabah sebagai C\r\nparticipant \"ATM\" sebagai ATM\r\nparticipant \"Sistem Perbankan\" sebagai BS\r\ndatabase \"Rekening Nasabah\" sebagai DB\r\n\r\n' Sekuens\r\nC -&gt; ATM : Masukkan Kartu\r\nATM -&gt; ATM : Baca Detail Kartu\r\nATM -&gt; C : Minta PIN\r\nC -&gt; ATM : Masukkan PIN\r\nATM -&gt; BS : Validasi Kartu &amp; PIN\r\nBS -&gt; DB : Periksa Kredensial\r\nDB --&gt; BS : Hasil Validasi\r\n\r\nalt PIN Tidak Valid\r\n    BS --&gt; ATM : PIN Tidak Valid\r\n    ATM -&gt; C : PIN Tidak Valid, Coba Lagi\r\n    note right: Setelah 3 kali gagal,nkartu ditahan\r\nelse PIN Valid\r\n    BS --&gt; ATM : PIN Valid\r\n    ATM -&gt; C : Tampilkan Menu Utama\r\n    C -&gt; ATM : Pilih Penarikan\r\n    ATM -&gt; C : Minta Jumlah\r\n    C -&gt; ATM : Masukkan Jumlah\r\n    ATM -&gt; BS : Periksa Saldo &amp; Limit\r\n    BS -&gt; DB : Query Saldo\r\n    DB --&gt; BS : Saldo Saat Ini\r\n    \r\n    alt Dana Tidak Mencukupi\r\n        BS --&gt; ATM : Saldo Tidak Mencukupi\r\n        ATM -&gt; C : Transaksi Ditolakn(Tampilkan Saldo)\r\n        C -&gt; ATM : Batalkan Transaksi\r\n        ATM -&gt; C : Kembalikan Kartu\r\n    else Dana Mencukupi\r\n        BS --&gt; ATM : Disetujui\r\n        ATM -&gt; ATM : Menyalurkan Tunai\r\n        ATM -&gt; C : Menyalurkan Tunai\r\n        C -&gt; ATM : Ambil Tunai\r\n        ATM -&gt; BS : Konfirmasi Tunai Disalurkan\r\n        BS -&gt; DB : Debit Rekening &amp; Catat Transaksi\r\n        DB --&gt; BS : Pembaruan Selesai\r\n        BS --&gt; ATM : Transaksi Selesai\r\n        ATM -&gt; C : Cetak Kwitansi\r\n        alt Kwitansi Diminta\r\n            C -&gt; ATM : Ambil Kwitansi\r\n        else Tidak Ada Kwitansi\r\n            C -&gt; ATM : Tolak Kwitansi\r\n        end\r\n        ATM -&gt; C : Kembalikan Kartu\r\n        C -&gt; ATM : Ambil Kartu\r\n    end\r\nend\r\n\r\nATM -&gt; C : Terima Kasih \/ Akhir Transaksi\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLNBRjim4BmBq3yiV4XR84OFlULGn9OEJPm4RkNqlh9OQokAClX0aR_lKfGbnbPIr0V1rWw7EpDB-jPOrDQrCaq-mBsh77-nPAM0hL2egK45EwUGOBLxX2NaX0UDBHIYSKAPDF7hLetjD5GCFGeZjCKqmRr_zOG6Iwp1Y18Fp96boP6tepqTKLbOCETYBFAFit91negMEz4bAkvamgwBDAdGChaHiFWX6g587KxxJRXy7JeSsyrW-RMNSWEFQ5pZzMsy0sdI2pmLrxX7o8L5acVrp2ybPH6sTq_pX7rXWAyBhln4IHKQ2bHm5H1SOa2-PW1BfCOWRBIek4z2Ze4BonF1DruiHngl2QNrBB3ZDqsef0dmnxEEBSqY8Y5dzMl8kXBX0GyKeAgp0ZGTQdl37beXESmlq30M3comlEPOlAAABDQeqaH83iIpljVHV2yxR8yalN-FGZbujjXY04KURqbIFStc1Kb8vfu76kkBnMD0SJtEwHH3WRBgEAO7QibE8eQmlZkXNm8crEAamj82qSAT6bmCJvzOZWe7mrdatZNkE60kZ0f4Rs9ZupGgWmsFLqwsazYeZvENFSsdQLqMpxZ57ZCIpD9lH5joOD59yO0-w5xEluJaP8Hrlzqb-v2AK2yedHwlcjakta55abPjoUTadgMFPzEfNwHRVnR3jSRT3RIlsn-opaL95iOBvWeoDitEEHOFmTPRffstNqXXy2rhfkGkS97qZA-X1ZP_-8ofU4S_KAUthAFrepzLPvsv9Ebp35Esgd06SCQpymCsnwEg_vYU-UQYwV9i_UFLlRlZyzboannV3P_vVwSc7MUH9hUyY0_tNm00\" \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:ZLN1Rjim3BqRy3yGFNGRq6A7tNeOcjWTK60jkZXhCQ0NrcOIeRBiINIB_lqeoqdbn1dgWmtmaKya7qLVEaRBNQtJv1Ci5MjA4_OVc2rl84EtWGV5cyhYAseuXuB-TcHAWbpXscAT9ZvmLd9Z7Q2fe1KwLQeM3RiqGGz0rZbkQhA03h8qYLpWH8uvyNRvxY5pDC_AhA5uSqnrxpGlqgH2nYTq12SxsbbPDftXtYMVXvIsYQP91kVV-sekuDeuiYnbsIfDl6c7B0YhtWuvCIhjTdWcw9rjwfPX9RNSNT-EAAyCqs0T0kQ5cEzHAycK0kTfS114y7mkUBQXyXaoInKPLkZF4_lvNhXgZ6JcEis-ADGi5RnuAF21F9upgcyFZMg8i3DOsZUOhL6Pu6OQoTIgzOOlOBRo1Ns3bNI1Aa2MvhVipXvDwKknlZs6f7-aHOJx_sHpVpINOjEymetmm0sPBi1HJmlIL78qU0S42w-kOvZLNlW3WY1A3CRQXDxFKQCVv5FugMh5x_aF2ltgI9eqU0KqLYZhh1NfnWxX7NHotMebi-nzVdIcSW6Ra2no797jbRoqQ9pS9pyJEPNQY_1eFkVAjHftYNvvZutwaNb8nnIJHoo8Esk6w-6nNkBYOuNCsjOsBrGTC0VOvqbo_VgTCddw4O-eZ2K-7uaFaZHcfMmTjjQMhHgdEuYRqvFYxTxm8z2ifxiJI_wx3JTQTe4cfYDzY7KwT1qj5ILdBwWarVAxXv-UmRWTyxY8gPOSSFIwtJQ7m5xqC4SJ1ARws8HCAxIR7q_JlqRhTBcHrGv_cWw-Zjfr5Jml9KB-IFy0\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:ZLN1Rjim3BqRy3yGFNGRq6A7tNeOcjWTK60jkZXhCQ0NrcOIeRBiINIB_lqeoqdbn1dgWmtmaKya7qLVEaRBNQtJv1Ci5MjA4_OVc2rl84EtWGV5cyhYAseuXuB-TcHAWbpXscAT9ZvmLd9Z7Q2fe1KwLQeM3RiqGGz0rZbkQhA03h8qYLpWH8uvyNRvxY5pDC_AhA5uSqnrxpGlqgH2nYTq12SxsbbPDftXtYMVXvIsYQP91kVV-sekuDeuiYnbsIfDl6c7B0YhtWuvCIhjTdWcw9rjwfPX9RNSNT-EAAyCqs0T0kQ5cEzHAycK0kTfS114y7mkUBQXyXaoInKPLkZF4_lvNhXgZ6JcEis-ADGi5RnuAF21F9upgcyFZMg8i3DOsZUOhL6Pu6OQoTIgzOOlOBRo1Ns3bNI1Aa2MvhVipXvDwKknlZs6f7-aHOJx_sHpVpINOjEymetmm0sPBi1HJmlIL78qU0S42w-kOvZLNlW3WY1A3CRQXDxFKQCVv5FugMh5x_aF2ltgI9eqU0KqLYZhh1NfnWxX7NHotMebi-nzVdIcSW6Ra2no797jbRoqQ9pS9pyJEPNQY_1eFkVAjHftYNvvZutwaNb8nnIJHoo8Esk6w-6nNkBYOuNCsjOsBrGTC0VOvqbo_VgTCddw4O-eZ2K-7uaFaZHcfMmTjjQMhHgdEuYRqvFYxTxm8z2ifxiJI_wx3JTQTe4cfYDzY7KwT1qj5ILdBwWarVAxXv-UmRWTyxY8gPOSSFIwtJQ7m5xqC4SJ1ARws8HCAxIR7q_JlqRhTBcHrGv_cWw-Zjfr5Jml9KB-IFy0\">Edit PlantUML di VPasCode<\/a><\/p>\n<h3>Pemodelan Proses Bisnis: Sistem Klaim Asuransi<\/h3>\n<p>Diagram aktivitas membantu memvisualisasikan logika alur kerja. Contoh di bawah ini memodelkan proses klaim asuransi, menangkap titik keputusan seperti validitas polis dan kelengkapan dokumen.<\/p>\n<p><img alt=\"Kode diagram aktivitas PlantUML untuk sistem klaim asuransi, sedang diedit dengan editor langsung teks-ke-diagram VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-activity-diagram-insurance-claim-system.jpg\"\/><\/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:ZLHDQnin4BqR_1-6d993yDs6DY4D9L1Ag2azAzBiUbAjf6eak_xt7Kd-MCSk-BOhZTwyUUz93vnKJ7cmyE8uH-KqFbb5mtBB2OVfP3gf1ULZ_kejwUtAMuCHEByDb1XqgLx8RZq6n61ztwC1Sib3MY5mXLeK2EhWzeNhQgXWe7IYDO9o1jRAalbyLtOTt6wHxwOJWFaZC_MkzG61LEOz2s1SrDtlFb6tFIo2xy3Xvi0ABIFSEj-WbYXj8hwZDFKEd9pLM333QBA6-yttKgdOkpcqkMMWHdP6hbAjXPnya3REK5SrUjmJYRWctF1EfoI26A_pW2xnGOh7A9DRAxL_CiLn2OI8B1yNvDWt84U9LCAT1Kq-LGOxc_k7u2Cd64YqTFseJHVzS67wNueIT3wAheOAfB8dz2lclLwX_lrXNJH5YDIlKla3Q3c2ZIfP4SIsEkueqtFmZh5i5OCAHFc-_mHlIXg8FpVNo7gpk6Y4k2MpKt-KggRLkoHsmeQIGsRa6VuD68KabGIXmUBl_5bE3d8IZ1fKZpFhcK4DFhiq3lJ80U7CmahYjKkuS1ZutCSdPNMs1Lg54FrQpXnmYyqXs2q8YooPUxDOQ4cX82hvkpBPCjngb-9ZgWrgub94xdWrpuFy5Ht6Geyn9Oj5ORbSNKr8Q_Tnuy95-lXexDtR0pK1ltXnvYGIIciCgRuJjVHSljVejVW6GMqBWpRUps0Au-Q6l5ifSqtFiZ8rDukZLjgxZk9Gxyl_Nm0jVcUvf0QJ8ijdiZ-pLjL3GJ348PVm8tkRT_Uml53O-tfHHuATqDsBSPhugoG-YNnpS3fva1LvqFy1\" 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:dLJBRXin3BmRy3yGFYM7mdSRQDC61L84BGBOFq17p2ujhNQXHml_VIbg_OWtGHydorffXfmPwYuc32bt3hxvc0FwPxftoDtc41DryzbyfWVAOlL47JNe6nXwnn4wyWtkiqKFjbnPov77iW33pvWmWIKmwB23o0LjNL3u1Mu-3sYn7M7G9japWl8J7PjFjv1Qyd1pmDlv362rfOJ3YKGm1pG80tcM_sizyeK29sppSHSI-LGAhLTs6B8S91S9RX8Rj1NvaODy7QZRZVU5H11wXqft9BfiklBTQtVIMKI_WYTjGt5hCykwrdRqGapz8FpUyCieP2rJ56I_nmocjrd-mA4G6OuKi9KQhWMBr6MyFZnGS6f2YuR3HBupLvVBhrQ5aK-UJMJvpYBUQvPM80eP1dvJa6tsJNDk8s6tmrRhrme2suYGAqOzevzydmW2Dsqg_m0s6fCYY-BLpK1nw7syuYtVH525AEiF7yKmONLSKhVuMuKNwtTyEP38nFOaq-eXxwGeXeWsyX9R8TgpnGi3reeGB0VDprw6IZop578i6ykoQdZgQWsf-WAIH347GmrWYR66idGySVQ1arHqv3arbl8-ZtEnbIvrT0oP_9nuvwWMBJGIylyO2bDcte_Hlnm6cPQSf55_FV7Jz3z8-fojiFWBGrs9u1InodCgugtlxmxccozKTV-4D7c29XUawmxF5wRp5Ff8ciOT7aR86lBop4W-H8qSHrC5RozJ2OjDhNwnlj3Ozlw5GwUp-AUtniWZoAwK9IeFIZfnxckqnHST01cQtcLPHp5CWeGLx0SrVMGvOwUYNpPngTTajlxTd5TJLkCmdzt9ZaJtDm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml InsuranceClaimSystem\r\n\r\nstart\r\n\r\n:Pemegang polis mengajukan klaim;\r\n:Klaim dicatat ke dalam sistem;\r\n\r\nif (Apakah polis aktif dan valid?) then (ya)\r\n  :Tetapkan klaim kepada penilai;\r\n  :Beritahu penilai tentang klaim baru;\r\nelse (tidak)\r\n  :Kirim pemberitahuan penolakan kepada pemegang polis;\r\n  :Catat alasan: Polis tidak aktif\/tidak valid;\r\n  stop\r\nendif\r\n\r\n:Penilai meninjau dokumen yang diserahkan;\r\n\r\nif (Apakah semua dokumen yang diperlukan hadir?) then (ya)\r\n  :Penilai memulai validasi klaim;\r\nelse (tidak)\r\n  :Minta dokumen yang hilang dari pemegang polis;\r\n  :Tunggu dokumen tambahan;\r\n  :Periksa ulang dokumen;\r\n  note right\r\n    Sistem menunggu\r\n    respons pemegang polis\r\n  end note\r\n  -&gt; kembali ke \"Penilai meninjau dokumen yang diserahkan\";\r\nendif\r\n\r\n:Penilai menyelidiki klaim;\r:Hubungi saksi\/ahli jika diperlukan;\r\n:Perkirakan jumlah kerusakan\/kerugian;\r\n\r\nif (Apakah klaim valid berdasarkan ketentuan polis?) then (ya)\r\n  :Hitung jumlah yang disetujui;\r\n  :Terapkan deductible jika berlaku;\r\nelse (tidak)\r\n  :Kirim pemberitahuan penolakan dengan alasan;\r\n  :Catat keputusan dalam sistem;\r\n  stop\r\nendif\r\n\r\n:Hasilkan penawaran penyelesaian;\r\n:Kirim penawaran penyelesaian kepada pemegang polis;\r\n\r\n:Pemegang polis meninjau penawaran;\r\n\r\nif (Apakah pemegang polis menerima penawaran?) then (ya)\r\n  :Proses pembayaran;\r\n  :Perbarui status klaim menjadi \"Selesai\";\r\n  :Kirim konfirmasi kepada pemegang polis;\r\n  :Catat detail penutupan;\r\nelse (tidak)\r\n  :Eskalasi ke resolusi sengketa;\r\n  :Negosiasikan penyelesaian;\r\n  :Perbarui penawaran;\r\n  -&gt; kembali ke \"Kirim penawaran penyelesaian kepada pemegang polis\";\r\nendif\r\n\r\nstop\r\n\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:dLJBRXin3BmRy3yGFYM7mdSRQDC61L84BGBOFq17p2ujhNQXHml_VIbg_OWtGHydorffXfmPwYuc32bt3hxvc0FwPxftoDtc41DryzbyfWVAOlL47JNe6nXwnn4wyWtkiqKFjbnPov77iW33pvWmWIKmwB23o0LjNL3u1Mu-3sYn7M7G9japWl8J7PjFjv1Qyd1pmDlv362rfOJ3YKGm1pG80tcM_sizyeK29sppSHSI-LGAhLTs6B8S91S9RX8Rj1NvaODy7QZRZVU5H11wXqft9BfiklBTQtVIMKI_WYTjGt5hCykwrdRqGapz8FpUyCieP2rJ56I_nmocjrd-mA4G6OuKi9KQhWMBr6MyFZnGS6f2YuR3HBupLvVBhrQ5aK-UJMJvpYBUQvPM80eP1dvJa6tsJNDk8s6tmrRhrme2suYGAqOzevzydmW2Dsqg_m0s6fCYY-BLpK1nw7syuYtVH525AEiF7yKmONLSKhVuMuKNwtTyEP38nFOaq-eXxwGeXeWsyX9R8TgpnGi3reeGB0VDprw6IZop578i6ykoQdZgQWsf-WAIH347GmrWYR66idGySVQ1arHqv3arbl8-ZtEnbIvrT0oP_9nuvwWMBJGIylyO2bDcte_Hlnm6cPQSf55_FV7Jz3z8-fojiFWBGrs9u1InodCgugtlxmxccozKTV-4D7c29XUawmxF5wRp5Ff8ciOT7aR86lBop4W-H8qSHrC5RozJ2OjDhNwnlj3Ozlw5GwUp-AUtniWZoAwK9IeFIZfnxckqnHST01cQtcLPHp5CWeGLx0SrVMGvOwUYNpPngTTajlxTd5TJLkCmdzt9ZaJtDm00\" \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:ZLHDQnin4BqR_1-6d993yDs6DY4D9L1Ag2azAzBiUbAjf6eak_xt7Kd-MCSk-BOhZTwyUUz93vnKJ7cmyE8uH-KqFbb5mtBB2OVfP3gf1ULZ_kejwUtAMuCHEByDb1XqgLx8RZq6n61ztwC1Sib3MY5mXLeK2EhWzeNhQgXWe7IYDO9o1jRAalbyLtOTt6wHxwOJWFaZC_MkzG61LEOz2s1SrDtlFb6tFIo2xy3Xvi0ABIFSEj-WbYXj8hwZDFKEd9pLM333QBA6-yttKgdOkpcqkMMWHdP6hbAjXPnya3REK5SrUjmJYRWctF1EfoI26A_pW2xnGOh7A9DRAxL_CiLn2OI8B1yNvDWt84U9LCAT1Kq-LGOxc_k7u2Cd64YqTFseJHVzS67wNueIT3wAheOAfB8dz2lclLwX_lrXNJH5YDIlKla3Q3c2ZIfP4SIsEkueqtFmZh5i5OCAHFc-_mHlIXg8FpVNo7gpk6Y4k2MpKt-KggRLkoHsmeQIGsRa6VuD68KabGIXmUBl_5bE3d8IZ1fKZpFhcK4DFhiq3lJ80U7CmahYjKkuS1ZutCSdPNMs1Lg54FrQpXnmYyqXs2q8YooPUxDOQ4cX82hvkpBPCjngb-9ZgWrgub94xdWrpuFy5Ht6Geyn9Oj5ORbSNKr8Q_Tnuy95-lXexDtR0pK1ltXnvYGIIciCgRuJjVHSljVejVW6GMqBWpRUps0Au-Q6l5ifSqtFiZ8rDukZLjgxZk9Gxyl_Nm0jVcUvf0QJ8ijdiZ-pLjL3GJ348PVm8tkRT_Uml53O-tfHHuATqDsBSPhugoG-YNnpS3fva1LvqFy1\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:ZLHDQnin4BqR_1-6d993yDs6DY4D9L1Ag2azAzBiUbAjf6eak_xt7Kd-MCSk-BOhZTwyUUz93vnKJ7cmyE8uH-KqFbb5mtBB2OVfP3gf1ULZ_kejwUtAMuCHEByDb1XqgLx8RZq6n61ztwC1Sib3MY5mXLeK2EhWzeNhQgXWe7IYDO9o1jRAalbyLtOTt6wHxwOJWFaZC_MkzG61LEOz2s1SrDtlFb6tFIo2xy3Xvi0ABIFSEj-WbYXj8hwZDFKEd9pLM333QBA6-yttKgdOkpcqkMMWHdP6hbAjXPnya3REK5SrUjmJYRWctF1EfoI26A_pW2xnGOh7A9DRAxL_CiLn2OI8B1yNvDWt84U9LCAT1Kq-LGOxc_k7u2Cd64YqTFseJHVzS67wNueIT3wAheOAfB8dz2lclLwX_lrXNJH5YDIlKla3Q3c2ZIfP4SIsEkueqtFmZh5i5OCAHFc-_mHlIXg8FpVNo7gpk6Y4k2MpKt-KggRLkoHsmeQIGsRa6VuD68KabGIXmUBl_5bE3d8IZ1fKZpFhcK4DFhiq3lJ80U7CmahYjKkuS1ZutCSdPNMs1Lg54FrQpXnmYyqXs2q8YooPUxDOQ4cX82hvkpBPCjngb-9ZgWrgub94xdWrpuFy5Ht6Geyn9Oj5ORbSNKr8Q_Tnuy95-lXexDtR0pK1ltXnvYGIIciCgRuJjVHSljVejVW6GMqBWpRUps0Au-Q6l5ifSqtFiZ8rDukZLjgxZk9Gxyl_Nm0jVcUvf0QJ8ijdiZ-pLjL3GJ348PVm8tkRT_Uml53O-tfHHuATqDsBSPhugoG-YNnpS3fva1LvqFy1\">Edit PlantUML di VPasCode<\/a><\/p>\n<h3>Mesin State: Sistem Deteksi Asap<\/h3>\n<p>Untuk sistem tertanam atau perangkat IoT, diagram state sangat penting. Contoh ini menunjukkan sistem deteksi asap yang beralih antara state standby, monitoring, dan alarm.<\/p>\n<p><img alt=\"Kode diagram keadaan PlantUML untuk sistem deteksi asap, sedang diedit dengan editor teks-ke-diagram VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-state-diagram-smoke-detection-system.jpg\"\/><\/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:XLLBQnin4BuR_1_cL9o22PJs4ag8yp249aw82psK7fJTiIsibRRIh8qf_kyTIVlGhXFYmtfNyttp-3GQNJaIbgf2mR8mMxn5meoaqSk38op6e_6892c49Gb2k9LYRKK1quY65WuT_lVdFp2TNiApsQDzMgtycWliPWN-ZKV0lmQvCC4I5-iFk63dEvaXI0V6UqcDdN_DmBZsMX5n8gL5vp0VZux3m7eObslI-UiXBjOVx2wM0XP5Fh054ghLpGQphG-CLffSPk1uSKhe22QuGtk0BrytPwVSHwCb6IlrseVnmaFHBKqSQcSi25PqXpKzFcCPNUYwaBIOdnoTlIo33zVP--ijz5aunqdCb09Ncvv-VCYQ2wbywZ5Hj9QVUUW1htXA3luJaPdrWbHP3MHyEPtm3IFuzemxxpRscoULXcKAeIB-U2fCekiRoYnCQDREK2-mzuMnXL1WIhJ2j_4f9fJGdGpCVVd1edYd5Lm2RRZZDaRbRvCVpFvQ4Fcck83cJPazJFRIek9cFUk82JZ9F25QB9N8Kh6xjxf9UiacSgIItBDUKgYPGajzH6e9q1kZLz8Mc3Ufn7zMp4b7ZWNunXsKVU1bBfJ3cHAsQ3ra2WMtrlV8Jn7zqb_GuI39GKuU7vYpS78wxF5zcHByUo8jJQNp9kS0zKJ7kwRX4oYvtf3hCnD671KwNnYIAvc5xWeDnvy7o8mcQnIKGdCFdOCeou6d8TNx-oKapOrzGv3KCfIZ5PnFD9zsFnzHVyGFR_KWhBVWPC2c3b9yV_lQQSe0Tx8rnzwSJax-O5JFHQNeNkTU3kClXsibzRQUG0ztjn4zGAMt45CUXQxui9VXjiWEt7-SrT-AzxEvBPfxucGA-SaxpSBeNV6OgYmtMG8O17hk8dHUsU9Xlg1Mb4gNgbgl-PoUmsjxmWkpyncDHrVS17mp_mS0\" 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:XLLDQzn03Bqlx7_GgII5K2Zj9PIGRPA5a4-wXHvA3_9QkwjwFipCk2MK_FTgnlPwx4r83c4zafwaDzARSn_GXKOhM6bRqIK5MWUsPlNa0-dvR3uB71J19UFMeOPLm41m0YkETeZ-bMTOUAoZyy_tl-3av0mUxLzo3vjDFFCff3-1V_CPo5_lUM-JfJtiFk0K7icXsLOOG6FWiNL8OCJpkzM5LL3Y4qB9KWwQ-UnvcjXCyqeZfYoUsiFkGz2wlZp7Vd9JYY6rkTZHkeffoKjffcJ7K92hK24SUGeI21y_mM_KnuS0TzPmi8xDLX3k6eKCUZYISEEj0wm2Rxhezd_RoP2-woNlH-e90h9A47wmZy_the_eVMoNT8FGvNsuUJDiYQnIywxiRhuYBwtlq7GeOuYK9gDROcz85wXYO6nhk8C-9AM88LVEMTVEsodSOcs5P3FaQwEU3sdAI7w1ftkR1dqmT0UIuw6MePEMZ7KQrQ57wcFO4YeZ4znEASe2m1cWz2Pv2mpeNmQujN-_OWZa8XVoIr8oE38bxk38iFHOa3eUOZF_hFmijkGjcdv51YwoiHcLd56Iqt8jd36gXI8NnXwv9RbUMBDXfwdiAudB7tSWf34uWyyWmy7L6p1BL9uM2ftk8NQi8dbVUe3SPTpxDv9D6-DFgeh-AN8XSlOdk-xdrudA_5-ZQMKRK-wBZdiQPzApN231Er2ewsOScKMq4cBAUojnlCQeimBJVbPnyceqfA2o9ZYHj0-0jKg62UGK8mB_G0vBwrvW9hTCUUcfrv9a1rZY6w7fL_is3DBhadcllJb0xZ--maveHJ_75J_lzphJy4mA9ZA-n4Q5Qv5XeSAw92ybr_5IRgykfs8nSSuVgbHHfHhVFYIYx0tAey8Y2QePdfJ-CJdGfnlQubPo6GZ3mp2VPJwlPnk0nHBTOdCPGsiicY3JKEmtNb4TzMK-EvTHaCVxFm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml SmokeDetectionSystem\r\n\r\ntitle Diagram State - Sistem Deteksi Asap\r\n\r\n[*] --&gt; PowerOff\r\n\r\nstate PowerOff {\r\n    [*] --&gt; NoPower\r\n    NoPower : Perangkat mati\r\n    NoPower --&gt; PowerOn : Tombol daya ditekan\r\n}\r\n\r\nstate PowerOn {\r\n    [*] --&gt; Standby\r\n    Standby : Sistem siap\r\n    Standby --&gt; SelfCheck : Tes mandiri berkala (setiap 24 jam)\r\n    Standby --&gt; Monitoring : Mulai monitoring (sensor aktif)\r\n    \r\n    state SelfCheck {\r\n        [*] --&gt; TestingSensors\r\n        TestingSensors --&gt; TestPass : Semua sensor OK\r\n        TestingSensors --&gt; TestFail : Terdeteksi kesalahan sensor\r\n        TestPass --&gt; Standby : Kembali ke standby\r\n        TestFail --&gt; ErrorState : Laporkan kesalahan\r\n    }\r\n    \r\n    state Monitoring {\r\n        [*] --&gt; NoSmoke\r\n        NoSmoke : Operasi normal\r\n        NoSmoke --&gt; SmokeDetected : Tingkat asap &gt; ambang batas\r\n        NoSmoke --&gt; LowBattery : Baterai rendah (nirkabel)\r\n        LowBattery --&gt; NoSmoke : Baterai diganti\r\n        \r\n        state SmokeDetected {\r\n            [*] --&gt; InitialAlert\r\n            InitialAlert --&gt; ConfirmedSmoke : Asap bertahan &gt; 5 detik\r\n            InitialAlert --&gt; FalseAlarm : Asap hilang &lt; 5 detik FalseAlarm --&gt; NoSmoke : Reset\r\n            ConfirmedSmoke --&gt; AlarmActive\r\n        }\r\n        \r\n        state AlarmActive {\r\n            [*] --&gt; SoundAlarm : Aktifkan sirene &amp; lampu\r\n            SoundAlarm --&gt; SendNotification : Notifikasi panel kontrol \/ aplikasi\r\n            SendNotification --&gt; WaitForReset\r\n            WaitForReset --&gt; AlarmActive : Asap masih ada\r\n            WaitForReset --&gt; ResetSystem : Tombol reset ditekan\r\n            ResetSystem --&gt; NoSmoke : Sistem direset\r\n        }\r\n    }\r\n}\r\n\r\nstate ErrorState {\r\n    [*] --&gt; FaultIndicator : Kedipkan LED kesalahan\r\n    FaultIndicator --&gt; PowerOff : Siklus daya manual diperlukan\r\n}\r\n\r\nPowerOn --&gt; ErrorState : Kegagalan tes mandiri\r\nErrorState --&gt; PowerOff : Siklus daya\r\n\r\nPowerOff --&gt; [*] : Sistem dicabut \/ baterai dilepas\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:XLLDQzn03Bqlx7_GgII5K2Zj9PIGRPA5a4-wXHvA3_9QkwjwFipCk2MK_FTgnlPwx4r83c4zafwaDzARSn_GXKOhM6bRqIK5MWUsPlNa0-dvR3uB71J19UFMeOPLm41m0YkETeZ-bMTOUAoZyy_tl-3av0mUxLzo3vjDFFCff3-1V_CPo5_lUM-JfJtiFk0K7icXsLOOG6FWiNL8OCJpkzM5LL3Y4qB9KWwQ-UnvcjXCyqeZfYoUsiFkGz2wlZp7Vd9JYY6rkTZHkeffoKjffcJ7K92hK24SUGeI21y_mM_KnuS0TzPmi8xDLX3k6eKCUZYISEEj0wm2Rxhezd_RoP2-woNlH-e90h9A47wmZy_the_eVMoNT8FGvNsuUJDiYQnIywxiRhuYBwtlq7GeOuYK9gDROcz85wXYO6nhk8C-9AM88LVEMTVEsodSOcs5P3FaQwEU3sdAI7w1ftkR1dqmT0UIuw6MePEMZ7KQrQ57wcFO4YeZ4znEASe2m1cWz2Pv2mpeNmQujN-_OWZa8XVoIr8oE38bxk38iFHOa3eUOZF_hFmijkGjcdv51YwoiHcLd56Iqt8jd36gXI8NnXwv9RbUMBDXfwdiAudB7tSWf34uWyyWmy7L6p1BL9uM2ftk8NQi8dbVUe3SPTpxDv9D6-DFgeh-AN8XSlOdk-xdrudA_5-ZQMKRK-wBZdiQPzApN231Er2ewsOScKMq4cBAUojnlCQeimBJVbPnyceqfA2o9ZYHj0-0jKg62UGK8mB_G0vBwrvW9hTCUUcfrv9a1rZY6w7fL_is3DBhadcllJb0xZ--maveHJ_75J_lzphJy4mA9ZA-n4Q5Qv5XeSAw92ybr_5IRgykfs8nSSuVgbHHfHhVFYIYx0tAey8Y2QePdfJ-CJdGfnlQubPo6GZ3mp2VPJwlPnk0nHBTOdCPGsiicY3JKEmtNb4TzMK-EvTHaCVxFm00\" \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:XLLBQnin4BuR_1_cL9o22PJs4ag8yp249aw82psK7fJTiIsibRRIh8qf_kyTIVlGhXFYmtfNyttp-3GQNJaIbgf2mR8mMxn5meoaqSk38op6e_6892c49Gb2k9LYRKK1quY65WuT_lVdFp2TNiApsQDzMgtycWliPWN-ZKV0lmQvCC4I5-iFk63dEvaXI0V6UqcDdN_DmBZsMX5n8gL5vp0VZux3m7eObslI-UiXBjOVx2wM0XP5Fh054ghLpGQphG-CLffSPk1uSKhe22QuGtk0BrytPwVSHwCb6IlrseVnmaFHBKqSQcSi25PqXpKzFcCPNUYwaBIOdnoTlIo33zVP--ijz5aunqdCb09Ncvv-VCYQ2wbywZ5Hj9QVUUW1htXA3luJaPdrWbHP3MHyEPtm3IFuzemxxpRscoULXcKAeIB-U2fCekiRoYnCQDREK2-mzuMnXL1WIhJ2j_4f9fJGdGpCVVd1edYd5Lm2RRZZDaRbRvCVpFvQ4Fcck83cJPazJFRIek9cFUk82JZ9F25QB9N8Kh6xjxf9UiacSgIItBDUKgYPGajzH6e9q1kZLz8Mc3Ufn7zMp4b7ZWNunXsKVU1bBfJ3cHAsQ3ra2WMtrlV8Jn7zqb_GuI39GKuU7vYpS78wxF5zcHByUo8jJQNp9kS0zKJ7kwRX4oYvtf3hCnD671KwNnYIAvc5xWeDnvy7o8mcQnIKGdCFdOCeou6d8TNx-oKapOrzGv3KCfIZ5PnFD9zsFnzHVyGFR_KWhBVWPC2c3b9yV_lQQSe0Tx8rnzwSJax-O5JFHQNeNkTU3kClXsibzRQUG0ztjn4zGAMt45CUXQxui9VXjiWEt7-SrT-AzxEvBPfxucGA-SaxpSBeNV6OgYmtMG8O17hk8dHUsU9Xlg1Mb4gNgbgl-PoUmsjxmWkpyncDHrVS17mp_mS0\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:XLLBQnin4BuR_1_cL9o22PJs4ag8yp249aw82psK7fJTiIsibRRIh8qf_kyTIVlGhXFYmtfNyttp-3GQNJaIbgf2mR8mMxn5meoaqSk38op6e_6892c49Gb2k9LYRKK1quY65WuT_lVdFp2TNiApsQDzMgtycWliPWN-ZKV0lmQvCC4I5-iFk63dEvaXI0V6UqcDdN_DmBZsMX5n8gL5vp0VZux3m7eObslI-UiXBjOVx2wM0XP5Fh054ghLpGQphG-CLffSPk1uSKhe22QuGtk0BrytPwVSHwCb6IlrseVnmaFHBKqSQcSi25PqXpKzFcCPNUYwaBIOdnoTlIo33zVP--ijz5aunqdCb09Ncvv-VCYQ2wbywZ5Hj9QVUUW1htXA3luJaPdrWbHP3MHyEPtm3IFuzemxxpRscoULXcKAeIB-U2fCekiRoYnCQDREK2-mzuMnXL1WIhJ2j_4f9fJGdGpCVVd1edYd5Lm2RRZZDaRbRvCVpFvQ4Fcck83cJPazJFRIek9cFUk82JZ9F25QB9N8Kh6xjxf9UiacSgIItBDUKgYPGajzH6e9q1kZLz8Mc3Ufn7zMp4b7ZWNunXsKVU1bBfJ3cHAsQ3ra2WMtrlV8Jn7zqb_GuI39GKuU7vYpS78wxF5zcHByUo8jJQNp9kS0zKJ7kwRX4oYvtf3hCnD671KwNnYIAvc5xWeDnvy7o8mcQnIKGdCFdOCeou6d8TNx-oKapOrzGv3KCfIZ5PnFD9zsFnzHVyGFR_KWhBVWPC2c3b9yV_lQQSe0Tx8rnzwSJax-O5JFHQNeNkTU3kClXsibzRQUG0ztjn4zGAMt45CUXQxui9VXjiWEt7-SrT-AzxEvBPfxucGA-SaxpSBeNV6OgYmtMG8O17hk8dHUsU9Xlg1Mb4gNgbgl-PoUmsjxmWkpyncDHrVS17mp_mS0\">Edit PlantUML di VPasCode<\/a><\/p>\n<h3>Arsitektur Tingkat Tinggi: Diagram Komponen Sistem Kurir<\/h3>\n<p>Diagram komponen memberikan pandangan tingkat tinggi tentang arsitektur sistem. Contoh ini mengilustrasikan sistem manajemen kurir, menunjukkan bagaimana aplikasi klien, layanan backend, antrian pesan, dan basis data berinteraksi.<\/p>\n<p><img alt=\"Kode diagram komponen PlantUML untuk sistem kurir, sedang diedit dengan editor teks-ke-diagram VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-component-diagram-courier-system.jpg\"\/><\/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:ZPR1Rjim38Rl0V8EH2xRW1Qz5-ZG9XxMRisMDXrw6H38CcCBZIL3aZDaJpzAjbDPKO3T8lAZI4e_vTmQoxHjwnqiLAi5wlN1MAoda-d42hl3mGoT7Ix9K3TAehIG2LPgvjaFS7Dpy-uoRZcTy2CwMxJ6gfhskMkQ6J03Wu7MOx3FjrIveFH7l3F7z5rH2mclc4F6J9KhfWkFUpkPNMqXldg0hypY7tRei4RqomZygGlNC-gzuEXHR-aD8pGJfc6MLoDwCAO2NZJZRqAMeu31c0fOiKFjVeHyRqlXFvGLMy6P5KgEOa97Al2NYNfsXYCuGfTe32iHdbfiyRVy-CpoNDZbqzLtjdrZdtnqptXa5FoCXQ0RPRpgqlYrNxei1RCiPmQfRsLigN7zz0ZPt9FqCvk7o5B9KcLpgk1HbURgUBJtWjIb3tqX3dB-TwK-I8jwopWQk8ALqeDY0rN2vUNdG21mJOL_MRyGJxfQA_w6TaO1Hrt-7py8ymmzSoK6PaUDbHSvJtGJ-METHExeXhl3wGsGOOEoGCa5ziSJbkBZ8vsxDihdrOAQxhivYOWBEW6IAZsXl19Skc_PV97AyougHtLYSot65JisLAgZLss-4wO2tBktR9OE2cxUXn2_5mp29oOTs8juEedkBbdAkiqDro97i0fsgf_gjg4HG5TPSez1xsw3Loqi1G-3KNM3SIOoEhHMQpUmnxJyU8hZMmpRIdYIDpgT9Cp98rWeQTeQGGQyQ_rSV3Z3vszcEWcq7pOGcyUlKpSXb7eO2QeAGOkoig2sqQm2t3DPx0XjcEQu0wxHbtlXV8qMdCx_0eW1vJyuz36sBJrJD7QkNPzndE3ammAmT6lAuRSmy4VO2dWdJkCJgSQAMlmbHAkM2a_idojBP-OIZ5zjW3jpaBoVXEiknyQtWONVV137fjDaPonm9_Qe3vkkeGslc2on62U-fGNzyVW7\" 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:ZLR9Rjim4BqBq3yCV6aA9CWzG8fwAO8sIUlOANeqHj948YIH0fS4_liEATcMPTdj9URo7cTxCyfNOr5RLrSmLquBqkkjiLJ7KHnPOIk2jV1xUEHB3JUm49XhvBsg6oL9Uk0dkB-_tv_uJHobtSx2PDfKeaGZO4aLoZn7EG4qC7V6gfhqj6d6uMkgN4MwDTrIMXU7Z0MQ8b6eC_X32KopMhGMmegFl8yz-0FfXFs0wV9x2sl40rhwmEq0-8HRb2ZPR-D_0_YNpZX7fDz5IcV0qkLeElX2c0PjMbncL9XYsJ5UDQQbaFbbHftmKdUK9Mvhlh_4-AciU0jf3Onscw8LIluZc3nt4WFfj-b5VbmoQRNO9KfUhJ19X7r-kNt4jn8_1_8p6OCvlJXonwRcc1O4Ayg42S2m2eVUI8OM4pG4andxpldaFIoLiRcczSjJOF3lOjQ7FYkPgyLCNZsftDok15SMxI7DdKCUv0471NCOg6jN8joo3MrR9VTq2ZStNtfoWJkOhBwjNndEAbkhj2GxOS9UfV-7tydq37hY7UmTUzIn2WUN9meQt0_bChWUbBbhRhAakNEja_mNTle82Uex4ruOYDu7ag-MSmwxY-U4CNJf130gs1DKK88tzsCncu_PEOZBey8Yf7VeiSVs5UlHIvUqWuab10rfdekihCaukQU1G3K5rAo_oWdeZvznSYVeE1fKSjIj6UbkgWQtU31enwjAXMO_yyPE-_w1LrTnO-ckIvhzC1gdZcImimK6cI-a21azhcW_h96RqUh6qSZnQ0eUbJIkPW_aOSgTP_Vx-N9jugZN2_qGXiV7Cwljc3cF8xjh4NQCe0mbob2BGVy2HyHNN48HAkW2iK4U3zV-jY595Xi-Av2Ry9hVaC3VRUiCtuLlKnoHp7pymOEXkPElKB2OgbILhPXDYwNGtAN_tbupXikKgyQA6YiFqyw_Vc8dmGyiMZl7Gnvuv7PTmWDNo58hUGVAXxv9DV78oK9ubMgBj75DjZ_Cg1BlfBURDivDMd22A3ks_vKt_A_BNm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml CourierSystem\r\n\r\ntitle Sistem Kurir - Diagram Komponen\r\n\r\n' === Komponen ===\r\ncomponent \"Aplikasi Pelanggan\" as CustomerApp\r\ncomponent \"Aplikasi Seluler Kurir\" as CourierApp\r\ncomponent \"Dashboard Web Admin\" as AdminWeb\r\n\r\ncomponent \"Gerbang API\" as ApiGateway\r\n\r\ncomponent \"Layanan Pesanan\" as OrderService\r\ncomponent \"Layanan Penugasan\" as DispatchService\r\ncomponent \"Layanan Pelacakan\" as TrackingService\r\ncomponent \"Layanan Pembayaran\" as PaymentService\r\ncomponent \"Layanan Notifikasi\" as NotificationService\r\ncomponent \"Layanan Pengguna\" as UserService\r\n\r\ncomponent \"Antrian Pesann(RabbitMQ\/Kafka)\" as MessageQueue\r\ncomponent \"Cache Redis\" as RedisCache\r\n\r\ndatabase \"Basis Data PostgreSQL\" as SQLDB\r\ndatabase \"MongoDBn(Logs\/Riwayat Pelacakan)\" as MongoLogs\r\n\r\n' === Antarmuka \/ Port ===\r\nCustomerApp --&gt; ApiGateway : \"REST \/ WebSocket\"\r\nCourierApp --&gt; ApiGateway : \"REST \/ WebSocket\"\r\nAdminWeb --&gt; ApiGateway : \"REST\"\r\n\r\nApiGateway --&gt; OrderService\r\nApiGateway --&gt; TrackingService\r\nApiGateway --&gt; PaymentService\r\nApiGateway --&gt; UserService\r\n\r\n' === Ketergantungan Layanan ===\r\nOrderService --&gt; DispatchService : \"gRPC \/ REST\"\r\nOrderService --&gt; PaymentService\r\nOrderService --&gt; NotificationService\r\nOrderService --&gt; SQLDB : \"JDBC\"\r\nOrderService --&gt; RedisCache : \"Cache\"\r\n\r\nDispatchService --&gt; MessageQueue : \"Publikasikan peristiwa\"\r\nDispatchService --&gt; CourierApp : \"Push melalui Gerbang API\"\r\nDispatchService --&gt; SQLDB\r\n\r\nTrackingService --&gt; MessageQueue : \"Berlangganan pembaruan lokasi\"\r\nTrackingService --&gt; MongoLogs : \"Tulis riwayat pelacakan\"\r\nTrackingService --&gt; RedisCache : \"Cache lokasi saat ini\"\r\n\r\nPaymentService --&gt; SQLDB\r\nPaymentService --&gt; NotificationService\r\n\r\nNotificationService --&gt; MessageQueue : \"Konsumsi notifikasi\"\r\nNotificationService --&gt; CustomerApp : \"Push melalui Gerbang API\"\r\n\r\nUserService --&gt; SQLDB\r\nUserService --&gt; RedisCache\r\n\r\n' === Catatan ===\r\nnote kanan dari OrderService\r\n  Menangani pembuatan paket,\r\n  penetapan harga, dan status pesanan\r\nend note\r\n\r\nnote kanan dari DispatchService\r\n  Mencocokkan pesanan dengan kurir,\n  mengoptimalkan rute\r\nend note\r\n\r\nnote bawah dari MessageQueue\r\n  Peristiwa asinkron: order_created,\r\n  location_updated,\r\n  delivery_status_changed\r\nend note\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:ZLR9Rjim4BqBq3yCV6aA9CWzG8fwAO8sIUlOANeqHj948YIH0fS4_liEATcMPTdj9URo7cTxCyfNOr5RLrSmLquBqkkjiLJ7KHnPOIk2jV1xUEHB3JUm49XhvBsg6oL9Uk0dkB-_tv_uJHobtSx2PDfKeaGZO4aLoZn7EG4qC7V6gfhqj6d6uMkgN4MwDTrIMXU7Z0MQ8b6eC_X32KopMhGMmegFl8yz-0FfXFs0wV9x2sl40rhwmEq0-8HRb2ZPR-D_0_YNpZX7fDz5IcV0qkLeElX2c0PjMbncL9XYsJ5UDQQbaFbbHftmKdUK9Mvhlh_4-AciU0jf3Onscw8LIluZc3nt4WFfj-b5VbmoQRNO9KfUhJ19X7r-kNt4jn8_1_8p6OCvlJXonwRcc1O4Ayg42S2m2eVUI8OM4pG4andxpldaFIoLiRcczSjJOF3lOjQ7FYkPgyLCNZsftDok15SMxI7DdKCUv0471NCOg6jN8joo3MrR9VTq2ZStNtfoWJkOhBwjNndEAbkhj2GxOS9UfV-7tydq37hY7UmTUzIn2WUN9meQt0_bChWUbBbhRhAakNEja_mNTle82Uex4ruOYDu7ag-MSmwxY-U4CNJf130gs1DKK88tzsCncu_PEOZBey8Yf7VeiSVs5UlHIvUqWuab10rfdekihCaukQU1G3K5rAo_oWdeZvznSYVeE1fKSjIj6UbkgWQtU31enwjAXMO_yyPE-_w1LrTnO-ckIvhzC1gdZcImimK6cI-a21azhcW_h96RqUh6qSZnQ0eUbJIkPW_aOSgTP_Vx-N9jugZN2_qGXiV7Cwljc3cF8xjh4NQCe0mbob2BGVy2HyHNN48HAkW2iK4U3zV-jY595Xi-Av2Ry9hVaC3VRUiCtuLlKnoHp7pymOEXkPElKB2OgbILhPXDYwNGtAN_tbupXikKgyQA6YiFqyw_Vc8dmGyiMZl7Gnvuv7PTmWDNo58hUGVAXxv9DV78oK9ubMgBj75DjZ_Cg1BlfBURDivDMd22A3ks_vKt_A_BNm00\" \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:ZPR1Rjim38Rl0V8EH2xRW1Qz5-ZG9XxMRisMDXrw6H38CcCBZIL3aZDaJpzAjbDPKO3T8lAZI4e_vTmQoxHjwnqiLAi5wlN1MAoda-d42hl3mGoT7Ix9K3TAehIG2LPgvjaFS7Dpy-uoRZcTy2CwMxJ6gfhskMkQ6J03Wu7MOx3FjrIveFH7l3F7z5rH2mclc4F6J9KhfWkFUpkPNMqXldg0hypY7tRei4RqomZygGlNC-gzuEXHR-aD8pGJfc6MLoDwCAO2NZJZRqAMeu31c0fOiKFjVeHyRqlXFvGLMy6P5KgEOa97Al2NYNfsXYCuGfTe32iHdbfiyRVy-CpoNDZbqzLtjdrZdtnqptXa5FoCXQ0RPRpgqlYrNxei1RCiPmQfRsLigN7zz0ZPt9FqCvk7o5B9KcLpgk1HbURgUBJtWjIb3tqX3dB-TwK-I8jwopWQk8ALqeDY0rN2vUNdG21mJOL_MRyGJxfQA_w6TaO1Hrt-7py8ymmzSoK6PaUDbHSvJtGJ-METHExeXhl3wGsGOOEoGCa5ziSJbkBZ8vsxDihdrOAQxhivYOWBEW6IAZsXl19Skc_PV97AyougHtLYSot65JisLAgZLss-4wO2tBktR9OE2cxUXn2_5mp29oOTs8juEedkBbdAkiqDro97i0fsgf_gjg4HG5TPSez1xsw3Loqi1G-3KNM3SIOoEhHMQpUmnxJyU8hZMmpRIdYIDpgT9Cp98rWeQTeQGGQyQ_rSV3Z3vszcEWcq7pOGcyUlKpSXb7eO2QeAGOkoig2sqQm2t3DPx0XjcEQu0wxHbtlXV8qMdCx_0eW1vJyuz36sBJrJD7QkNPzndE3ammAmT6lAuRSmy4VO2dWdJkCJgSQAMlmbHAkM2a_idojBP-OIZ5zjW3jpaBoVXEiknyQtWONVV137fjDaPonm9_Qe3vkkeGslc2on62U-fGNzyVW7\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:ZPR1Rjim38Rl0V8EH2xRW1Qz5-ZG9XxMRisMDXrw6H38CcCBZIL3aZDaJpzAjbDPKO3T8lAZI4e_vTmQoxHjwnqiLAi5wlN1MAoda-d42hl3mGoT7Ix9K3TAehIG2LPgvjaFS7Dpy-uoRZcTy2CwMxJ6gfhskMkQ6J03Wu7MOx3FjrIveFH7l3F7z5rH2mclc4F6J9KhfWkFUpkPNMqXldg0hypY7tRei4RqomZygGlNC-gzuEXHR-aD8pGJfc6MLoDwCAO2NZJZRqAMeu31c0fOiKFjVeHyRqlXFvGLMy6P5KgEOa97Al2NYNfsXYCuGfTe32iHdbfiyRVy-CpoNDZbqzLtjdrZdtnqptXa5FoCXQ0RPRpgqlYrNxei1RCiPmQfRsLigN7zz0ZPt9FqCvk7o5B9KcLpgk1HbURgUBJtWjIb3tqX3dB-TwK-I8jwopWQk8ALqeDY0rN2vUNdG21mJOL_MRyGJxfQA_w6TaO1Hrt-7py8ymmzSoK6PaUDbHSvJtGJ-METHExeXhl3wGsGOOEoGCa5ziSJbkBZ8vsxDihdrOAQxhivYOWBEW6IAZsXl19Skc_PV97AyougHtLYSot65JisLAgZLss-4wO2tBktR9OE2cxUXn2_5mp29oOTs8juEedkBbdAkiqDro97i0fsgf_gjg4HG5TPSez1xsw3Loqi1G-3KNM3SIOoEhHMQpUmnxJyU8hZMmpRIdYIDpgT9Cp98rWeQTeQGGQyQ_rSV3Z3vszcEWcq7pOGcyUlKpSXb7eO2QeAGOkoig2sqQm2t3DPx0XjcEQu0wxHbtlXV8qMdCx_0eW1vJyuz36sBJrJD7QkNPzndE3ammAmT6lAuRSmy4VO2dWdJkCJgSQAMlmbHAkM2a_idojBP-OIZ5zjW3jpaBoVXEiknyQtWONVV137fjDaPonm9_Qe3vkkeGslc2on62U-fGNzyVW7\">Edit PlantUML di VPasCode<\/a><\/p>\n<h3>Infrastruktur sebagai Kode: Diagram Penempatan<\/h3>\n<p>VPasCode juga mendukung diagram penempatan, memungkinkan tim untuk memvisualisasikan infrastruktur fisik. Contoh ini menunjukkan arsitektur AWS dengan Load Balancer, instance EC2, dan basis data RDS.<\/p>\n<p><img alt=\"Kode diagram penempatan PlantUML untuk arsitektur contoh, sedang diedit dengan editor teks-ke-diagram VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-deployment-diagram-sample-architecture.jpg\"\/><\/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:ZPB1IyCm5CRlXVuF7prjXwgjwC63hEj41dEK5LGK3scJIQJBapRPGTd_Rf9sOmu42OJmtY_Vb_TU9frchJQR9WmKSO4eUogHDsGuLcIqkBgCm3hCbcKOx9778iSekJZpwpov7aVu3WEWpnQcQcIDqbHAw243M1EvPhL6jBoVBv-n8COnPGrJjMYzHRQOEdJdjYErLcwP5eESVPdfjBimoFRGNPvYhcmbLWp98GdKjFaa9PIpjUJPXxKfvdWjY2DvyxRscFJuxa_9z9-IwK4oFP8ygMZ6DAjO9quxnFVnADkmBr9OpKgC7aoZPPoz83CjjMpSjygV1-sT6uoT3-BurZKHDrY9ZfgjwA1RjbxBEWnStELTjGuWetZSKYKLAZy4gTv_KRO0ptfHRsUlvQIKgBMqZok86e-aHqWOJ8JYzZFz0000\" 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:ZPB1IiD048RlWRp3a5DxI3KHFNYGfgr8QHj20ogAXqcpojhDRabs1PM-kxERD5P1a41OThvyFpEJSQEnrgOIlYTLoI18xdAO2cLAM2kZsVbP0DZ0BCrzxu3SPbCOHASZzvn45yC0FdqFeAtcff1CGsOAmRTT1O12-3DkD0HBXILCKA3Si1hIctbwxoAIvSIYU_lwjYq4DfguWxNcRwXxQylC9JL1DhYUnX3rHO2DgdPACacfIJQ7bEZHQmEFcIeXUdAfT8nQVF-dClwdCkwLyP7oLqDT8pFKM633UdNPNP2tmWybOJtBOR0oGlCmUO34rAh6OJifT-xSUxiNMW-4uPMT8Lp2Yibt9bY3V8iI10e3WakDZUzPm8AsRI8pI_AgGFb2PAsCBCDQ5Lp-8AaRnxi4bqsVBaorCxH4MD0ujWrtJ7p4-DwOoPB-h2y0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nnode \"AWS Cloud Route53\" as DNS\r\n\r\nnode \"VPC (10.0.0.0\/16)\" {\r\n  node \"Subnet Publik\" {\r\n    artifact \"Load Balancer NGINX\" as ALB\r\n  }\r\n  \r\n  node \"Klaster Subnet Privat\" {\r\n    node \"Instance EC2 1\" {\r\n      component \"API Node.js [Pod 1]\" as Pod1\r\n    }\r\n    node \"Instance EC2 2\" {\r\n      component \"API Node.js [Pod 2]\" as Pod2\r\n    }\r\n  }\r\n  \r\n  node \"Subnet Database\" {\r\n    database \"Amazon RDS (Multi-AZ Aurora)\" as Aurora\r\n  }\r\n}\r\n\r\nDNS --&gt; ALB : Menyelesaikan lalu lintas\r\nALB --&gt; Pod1 : Penyeimbangan round-robin\r\nALB --&gt; Pod2\r\nPod1 --&gt; Aurora : Kumpulan Koneksi\r\nPod2 --&gt; Aurora\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZPB1IiD048RlWRp3a5DxI3KHFNYGfgr8QHj20ogAXqcpojhDRabs1PM-kxERD5P1a41OThvyFpEJSQEnrgOIlYTLoI18xdAO2cLAM2kZsVbP0DZ0BCrzxu3SPbCOHASZzvn45yC0FdqFeAtcff1CGsOAmRTT1O12-3DkD0HBXILCKA3Si1hIctbwxoAIvSIYU_lwjYq4DfguWxNcRwXxQylC9JL1DhYUnX3rHO2DgdPACacfIJQ7bEZHQmEFcIeXUdAfT8nQVF-dClwdCkwLyP7oLqDT8pFKM633UdNPNP2tmWybOJtBOR0oGlCmUO34rAh6OJifT-xSUxiNMW-4uPMT8Lp2Yibt9bY3V8iI10e3WakDZUzPm8AsRI8pI_AgGFb2PAsCBCDQ5Lp-8AaRnxi4bqsVBaorCxH4MD0ujWrtJ7p4-DwOoPB-h2y0\" \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:ZPB1IyCm5CRlXVuF7prjXwgjwC63hEj41dEK5LGK3scJIQJBapRPGTd_Rf9sOmu42OJmtY_Vb_TU9frchJQR9WmKSO4eUogHDsGuLcIqkBgCm3hCbcKOx9778iSekJZpwpov7aVu3WEWpnQcQcIDqbHAw243M1EvPhL6jBoVBv-n8COnPGrJjMYzHRQOEdJdjYErLcwP5eESVPdfjBimoFRGNPvYhcmbLWp98GdKjFaa9PIpjUJPXxKfvdWjY2DvyxRscFJuxa_9z9-IwK4oFP8ygMZ6DAjO9quxnFVnADkmBr9OpKgC7aoZPPoz83CjjMpSjygV1-sT6uoT3-BurZKHDrY9ZfgjwA1RjbxBEWnStELTjGuWetZSKYKLAZy4gTv_KRO0ptfHRsUlvQIKgBMqZok86e-aHqWOJ8JYzZFz0000\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:ZPB1IyCm5CRlXVuF7prjXwgjwC63hEj41dEK5LGK3scJIQJBapRPGTd_Rf9sOmu42OJmtY_Vb_TU9frchJQR9WmKSO4eUogHDsGuLcIqkBgCm3hCbcKOx9778iSekJZpwpov7aVu3WEWpnQcQcIDqbHAw243M1EvPhL6jBoVBv-n8COnPGrJjMYzHRQOEdJdjYErLcwP5eESVPdfjBimoFRGNPvYhcmbLWp98GdKjFaa9PIpjUJPXxKfvdWjY2DvyxRscFJuxa_9z9-IwK4oFP8ygMZ6DAjO9quxnFVnADkmBr9OpKgC7aoZPPoz83CjjMpSjygV1-sT6uoT3-BurZKHDrY9ZfgjwA1RjbxBEWnStELTjGuWetZSKYKLAZy4gTv_KRO0ptfHRsUlvQIKgBMqZok86e-aHqWOJ8JYzZFz0000\">Edit PlantUML di VPasCode<\/a><\/p>\n<h3>Arsitektur Perusahaan: Dukungan ArchiMate<\/h3>\n<p>Bagi arsitek perusahaan, VPasCode mendukung notasi ArchiMate, memungkinkan pemodelan lapisan bisnis, aplikasi, dan teknologi. Contoh ini mengilustrasikan interaksi antara proses bisnis dan layanan teknologi dasar dalam konteks browser internet.<\/p>\n<p><img alt=\"Kode diagram ArchiMate PlantUML untuk peramban Internet, sedang diedit dengan editor teks-ke-diagram langsung VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-archimate-diagram-internet-browser.jpg\"\/><\/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:bLLTZvf057qduJ_S-j35nCO_q3IBkwjhQgiHDficJSY8LvmDp91XqDYc_trdO00HjEqJCoVtdFinvuRxJ18XyoI6EPCe64gO27xCK817aZH6s_f0MHZdMuJFH8HxcX29OxSwVR4jsv9KnWWrPfZmgQEfW-yMxe_bYn-uNk1zVV8VdfrX0owUfdwmdi-U_NFKNww2n-NhTutPrapmFAKiSZPvHXbcsGW64tCS37_R5a1r3PQRDmnb7LbULRnRXq293OOjtahmK7sTZ2TOWGOR3Jm5Ddm3NmXuA0uqH8TABqzJBgG1LEwv3mQ37HUDaEEcQKn38YbdOCA7MlPFgslIHEb6cflf_Gm97eaaPWJR-gXOhxY15OaGT03yP72dKiezmYu-tPMTdCjCSnRgWtF4JQfe4zoJ0-MvC58QWqq5TlaFF4avGoOTL-aSSAKiftYw0jr2WO46WU-ACewLQ4zfxMb83FUCnpmwAIM_lfXPD43W2abtH0s2ic-OS76QIqn60yeWAQumRcM2lKpYyHiva2mKD3N-EDEh7zXOt3XSl-_b8isGeQ0XV8HLd4UK_QjM6QqK2yDrPFyYfcQeZqL9XO0UQbOWzHXjQurnC8tvCLZWJlRQ7JhBe-cQLsHYKV2IzjYyLwgXfXXI4jDVfK6KGjTQFQjJqOkArpJQjttTOy_h2S-9Lrjqiun6B57MBGVKuz__Ijeo7xHsiYAjyGQZRt-kP2l7qw9tlThtb9T1jngyIgkyUuFiHf70g5tiHUfh2r5BXDfNnZwLsziJwwkr5Tmt4jkwHxPLVyLt\" 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:bLNRRjim37qta7_Wyh2wG8V-m33KwJLOjWI9Ys9FXkAmDXjBCdH9qGtxzqhnfN5Z5zjJQ8hd794wH2wqOSfONi1K65G23KoKVDQeOCLuMU0e-4GYBUm6uIjJQKwS6JoFckZRA1W5Xao1S2c5aJcqH_2bfMguVV79BFerlu-JQ9Milb_7btVXwLjoTdqJ9ylfxLryc8tdY-Hg_l3JvqR1hPAs9965Qwj9eDPdC9wG5gJ7ftz60S2apYVpzHEcfgshFbsr3xRGO3gGXPAf-msrvDWawzpPs0KQTJzmXMf7AOPaLhOifJ9rmibTsQqL6HCGJy4AOnjf26ViXGbt49K5RPccKq_wjzCaAzrPoWn9uQYQmhhJwEqmkMA6rGrlsj2hkm-uOmNZJkW1ro3WH6FA58CD2SP9drIj79BTM97w87p6TSaod63ETYIjSeGBL5ImhOMy9dKrnmoNafTIe31Xv9Xsk70sS-eBH-RVYsNa-zuQUeGDKtH8Dd33xbmCfhcGXSnU75sCsttSp2Lk3vD8EGdcXaBY1tAfNgO6-Tbuu-M0-mp1-P4Uv8ONvqzintIgg3HLVmUqxNFNpgwTxbjxvtcuvvR3PrWKDYFnhqHLjP_sFZZQf44UDpyVxgzI1StxxESt2fPO93U5V4vc-6XwVGv72-FX7hSN4LboN_Rul9Vg3LfYIgoWtvKz7CEnjNfsfu7lRxoaBE-wkyUUmuA7mC4M8wqf4zmPjnfGZtl_IxHZE-XiPWDQuWU8lkqPKAl6qu4VsxFlATyNVTJW8Annx0VWACiKPjtBlfCUMeEM8lM-gktJ6BqxiRwxTehxHZ8ABb1itF_WAm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml Internet Browser Sample\r\n!include &lt;archimate\/Archimate&gt;\r\n\r\ntitle Contoh Archimate - Browser Internet\r\n\r\n'LAYOUT_AS_SKETCH()\r\n'LAYOUT_LEFT_RIGHT()\r\n'LAYOUT_TOP_DOWN()\r\n\r\nGrouping(business, \"Bisnis\"){\r\n  Business_Object(businessObject, \"Objek Bisnis\")\r\n  Business_Process(someBusinessProcess,\"Proses Bisnis\")\r\n  Business_Service(itSupportService, \"Dukungan TI untuk Bisnis (Layanan Aplikasi)\")\r\n}\r\n\r\nGrouping(application, \"Aplikasi\"){\r\n  Application_DataObject(dataObject, \"Data Halaman Web n 'secara dinamis'\")\r\n  Application_Function(webpageBehaviour, \"Perilaku halaman web\")\r\n  Application_Component(ActivePartWebPage, \"Bagian Aktif dari halaman web n 'secara dinamis'\")\r\n}\r\n\r\nGrouping(technology, \"Teknologi\"){\r\n  Technology_Artifact(inMemoryItem,\"dalam memori \/ 'secara dinamis' html\/javascript\")\r\n  Technology_Service(internetBrowser, \"Browser Internet Umum &amp; Plugin\")\r\n  Technology_Service(internetBrowserPlugin, \"Plugin Browser Internet\")\r\n  Technology_Service(webServer, \"Server web\")\r\n}\r\n\r\n\r\nRel_Flow_Left(someBusinessProcess, businessObject, \"\")\r\nRel_Serving_Up(itSupportService, someBusinessProcess, \"\")\r\nRel_Specialization_Up(webpageBehaviour, itSupportService, \"\")\r\nRel_Flow_Right(dataObject, webpageBehaviour, \"\")\r\nRel_Specialization_Up(dataObject, businessObject, \"\")\r\nRel_Assignment_Left(ActivePartWebPage, webpageBehaviour, \"\")\r\nRel_Specialization_Up(inMemoryItem, dataObject, \"\")\r\nRel_Realization_Up(inMemoryItem, ActivePartWebPage, \"\")\r\nRel_Specialization_Right(inMemoryItem,internetBrowser, \"\")\r\nRel_Serving_Up(internetBrowser, webpageBehaviour, \"\")\r\nRel_Serving_Up(internetBrowserPlugin, webpageBehaviour, \"\")\r\nRel_Aggregation_Right(internetBrowser, internetBrowserPlugin, \"\")\r\nRel_Access_Up(webServer, inMemoryItem, \"\")\r\nRel_Serving_Up(webServer, internetBrowser, \"\")\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:bLNRRjim37qta7_Wyh2wG8V-m33KwJLOjWI9Ys9FXkAmDXjBCdH9qGtxzqhnfN5Z5zjJQ8hd794wH2wqOSfONi1K65G23KoKVDQeOCLuMU0e-4GYBUm6uIjJQKwS6JoFckZRA1W5Xao1S2c5aJcqH_2bfMguVV79BFerlu-JQ9Milb_7btVXwLjoTdqJ9ylfxLryc8tdY-Hg_l3JvqR1hPAs9965Qwj9eDPdC9wG5gJ7ftz60S2apYVpzHEcfgshFbsr3xRGO3gGXPAf-msrvDWawzpPs0KQTJzmXMf7AOPaLhOifJ9rmibTsQqL6HCGJy4AOnjf26ViXGbt49K5RPccKq_wjzCaAzrPoWn9uQYQmhhJwEqmkMA6rGrlsj2hkm-uOmNZJkW1ro3WH6FA58CD2SP9drIj79BTM97w87p6TSaod63ETYIjSeGBL5ImhOMy9dKrnmoNafTIe31Xv9Xsk70sS-eBH-RVYsNa-zuQUeGDKtH8Dd33xbmCfhcGXSnU75sCsttSp2Lk3vD8EGdcXaBY1tAfNgO6-Tbuu-M0-mp1-P4Uv8ONvqzintIgg3HLVmUqxNFNpgwTxbjxvtcuvvR3PrWKDYFnhqHLjP_sFZZQf44UDpyVxgzI1StxxESt2fPO93U5V4vc-6XwVGv72-FX7hSN4LboN_Rul9Vg3LfYIgoWtvKz7CEnjNfsfu7lRxoaBE-wkyUUmuA7mC4M8wqf4zmPjnfGZtl_IxHZE-XiPWDQuWU8lkqPKAl6qu4VsxFlATyNVTJW8Annx0VWACiKPjtBlfCUMeEM8lM-gktJ6BqxiRwxTehxHZ8ABb1itF_WAm00\" \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:bLLTZvf057qduJ_S-j35nCO_q3IBkwjhQgiHDficJSY8LvmDp91XqDYc_trdO00HjEqJCoVtdFinvuRxJ18XyoI6EPCe64gO27xCK817aZH6s_f0MHZdMuJFH8HxcX29OxSwVR4jsv9KnWWrPfZmgQEfW-yMxe_bYn-uNk1zVV8VdfrX0owUfdwmdi-U_NFKNww2n-NhTutPrapmFAKiSZPvHXbcsGW64tCS37_R5a1r3PQRDmnb7LbULRnRXq293OOjtahmK7sTZ2TOWGOR3Jm5Ddm3NmXuA0uqH8TABqzJBgG1LEwv3mQ37HUDaEEcQKn38YbdOCA7MlPFgslIHEb6cflf_Gm97eaaPWJR-gXOhxY15OaGT03yP72dKiezmYu-tPMTdCjCSnRgWtF4JQfe4zoJ0-MvC58QWqq5TlaFF4avGoOTL-aSSAKiftYw0jr2WO46WU-ACewLQ4zfxMb83FUCnpmwAIM_lfXPD43W2abtH0s2ic-OS76QIqn60yeWAQumRcM2lKpYyHiva2mKD3N-EDEh7zXOt3XSl-_b8isGeQ0XV8HLd4UK_QjM6QqK2yDrPFyYfcQeZqL9XO0UQbOWzHXjQurnC8tvCLZWJlRQ7JhBe-cQLsHYKV2IzjYyLwgXfXXI4jDVfK6KGjTQFQjJqOkArpJQjttTOy_h2S-9Lrjqiun6B57MBGVKuz__Ijeo7xHsiYAjyGQZRt-kP2l7qw9tlThtb9T1jngyIgkyUuFiHf70g5tiHUfh2r5BXDfNnZwLsziJwwkr5Tmt4jkwHxPLVyLt\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:bLLTZvf057qduJ_S-j35nCO_q3IBkwjhQgiHDficJSY8LvmDp91XqDYc_trdO00HjEqJCoVtdFinvuRxJ18XyoI6EPCe64gO27xCK817aZH6s_f0MHZdMuJFH8HxcX29OxSwVR4jsv9KnWWrPfZmgQEfW-yMxe_bYn-uNk1zVV8VdfrX0owUfdwmdi-U_NFKNww2n-NhTutPrapmFAKiSZPvHXbcsGW64tCS37_R5a1r3PQRDmnb7LbULRnRXq293OOjtahmK7sTZ2TOWGOR3Jm5Ddm3NmXuA0uqH8TABqzJBgG1LEwv3mQ37HUDaEEcQKn38YbdOCA7MlPFgslIHEb6cflf_Gm97eaaPWJR-gXOhxY15OaGT03yP72dKiezmYu-tPMTdCjCSnRgWtF4JQfe4zoJ0-MvC58QWqq5TlaFF4avGoOTL-aSSAKiftYw0jr2WO46WU-ACewLQ4zfxMb83FUCnpmwAIM_lfXPD43W2abtH0s2ic-OS76QIqn60yeWAQumRcM2lKpYyHiva2mKD3N-EDEh7zXOt3XSl-_b8isGeQ0XV8HLd4UK_QjM6QqK2yDrPFyYfcQeZqL9XO0UQbOWzHXjQurnC8tvCLZWJlRQ7JhBe-cQLsHYKV2IzjYyLwgXfXXI4jDVfK6KGjTQFQjJqOkArpJQjttTOy_h2S-9Lrjqiun6B57MBGVKuz__Ijeo7xHsiYAjyGQZRt-kP2l7qw9tlThtb9T1jngyIgkyUuFiHf70g5tiHUfh2r5BXDfNnZwLsziJwwkr5Tmt4jkwHxPLVyLt\">Edit PlantUML di VPasCode<\/a><\/p>\n<h3>Pemodelan Data: ERD Tiket Bioskop<\/h3>\n<p>Diagram Relasi Entitas (ERD) sangat penting untuk desain basis data. VPasCode mendukung notasi ERD standar maupun Chen. Contoh ini memodelkan sistem tiket bioskop, mendefinisikan entitas seperti<code data-backticks=\"1\">Pelanggan<\/code>,\u00a0<code data-backticks=\"1\">Film<\/code>,\u00a0<code data-backticks=\"1\">Pertunjukan<\/code>, dan <code data-backticks=\"1\">Pemesanan<\/code>.<\/p>\n<p><img alt=\"Kode diagram relasi entitas (ERD) PlantUML untuk sistem tiket bioskop, sedang diedit dengan editor teks-ke-diagram VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-plantuml-entity-relaiotnship-diagram-erd-cinema-ticket-system.jpg\"\/><\/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:dLR1Rk8m4BqZyGyMbrqgaDgkzeAggYc4RdOXe01LRv593B6Qs97jj49b_trjnma99AsqDpjlF9utRsQS1ouW4raITplT3Y82YmFeZJCkQ89O3q0E0hC17zqE05VbtiSX687Dnfc0kti53OUvmGupBdm24oJnPyiR_xAyxp-l-paQmqz0b40SLu2Rw-k-yNu5qeYIwgdRqYKzm5WS_9HY8hYqSDnrZZ2qnrmmA30bVWY5EhvsvlPgRSsNtSxVAkavVSD8CqxKgg2hDwrSvT6u7bCHL8Xum72gRbQNsYycf30puIIOP0BLmjqZmXhpmb2C84S5XOcrjWqWVP5zBMFzCrxh2CbJkPOYNnVSpBQTdS7FvBefIGegOEnpQLNZeJxuCJpGJCZFlrSBzoocLKJVTK1SBeferBerb6OPsYaOTm8dPvhhCYDX2n93ii_Wlb44dcqBkHyNYvbjkQOk6GwGBqijYo5JwjXZPsxDP9e6j_sgoHjEB-5wNYIPF2zoKUP5PVChYIxvCqa_Xbka-YclpNx57ycIBM8Neeb3sjXYcFim213dU5jFG2tyHqfVPJbg1jjyNP0msrOUhLEbfIvE7fk5p2iJ9ZGZebaJEVX4nfl8fl2GI4f-WaH4muh5ZxBk6IGS1hgFSNZH6ar9AQKjugvAt92Tk-cVmVBF_Nrp3LJHqomANf7mTQqrKmun3rH2V9YcCKRX5zMupFEWepOvAG8kKjGcPvlSL-0pIGglbvEwYdujt5wUVuU79kKC9DjrXnWYmUNmhgN0GtBivAEAwMMHW7ptF-NSDidAKLvsP40JdVFgys7kRNdBlW4FnVfvuH5EURTJFjx7ut18Fygk785U6aFPqBrk9t_kZ84Uo1BbGOJ2B9Or0fLDyN2SMKMK2mNh_UKLaJvRV53uyQDU_z8ee4H0JBGRzQdkfZI3SlRiYOn7q7EVnx8woplFUHln9FxEiBYaVS8P2X1-qnRT3g4opGpl8m7ehi9ifKjm19QsEt7Sfm4OBzofuytjYLnQxjYUpTJIVbawdZqnVcAqqsuCetBUZe1dFsrcbZS0pyvI-TeiP_Rg_FOJnteZLA9ORSPZUxKQWAdbw00yUxfn9og2RkT1ldhoF-yV\" 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:dLRBRjiw4DqBo3yGtlGwS82qHJT14LIrvLOtZcFOST6TC9PecH4V0aarC9B-UqczB5bI0tH7QeR3EUVC3FL5QP0wO_J2kN0mrqGVqMY5AV0u1Zv2e51QxT3BXOFG9GepfGN3CY0Hka7RhJz3ds-jwUggSDWJgNJ0WM5Z_-6kfz_TzN-VhiU5bS9VZ9W1eGt3--lhSHdz4gK7mPkdFjGXnH6eFWQf85mhu-4l7mkBn35HMe8cWWSHQ7lyqR_tDe_k_Uh2-Ts4FIUKvOZtPb61PU8NmOD8pK7QpgXAAS8gb2IrzzehlPzbGb5M9iC8ppHk9HjZBdjPaPXYKBW2C7CVlT9WOl6unTVu3DLN8bGYqXpOhbXNsFG1cu33EbRsCx7Uro2rq403PRnQEEo7WC9HPDfy_d_pi3pBQOLDpV6dBAbBhDvNkQc3U1vCh5-KOK1bE4tOcVvvoV5em6BhFeEuLnALxIhnlpuyB3ntMTQe924EJDbb5AJLoflwz-x2a3RvC6ww_29frznYwIwJYkJy97PLCsFPVKkoBWFI441XXsrt5RKwRiJZ6TjXsH5H7zFUXYCgW334If5Tcu8pcHbMm6kHorq5P2T4Ogft4ClWd1ceZbF4VZcBQWKcCgxxbJ73K6Ug3t0AHsPW1GphWuWQ7X_hNf305OHvRvEeqoxzn9mahja9McBtSFHvVZTPtTtUzbT3qtgQKc62TP3NNJ_mYAZGqX90cbA2epSgq-I_WoF8axBbjagxecj8sY7fBz7VvAcYTkTuq_gsYB4v_mp7FXLBasdWFPQOXztXtY9YQnwpaeGiNrO4I6mcrFE_bFRGRAj7VTsXeM0MJkjvAUyTUEdUeRLvp1LnJc_ww-lLbNXfDESD6Z5ZJVBXxEHFOUrpcjB6Ao9F43q3jLk5Tn036JdL2zD_nAJx10oIaTCqzAV022K9iPxLP-lt-jBfb2AkmH9bF1uvnSVpc2VVYEWi1cKlJd0d_6kpcC_oEAEi5BouFgD4jTbgcR4a34QEmuNHHPBue97Ojn1lyggzGIjlEVENtoPe-h2S--jxRsQMxdBgBHPswVrS-MjlLWIYU9_7gR3L8_i6hRrlsuMxdg0V_ih6sguMtgPx_GbfktiQUMosqwctsKpGtFNp5DRUVBkScHoSB-RfDB-EVm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n\r\nentity \"Pelanggan\" as pelanggan {\r\n  * customer_id : UUID &lt;&gt;\r\n  --\r\n  * first_name : VARCHAR(50)\r\n  * last_name : VARCHAR(50)\r\n  * email : VARCHAR(100) &lt;&gt;\r\n  * phone : VARCHAR(20)\r\n  * loyalty_points : INT\r\n  * registration_date : TIMESTAMP\r\n}\r\n\r\nentity \"Film\" as film {\r\n  * movie_id : UUID &lt;&gt;\r\n  --\r\n  * title : VARCHAR(200)\r\n  * description : TEXT\r\n  * duration_minutes : INT\r\n  * genre : VARCHAR(50)\r\n  * release_date : DATE\r\n  * rating : VARCHAR(10)\r\n}\r\n\r\nentity \"Bioskop\" as bioskop {\r\n  * theater_id : UUID &lt;&gt;\r\n  --\r\n  * theater_name : VARCHAR(100)\r\n  * total_seats : INT\r\n  * seat_layout : JSON\r\n}\r\n\r\nentity \"Pertunjukan\" as pertunjukan {\r\n  * show_id : UUID &lt;&gt;\r\n  --\r\n  * movie_id : UUID &lt;&gt;\r\n  * theater_id : UUID &lt;&gt;\r\n  * show_time : TIMESTAMP\r\n  * end_time : TIMESTAMP\r\n  * language : VARCHAR(50)\r\n  * subtitle : BOOLEAN\r\n  * price_regular : DECIMAL(10,2)\r\n  * price_vip : DECIMAL(10,2)\r\n}\r\n\r\nentity \"Kursi\" as kursi {\r\n  * seat_id : UUID &lt;&gt;\r\n  --\r\n  * theater_id : UUID &lt;&gt;\r\n  * row_label : CHAR(2)\r\n  * seat_number : INT\r\n  * seat_type : VARCHAR(20)\r\n  * is_accessible : BOOLEAN\r\n}\r\n\r\nentity \"Pemesanan\" as pemesanan {\r\n  * booking_id : UUID &lt;&gt;\r\n  --\r\n  * customer_id : UUID &lt;&gt;\r\n  * show_id : UUID &lt;&gt;\r\n  * booking_time : TIMESTAMP\r\n  * total_amount : DECIMAL(10,2)\r\n  * status : VARCHAR(20)\r\n  * payment_method : VARCHAR(30)\r\n  * transaction_id : VARCHAR(100)\r\n}\r\n\r\nentity \"PemesananKursi\" as pemesanan_kursi {\r\n  * booking_id : UUID &lt;&lt;FK,PK&gt;&gt;\r\n  * seat_id : UUID &lt;&lt;FK,PK&gt;&gt;\r\n  --\r\n  * ticket_price : DECIMAL(10,2)\r\n  * discount_applied : DECIMAL(10,2)\r\n}\r\n\r\nentity \"Pembayaran\" as pembayaran {\r\n  * payment_id : UUID &lt;&gt;\r\n  --\r\n  * booking_id : UUID &lt;&gt;\r\n  * amount : DECIMAL(10,2)\r\n  * payment_date : TIMESTAMP\r\n  * payment_status : VARCHAR(20)\r\n  * payment_gateway : VARCHAR(30)\r\n  * gateway_reference : VARCHAR(200)\r\n}\r\n\r\nentity \"Ulasan\" as ulasan {\r\n  * review_id : UUID &lt;&gt;\r\n  --\r\n  * customer_id : UUID &lt;&gt;\r\n  * movie_id : UUID &lt;&gt;\r\n  * rating : INT\r\n  * comment : TEXT\r\n  * review_date : TIMESTAMP\r\n}\r\n\r\n' Relasi\npelanggan ||--o{ pemesanan : \"melakukan\"\nfilm ||--o{ pertunjukan : \"dijadwalkan sebagai\"\nbioskop ||--o{ pertunjukan : \"menjamak\"\npertunjukan ||--o{ pemesanan : \"memiliki\"\npemesanan ||--|{ pemesanan_kursi : \"mengandung\"\nkursi ||--o{ pemesanan_kursi : \"ditugaskan ke\"\npemesanan ||--|| pembayaran : \"memiliki\"\npelanggan ||--o{ ulasan : \"menulis\"\nfilm ||--o{ ulasan : \"menerima\"\n\nnote right of pemesanan : Status: PENDING, CONFIRMED, CANCELLED, EXPIRED\nnote left of kursi : seat_type: REGULAR, VIP, COUPLES\nnote right of pembayaran : payment_status: PENDING, SUCCESS, FAILED, REFUNDED\n\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:dLRBRjiw4DqBo3yGtlGwS82qHJT14LIrvLOtZcFOST6TC9PecH4V0aarC9B-UqczB5bI0tH7QeR3EUVC3FL5QP0wO_J2kN0mrqGVqMY5AV0u1Zv2e51QxT3BXOFG9GepfGN3CY0Hka7RhJz3ds-jwUggSDWJgNJ0WM5Z_-6kfz_TzN-VhiU5bS9VZ9W1eGt3--lhSHdz4gK7mPkdFjGXnH6eFWQf85mhu-4l7mkBn35HMe8cWWSHQ7lyqR_tDe_k_Uh2-Ts4FIUKvOZtPb61PU8NmOD8pK7QpgXAAS8gb2IrzzehlPzbGb5M9iC8ppHk9HjZBdjPaPXYKBW2C7CVlT9WOl6unTVu3DLN8bGYqXpOhbXNsFG1cu33EbRsCx7Uro2rq403PRnQEEo7WC9HPDfy_d_pi3pBQOLDpV6dBAbBhDvNkQc3U1vCh5-KOK1bE4tOcVvvoV5em6BhFeEuLnALxIhnlpuyB3ntMTQe924EJDbb5AJLoflwz-x2a3RvC6ww_29frznYwIwJYkJy97PLCsFPVKkoBWFI441XXsrt5RKwRiJZ6TjXsH5H7zFUXYCgW334If5Tcu8pcHbMm6kHorq5P2T4Ogft4ClWd1ceZbF4VZcBQWKcCgxxbJ73K6Ug3t0AHsPW1GphWuWQ7X_hNf305OHvRvEeqoxzn9mahja9McBtSFHvVZTPtTtUzbT3qtgQKc62TP3NNJ_mYAZGqX90cbA2epSgq-I_WoF8axBbjagxecj8sY7fBz7VvAcYTkTuq_gsYB4v_mp7FXLBasdWFPQOXztXtY9YQnwpaeGiNrO4I6mcrFE_bFRGRAj7VTsXeM0MJkjvAUyTUEdUeRLvp1LnJc_ww-lLbNXfDESD6Z5ZJVBXxEHFOUrpcjB6Ao9F43q3jLk5Tn036JdL2zD_nAJx10oIaTCqzAV022K9iPxLP-lt-jBfb2AkmH9bF1uvnSVpc2VVYEWi1cKlJd0d_6kpcC_oEAEi5BouFgD4jTbgcR4a34QEmuNHHPBue97Ojn1lyggzGIjlEVENtoPe-h2S--jxRsQMxdBgBHPswVrS-MjlLWIYU9_7gR3L8_i6hRrlsuMxdg0V_ih6sguMtgPx_GbfktiQUMosqwctsKpGtFNp5DRUVBkScHoSB-RfDB-EVm00\" \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:dLR1Rk8m4BqZyGyMbrqgaDgkzeAggYc4RdOXe01LRv593B6Qs97jj49b_trjnma99AsqDpjlF9utRsQS1ouW4raITplT3Y82YmFeZJCkQ89O3q0E0hC17zqE05VbtiSX687Dnfc0kti53OUvmGupBdm24oJnPyiR_xAyxp-l-paQmqz0b40SLu2Rw-k-yNu5qeYIwgdRqYKzm5WS_9HY8hYqSDnrZZ2qnrmmA30bVWY5EhvsvlPgRSsNtSxVAkavVSD8CqxKgg2hDwrSvT6u7bCHL8Xum72gRbQNsYycf30puIIOP0BLmjqZmXhpmb2C84S5XOcrjWqWVP5zBMFzCrxh2CbJkPOYNnVSpBQTdS7FvBefIGegOEnpQLNZeJxuCJpGJCZFlrSBzoocLKJVTK1SBeferBerb6OPsYaOTm8dPvhhCYDX2n93ii_Wlb44dcqBkHyNYvbjkQOk6GwGBqijYo5JwjXZPsxDP9e6j_sgoHjEB-5wNYIPF2zoKUP5PVChYIxvCqa_Xbka-YclpNx57ycIBM8Neeb3sjXYcFim213dU5jFG2tyHqfVPJbg1jjyNP0msrOUhLEbfIvE7fk5p2iJ9ZGZebaJEVX4nfl8fl2GI4f-WaH4muh5ZxBk6IGS1hgFSNZH6ar9AQKjugvAt92Tk-cVmVBF_Nrp3LJHqomANf7mTQqrKmun3rH2V9YcCKRX5zMupFEWepOvAG8kKjGcPvlSL-0pIGglbvEwYdujt5wUVuU79kKC9DjrXnWYmUNmhgN0GtBivAEAwMMHW7ptF-NSDidAKLvsP40JdVFgys7kRNdBlW4FnVfvuH5EURTJFjx7ut18Fygk785U6aFPqBrk9t_kZ84Uo1BbGOJ2B9Or0fLDyN2SMKMK2mNh_UKLaJvRV53uyQDU_z8ee4H0JBGRzQdkfZI3SlRiYOn7q7EVnx8woplFUHln9FxEiBYaVS8P2X1-qnRT3g4opGpl8m7ehi9ifKjm19QsEt7Sfm4OBzofuytjYLnQxjYUpTJIVbawdZqnVcAqqsuCetBUZe1dFsrcbZS0pyvI-TeiP_Rg_FOJnteZLA9ORSPZUxKQWAdbw00yUxfn9og2RkT1ldhoF-yV\" 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><a href=\"https:\/\/www.vpascode.com\/#plantuml:dLR1Rk8m4BqZyGyMbrqgaDgkzeAggYc4RdOXe01LRv593B6Qs97jj49b_trjnma99AsqDpjlF9utRsQS1ouW4raITplT3Y82YmFeZJCkQ89O3q0E0hC17zqE05VbtiSX687Dnfc0kti53OUvmGupBdm24oJnPyiR_xAyxp-l-paQmqz0b40SLu2Rw-k-yNu5qeYIwgdRqYKzm5WS_9HY8hYqSDnrZZ2qnrmmA30bVWY5EhvsvlPgRSsNtSxVAkavVSD8CqxKgg2hDwrSvT6u7bCHL8Xum72gRbQNsYycf30puIIOP0BLmjqZmXhpmb2C84S5XOcrjWqWVP5zBMFzCrxh2CbJkPOYNnVSpBQTdS7FvBefIGegOEnpQLNZeJxuCJpGJCZFlrSBzoocLKJVTK1SBeferBerb6OPsYaOTm8dPvhhCYDX2n93ii_Wlb44dcqBkHyNYvbjkQOk6GwGBqijYo5JwjXZPsxDP9e6j_sgoHjEB-5wNYIPF2zoKUP5PVChYIxvCqa_Xbka-YclpNx57ycIBM8Neeb3sjXYcFim213dU5jFG2tyHqfVPJbg1jjyNP0msrOUhLEbfIvE7fk5p2iJ9ZGZebaJEVX4nfl8fl2GI4f-WaH4muh5ZxBk6IGS1hgFSNZH6ar9AQKjugvAt92Tk-cVmVBF_Nrp3LJHqomANf7mTQqrKmun3rH2V9YcCKRX5zMupFEWepOvAG8kKjGcPvlSL-0pIGglbvEwYdujt5wUVuU79kKC9DjrXnWYmUNmhgN0GtBivAEAwMMHW7ptF-NSDidAKLvsP40JdVFgys7kRNdBlW4FnVfvuH5EURTJFjx7ut18Fygk785U6aFPqBrk9t_kZ84Uo1BbGOJ2B9Or0fLDyN2SMKMK2mNh_UKLaJvRV53uyQDU_z8ee4H0JBGRzQdkfZI3SlRiYOn7q7EVnx8woplFUHln9FxEiBYaVS8P2X1-qnRT3g4opGpl8m7ehi9ifKjm19QsEt7Sfm4OBzofuytjYLnQxjYUpTJIVbawdZqnVcAqqsuCetBUZe1dFsrcbZS0pyvI-TeiP_Rg_FOJnteZLA9ORSPZUxKQWAdbw00yUxfn9og2RkT1ldhoF-yV\">Edit PlantUML di VPasCode<\/a><\/p>\n<h2>Mermaid.js: Diagram yang Ramah Markdown<\/h2>\n<p>Untuk tim yang banyak mendokumentasikan dalam Markdown (seperti di README GitHub atau Confluence), Mermaid.js adalah pilihan yang ideal. VPasCode merender Mermaid secara native di browser, mendukung flowchart, diagram kelas, diagram urutan, diagram Gantt, peta pikiran, dan banyak lagi.<\/p>\n<h3>Flowchart Keputusan Kesehatan<\/h3>\n<p>Flowchart ini membimbing pasien melalui proses pengambilan keputusan kesehatan, mulai dari pengenalan gejala hingga pengobatan.<\/p>\n<p><img alt=\"Kode bagan alur Mermaid.js untuk alur 'periksa dokter', sedang diedit dengan editor teks-ke-diagram langsung VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-mermaid-flowchart-see-doctor.jpg\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdkd9ugjAUh+9NfIfzAmZvsAUFFP+wBd3F0nDRtGfapLSkLRije\/fRomDkjpyv3+932l+pz+xEjYNDPJ1A90UkRZTwrc4oJWgDOSKHHXLBqISIt4JhCbPZO8yvmQXhgCpIKjRHVOzy8Ted9J65Z24\/aG+wIAvauQYI9mi8xnr9UoPTkBTl87Fc3yAme3ZC3kiEWDPXoVFda6FchcqVj5g4VElI5Bwq\/oJ4IAlASu6OpKWyoU5oNSjSQCyvsaBHpa2wsKMcx02W4yYrcjBIgx6+JFXlM+FLZ+TTcDRwQOvskJCFhDUpkKFoMUyhQNvIAHlk3dd8nFiF3w1JtexeCIbUO70J4+11f6lqpysLWVUb3SIfW2\/H1jsf3E3NBd6g0I0TCqE3z5q6fOb9DnmHu8Yo\/y79rd2RvO\/4DwW\/pJQ=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplkU1uwjAQhfdI3GEugHqDVlBDfggIQTaVlcWEuMQkcSrHLqqgd+\/ECSGi3lnz5s33Zj7L+nLMURuI2XQC9OZ8jw1CLDMs4CByNIAGLSyssTkcUKOCjchkk8Bs9gqL6\/wLC8whUBIYaqvRvP1OJ53ZotXcPvAG79y3qVUnCRH+oCKTXty574SmUiEg8Fgy7nUcN2A8xOyCZUGNIaqzhFhUFlhdGKGT+zjmkJbcx0zq1u0h7U2XTrHiy28sLTby2WHl6t6VSTypupENHGxG6ZhM7TiYNwTz+V6oIyWiDOpUpxRHJWNRnyDgO9EQfSyaYVrgpoV8I5TQskLwCansJa0g7HDvet991zworJH\/561dObp64owl0pWqFGXxgI4G6A3BVLaUOQG90K1Ve+yIlmUN7Mn77hiNE2z5unUs3Z2GvbWybYf5B4OyqrE=\" \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 Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">flowchart TD\r\n    A[Rasa Tidak Sehat atau Butuh Saran Medis] --&gt; B{Apakah Ini Darurat?}\r\n\r\n    B --&gt;|Ya| C[Hubungi Layanan Darurat atau Pergi ke IGD]\r\n    B --&gt;|Tidak| D[Jadwalkan Janji Temu Dokter]\r\n\r\n    D --&gt; E[Hadir ke Janji Temu]\r\n    E --&gt; F[Evaluasi Dokter]\r\n\r\n    F --&gt; G{Diagnosis Sudah Dibuat?}\r\n\r\n    G --&gt;|Ya| H[Rencana Pengobatan]\r\n    G --&gt;|Tidak| I[Pesan Tes]\r\n\r\n    I --&gt; J[Menerima Hasil Tes]\r\n    J --&gt; F\r\n\r\n    H --&gt; K[Ikuti Pengobatan]\r\n    K --&gt; L{Gejala Membaik?}\r\n\r\n    L --&gt;|Ya| M[Pemulihan \/ Tindak Lanjut Rutin]\r\n    L --&gt;|Tidak| N[Kembali ke Dokter]\r\n    N --&gt; F\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplkU1uwjAQhfdI3GEugHqDVlBDfggIQTaVlcWEuMQkcSrHLqqgd+\/ECSGi3lnz5s33Zj7L+nLMURuI2XQC9OZ8jw1CLDMs4CByNIAGLSyssTkcUKOCjchkk8Bs9gqL6\/wLC8whUBIYaqvRvP1OJ53ZotXcPvAG79y3qVUnCRH+oCKTXty574SmUiEg8Fgy7nUcN2A8xOyCZUGNIaqzhFhUFlhdGKGT+zjmkJbcx0zq1u0h7U2XTrHiy28sLTby2WHl6t6VSTypupENHGxG6ZhM7TiYNwTz+V6oIyWiDOpUpxRHJWNRnyDgO9EQfSyaYVrgpoV8I5TQskLwCansJa0g7HDvet991zworJH\/561dObp64owl0pWqFGXxgI4G6A3BVLaUOQG90K1Ve+yIlmUN7Mn77hiNE2z5unUs3Z2GvbWybYf5B4OyqrE=\" \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 Mermaid 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\/#mermaid:eNpdkd9ugjAUh+9NfIfzAmZvsAUFFP+wBd3F0nDRtGfapLSkLRije\/fRomDkjpyv3+932l+pz+xEjYNDPJ1A90UkRZTwrc4oJWgDOSKHHXLBqISIt4JhCbPZO8yvmQXhgCpIKjRHVOzy8Ted9J65Z24\/aG+wIAvauQYI9mi8xnr9UoPTkBTl87Fc3yAme3ZC3kiEWDPXoVFda6FchcqVj5g4VElI5Bwq\/oJ4IAlASu6OpKWyoU5oNSjSQCyvsaBHpa2wsKMcx02W4yYrcjBIgx6+JFXlM+FLZ+TTcDRwQOvskJCFhDUpkKFoMUyhQNvIAHlk3dd8nFiF3w1JtexeCIbUO70J4+11f6lqpysLWVUb3SIfW2\/H1jsf3E3NBd6g0I0TCqE3z5q6fOb9DnmHu8Yo\/y79rd2RvO\/4DwW\/pJQ=\" 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 Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/www.vpascode.com\/#mermaid:eNpdkd9ugjAUh+9NfIfzAmZvsAUFFP+wBd3F0nDRtGfapLSkLRije\/fRomDkjpyv3+932l+pz+xEjYNDPJ1A90UkRZTwrc4oJWgDOSKHHXLBqISIt4JhCbPZO8yvmQXhgCpIKjRHVOzy8Ted9J65Z24\/aG+wIAvauQYI9mi8xnr9UoPTkBTl87Fc3yAme3ZC3kiEWDPXoVFda6FchcqVj5g4VElI5Bwq\/oJ4IAlASu6OpKWyoU5oNSjSQCyvsaBHpa2wsKMcx02W4yYrcjBIgx6+JFXlM+FLZ+TTcDRwQOvskJCFhDUpkKFoMUyhQNvIAHlk3dd8nFiF3w1JtexeCIbUO70J4+11f6lqpysLWVUb3SIfW2\/H1jsf3E3NBd6g0I0TCqE3z5q6fOb9DnmHu8Yo\/y79rd2RvO\/4DwW\/pJQ=\">Edit Mermaid di VPasCode<\/a><\/p>\n<h2>Graphviz: Topologi Jaringan dan Struktur Data<\/h2>\n<p>Graphviz menggunakan bahasa DOT untuk membuat grafik kompleks. Alat ini sangat berguna untuk memvisualisasikan topologi jaringan, pohon ketergantungan, dan struktur data.<\/p>\n<h3>Topologi Jaringan Pusat Data<\/h3>\n<p>Grafik ini menggambarkan jaringan pusat data yang disederhanakan, menampilkan host yang terhubung melalui switch yang saling terhubung dengan tautan trunk dan koneksi failover.<\/p>\n<p><img alt=\"Kode Graphviz untuk grafik contoh, sedang diedit dengan editor teks-ke-diagram langsung VPasCode dari Visual Paradigm\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-graphviz-graph.jpg\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Graphviz<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqNU8tOwzAQvCPxD6twTRFtEx4HH1oQAgl6aRGHqkKOvUmsGjuyXUpB\/DtOkwgDLcIHS9mZWY0nu4WhVQkPiguDzCGfVlQpoYqZQYT3wwPwJ9fKKfqMJLpB+YJOMBqPjKAytlTZnkUj8qihSpqhJNEVdbR3icqhgXu0JUzQrbVZwkxXWupiA2PKlplWCLcqN9Q6s2JuZTBsIzUjURZ9ebDiDUk\/aQrNrTRHmP\/LYAy2pBUSJgyT6L\/cRiLJhZTIY2DeliHRUXKWpqcXnlwDXTHv52leF9eCu5KcHJ\/X+CvyrSPvHReNHeSFt9PJLhI6zM69rELVKAfH6SK0P10Lx8qRrEoKMG\/Dmz4+jX4YYBlPsR8tQtUYnReFqvGfqomPqg\/t6VQ32rqnk2+cwW7OIOQMd3OGISfZzUmivQn0euHTOhnMzEot\/UjCnVDL+iegKEpH0sXODttn7kUGvxJsgeE+IAnT67rAvJkeTm0ZTk+beNztAVxTIfWL34LbeheYVspvWZ3AxyeFTAk4\" 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 Graphviz 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\">Graphviz<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqNUttKxDAQfRf8h6G+dmUvrZeHPOwisgqKsCs+LItMk2kbGpOSpF7x381eilV2xTwEMnPO5MzhFBbrEu61kJa4JzGrUWupi7klgo\/DAwgnN9prfCIWTUk9k5cc47GVqGKH2vUcWZlHG6jCjBSL5qY2yhQSrtGGYajhhlwJd41DDxfoEa50btF521S+sTBBXmVGU3eKMpxFWfQtwcl3YoNkU1hf2giCxb\/kxeBKrIlxabmi8PJvilgulSIRAw9qLYuOktM0PTkP4FWjLeaDPM1XxRcpfMn6x2er\/iuJtaCwAi3XakgUQU3LOk9wlJ0FVk16Qxwep8tv7bMX6Xk5VnWJAIutb7OHx\/Gv33kmUhpEyw5pQsHAH6TJX6Tb4NIAtqclTY3zj\/0uZLgbMuxARrshow4k2Q1Joj2r93rdpVoSzLHxITVz2+gqBGhlPsmi9Cxd7hqxXnFfY\/jbum19tKeedFxrR8BiExiBruwGZmt03AY\/5NqTrUKUKyfhEqUyz2TD8p9fbRUItg==\" \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 Graphviz in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-graphviz\"><code class=\"language-graphviz\" data-language=\"graphviz\" class=\"language-graphviz\">graph UndirectedSpanningTree {\r\n    fontname=\"Helvetica,Arial,sans-serif\"\r\n    label=\"Topologi Jaringan Mesh Pusat Data Infrastruktur Backbone\"\r\n    labelloc=\"b\"\r\n    fontsize=14\r\n    \n    node [fontname=\"Helvetica,Arial,sans-serif\", shape=circle, style=filled, color=\"#475569\", fillcolor=\"#f1f5f9\", width=0.8, fixedsize=true]\n    edge [color=\"#94a3b8\", penwidth=2.5]\n    \n    SwitchAlpha  [label=\"SW_A\", fillcolor=\"#cbd5e1\"]\n    SwitchBeta   [label=\"SW_B\", fillcolor=\"#cbd5e1\"]\n    Node1        [label=\"Host_01\"]\n    Node2        [label=\"Host_02\"]\n    Node3        [label=\"Host_03\"]\n    Node4        [label=\"Host_04\"]\n    \n    SwitchAlpha -- SwitchBeta [label=\" Tautan Trunking\", weight=5]\n    SwitchAlpha -- Node1\n    SwitchAlpha -- Node2\n    SwitchBeta -- Node3\n    SwitchBeta -- Node4\n    Node1 -- Node2 [style=dashed, color=\"#cbd5e1\", label=\" Interkoneksi Failover\"]\n}\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqNUttKxDAQfRf8h6G+dmUvrZeHPOwisgqKsCs+LItMk2kbGpOSpF7x381eilV2xTwEMnPO5MzhFBbrEu61kJa4JzGrUWupi7klgo\/DAwgnN9prfCIWTUk9k5cc47GVqGKH2vUcWZlHG6jCjBSL5qY2yhQSrtGGYajhhlwJd41DDxfoEa50btF521S+sTBBXmVGU3eKMpxFWfQtwcl3YoNkU1hf2giCxb\/kxeBKrIlxabmi8PJvilgulSIRAw9qLYuOktM0PTkP4FWjLeaDPM1XxRcpfMn6x2er\/iuJtaCwAi3XakgUQU3LOk9wlJ0FVk16Qxwep8tv7bMX6Xk5VnWJAIutb7OHx\/Gv33kmUhpEyw5pQsHAH6TJX6Tb4NIAtqclTY3zj\/0uZLgbMuxARrshow4k2Q1Joj2r93rdpVoSzLHxITVz2+gqBGhlPsmi9Cxd7hqxXnFfY\/jbum19tKeedFxrR8BiExiBruwGZmt03AY\/5NqTrUKUKyfhEqUyz2TD8p9fbRUItg==\" \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 Graphviz 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\/#graphviz:eNqNU8tOwzAQvCPxD6twTRFtEx4HH1oQAgl6aRGHqkKOvUmsGjuyXUpB\/DtOkwgDLcIHS9mZWY0nu4WhVQkPiguDzCGfVlQpoYqZQYT3wwPwJ9fKKfqMJLpB+YJOMBqPjKAytlTZnkUj8qihSpqhJNEVdbR3icqhgXu0JUzQrbVZwkxXWupiA2PKlplWCLcqN9Q6s2JuZTBsIzUjURZ9ebDiDUk\/aQrNrTRHmP\/LYAy2pBUSJgyT6L\/cRiLJhZTIY2DeliHRUXKWpqcXnlwDXTHv52leF9eCu5KcHJ\/X+CvyrSPvHReNHeSFt9PJLhI6zM69rELVKAfH6SK0P10Lx8qRrEoKMG\/Dmz4+jX4YYBlPsR8tQtUYnReFqvGfqomPqg\/t6VQ32rqnk2+cwW7OIOQMd3OGISfZzUmivQn0euHTOhnMzEot\/UjCnVDL+iegKEpH0sXODttn7kUGvxJsgeE+IAnT67rAvJkeTm0ZTk+beNztAVxTIfWL34LbeheYVspvWZ3AxyeFTAk4\" 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 Graphviz di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><a href=\"https:\/\/www.vpascode.com\/#graphviz:eNqNU8tOwzAQvCPxD6twTRFtEx4HH1oQAgl6aRGHqkKOvUmsGjuyXUpB\/DtOkwgDLcIHS9mZWY0nu4WhVQkPiguDzCGfVlQpoYqZQYT3wwPwJ9fKKfqMJLpB+YJOMBqPjKAytlTZnkUj8qihSpqhJNEVdbR3icqhgXu0JUzQrbVZwkxXWupiA2PKlplWCLcqN9Q6s2JuZTBsIzUjURZ9ebDiDUk\/aQrNrTRHmP\/LYAy2pBUSJgyT6L\/cRiLJhZTIY2DeliHRUXKWpqcXnlwDXTHv52leF9eCu5KcHJ\/X+CvyrSPvHReNHeSFt9PJLhI6zM69rELVKAfH6SK0P10Lx8qRrEoKMG\/Dmz4+jX4YYBlPsR8tQtUYnReFqvGfqomPqg\/t6VQ32rqnk2+cwW7OIOQMd3OGISfZzUmivQn0euHTOhnMzEot\/UjCnVDL+iegKEpH0sXODttn7kUGvxJsgeE+IAnT67rAvJkeTm0ZTk+beNztAVxTIfWL34LbeheYVspvWZ3AxyeFTAk4\">Edit Graphviz di VPasCode<\/a><\/p>\n<h2>Otomatisasi Berbasis AI: Mempercepat Alur Kerja Anda<\/h2>\n<p>VPasCode bukan sekadar editor teks; ini adalah asisten yang didukung AI. Meskipun paket gratis menyediakan dukungan multi-mesin esensial, pratinjau real-time, dan ekspor fleksibel (PNG\/SVG), fitur berbayar membuka kemampuan AI yang revolusioner.<\/p>\n<h3>Fitur AI Utama:<\/h3>\n<ul>\n<li>\n<p><strong>Bahasa Alami ke Diagram:<\/strong> Terjemahkan deskripsi arsitektur bahasa Inggris sederhana langsung menjadi skrip kode yang bersih dan siap dirender.<\/p>\n<\/li>\n<li>\n<p><strong>Perbaikan Kesalahan Kode Berbasis AI:<\/strong>Terhalang oleh kesalahan sintaks? AI bawaan menganalisis kode PlantUML, Mermaid, atau Graphviz Anda dan memperbaiki kesalahan secara otomatis.<\/p>\n<\/li>\n<\/ul>\n<p><img alt=\"Ilustrasi yang menunjukkan cara kerja fungsi perbaikan kesalahan kode AI\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/how-does-vpascode-ai-code-error-fix-works2.jpg\"\/><\/p>\n<ul>\n<li>\n<p><strong>Terjemahan Diagram Berbasis AI:<\/strong> Terjemahkan teks dan label dalam diagram Anda ke berbagai bahasa dengan satu kali klik, sambil mempertahankan struktur sintaks tetap utuh.<\/p>\n<\/li>\n<\/ul>\n<p><img alt=\"Ini adalah ilustrasi yang menunjukkan cara kerja fitur terjemahan di VPasCode\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/vpascode-translating-platuml-from-english-to-chinese.jpg\"\/><\/p>\n<h2>Berbagi dan Kolaborasi<\/h2>\n<p>VPasCode memudahkan berbagi tanpa hambatan. Anda dapat membuat URL web unik dan permanen untuk membagikan diagram langsung kepada rekan tim atau klien untuk tinjauan kolaboratif. Untuk dokumentasi formal, Anda dapat mengunduh hasil kerja Anda sebagai gambar PNG berkualitas tinggi atau grafik vektor SVG yang dapat diskalakan.<\/p>\n<h2>Mengakses Fitur Premium<\/h2>\n<p>Jika Anda adalah pengguna Visual Paradigm yang sudah ada, Anda mungkin sudah memiliki akses ke fitur AI premium berikut:<\/p>\n<ul>\n<li>\n<p><strong>Edisi Combo Online Visual Paradigm<\/strong> (atau versi yang lebih tinggi).<\/p>\n<\/li>\n<li>\n<p><strong>Edisi Profesional Desktop Visual Paradigm<\/strong> (atau versi yang lebih tinggi) dengan kontrak pemeliharaan aktif.<\/p>\n<\/li>\n<\/ul>\n<blockquote>\n<p><strong>Catatan untuk Pengguna Desktop:<\/strong> Pengguna Visual Paradigm Professional Edition (atau versi yang lebih tinggi) dengan pemeliharaan aktif secara otomatis diberikan akses penuh ke aplikasi web dari VP Online Combo Edition\u2014yang berarti Anda mendapatkan akses instan ke alat AI premium VPasCode tanpa biaya tambahan!<\/p>\n<\/blockquote>\n<h2>Tips dan Trik untuk Tim Agile<\/h2>\n<ol>\n<li>\n<p><strong>Kontrol Versi Diagram Anda:<\/strong> Karena VPasCode menghasilkan teks, simpan file Anda di<code data-backticks=\"1\">.puml<\/code>,\u00a0<code data-backticks=\"1\">.mmd<\/code>, atau<code data-backticks=\"1\">.dot<\/code> dalam repositori Git Anda. Ini memungkinkan Anda melacak perubahan, membatalkan kesalahan, dan meninjau evolusi arsitektur dari waktu ke waktu.<\/p>\n<\/li>\n<li>\n<p><strong>Gunakan Tautan Langsung untuk Standup:<\/strong>Alih-alih mengambil tangkapan layar diagram untuk Slack atau Teams, bagikan URL VPasCode langsung. Pemangku kepentingan dapat melihat versi terbaru tanpa perlu mengunduh file.<\/p>\n<\/li>\n<li>\n<p><strong>Manfaatkan AI untuk Kode Kerangka:<\/strong>Gunakan fitur Natural Language to Diagram untuk dengan cepat menghasilkan kode kerangka untuk diagram kompleks, lalu sempurnakan secara manual. Hal ini menghemat waktu untuk menghafal sintaks.<\/p>\n<\/li>\n<li>\n<p><strong>Standarisasi Templat:<\/strong>Buat potongan kode yang dapat digunakan kembali untuk jenis diagram umum (misalnya, templat penyebaran AWS, diagram komponen mikro layanan) dan bagikan di seluruh tim untuk memastikan konsistensi.<\/p>\n<\/li>\n<li>\n<p><strong>Integrasikan dengan CI\/CD:<\/strong>Karena diagram adalah kode, Anda dapat mengintegrasikan ekspor VPasCode ke dalam pipeline CI\/CD Anda untuk secara otomatis menghasilkan dan mempublikasikan diagram arsitektur yang diperbarui dengan setiap rilis.<\/p>\n<\/li>\n<\/ol>\n<h2>Kesimpulan<\/h2>\n<p>VPasCode merupakan lompatan signifikan bagi tim Agile yang berupaya menjembatani kesenjangan antara kode dan dokumentasi. Dengan menyatukan PlantUML, Mermaid.js, dan Graphviz ke dalam satu platform yang ditingkatkan oleh AI, alat ini menghilangkan hambatan yang sering muncul pada alat diagram tradisional. Bagi pengembang dan arsitek yang menghargai kecepatan, presisi, dan kontrol versi, VPasCode menawarkan cara yang mulus untuk menjaga dokumentasi arsitektur tetap hidup, akurat, dan terintegrasi dalam alur kerja pengembangan. Baik Anda memodelkan perjalanan pengguna yang sederhana maupun sistem terdistribusi yang kompleks, VPasCode memastikan bahwa diagram Anda berkembang secepat kode Anda.<\/p>\n<hr\/>\n<h2>Referensi<\/h2>\n<ol>\n<li><strong><a href=\"https:\/\/www.visual-paradigm.com\/guide\/comprehensive-guide-to-vpascode-by-visual-paradigm\/\">Panduan Komprehensif VPasCode oleh Visual Paradigm<\/a><\/strong>: Gambaran mendalam tentang arsitektur inti VPasCode, kesatuan multi-mesin, dan fitur otomatisasi asli AI.<\/li>\n<li><strong><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/introducing-vpascode-the-ultimate-unified-text-to-diagram-platform\/\">Memperkenalkan VPasCode: Platform Teks-ke-Diagram Terpadu Terbaik<\/a><\/strong>: Pengumuman rilis resmi yang merinci peluncuran VPasCode dan dukungannya terhadap PlantUML, Mermaid.js, dan Graphviz.<\/li>\n<li><strong><a href=\"https:\/\/www.visual-paradigm.com\/guide\/clarity-by-design-streamlining-infrastructure-documentation-with-vpascode-and-graphviz\/\">Kejelasan Berbasis Desain: Merampingkan Dokumentasi Infrastruktur dengan VPasCode dan Graphviz<\/a><\/strong>: Panduan yang berfokus pada penggunaan Graphviz dalam VPasCode untuk membuat diagram infrastruktur dan topologi jaringan yang jelas.<\/li>\n<li><strong><a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\">Fitur VPasCode<\/a><\/strong>: Ringkasan fitur utama termasuk pratinjau waktu nyata, berbagi mudah, dan ekspor fleksibel.<\/li>\n<li><strong><a href=\"https:\/\/www.visual-paradigm.com\/guide\/mastering-vpascode-the-ultimate-guide-to-ai-powered-diagram-as-code-with-multi-engine-support\/\">Menguasai VPasCode: Panduan Ultimate untuk Diagram-sebagai-Kode Berbasis AI dengan Dukungan Multi-Mesin<\/a><\/strong>: Tutorial komprehensif tentang memanfaatkan fitur AI seperti perbaikan kesalahan dan terjemahan dalam VPasCode.<\/li>\n<li><strong><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/break-language-barriers-natively-with-vpascodes-new-ai-diagram-translation\/\">Tembus Hambatan Bahasa Secara Alami dengan Terjemahan Diagram AI Baru VPasCode<\/a><\/strong>: Artikel yang menjelaskan fitur terjemahan diagram AI dan bagaimana fitur ini melokalisasi label sambil mempertahankan sintaks.<\/li>\n<li><strong><a href=\"https:\/\/online.visual-paradigm.com\/\">Visual Paradigm Online<\/a><\/strong>: Portal utama untuk mengakses alat online Visual Paradigm, termasuk VPasCode.<\/li>\n<li><strong><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/never-get-stuck-on-syntax-again-introducing-ai-code-error-fixing-in-vpascode\/\">Jangan Lagi Terjebak pada Sintaks: Memperkenalkan Perbaikan Kesalahan Kode AI dalam VPasCode<\/a><\/strong>: Tinjauan mendalam tentang fungsi perbaikan kesalahan kode AI dan bagaimana hal itu membantu pengembang menyelesaikan masalah sintaks secara instan.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Pendahuluan Dalam dunia pengembangan Agile yang serba cepat, dokumentasi sering kali menjadi hambatan. Alat diagram drag-and-drop tradisional memerlukan pergantian konteks yang konstan, mengganggu alur kerja pengembang dan menjadikan kontrol versi&hellip;<\/p>\n","protected":false},"author":3,"featured_media":790,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","inline_featured_image":false,"source_url":"","source_h1_title":"","fifu_image_url":"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[13,65],"tags":[],"asset-category":[],"class_list":["post-789","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-vpascode"],"source_url":"","source_h1_title":"","fifu_image_url":"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile - Go Minder Indonesian - Your Hub for AI and Software Trends<\/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.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile - Go Minder Indonesian - Your Hub for AI and Software Trends\" \/>\n<meta property=\"og:description\" content=\"Pendahuluan Dalam dunia pengembangan Agile yang serba cepat, dokumentasi sering kali menjadi hambatan. Alat diagram drag-and-drop tradisional memerlukan pergantian konteks yang konstan, mengganggu alur kerja pengembang dan menjadikan kontrol versi&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/\" \/>\n<meta property=\"og:site_name\" content=\"Go Minder Indonesian - Your Hub for AI and Software Trends\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-16T01:12:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-17T07:16:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png\" \/>\n\t<meta property=\"og:image:width\" content=\"977\" \/>\n\t<meta property=\"og:image:height\" content=\"543\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.go-minder.com\/id\/#\/schema\/person\/16da910cd6b226cc1dd44b77156cb29d\"},\"headline\":\"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile\",\"datePublished\":\"2026-06-16T01:12:15+00:00\",\"dateModified\":\"2026-06-17T07:16:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/\"},\"wordCount\":1579,\"publisher\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png\",\"articleSection\":[\"AI\",\"VPasCode\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/\",\"url\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/\",\"name\":\"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile - Go Minder Indonesian - Your Hub for AI and Software Trends\",\"isPartOf\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png\",\"datePublished\":\"2026-06-16T01:12:15+00:00\",\"dateModified\":\"2026-06-17T07:16:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage\",\"url\":\"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png\",\"contentUrl\":\"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png\",\"width\":977,\"height\":543},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.go-minder.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.go-minder.com\/id\/#website\",\"url\":\"https:\/\/www.go-minder.com\/id\/\",\"name\":\"Go Minder Indonesian - Your Hub for AI and Software Trends\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.go-minder.com\/id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.go-minder.com\/id\/#organization\",\"name\":\"Go Minder Indonesian - Your Hub for AI and Software Trends\",\"url\":\"https:\/\/www.go-minder.com\/id\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.go-minder.com\/id\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/01\/cropped-go-minder-favicon.png\",\"contentUrl\":\"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/01\/cropped-go-minder-favicon.png\",\"width\":512,\"height\":512,\"caption\":\"Go Minder Indonesian - Your Hub for AI and Software Trends\"},\"image\":{\"@id\":\"https:\/\/www.go-minder.com\/id\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.go-minder.com\/id\/#\/schema\/person\/16da910cd6b226cc1dd44b77156cb29d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.go-minder.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.go-minder.com\/id\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile - Go Minder Indonesian - Your Hub for AI and Software Trends","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.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/","og_locale":"id_ID","og_type":"article","og_title":"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile - Go Minder Indonesian - Your Hub for AI and Software Trends","og_description":"Pendahuluan Dalam dunia pengembangan Agile yang serba cepat, dokumentasi sering kali menjadi hambatan. Alat diagram drag-and-drop tradisional memerlukan pergantian konteks yang konstan, mengganggu alur kerja pengembang dan menjadikan kontrol versi&hellip;","og_url":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/","og_site_name":"Go Minder Indonesian - Your Hub for AI and Software Trends","article_published_time":"2026-06-16T01:12:15+00:00","article_modified_time":"2026-06-17T07:16:34+00:00","og_image":[{"url":"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png","type":"","width":"","height":""},{"width":977,"height":543,"url":"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.go-minder.com\/wp-content\/uploads\/2026\/06\/img_6a30a2ba2873e.png","twitter_misc":{"Ditulis oleh":false,"Estimasi waktu membaca":"9 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#article","isPartOf":{"@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/"},"author":{"name":"curtis","@id":"https:\/\/www.go-minder.com\/id\/#\/schema\/person\/16da910cd6b226cc1dd44b77156cb29d"},"headline":"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile","datePublished":"2026-06-16T01:12:15+00:00","dateModified":"2026-06-17T07:16:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/"},"wordCount":1579,"publisher":{"@id":"https:\/\/www.go-minder.com\/id\/#organization"},"image":{"@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png","articleSection":["AI","VPasCode"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/","url":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/","name":"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile - Go Minder Indonesian - Your Hub for AI and Software Trends","isPartOf":{"@id":"https:\/\/www.go-minder.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage"},"image":{"@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png","datePublished":"2026-06-16T01:12:15+00:00","dateModified":"2026-06-17T07:16:34+00:00","breadcrumb":{"@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#primaryimage","url":"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png","contentUrl":"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/06\/img_6a30a2ba2873e.png","width":977,"height":543},{"@type":"BreadcrumbList","@id":"https:\/\/www.go-minder.com\/id\/from-text-to-architecture-mastering-visual-paradigms-vpascode-for-agile-teams\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.go-minder.com\/id\/"},{"@type":"ListItem","position":2,"name":"Dari Teks ke Arsitektur: Menguasai VPascode Visual Paradigm untuk Tim Agile"}]},{"@type":"WebSite","@id":"https:\/\/www.go-minder.com\/id\/#website","url":"https:\/\/www.go-minder.com\/id\/","name":"Go Minder Indonesian - Your Hub for AI and Software Trends","description":"","publisher":{"@id":"https:\/\/www.go-minder.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.go-minder.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.go-minder.com\/id\/#organization","name":"Go Minder Indonesian - Your Hub for AI and Software Trends","url":"https:\/\/www.go-minder.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.go-minder.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/01\/cropped-go-minder-favicon.png","contentUrl":"https:\/\/www.go-minder.com\/id\/wp-content\/uploads\/sites\/12\/2026\/01\/cropped-go-minder-favicon.png","width":512,"height":512,"caption":"Go Minder Indonesian - Your Hub for AI and Software Trends"},"image":{"@id":"https:\/\/www.go-minder.com\/id\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.go-minder.com\/id\/#\/schema\/person\/16da910cd6b226cc1dd44b77156cb29d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.go-minder.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.go-minder.com\/id\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/posts\/789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/comments?post=789"}],"version-history":[{"count":0,"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/posts\/789\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/media\/790"}],"wp:attachment":[{"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/media?parent=789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/categories?post=789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/tags?post=789"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.go-minder.com\/id\/wp-json\/wp\/v2\/asset-category?post=789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}