{"id":509,"date":"2026-07-27T00:31:57","date_gmt":"2026-07-27T00:31:57","guid":{"rendered":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/"},"modified":"2026-07-27T00:31:57","modified_gmt":"2026-07-27T00:31:57","slug":"uml-modeling-for-modern-agile-teams-a-plantuml-guide","status":"publish","type":"post","link":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/","title":{"rendered":"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML"},"content":{"rendered":"<p>Tim Agile modern berkembang pesat berkat kecepatan, kolaborasi, dan komunikasi yang jelas. Pemodelan UML tradisional sering kali menghambat karena kurva belajarnya yang curam dan proses menggambar manual yang memakan waktu. Dengan memanfaatkan <strong>PlantUML<\/strong> dan alat berbasis AI, tim Agile dapat memvisualisasikan arsitektur, interaksi, dan keadaan secara real-time, sehingga tetap selaras dengan sprint dan pengembangan iteratif.<\/p>\n<p>Panduan ini mengulas konsep-konsep kunci, menyediakan contoh praktis PlantUML, serta menunjukkan cara mengintegrasikan model visual ini ke dalam alur kerja Agile.<\/p>\n<h2>1. Konsep Kunci: Pemodelan Konversasional untuk Prototipe Cepat<\/h2>\n<p>Di lingkungan Agile, persyaratan terus berkembang.<strong>Pemodelan Konversasional<\/strong>memungkinkan anggota tim untuk mendeskripsikan perilaku sistem dalam bahasa Inggris sederhana, dengan AI menghasilkan diagram UML secara instan. Hal ini menghilangkan kebutuhan untuk menguasai sintaks secara langsung dan memungkinkan pemangku kepentingan non-teknis untuk berpartisipasi dalam sesi desain.<\/p>\n<p id=\"sYjkEIH\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-906\" decoding=\"async\" fetchpriority=\"high\" height=\"572\" sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png 1024w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82-300x168.png 300w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82-768x429.png 768w\" width=\"1024\"\/><\/p>\n<p>Alih-alih menyeret kotak dan menghubungkan garis, Anda cukup memberikan perintah: <em>&#8220;Buat diagram kasus penggunaan untuk aplikasi pengiriman makanan.&#8221;<\/em>AI menginterpretasikan maksud, mendefinisikan aktor (Pelanggan, Restoran), dan menghubungkan kasus penggunaan (Pesan Pesanan, Lacak Pesanan) dengan relasi yang sesuai.<\/p>\n<p><strong>Contoh Alur Kerja:<\/strong><\/p>\n<ol>\n<li>\n<p><strong>Perintah:<\/strong> &#8220;Gambar diagram keadaan untuk mesin penjual otomatis dengan keadaan: Diam, Koin Dimasukkan, Mendistribusikan.&#8221;<\/p>\n<\/li>\n<li>\n<p><strong>Pembuatan Instan:<\/strong>Alat ini merender diagram awal.<\/p>\n<\/li>\n<li>\n<p><strong>Penyempurnaan:<\/strong> &#8220;Tambahkan transisi ke &#8216;Tidak Layak Layanan&#8217; jika diperlukan pemeliharaan.&#8221;<\/p>\n<\/li>\n<\/ol>\n<p><img alt=\"Thumbnail of UML Use Case Diagram\" decoding=\"async\" src=\"https:\/\/cdn-images.visual-paradigm.com\/features\/uml-diagram-generator\/uml-use-case-diagram-generated-by-ai-uml-diagram-generator-chatbot.jpg\"\/><\/p>\n<p>Pendekatan ini mengubah desain dari hambatan menjadi dialog kolaboratif.<\/p>\n<h2>2. Konsep Kunci: Penyempurnaan Iteratif dan Kesadaran Versi<\/h2>\n<p>Pengembangan Agile secara inheren bersifat iteratif. Diagram yang dihasilkan di Sprint 1 jarang sempurna untuk Sprint 2.<strong>Penyempurnaan Iteratif<\/strong>memungkinkan Anda memodifikasi model yang ada melalui perintah lanjutan daripada menggambar ulang dari awal.<\/p>\n<p>AI mempertahankan keadaan diagram Anda, memahami konteks seperti aktor sebelumnya, relasi, dan keputusan tata letak. Anda dapat memintanya untuk &#8220;Buat tata letak horizontal,&#8221; &#8220;Ubah semua aktor menjadi merah,&#8221; atau &#8220;Tambahkan basis data.&#8221; Hal ini memastikan model berkembang seiring dengan produk.<\/p>\n<p><strong>Manfaat Utama:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>Kecepatan:<\/strong>Pembaruan terjadi dalam hitungan detik, bukan menit.<\/p>\n<\/li>\n<li>\n<p><strong>Konsistensi:<\/strong>AI memastikan konsistensi logis (misalnya, tidak ada relasi yang terisolasi) selama proses refactoring.<\/p>\n<\/li>\n<li>\n<p><strong>Ketertelusuran:<\/strong>Perubahan sering kali dicatat, memungkinkan tim melihat bagaimana model berevolusi.<\/p>\n<\/li>\n<\/ul>\n<p><img alt=\"Visual Paradigm AI Chatbot - Intelligent Diagram Generation &amp; Modeling\" decoding=\"async\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2025\/12\/ai-chatbot-c4.png\"\/><\/p>\n<h2>3. Konsep Utama: PlantUML sebagai Standar Berbasis Kode<\/h2>\n<p>Meskipun chatbot menghasilkan diagram secara visual, kekuatan mendasar bagi tim Agile terletak pada <strong>PlantUML<\/strong>\u2014bahasa pemodelan berbasis teks. Hal ini memungkinkan diagram diperlakukan sebagai <strong>kode sumber<\/strong>.<\/p>\n<p><strong>Mengapa Pemodelan Berbasis Kode Penting bagi Agile:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>Kontrol Versi:<\/strong>Simpan <code data-backticks=\"1\">.plantuml<\/code>file di Git. Anda dapat melihat perbedaan perubahan, memulihkan kesalahan, dan melihat secara tepat siapa yang mengubah diagram urutan.<\/p>\n<\/li>\n<li>\n<p><strong>Integrasi CI\/CD:<\/strong>Otomatis menghasilkan diagram selama alur kerja build untuk menjaga dokumentasi tetap selaras dengan kode.<\/p>\n<\/li>\n<li>\n<p><strong>Kolaborasi:<\/strong>Pengembang dapat mengedit kode diagram di IDE mereka sama seperti kode aplikasi.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Contoh PlantUML menggunakan Snippet VPasCode:<br \/>\n<\/strong><\/p>\n<p id=\"dhQbWRn\"><img alt=\"Example PlantUML using VPasCode Snippet:\" class=\"alignnone wp-image-910 size-full\" decoding=\"async\" height=\"867\" sizes=\"(max-width: 1914px) 100vw, 1914px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a86ca5063.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a86ca5063.png 1914w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a86ca5063-300x136.png 300w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a86ca5063-1024x464.png 1024w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a86ca5063-768x348.png 768w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a86ca5063-1536x696.png 1536w\" width=\"1914\"\/><\/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:PP1DQiCm48Nt0jrXqDvNAA6YCLxPO4pN4sNIcbYQ88qRGidTAodkekdkCVFUDp-x91XbzOjMCij2yDPOzfwY8x2VvCwy2kmNlcgb5JhX27PDmjbHAXTqP_mWCEzqW7ta81IE1hwr0dYupPGeGfSRyOIE3622gTFg_YV-caLEmaZnQtQKDeHZV-50GS3qyPWvMxzI-l79Ck3D5z6Yq1LlrJIqswX_AClXD4UFCdDuy6pn_Lu7JVDI5vswAikqVgooC8VskLhYktn3_kKF\" 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:RP312i8m38RlXRv3s7sl8EhG8GeEH3ndCywnDPMkFOZuxgPJd8gdXkJ_lp_fjFVeV32TLhxn7S6i2mwoCrMj3HuMQMQD8LUHLbfXvQs3WZhakaQEhGjMBTO4oT9PziH7E52Pm4qhWASycR54cD2YECKN61FegSGQ6zYljBf_SJPuHKQ6kJG4zqArrbmi4u_pWlhuZgZjxbkOaojbJn6QKZpkKrlahzXHlhPyQfp1llc3pgBsVJUawMJOVByQofYytGrb11VvRpVwftACVFC3\" \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\ntitle Alur Checkout E-Commerce\r\n\r\nactor Pelanggan\r\n\r\npackage \"Frontend Web\" {\r\n  actor \"Antarmuka Pengguna\" sebagai UI\r\n}\r\n\r\npackage \"Layanan Backend\" {\r\n  komponen \"Layanan Pesanan\" sebagai OS\r\n  komponen \"Gerbang Pembayaran\" sebagai PG\r\n}\r\n\r\nkomponen \"Konfirmasi Pesanan\" sebagai OC\r\n\r\nPelanggan --&gt; UI\r\nUI --&gt; OS\r\nOS --&gt; PG\r\nPG --&gt; OS\r\nOS --&gt; OC\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP312i8m38RlXRv3s7sl8EhG8GeEH3ndCywnDPMkFOZuxgPJd8gdXkJ_lp_fjFVeV32TLhxn7S6i2mwoCrMj3HuMQMQD8LUHLbfXvQs3WZhakaQEhGjMBTO4oT9PziH7E52Pm4qhWASycR54cD2YECKN61FegSGQ6zYljBf_SJPuHKQ6kJG4zqArrbmi4u_pWlhuZgZjxbkOaojbJn6QKZpkKrlahzXHlhPyQfp1llc3pgBsVJUawMJOVByQofYytGrb11VvRpVwftACVFC3\" \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:PP1DQiCm48Nt0jrXqDvNAA6YCLxPO4pN4sNIcbYQ88qRGidTAodkekdkCVFUDp-x91XbzOjMCij2yDPOzfwY8x2VvCwy2kmNlcgb5JhX27PDmjbHAXTqP_mWCEzqW7ta81IE1hwr0dYupPGeGfSRyOIE3622gTFg_YV-caLEmaZnQtQKDeHZV-50GS3qyPWvMxzI-l79Ck3D5z6Yq1LlrJIqswX_AClXD4UFCdDuy6pn_Lu7JVDI5vswAikqVgooC8VskLhYktn3_kKF\" 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>Dengan memperlakukan diagram sebagai kode, tim memastikan bahwa dokumentasi tidak pernah menjadi pemikiran terakhir, melainkan bagian integral dari siklus pengembangan.<\/p>\n<h2>4. Konsep Utama: Model C4 untuk Konteks Sistem dan Kejelasan<\/h2>\n<p>Model <strong>C4<\/strong> (Konteks, Kontainer, Komponen, Kode) adalah pendekatan standar untuk memvisualisasikan arsitektur perangkat lunak, sangat direkomendasikan bagi tim Agile untuk mengelola kompleksitas. Model ini memecah desain sistem menjadi empat tingkat abstraksi, sehingga memudahkan komunikasi dengan berbagai pemangku kepentingan.<\/p>\n<ul>\n<li>\n<p><strong>Tingkat 1: Konteks Sistem:<\/strong>Menampilkan sistem Anda, pengguna (Aktor), dan ketergantungan eksternal. Ideal untuk perencanaan awal.<\/p>\n<\/li>\n<li>\n<p><strong>Tingkat 2: Kontainer:<\/strong> Menampilkan struktur teknis tingkat tinggi (misalnya, Aplikasi Web, Aplikasi Seluler, Database, Microservices).<\/p>\n<\/li>\n<li>\n<p><strong>Tingkat 3: Komponen:<\/strong>Memecah kontainer menjadi komponen logis (misalnya, Layanan Autentikasi, Pemroses Pesanan).<\/p>\n<\/li>\n<li>\n<p><strong>Tingkat 4: Kode:<\/strong>Merinci struktur kelas (sering dihasilkan secara otomatis atau kurang sering digunakan).<\/p>\n<\/li>\n<\/ul>\n<p>Menggunakan Model C4 dengan PlantUML membantu tim menghindari praktik \u201cdesain besar di awal\u201d (BDUF) sambil tetap menyediakan pandangan terstruktur yang berkembang seiring dengan skalabilitas proyek.<\/p>\n<p><img alt=\"Visual Paradigm OpenDocs class model\" decoding=\"async\" src=\"https:\/\/guides.visual-paradigm.com\/wp-content\/uploads\/2026\/02\/visual-paradigm-opendocs-with-class-diagram.png\"\/><\/p>\n<h2>5. Konsep Kunci: Sinkronisasi Dua Arah (Model vs. Dokumen)<\/h2>\n<p>Tantangan umum dalam Agile adalah menjaga agar dokumentasi dan sistem aktual tetap sinkron.<strong>Sinkronisasi Dua Arah<\/strong>Menjembatani kesenjangan antara model visual dan dokumentasi yang hidup (misalnya, OpenDocs, Wiki).<\/p>\n<p>Ketika diagram diperbarui dalam alat pemodelan, perubahan tersebut merambat secara otomatis ke dokumentasi. Sebaliknya, persyaratan yang ditulis dalam dokumen dapat memicu pembaruan diagram. Hal ini memastikan bahwa ketika Product Owner meninjau tiket Jira atau halaman Confluence, diagram yang terlampir mencerminkan keadaan sistem saat ini.<\/p>\n<p><strong>Contoh Alur Kerja:<\/strong><\/p>\n<ol>\n<li>\n<p><strong>Model:<\/strong>Arsitek memperbarui Diagram Urutan untuk mencerminkan alur 2FA baru.<\/p>\n<\/li>\n<li>\n<p><strong>Sinkronisasi:<\/strong>Diagram di OpenDocs diperbarui secara otomatis.<\/p>\n<\/li>\n<li>\n<p><strong>Dokumen:<\/strong>Pengembang yang membaca \u201cPanduan Integrasi API\u201d melihat alur baru secara langsung tanpa perlu menyalin dan menempel secara manual.<\/p>\n<\/li>\n<\/ol>\n<p><img alt=\"Perform business process modeling with Visual Paradigm Desktop, and then write documents in OpenDocs, accessible via the Visual Paradigm Unified Platform\" decoding=\"async\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/06\/img_6a30e4ca72d31.png\"\/><\/p>\n<h2>6. Konsep Kunci: Integrasi dan Kolaborasi Alur Kerja Agile<\/h2>\n<p>Pemodelan UML modern bukan aktivitas yang terisolasi; hal ini terintegrasi secara mendalam ke dalam alur kerja Agile. Tim menggunakan model-model ini untuk memfasilitasi <strong>Perencanaan Sprint<\/strong>,\u00a0<strong>Tinjauan Desain<\/strong>, dan <strong>Retrospektif<\/strong>.<\/p>\n<ul>\n<li>\n<p><strong>Perencanaan Sprint:<\/strong>Gunakan Diagram Kasus Penggunaan atau Diagram Aktivitas yang cepat untuk memperjelas cerita pengguna dan kasus tepi sebelum pengembangan dimulai.<\/p>\n<\/li>\n<li>\n<p><strong>Tinjauan Desain:<\/strong>Bagikan diagram PlantUML langsung selama sesi tinjauan. Pemangku kepentingan dapat menyarankan perubahan secara lisan, dan diagram diperbarui secara real-time.<\/p>\n<\/li>\n<li>\n<p><strong>Retrospektif:<\/strong>\u00a0Analisis diagram urutan untuk mengidentifikasi hambatan atau titik kegagalan tunggal (misalnya, &#8220;Gerbang pembayaran adalah hambatan&#8221;).<\/p>\n<\/li>\n<\/ul>\n<p>Integrasi ini menumbuhkan budaya di mana pemikiran visual dapat diakses oleh semua orang, mulai dari Scrum Master hingga Pengembang Utama.<\/p>\n<p><img alt=\"Example of using ai chatbot to generate UML Class Diagram. by VP Chatbot \" class=\"alignnone\" decoding=\"async\" height=\"752\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/ai-toolbox.visual-paradigm.com-use-case.png\" width=\"1208\"\/><\/p>\n<h2>Contoh Referensi PlantUML Menggunakan VPasCode<\/h2>\n<h3>1. Diagram Use Case (Aplikasi Pengiriman Makanan)<\/h3>\n<p><strong>Konsep:<\/strong>\u00a0Mendefinisikan aktor dan interaksi mereka dengan sistem.<\/p>\n<p id=\"pacagtB\"><img loading=\"lazy\" alt=\"Use Case Diagram (Food Delivery App) by VPasCode\" class=\"alignnone wp-image-911 size-full\" decoding=\"async\" height=\"872\" loading=\"lazy\" sizes=\"auto, (max-width: 1917px) 100vw, 1917px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a91175ea3.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a91175ea3.png 1917w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a91175ea3-300x136.png 300w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a91175ea3-1024x466.png 1024w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a91175ea3-768x349.png 768w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a91175ea3-1536x699.png 1536w\" width=\"1917\"\/><\/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:bLBBRi8m4Bn7yZ-iSg87VY27YYgYY1D8gNgfUh2SHLZu0VQ6A7_VTQ1jCFJGYwNT6S_ChdOHIGRgh145QJ88otdjhSMW4EezgeFl21eyTUWKYa8KKf4FKDPT9C-qKXH75j1A7wKZA5-3TuIkpVir5wmJpbfXZgtT6Hsh3j0CaT3c-5OEbWcmaeIz7CeKupS0p9ydjXMyQ-mXsJ7ffpsIRZ9Ki49AdTbJKfj28_akL7NPHqDU7MOVQsv5q0x6-fCrf25uCGRqDn8J8Wg01-gJlCtUz_3cIPeBzw-v6ZIe2AxB6Bctu-Lhgc0RlC8Ohq0Q5EvfCC-DEfL-FN385bXxjzF1RaAB8OcZYGWRlXU_-zVmon1yuE-k5SM2Nxx6Bm00\" 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:bLBBIiDG4Dq7yWz3LtNH7yX22g6MOi50wafSJ9EnkUO-ojo9qBzt4aLZcYxSP97pcdEuwoZ8qZcR9cB44Znp9-WXRwXgGoUmMUN1EUAAqYHDi9B0i2Z8eZ-Tq2_IvAnwKvapUe750mSlvElf_prUqAlj8p7wTzLE2QM9GWvs_eEyHfWflYK-gWmASaVruY4wJKQNmEf-b9_1tZGelu7A_G47wlL96Mn9SarTtYdx6XzaLuTcNrkL4gfs-RBhmGDnfDhWg_gW5IZ9TGYcX-GRIXE0Mn6Z4WTqPsDRvHo2e1rKjoiNnffcDD50_zjwPaVLSQWenW8lJalrxM6M2Qj9ODcraU9CpDouUV1lXjqJryHz1jb8eBErqE3Hn7ylic4Eh3Q-JfErVlKHVm80\" \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\ntitle Urutan Checkout E-Commerce\r\n\r\nactor \"Pelanggan\"\r\nparticipant \"Frontend\"\r\nparticipant \"Layanan Keranjang\"\r\nparticipant \"Sistem Inventori\"\r\nparticipant \"Gerbang Pembayaran\"\r\n\r\n\"Pelanggan\" -&gt; \"Frontend\": Lihat Keranjang\r\n\"Frontend\" -&gt; \"Layanan Keranjang\": GetCart()\r\n\"Layanan Keranjang\" -&gt; \"Sistem Inventori\": CheckStock([Item Tersedia])\r\nalt Semua item tersedia\r\n  \"Layanan Keranjang\" -&gt; \"Frontend\": Tampilkan Total\r\n  \"Pelanggan\" -&gt; \"Frontend\": Pilih Pembayaran\r\n  \"Frontend\" -&gt; \"Gerbang Pembayaran\": ProcessPayment()\r\n  \"Gerbang Pembayaran\" --&gt; \"Frontend\": Sukses\r\n  \"Frontend\" -&gt; \"Layanan Keranjang\": ConfirmOrder()\r\nelse Stok habis\r\n  \"Layanan Keranjang\" -&gt; \"Frontend\": Tampilkan Error\r\nend\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLBBIiDG4Dq7yWz3LtNH7yX22g6MOi50wafSJ9EnkUO-ojo9qBzt4aLZcYxSP97pcdEuwoZ8qZcR9cB44Znp9-WXRwXgGoUmMUN1EUAAqYHDi9B0i2Z8eZ-Tq2_IvAnwKvapUe750mSlvElf_prUqAlj8p7wTzLE2QM9GWvs_eEyHfWflYK-gWmASaVruY4wJKQNmEf-b9_1tZGelu7A_G47wlL96Mn9SarTtYdx6XzaLuTcNrkL4gfs-RBhmGDnfDhWg_gW5IZ9TGYcX-GRIXE0Mn6Z4WTqPsDRvHo2e1rKjoiNnffcDD50_zjwPaVLSQWenW8lJalrxM6M2Qj9ODcraU9CpDouUV1lXjqJryHz1jb8eBErqE3Hn7ylic4Eh3Q-JfErVlKHVm80\" \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:bLBBRi8m4Bn7yZ-iSg87VY27YYgYY1D8gNgfUh2SHLZu0VQ6A7_VTQ1jCFJGYwNT6S_ChdOHIGRgh145QJ88otdjhSMW4EezgeFl21eyTUWKYa8KKf4FKDPT9C-qKXH75j1A7wKZA5-3TuIkpVir5wmJpbfXZgtT6Hsh3j0CaT3c-5OEbWcmaeIz7CeKupS0p9ydjXMyQ-mXsJ7ffpsIRZ9Ki49AdTbJKfj28_akL7NPHqDU7MOVQsv5q0x6-fCrf25uCGRqDn8J8Wg01-gJlCtUz_3cIPeBzw-v6ZIe2AxB6Bctu-Lhgc0RlC8Ohq0Q5EvfCC-DEfL-FN385bXxjzF1RaAB8OcZYGWRlXU_-zVmon1yuE-k5SM2Nxx6Bm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>2. Diagram Urutan (Proses Checkout)<\/h3>\n<p><strong>Konsep:<\/strong>\u00a0Memvisualisasikan urutan interaksi antar objek seiring waktu.<\/p>\n<p id=\"wJAxhft\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-912\" decoding=\"async\" height=\"866\" loading=\"lazy\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a96c81d02.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a96c81d02.png 1919w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a96c81d02-300x135.png 300w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a96c81d02-1024x462.png 1024w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a96c81d02-768x347.png 768w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a96c81d02-1536x693.png 1536w\" width=\"1919\"\/><\/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:ZLBBQiCm4BmBz0-BJ-d1F-13IJ5fo2a1brvA3qBU414zKcaTux_lAesf8theHR0xipCxYzQ9LAJ1MId8a4NOr6rm3gD6Q4-eps4WwF1hGAzH2YcKfX2XQeT4WMcL51SMCDfSb2UeNcFmXBul-oqNh1ElHcE9xVmLFQjEq4s9q9NuGKsE2R1LXAEQghp6x0_rCyoU3RmR725RIJ4tCs5fti0MAJTMJwoo03AntAJvkK57GPzN7plk930URlKdpojBy68jc1b96P42e5J-tR4xXH7U0Ybxu_sPeqEBck0UFFEMSOfxD728GMDAztuE1YK9waU3GUU9KldnK6tmHnFTFlOOioZQXB3d_n2E_mwwYJ547lMz56j--QTz0m00\" 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:bL9DJy904BrlilzXmWaF_04EXgH1OYInIV5aF0pjIDVk1vcTcl3ldQe85ZnuwQ7lQzxBBh8WIn-yDUB44pnnBnYXQAdkKY-md1Kf1EAQhB46QqaCav8ynjqEuyIQlUfTxVOO1IPtdA9GRCR_rtZ0gBOFn1ZVL3icL2uB1RYFxnGrmetn5V5MPL1IsAeNVqPRytC8p6xX63w7jMjHJc7M7A61Td7B75OaXQPDRwovG0V9-BhvrpwLfBgRFjyFs8OuK-FmHJtG2rGKUWGtGF8DMGDmrVvq-0R3tlbE2Piaw0V57nLBvrrxDiT0FMzvEPXgEDMKSuc7e3s6jd251xDVGLNVPSfZ-oiZ5Yc-EWwFt10FtkGpWKxKGOjRb__LVicSM2rYOyr2l_f0Fm00\" \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\ntitle Urutan Checkout E-Commerce\r\n\r\nactor \"Pelanggan\"\r\nparticipant \"Frontend\"\r\nparticipant \"Layanan Keranjang\"\r\nparticipant \"Sistem Inventori\"\r\nparticipant \"Gerbang Pembayaran\"\r\n\r\nPelanggan -&gt; Frontend: Lihat Keranjang\r\nFrontend -&gt; Layanan Keranjang: GetCart()\r\nLayanan Keranjang -&gt; Sistem Inventori: CheckStock([Item Tersedia])\r\nalt Semua item tersedia\r\n  Layanan Keranjang -&gt; Frontend: Tampilkan Total\r\n  Pelanggan -&gt; Frontend: Pilih Pembayaran\r\n  Frontend -&gt; Gerbang Pembayaran: ProcessPayment()\r\n  Gerbang Pembayaran --&gt; Frontend: Sukses\r\n  Frontend -&gt; Layanan Keranjang: ConfirmOrder()\r\nelse Stok habis\r\n  Layanan Keranjang -&gt; Frontend: Tampilkan Error\r\nend\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bL9DJy904BrlilzXmWaF_04EXgH1OYInIV5aF0pjIDVk1vcTcl3ldQe85ZnuwQ7lQzxBBh8WIn-yDUB44pnnBnYXQAdkKY-md1Kf1EAQhB46QqaCav8ynjqEuyIQlUfTxVOO1IPtdA9GRCR_rtZ0gBOFn1ZVL3icL2uB1RYFxnGrmetn5V5MPL1IsAeNVqPRytC8p6xX63w7jMjHJc7M7A61Td7B75OaXQPDRwovG0V9-BhvrpwLfBgRFjyFs8OuK-FmHJtG2rGKUWGtGF8DMGDmrVvq-0R3tlbE2Piaw0V57nLBvrrxDiT0FMzvEPXgEDMKSuc7e3s6jd251xDVGLNVPSfZ-oiZ5Yc-EWwFt10FtkGpWKxKGOjRb__LVicSM2rYOyr2l_f0Fm00\" \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:ZLBBQiCm4BmBz0-BJ-d1F-13IJ5fo2a1brvA3qBU414zKcaTux_lAesf8theHR0xipCxYzQ9LAJ1MId8a4NOr6rm3gD6Q4-eps4WwF1hGAzH2YcKfX2XQeT4WMcL51SMCDfSb2UeNcFmXBul-oqNh1ElHcE9xVmLFQjEq4s9q9NuGKsE2R1LXAEQghp6x0_rCyoU3RmR725RIJ4tCs5fti0MAJTMJwoo03AntAJvkK57GPzN7plk930URlKdpojBy68jc1b96P42e5J-tR4xXH7U0Ybxu_sPeqEBck0UFFEMSOfxD728GMDAztuE1YK9waU3GUU9KldnK6tmHnFTFlOOioZQXB3d_n2E_mwwYJ547lMz56j--QTz0m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>3. Diagram Mesin State (Mesin Penjual Otomatis)<\/h3>\n<p><strong>Konsep:<\/strong>\u00a0Memodelkan transisi state sistem berdasarkan peristiwa.<\/p>\n<p id=\"iGuYMpv\"><img loading=\"lazy\" alt=\"State Machine Diagram (Vending Machine) by VP Chatbot and VPasCode\" class=\"alignnone wp-image-913 size-full\" decoding=\"async\" height=\"712\" loading=\"lazy\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a9a098278.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a9a098278.png 789w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a9a098278-300x271.png 300w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a9a098278-768x693.png 768w\" width=\"789\"\/><\/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:PP6nQWCn38PtWzz1KuT2w7v3IRcq44gQuQ3BaS6rbPoeJtVOka3UlhPlYDjE5le_oVgbRHGJP1czLaBY4JwH7V453iOEn0YT647OaRa4CsgbLVzuWitc6VREOmElBE46Jn0mekmepjxSjCfQWTg9UCyHWw1hW4gKSz1VZIUNmvDMDRNs5Xmxz6XBMInHpa4VPRBVBrT3tdobFnvW3cJn-9wwr4MbInu7EIOt3GmcTilvJ9QGvMrX5xMwwt_mTZ1yIUPiUNSBrkmgLYlWgRrp_wqKPdL-c09c85ORMlM0iWGk6lJMi4L_gg3Z8iTpX-6Ql3Om6c91pjG7eaEdLGtyQZiR2kqqpXubJRTDnqst_W40\" 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:PP51JyCm38NlbVeVVEA0XBZtW8Owa2OqYjHZjOD9lCsGkbNYJDg_9qqF2t2AvVVbnS_P14MlSNHrfQoEOCjuyZX2hwW4Umeiy47o5T51fzE8og6kwcguFy33mnFihAC6NaJz5Hx1Ko3TSfWTNkjgqJBKJYmx2UILR0ESgwK7mmKTswKyr5L9hTvAOq-EJBuMShNqO0WwcU_d2xB3p_J67SoU3NLloQMyb5sMSKXIZbC3PmnzF1xPC8c-Hh4foqt_WxTdb5CAP_AvZLIogrYiGARsnlsFafar-Nxoj02XsD2gUzBe9Mim61H3xb10NTJks9E_fAmDZCYY90lrJcJ9rbK9_BATaNqxZRCZJTDjI6pwyXy0\" \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\ntitle Diagram State Mesin Penjual Otomatis\r\n\r\n[*] --&gt; Idle: Entry \/ resetDisplay\r\nIdle --&gt; CoinInserted: insertCoin [validCoin]\r\nCoinInserted --&gt; ItemSelected: selectItem [stockAvailable &amp; priceOK]\r\nItemSelected --&gt; Dispensing: hasSufficientFunds\r\nDispensing --&gt; DispensingChange: changeDue\r\nDispensingChange --&gt; Idle: noChangeDue\r\nCoinInserted --&gt; Idle: insertMoreCoins\r\nIdle --&gt; Idle: returnCoins [cancel]\r\nIdle --&gt; OutOfService: maintenanceNeeded\r\nOutOfService --&gt; Idle: repairComplete\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:PP51JyCm38NlbVeVVEA0XBZtW8Owa2OqYjHZjOD9lCsGkbNYJDg_9qqF2t2AvVVbnS_P14MlSNHrfQoEOCjuyZX2hwW4Umeiy47o5T51fzE8og6kwcguFy33mnFihAC6NaJz5Hx1Ko3TSfWTNkjgqJBKJYmx2UILR0ESgwK7mmKTswKyr5L9hTvAOq-EJBuMShNqO0WwcU_d2xB3p_J67SoU3NLloQMyb5sMSKXIZbC3PmnzF1xPC8c-Hh4foqt_WxTdb5CAP_AvZLIogrYiGARsnlsFafar-Nxoj02XsD2gUzBe9Mim61H3xb10NTJks9E_fAmDZCYY90lrJcJ9rbK9_BATaNqxZRCZJTDjI6pwyXy0\" \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:PP6nQWCn38PtWzz1KuT2w7v3IRcq44gQuQ3BaS6rbPoeJtVOka3UlhPlYDjE5le_oVgbRHGJP1czLaBY4JwH7V453iOEn0YT647OaRa4CsgbLVzuWitc6VREOmElBE46Jn0mekmepjxSjCfQWTg9UCyHWw1hW4gKSz1VZIUNmvDMDRNs5Xmxz6XBMInHpa4VPRBVBrT3tdobFnvW3cJn-9wwr4MbInu7EIOt3GmcTilvJ9QGvMrX5xMwwt_mTZ1yIUPiUNSBrkmgLYlWgRrp_wqKPdL-c09c85ORMlM0iWGk6lJMi4L_gg3Z8iTpX-6Ql3Om6c91pjG7eaEdLGtyQZiR2kqqpXubJRTDnqst_W40\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>4. Diagram Kelas (Manajemen Perpustakaan)<\/h3>\n<p><strong>Konsep:<\/strong> Menunjukkan struktur statis, kelas, dan hubungan.<\/p>\n<p id=\"IujrpjO\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-914\" decoding=\"async\" height=\"866\" loading=\"lazy\" sizes=\"auto, (max-width: 1911px) 100vw, 1911px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aa6802db7.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aa6802db7.png 1911w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aa6802db7-300x136.png 300w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aa6802db7-1024x464.png 1024w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aa6802db7-768x348.png 768w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aa6802db7-1536x696.png 1536w\" width=\"1911\"\/><\/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:RP7D2i8m48JlWRp3qbD5U_1QHBGtGRtu11iRD9WVs4H5n7UtxHgXuYsPdNmpILOn8QMhir8SBSO8MwC8wG5FAG0gK25SOjsfCIsQRhrasMcdDEN1RjWDeob4ZNGyzzuocMHr3OT4nfycDVGYcrGW2lV1nAWQ638R4jdQdRW5qqhnaYBNw_NSRNDezfdEoYYGaqnStz1OL5QNNC5gz2Cc9sSgzzcqOx97zmFcAvJVahr6Ebt9b-FY-KMBUG5L1OL3_oW-R_5_neMaM6dVTb_p1W00\" 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:RP7D2i8m48JlWRp3qbD5U_1QHBGtGRtu11iRD9WVs4H5n7UtxHgXuYsPdNmpILOn8QMhir8SBSO8MwC8wG5FAG0gK25SOjsfCIsQRhrasMcdDEN1RjWDeob4ZNGyzzuocMHr3OT4nfycDVGYcrGW2lV1nAWQ638R4jdQdRW5qqhnaYBNw_NSRNDezfdEoYYGaqnStz1OL5QNNC5gz2Cc9sSgzzcqOx97zmFcAvJVahr6Ebt9b-FY-KMBUG5L1OL3_oW-R_5_neMaM6dVTb_p1W00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\nclass Library {\r\n  - books: List&lt;Book&gt;\r\n  - members: List&lt;Member&gt;\r\n  + searchBook(title: String): Book\r\n  + borrowBook(member: Member, book: Book): void\r\n}\r\n\r\nclass Book {\r\n  - ISBN: String\r\n  - title: String\r\n  + isAvailable(): Boolean\r\n}\r\n\r\nclass Member {\r\n  - memberId: String\r\n  - name: String\r\n  + borrow(): void\r\n  + return(): void\r\n}\r\n\r\nLibrary \"1\" -- \"many\" Book\r\nLibrary \"1\" -- \"many\" Member\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:RP7D2i8m48JlWRp3qbD5U_1QHBGtGRtu11iRD9WVs4H5n7UtxHgXuYsPdNmpILOn8QMhir8SBSO8MwC8wG5FAG0gK25SOjsfCIsQRhrasMcdDEN1RjWDeob4ZNGyzzuocMHr3OT4nfycDVGYcrGW2lV1nAWQ638R4jdQdRW5qqhnaYBNw_NSRNDezfdEoYYGaqnStz1OL5QNNC5gz2Cc9sSgzzcqOx97zmFcAvJVahr6Ebt9b-FY-KMBUG5L1OL3_oW-R_5_neMaM6dVTb_p1W00\" \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:RP7D2i8m48JlWRp3qbD5U_1QHBGtGRtu11iRD9WVs4H5n7UtxHgXuYsPdNmpILOn8QMhir8SBSO8MwC8wG5FAG0gK25SOjsfCIsQRhrasMcdDEN1RjWDeob4ZNGyzzuocMHr3OT4nfycDVGYcrGW2lV1nAWQ638R4jdQdRW5qqhnaYBNw_NSRNDezfdEoYYGaqnStz1OL5QNNC5gz2Cc9sSgzzcqOx97zmFcAvJVahr6Ebt9b-FY-KMBUG5L1OL3_oW-R_5_neMaM6dVTb_p1W00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>5. Diagram Kontainer C4 (Platform E-Commerce)<\/h3>\n<p><strong>Konsep:<\/strong>Tampilan arsitektur tingkat tinggi yang menampilkan kontainer.<\/p>\n<p id=\"FtQWZjN\"><img loading=\"lazy\" alt=\"C4 Container Diagram (E-Commerce Platform) by VP Chatbot \" class=\"alignnone wp-image-916 size-full\" decoding=\"async\" height=\"868\" loading=\"lazy\" sizes=\"auto, (max-width: 263px) 100vw, 263px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aaf10c1f3.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aaf10c1f3.png 263w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66aaf10c1f3-91x300.png 91w\" width=\"263\"\/><\/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:JL71IiD04Bq7yWzZJYbOHUbHIjjKL12C3PxB93kDmMGtxiuYGVhlpgPLSrbccJVlpNkpSeoMVTV64JVS4cGBo8ncR3HPs3POM-pYA8uk6bsrNX7SPOlhRB7_0or3DoVhZ4uhxzXqP2yXoSvb8lMR8mVyJk06nzG16oZz0BqrobVihf9Pu2Z6vdvZl5PeXxIyaT7xUMOweQa8yXRvO6oNpE0xZk1_pTJrAD2YqRKOoB4cMFTz4DuHLdpUm4AZcUm1Amfwa_c9vArWDrXza5Q_CbCXx1i1hFCdU42cBnm2Tz5RKOQDCQFK8shLYbzBdvuSkvFOX6LRfgeKu8jL8M9aBD5H6CsDuzfIyVeyyhAnmcC2xCnoZADZY4eCmto-1DadZkGPFweChHsrapESaWdv1uALs99J_m00\" 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:NL9DIyD04Bqlv3-CEJLW5QL7AMrJKL4XjjxB91d3alq8-t4eql_kh4qbU5YOPTw-z-RDhdn05w9McGWoA8AjnCwXXbTh0af33if59Z9n9KsZOalmK2vkoyMXlFINgLkHyzRCckY3rUIk8Qz8eUawD3bVtedBQB170rxwG1gY2R47JRec9M5mjetzJLuailqn8GuR6qsBxZYhxnAVml1bdOR7UMarQpIK5_2T2O0_ApC_84FNWv8zUWdFg52pv6TCJbHoiYDiGYhM_CRfs2CCexaaFY6RwDypVeDDJwQzQ4vLSP0CU29NyyImhbuI_tvmacyRQyEO03VHyAZajEIdd4pnZsbRpzgQmLiCMACdgCYZEKTOMHywH_kFjv7kAFN0imqZf62gapW9mHd0VBu4TYNu_DPjBSIEr6G_vwGcUs625S_7F-47\" \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\ntitle Diagram Kontainer C4\r\n\r\n!include &lt;C4\/C4_Container&gt;\r\n\r\nPerson(customer, \"Pelanggan\", \"Menggunakan sistem untuk membeli produk.\")\r\n\r\nSystem_Boundary(b1, \"Platform E-Commerce\") {\r\n  Container(spa, \"Aplikasi Halaman Tunggal\", \"React\", \"Antarmuka pengguna\")\r\n  Container_Boundary(b2, \"Backend\") {\r\n    Container(api, \"Gerbang API\", \"Spring Boot\", \"Menangani permintaan\")\r\n    ContainerDb(db, \"Database Pesanan\", \"PostgreSQL\", \"Menyimpan pesanan\")\n  }\n}\n\nspa --&gt; api\napi --&gt; db\n\nRel(customer, spa, \"Menggunakan\")\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NL9DIyD04Bqlv3-CEJLW5QL7AMrJKL4XjjxB91d3alq8-t4eql_kh4qbU5YOPTw-z-RDhdn05w9McGWoA8AjnCwXXbTh0af33if59Z9n9KsZOalmK2vkoyMXlFINgLkHyzRCckY3rUIk8Qz8eUawD3bVtedBQB170rxwG1gY2R47JRec9M5mjetzJLuailqn8GuR6qsBxZYhxnAVml1bdOR7UMarQpIK5_2T2O0_ApC_84FNWv8zUWdFg52pv6TCJbHoiYDiGYhM_CRfs2CCexaaFY6RwDypVeDDJwQzQ4vLSP0CU29NyyImhbuI_tvmacyRQyEO03VHyAZajEIdd4pnZsbRpzgQmLiCMACdgCYZEKTOMHywH_kFjv7kAFN0imqZf62gapW9mHd0VBu4TYNu_DPjBSIEr6G_vwGcUs625S_7F-47\" \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:JL71IiD04Bq7yWzZJYbOHUbHIjjKL12C3PxB93kDmMGtxiuYGVhlpgPLSrbccJVlpNkpSeoMVTV64JVS4cGBo8ncR3HPs3POM-pYA8uk6bsrNX7SPOlhRB7_0or3DoVhZ4uhxzXqP2yXoSvb8lMR8mVyJk06nzG16oZz0BqrobVihf9Pu2Z6vdvZl5PeXxIyaT7xUMOweQa8yXRvO6oNpE0xZk1_pTJrAD2YqRKOoB4cMFTz4DuHLdpUm4AZcUm1Amfwa_c9vArWDrXza5Q_CbCXx1i1hFCdU42cBnm2Tz5RKOQDCQFK8shLYbzBdvuSkvFOX6LRfgeKu8jL8M9aBD5H6CsDuzfIyVeyyhAnmcC2xCnoZADZY4eCmto-1DadZkGPFweChHsrapESaWdv1uALs99J_m00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Plantuml di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6. Diagram Penempatan (Infrastruktur Cloud)<\/h3>\n<p><strong>Konsep:<\/strong>Menampilkan penempatan fisik komponen perangkat lunak pada perangkat keras.<\/p>\n<p id=\"OjibqnO\"><img loading=\"lazy\" alt=\"Deployment Diagram (Cloud Infrastructure) by VP Chatbot and VPasCode Platform\" class=\"alignnone wp-image-919 size-full\" decoding=\"async\" height=\"867\" loading=\"lazy\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" src=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66ab9f5775f.png\" srcset=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66ab9f5775f.png 1918w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66ab9f5775f-300x136.png 300w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66ab9f5775f-1024x463.png 1024w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66ab9f5775f-768x347.png 768w, https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66ab9f5775f-1536x694.png 1536w\" width=\"1918\"\/><\/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:PL0z3u8m4DsRz3zSEkd0ucm8X3gu6HcOAxqOadwb519Z-EyM0QjnktVllNjtL_H1-31eHKdeWaBWw9HzQ3G1U2VkNcXAA35M8h1AsK72nTkna-XXLpRrdi6J4e15SAeES3Pnf6bn9G1Qgvqryq3Mu0rgz2Dw1gA721S4n_nFMphthOtmHpkbr2klFs5I174JVUpojNgxDv3CqtnMMY3ByXH1IKgRYSrDIO56ncUz0000\" 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:TP2n2eCm48Rt0z_XS6e7byv55EtGhTJ1-JI7X6eIOYoKuhiteZPTkkM-vBl_9zdeoBffw2DmqlMCfQJEqe0tLZmOSgGYY41fmHXxzc8X2OjUJm8FULqTOtm3udf_LNwRQXalnMdbYAqUZ5Qi7COLsoTRhBc9SUI6EfBBiE5p-kTzRdhve546AJVcLvg_1UvbjUSANxsXqSDoEmL_9xi-0uGUIPA600XH2zz5o5W9_saV\" \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\ntitle Diagram Penempatan\r\n\r\nnode \"Penyedia Cloud (AWS)\" {\n  node \"Instance EC2\" {\n    component \"Server Web\" sebagai WebServer &lt;&gt;\n    component \"Server Aplikasi\" sebagai AppServer &lt;&gt;\n  }\n  node \"RDS\" {\n    database \"Database\" sebagai Database &lt;&gt;\n  }\n}\n\nWebServer --&gt; AppServer\nAppServer --&gt; Database\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TP2n2eCm48Rt0z_XS6e7byv55EtGhTJ1-JI7X6eIOYoKuhiteZPTkkM-vBl_9zdeoBffw2DmqlMCfQJEqe0tLZmOSgGYY41fmHXxzc8X2OjUJm8FULqTOtm3udf_LNwRQXalnMdbYAqUZ5Qi7COLsoTRhBc9SUI6EfBBiE5p-kTzRdhve546AJVcLvg_1UvbjUSANxsXqSDoEmL_9xi-0uGUIPA600XH2zz5o5W9_saV\" \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:PL0z3u8m4DsRz3zSEkd0ucm8X3gu6HcOAxqOadwb519Z-EyM0QjnktVllNjtL_H1-31eHKdeWaBWw9HzQ3G1U2VkNcXAA35M8h1AsK72nTkna-XXLpRrdi6J4e15SAeES3Pnf6bn9G1Qgvqryq3Mu0rgz2Dw1gA721S4n_nFMphthOtmHpkbr2klFs5I174JVUpojNgxDv3CqtnMMY3ByXH1IKgRYSrDIO56ncUz0000\" 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<h2>Daftar Referensi Pemodelan UML untuk Tim Agile Modern<\/h2>\n<ol>\n<li><a href=\"https:\/\/chat.visual-paradigm.com\/\">Chatbot Pemodelan Visual AI Visual Paradigm<\/a><\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/opendocs\/\">OpenDocs: Manajemen Pengetahuan Kolaboratif<\/a><\/li>\n<li><a href=\"https:\/\/plantuml.com\/\">Situs Resmi PlantUML<\/a><\/li>\n<li><a href=\"https:\/\/c4model.com\/\">Dokumentasi Model C4<\/a><\/li>\n<li><a href=\"https:\/\/online.visual-paradigm.com\/unified-platform\/\">Platform Terpadu Visual Paradigm<\/a><\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\">Studio C4 PlantUML Berbasis AI<\/a><\/li>\n<li><a href=\"https:\/\/guides.visual-paradigm.com\/visual-paradigm-ai-diagram-generation-guide\/\">Panduan Visual Paradigm: Generasi Diagram Berbasis AI<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Tim Agile modern berkembang pesat berkat kecepatan, kolaborasi, dan komunikasi yang jelas. Pemodelan UML tradisional sering kali menghambat karena kurva belajarnya yang curam dan proses menggambar manual yang memakan waktu.&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","inline_featured_image":false,"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[1],"tags":[],"asset-category":[],"class_list":["post-509","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"source_url":"","fifu_image_url":"","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>Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML - AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News<\/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.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML - AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News\" \/>\n<meta property=\"og:description\" content=\"Tim Agile modern berkembang pesat berkat kecepatan, kolaborasi, dan komunikasi yang jelas. Pemodelan UML tradisional sering kali menghambat karena kurva belajarnya yang curam dan proses menggambar manual yang memakan waktu.&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-27T00:31:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1\"},\"headline\":\"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML\",\"datePublished\":\"2026-07-27T00:31:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/\"},\"wordCount\":988,\"publisher\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/\",\"url\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/\",\"name\":\"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML - AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News\",\"isPartOf\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png\",\"datePublished\":\"2026-07-27T00:31:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage\",\"url\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png\",\"contentUrl\":\"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ai-diagrams.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#website\",\"url\":\"https:\/\/www.ai-diagrams.com\/id\/\",\"name\":\"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ai-diagrams.com\/id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#organization\",\"name\":\"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News\",\"url\":\"https:\/\/www.ai-diagrams.com\/id\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ai-diagrams.com\/id\/wp-content\/uploads\/sites\/20\/2026\/03\/ai-diagram-logo.png\",\"contentUrl\":\"https:\/\/www.ai-diagrams.com\/id\/wp-content\/uploads\/sites\/20\/2026\/03\/ai-diagram-logo.png\",\"width\":648,\"height\":648,\"caption\":\"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News\"},\"image\":{\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.ai-diagrams.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.ai-diagrams.com\/id\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML - AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News","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.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML - AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News","og_description":"Tim Agile modern berkembang pesat berkat kecepatan, kolaborasi, dan komunikasi yang jelas. Pemodelan UML tradisional sering kali menghambat karena kurva belajarnya yang curam dan proses menggambar manual yang memakan waktu.&hellip;","og_url":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/","og_site_name":"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News","article_published_time":"2026-07-27T00:31:57+00:00","og_image":[{"url":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png","type":"","width":"","height":""}],"author":"curtis","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":false,"Estimasi waktu membaca":"7 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#article","isPartOf":{"@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/"},"author":{"name":"curtis","@id":"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1"},"headline":"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML","datePublished":"2026-07-27T00:31:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/"},"wordCount":988,"publisher":{"@id":"https:\/\/www.ai-diagrams.com\/id\/#organization"},"image":{"@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png","articleSection":["Uncategorized"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/","url":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/","name":"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML - AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News","isPartOf":{"@id":"https:\/\/www.ai-diagrams.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png","datePublished":"2026-07-27T00:31:57+00:00","breadcrumb":{"@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#primaryimage","url":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png","contentUrl":"https:\/\/www.ai-diagrams.com\/wp-content\/uploads\/2026\/07\/img_6a66a6fa4dd82.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.ai-diagrams.com\/id\/uml-modeling-for-modern-agile-teams-a-plantuml-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ai-diagrams.com\/id\/"},{"@type":"ListItem","position":2,"name":"Pemodelan UML untuk Tim Agile Modern: Panduan PlantUML"}]},{"@type":"WebSite","@id":"https:\/\/www.ai-diagrams.com\/id\/#website","url":"https:\/\/www.ai-diagrams.com\/id\/","name":"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News","description":"","publisher":{"@id":"https:\/\/www.ai-diagrams.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ai-diagrams.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.ai-diagrams.com\/id\/#organization","name":"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News","url":"https:\/\/www.ai-diagrams.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.ai-diagrams.com\/id\/wp-content\/uploads\/sites\/20\/2026\/03\/ai-diagram-logo.png","contentUrl":"https:\/\/www.ai-diagrams.com\/id\/wp-content\/uploads\/sites\/20\/2026\/03\/ai-diagram-logo.png","width":648,"height":648,"caption":"AI Diagrams Indonesia\u2013 Explore Artificial Intelligence Trends &amp; News"},"image":{"@id":"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.ai-diagrams.com\/id\/#\/schema\/person\/7799982e6b83f10fb8a41071b61608d1","name":"curtis","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.ai-diagrams.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.ai-diagrams.com\/id\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/posts\/509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/comments?post=509"}],"version-history":[{"count":0,"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/posts\/509\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/media?parent=509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/categories?post=509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/tags?post=509"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.ai-diagrams.com\/id\/wp-json\/wp\/v2\/asset-category?post=509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}