{"id":12150,"date":"2026-08-25T15:50:31","date_gmt":"2026-08-25T07:50:31","guid":{"rendered":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"},"modified":"2026-09-03T23:26:01","modified_gmt":"2026-09-03T15:26:01","slug":"deep-dive-review-diagram-as-code-with-mermaid-using-vpascode","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","title":{"rendered":"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode"},"content":{"rendered":"<p><strong>\u2014\u2014 Berbagi Praktik Terbaik dengan Visual Paradigm AI Chatbot + VPasCode<\/strong><\/p>\n<p>Halo semuanya, saya Angus. Sebagai Product Manager dengan pengalaman lebih dari 7 tahun, saya tahu betapa krusialnya komunikasi yang jelas. Baru-baru ini, saat menjelajahi alur kerja &#8220;Diagram sebagai Kode&#8221; (DaC), saya mengevaluasi secara mendalam kombinasi dari <strong>Mermaid<\/strong> dengan <strong>Visual Paradigm (VP) AI Chatbot<\/strong> dan <strong>VPasCode<\/strong>.<\/p>\n<p id=\"JEZJxlS\"><img alt=\"Alur Kerja Diagram sebagai Kode: Mermaid + Chatbot AI Visual Paradigm + VPasCode: Meningkatkan Komunikasi dan Efisiensi\" class=\"alignnone wp-image-20177 size-full\" decoding=\"async\" height=\"572\" loading=\"lazy\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd-300x168.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd-768x429.png 768w\" width=\"1024\"\/><\/p>\n<p>Hari ini, saya ingin berbagi ulasan produk dan uraian fungsional dari rangkaian alat ini, mencakup nilai intinya, konsep kunci, dan kasus penggunaan praktis. Tujuan saya adalah membantu Anda meningkatkan efisiensi dalam dokumentasi, pengurutan persyaratan, dan komunikasi teknis.<\/p>\n<hr\/>\n<h2>1. Latar Belakang &amp; Titik Sakit: Mengapa Kita Membutuhkan &#8220;Diagram sebagai Kode&#8221;?<\/h2>\n<p>Dalam pekerjaan produk tradisional, kita sering menggunakan alat berbasis GUI seperti Visio, Lucidchart, atau XMind. Meskipun intuitif, alat-alat ini memiliki beberapa titik sakit yang jelas:<\/p>\n<ul>\n<li>\n<p><strong>Kontrol Versi yang Sulit<\/strong>: File biner tidak dapat dibandingkan menggunakan Git-diff, sehingga sulit melacak riwayat perubahan.<\/p>\n<\/li>\n<li>\n<p><strong>Biaya Kolaborasi yang Tinggi<\/strong>: Anggota tim perlu menginstal perangkat lunak tertentu untuk melihat atau mengedit diagram.<\/p>\n<\/li>\n<li>\n<p><strong>Keterlambatan Pemeliharaan<\/strong>: Kode berubah, tetapi diagram tidak, sehingga dokumentasi menjadi tidak selaras dengan sistem yang sebenarnya.<\/p>\n<\/li>\n<\/ul>\n<p><strong>&#8220;Diagram sebagai Kode&#8221; (DaC)<\/strong>lahir untuk menyelesaikan masalah-masalah ini. Dengan mendefinisikan diagram sebagai kode teks, hal ini menghadirkan nilai-nilai inti berikut:<\/p>\n<ul>\n<li>\n<p>\u2705\u00a0<strong>Ramah Kontrol Versi<\/strong>: Kelola diagram seperti kode, mendukung Branch\/Merge.<\/p>\n<\/li>\n<li>\n<p>\u2705\u00a0<strong>Siap untuk Otomasi<\/strong>: Dapat diintegrasikan ke dalam alur kerja CI\/CD untuk secara otomatis menghasilkan diagram arsitektur terbaru.<\/p>\n<\/li>\n<li>\n<p>\u2705\u00a0<strong>Konsistensi Terjamin<\/strong>: Memastikan gaya output yang seragam di seluruh tim melalui templat dan standar kode.<\/p>\n<\/li>\n<li>\n<p>\u2705\u00a0<strong>Reproduksibilitas<\/strong>: Diagram dapat dibangun ulang kapan saja selama file sumber masih ada.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>2. Gambaran Produk: Apa itu Mermaid?<\/h2>\n<p><strong>Mermaid<\/strong> adalah pustaka diagram berbasis JavaScript yang menggunakan sintaks teks mirip Markdown untuk menghasilkan diagram secara dinamis.<\/p>\n<h3>\ud83d\udca1 Mengapa Memilih Mermaid?<\/h3>\n<ul>\n<li>\n<p><strong>Hambatan Masuk Rendah<\/strong>: Sintaks sederhana, sangat mudah dibaca oleh manusia.<\/p>\n<\/li>\n<li>\n<p><strong>Ekosistem Luas<\/strong>: Dukungan native untuk GitHub, GitLab, Notion, VS Code, dan platform mainstream lainnya.<\/p>\n<\/li>\n<li>\n<p><strong>Rendering Waktu Nyata<\/strong>: Pratinjau instan saat kode dimodifikasi, memberikan siklus umpan balik yang singkat.<\/p>\n<\/li>\n<li>\n<p><strong>Sangat Dapat Diperluas<\/strong>: Mendukung tema dan gaya kustom.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>3. Analisis Fitur Utama: Konsep Inti Mermaid<\/h2>\n<p>Saat menggunakan Mermaid, beberapa konsep inti membentuk &#8220;logika produk&#8221;-nya:<\/p>\n<p id=\"dvGOfWW\"><img alt=\"Cheat sheet sintaks Mermaid yang merinci deklarasi diagram, node, sisi, arah tata letak, dan opsi penataan gaya.\" class=\"alignnone size-full wp-image-20188\" decoding=\"async\" height=\"521\" loading=\"lazy\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3.png 986w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3-300x159.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3-768x406.png 768w\" width=\"986\"\/><\/p>\n<h3>3.1 Deklarasi Diagram<\/h3>\n<p>Setiap diagram harus dimulai dengan deklarasi tipe, seperti <code data-backticks=\"1\">graph TD<\/code>. Ini setara dengan mendefinisikan &#8220;mode&#8221; produk.<\/p>\n<h3>3.2 Node &amp; Sisi<\/h3>\n<ul>\n<li>\n<p><strong>Node<\/strong>: Mewakili entitas, langkah proses, atau keadaan.<\/p>\n<\/li>\n<li>\n<p><strong>Sisi<\/strong>: Mendefinisikan hubungan dan aliran data antar node.<\/p>\n<\/li>\n<\/ul>\n<h3>3.3 Arah Tata Letak<\/h3>\n<p>Mengontrol aliran visual untuk menyesuaikan dengan kebiasaan membaca yang berbeda:<\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">TD<\/code>\u00a0\/\u00a0<code data-backticks=\"1\">TB<\/code>: Atas-bawah (default, cocok untuk bagan alir)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">LR<\/code>: Kiri-ke-kanan (cocok untuk garis waktu atau urutan)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">BT<\/code>\u00a0\/\u00a0<code data-backticks=\"1\">RL<\/code>: Bawah-ke-atas \/ Kanan-ke-kiri<\/p>\n<\/li>\n<\/ul>\n<h3>3.4 Semantik Bentuk Node<\/h3>\n<p>Bentuk yang berbeda menyampaikan makna bisnis yang berbeda:<\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">[ ]<\/code>: Persegi panjang (langkah biasa)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">( )<\/code>: Persegi panjang membulat (awal\/akhir)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">(( ))<\/code>: Lingkaran (kejadian)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">{ }<\/code>: Belah ketupat (titik keputusan)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">[\/ \/]<\/code>: Jajar genjang (input\/output)<\/p>\n<\/li>\n<\/ul>\n<h3>3.5 Jenis Sisi<\/h3>\n<ul>\n<li>\n<p><code data-backticks=\"1\">--&gt;<\/code>: Panah solid<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">---<\/code>: Garis tanpa panah<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">-.-&gt;<\/code>: Panah titik-titik (biasanya menunjukkan asinkron atau opsional)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">==&gt;<\/code>: Panah tebal (menekankan jalur utama)<\/p>\n<\/li>\n<\/ul>\n<h3>3.6 Subgraf<\/h3>\n<p>Digunakan untuk memodularisasi dan mengelompokkan sistem kompleks, meningkatkan keterbacaan dan hierarki logis.<\/p>\n<h3>3.7 Pengaturan Gaya<\/h3>\n<p>Mendukung sintaks mirip CSS, memungkinkan penyesuaian warna, batas, dan font untuk memenuhi panduan merek.<\/p>\n<hr\/>\n<h2>4. Pengaturan Lingkungan &amp; Integrasi: Keunggulan Ekosistem Visual Paradigm<\/h2>\n<p>Meskipun Mermaid dapat digunakan di editor teks apa pun, menggabungkannya dengan <strong>Visual Paradigm (VP)<\/strong> rantai alat secara signifikan meningkatkan pengalaman.<\/p>\n<h3>\ud83d\udee0\ufe0f Kombinasi Alat yang Direkomendasikan: Chatbot AI Visual Paradigm + VPasCode<\/h3>\n<p><strong>Visual Paradigm<\/strong> menyediakan dukungan tingkat perusahaan yang kuat, sedangkan <strong>VPasCode<\/strong> plugin berfungsi sebagai jembatan antara GUI dan kode.<\/p>\n<hr\/>\n<h2>5. Memulai: Sintaks Dasar<\/h2>\n<p>Mari kita lihat contoh bagan alur sederhana untuk memahami &#8220;struktur kodenya&#8221;:<\/p>\n<p id=\"uqGQPgN\"><img alt=\"Contoh diagram alur Mermaid VPasCode yang menampilkan jalur Mulai, Keputusan, dan Debug\" class=\"alignnone size-full wp-image-20163\" decoding=\"async\" height=\"876\" loading=\"lazy\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c.png 1919w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-1024x467.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-768x351.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-1536x701.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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\">\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:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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:eNpLL0osyFAIceFSAALH6OCSxKKSWAVdXTsFp2rHgsTsxAyFzLxMhaTUorTSvPTiTPtasEonkJKayMQaBefokNSipMTMbMVYJJmQzJTE7BoFl2iX1KTSdIiMC8RYAKfwIMA=\" \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\">graph TD\n    A[Start] --&gt; B{Apakah ini berfungsi?}\n    B --&gt;|Ya| C[Terbaik!]\n    B --&gt;|Tidak| D[Debug]\n    D --&gt; B\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceFSAALH6OCSxKKSWAVdXTsFp2rHgsTsxAyFzLxMhaTUorTSvPTiTPtasEonkJKayMQaBefokNSipMTMbMVYJJmQzJTE7BoFl2iX1KTSdIiMC8RYAKfwIMA=\" \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:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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><strong>Uraian Kode:<\/strong><\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">graph TD<\/code>: Mendefinisikan bagan alur dari atas ke bawah.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">A[Start]<\/code>: Simpul dengan ID &#8216;A&#8217;, menampilkan teks &#8220;Start&#8221;.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">--&gt;<\/code>: Mendefinisikan arah aliran.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">B{...}<\/code>: Simpul berlian, mewakili keputusan.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">|Ya|<\/code>: Label pada garis penghubung.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>6. Kasus Penggunaan Berbasis Skenario: Jenis Diagram Umum<\/h2>\n<p>Sebagai Manajer Produk (PM), kami sering kali perlu menggambar berbagai jenis diagram. Berikut adalah skenario aplikasi frekuensi tinggi untuk Mermaid:<\/p>\n<h3>6.1 Diagram Alir<\/h3>\n<p><em>Kasus Penggunaan: Login pengguna, alur pemrosesan pesanan<br \/>\n<\/em><\/p>\n<p id=\"wvBvjha\"><img alt=\"Diagram alur Mermaid VPasCode yang menampilkan logika masuk pengguna, validasi kredensial, dan masuk ke dasbor.\" class=\"alignnone size-full wp-image-20165\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1915px) 100vw, 1915px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5.png 1915w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-1024x466.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-768x349.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-1536x699.png 1536w\" width=\"1915\"\/><\/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:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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\">\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:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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:eNpLL0osyFDwCeLlUgACx2if\/PTMPIWA1Lz09NK8xFgFXV07BafosMSczJTE4kwF76LUlNS84szEnFiIDieQihqwfI2Cc7RvYnFptoJLYnFGUn5iUQqKohCgEdkKUKUu0SGJuQWZOdmJINuKgaRrUVF+EVSDC9heRwDhIC+F\" \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\">graph LR\r\n    A[Login Pengguna] --&gt; B[Validasi Kredensial]\r\n    B --&gt;|Valid| C[Masuk Dashboard]\r\n    B --&gt;|Tidak Valid| D[Tampilkan Pesan Error]\r\n    D --&gt; A\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCeLlUgACx2if\/PTMPIWA1Lz09NK8xFgFXV07BafosMSczJTE4kwF76LUlNS84szEnFiIDieQihqwfI2Cc7RvYnFptoJLYnFGUn5iUQqKohCgEdkKUKUu0SGJuQWZOdmJINuKgaRrUVF+EVSDC9heRwDhIC+F\" \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:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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<h3>6.2 Diagram Urutan<\/h3>\n<p><em>Kasus Penggunaan: Interaksi API, panggilan mikroservice<br \/>\n<\/em><\/p>\n<p id=\"OGiznZz\"><img alt=\"Diagram urutan Mermaid VPasCode yang mengilustrasikan interaksi API antara Pengguna, APIGateway, dan Database.\" class=\"alignnone size-full wp-image-20166\" decoding=\"async\" height=\"873\" loading=\"lazy\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b.png 1918w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-1024x466.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-1536x699.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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\">\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:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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:eNpljkEKwjAQRfeCd8gFeoEuCkJBxU0VeoDfMsjQJsZMivT2Tg2hYGYxi\/lvHl\/ovZAbqWU8A+zxYHQ8QuSRPVw0vVAor6fuekakD9YyaxExQCglaW+Wqmn2t9p0FCy7CLjfR+J2QOksqs19obCaB025YY6qP+mN7ICZJ5VeIDwXVuW3LkpyYKtK8S8nX3O8Urc=\" \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\">sequenceDiagram\r\n    participant User\r\n    participant APIGateway\r\n    participant Database\r\n    \r\n    User-&gt;&gt;APIGateway: Permintaan Data\r\n    APIGateway-&gt;&gt;Database: Query Rekam\r\n    Database--&gt;&gt;APIGateway: Kembalikan Hasil\r\n    APIGateway--&gt;&gt;User: Kirim Respons\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljkEKwjAQRfeCd8gFeoEuCkJBxU0VeoDfMsjQJsZMivT2Tg2hYGYxi\/lvHl\/ovZAbqWU8A+zxYHQ8QuSRPVw0vVAor6fuekakD9YyaxExQCglaW+Wqmn2t9p0FCy7CLjfR+J2QOksqs19obCaB025YY6qP+mN7ICZJ5VeIDwXVuW3LkpyYKtK8S8nX3O8Urc=\" \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:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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<h3>6.3 Diagram Kelas<\/h3>\n<p><em>Kasus Penggunaan: Desain model domain, pengurutan hubungan objek<br \/>\n<\/em><\/p>\n<p id=\"ELqcWnQ\"><img alt=\"Diagram kelas Mermaid di VPasCode yang menampilkan hubungan antara ProductManager dan ScrumTeam.\" class=\"alignnone size-full wp-image-20167\" decoding=\"async\" height=\"872\" loading=\"lazy\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8.png 1919w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-1024x465.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-768x349.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-1536x698.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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\">\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:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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:eNptkLsKwkAQRXvBf9hSkfyAhUXUTiUkWlhONpe4ZB9hdqOC+O8mBGEj3mZgDsO5jNTk\/U5RzWTmM9FHDhuRsas6GY5kqQaL18iGrIrAytbiRAbRVtkg9s8WrGAlriD2Ed0yKCB3VBlqF8uYODuILh6cw\/dn8vbl73HEtQrJnTmDzKTRQfkgjjAlJtKi7YuGTJO1feGJNcdd4ZGSbLSr\/\/p+HpAkm0i+Fim4cZpKx+TVB4j\/Wi0=\" \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\">classDiagram\r\n    class ProductManager {\r\n        +String Name\r\n        +int ExperienceYears\r\n        +CreateRoadmap()\r\n        +ConductUserResearch()\r\n    }\r\n    \r\n    class ScrumTeam {\r\n        +List Members\r\n        +SprintPlanning()\r\n        +ReviewBacklog()\r\n    }\r\n    \r\n    ProductManager --&gt; ScrumTeam : Berkolaborasi\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkLsKwkAQRXvBf9hSkfyAhUXUTiUkWlhONpe4ZB9hdqOC+O8mBGEj3mZgDsO5jNTk\/U5RzWTmM9FHDhuRsas6GY5kqQaL18iGrIrAytbiRAbRVtkg9s8WrGAlriD2Ed0yKCB3VBlqF8uYODuILh6cw\/dn8vbl73HEtQrJnTmDzKTRQfkgjjAlJtKi7YuGTJO1feGJNcdd4ZGSbLSr\/\/p+HpAkm0i+Fim4cZpKx+TVB4j\/Wi0=\" \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:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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<h3>6.4 Diagram State<\/h3>\n<p><em>Kasus Penggunaan: Transisi status pesanan, alur kerja persetujuan<br \/>\n<\/em><\/p>\n<p id=\"mnRDgmO\"><img alt=\"Diagram keadaan Mermaid VPasCode yang mengilustrasikan transisi status pesanan dari Draf ke Disetujui dan Diterbitkan.\" class=\"alignnone size-full wp-image-20168\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1911px) 100vw, 1911px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1.png 1911w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-1024x467.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-1536x700.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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\">\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:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" \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\">stateDiagram-v2\r\n    [*] --&gt; Draft\r\n    Draft --&gt; UnderReview : Submit\r\n    UnderReview --&gt; Approved : Pass\r\n    UnderReview --&gt; Draft : Reject for Changes\r\n    Approved --&gt; Published : Publish\r\n    Published --&gt; [*]\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" \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:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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<h3>6.5 Diagram Relasi Entitas (ERD)<\/h3>\n<p><em>Kasus Penggunaan: Desain basis data, pemodelan data<\/em><\/p>\n<p id=\"XibenPl\"><img alt=\"ERD Mermaid VPasCode yang memvisualisasikan hubungan skema database Pengguna, Pesanan, dan Produk.\" class=\"alignnone size-full wp-image-20169\" decoding=\"async\" height=\"870\" loading=\"lazy\" sizes=\"auto, (max-width: 1922px) 100vw, 1922px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031.png 1922w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-1024x464.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-768x348.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-1536x695.png 1536w\" width=\"1922\"\/><\/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:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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\">\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:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" \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\">erDiagram\r\n    USER ||--o{ ORDER : Places\r\n    ORDER ||--|{ PRODUCT : Contains\r\n    USER {\r\n        int id\r\n        string name\r\n        string email\r\n    }\r\n    ORDER {\r\n        int id\r\n        date orderDate\r\n        float totalAmount\r\n    }\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" \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:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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<h3>6.6 Diagram Gantt<\/h3>\n<p><em>Kasus Penggunaan: Penjadwalan proyek, tampilan peta jalan<br \/>\n<\/em><\/p>\n<p id=\"xsaqPUB\"><img alt=\"Diagram Gantt Mermaid VPasCode yang menampilkan garis waktu pengembangan produk dengan fase perencanaan, pengembangan, dan pengujian.\" class=\"alignnone size-full wp-image-20170\" decoding=\"async\" height=\"876\" loading=\"lazy\" sizes=\"auto, (max-width: 1911px) 100vw, 1911px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d.png 1911w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-300x138.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-1024x469.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-768x352.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-1536x704.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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\">\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:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" \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\">gantt\r\n    title Product Development Timeline\r\n    dateFormat  YYYY-MM-DD\r\n    section Planning Phase\r\n    Requirements Analysis     :2026-01-01, 30d\r\n    UI Design       :2026-02-01, 20d\r\n    section Development Phase\r\n    Backend Dev     :2026-02-15, 45d\r\n    Frontend Dev     :2026-03-01, 40d\r\n    section Testing Phase\r\n    QA Testing       :2026-04-15, 20d\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" \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:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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<h3>6.7 Diagram Lingkaran<\/h3>\n<p><em>Kasus Penggunaan: Alokasi sumber daya, analisis distribusi waktu<br \/>\n<\/em><\/p>\n<p id=\"QgVNCJC\"><img alt=\"Diagram pie Mermaid VPasCode yang menampilkan alokasi waktu kerja untuk Riset Pengguna, Perencanaan Peta Jalan, dan Analisis Data.\" class=\"alignnone size-full wp-image-20171\" decoding=\"async\" height=\"874\" loading=\"lazy\" sizes=\"auto, (max-width: 1914px) 100vw, 1914px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f.png 1914w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-1024x468.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-768x351.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-1536x701.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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\">\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:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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:eNpVjrEKwkAQRHvBf1jyBSrY2AVSqUWwsR5kOda7TEJuU\/j3XhJTuOXMe8MOpuLmSaVOfUQ2eSL6JDcd39jvpFz1sKwurTKEiajkIqfzr2p1VL5AgAVwyBUJXJDDZmPAbHdgiPPwoHRjWLHjtlQTybJlaeD4G2j6OHXFKc8txpbfYeQHa\/YFSWw4WQ==\" \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\">pie title Alokasi Waktu Kerja\r\n    \"Riset Pengguna\" : 25\r\n    \"Perencanaan Peta Jalan\" : 20\r\n    \"Rapat Pemangku Kepentingan\" : 15\r\n    \"Analisis Data\" : 20\r\n    \"Dokumentasi\" : 10\r\n    \"Lainnya\" : 10\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjrEKwkAQRHvBf1jyBSrY2AVSqUWwsR5kOda7TEJuU\/j3XhJTuOXMe8MOpuLmSaVOfUQ2eSL6JDcd39jvpFz1sKwurTKEiajkIqfzr2p1VL5AgAVwyBUJXJDDZmPAbHdgiPPwoHRjWLHjtlQTybJlaeD4G2j6OHXFKc8txpbfYeQHa\/YFSWw4WQ==\" \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:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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<hr\/>\n<h2>7. Tinjauan Fitur Lanjutan: Styling, Subgraph, dan Interaksi<\/h2>\n<h3>7.1 Subgraph \u2013 Berpikir Modular<\/h3>\n<p>Ketika sistem kompleks, gunakan subgraph untuk memecah diagram besar menjadi blok-blok logis.<\/p>\n<p id=\"vSPaiqV\"><img alt=\"Diagram Mermaid VPasCode yang mendemonstrasikan subgraf untuk memodularisasi lapisan sistem frontend dan backend.\" class=\"alignnone size-full wp-image-20172\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1911px) 100vw, 1911px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b.png 1911w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-1024x467.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-1536x700.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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\">\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:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjHQtyMrMTizMVglITk0tiEVJO0QGlxSWJ2YkK3vm5Bfl5qXkKoZ5QeaBBEAaaLU6JydmYljhHB6cWlaUWKTgGeCJZ4BLtkliSmJRYnIrdVEcFXV07BWcIxxnMcQEA3Aw4iw==\" \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\">graph TB\r\n    subgraph FrontendLayer\r\n        A[Aplikasi React]\r\n        B[Pustaka Komponen UI]\r\n    end\r\n    \r\n    subgraph BackendLayer\r\n        C[Server API]\r\n        D[Database]\r\n    end\r\n    \r\n    A --&gt; C\r\n    C --&gt; D\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjHQtyMrMTizMVglITk0tiEVJO0QGlxSWJ2YkK3vm5Bfl5qXkKoZ5QeaBBEAaaLU6JydmYljhHB6cWlaUWKTgGeCJZ4BLtkliSmJRYnIrdVEcFXV07BWcIxxnMcQEA3Aw4iw==\" \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:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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<h3>7.2 Styling \u2013 Konsistensi Merek<\/h3>\n<p>Anda dapat menambahkan gaya CSS ke node tertentu menggunakan kata kunci <code data-backticks=\"1\">style<\/code> .<\/p>\n<p id=\"LvZAHxQ\"><img alt=\"Antarmuka VPasCode yang menampilkan diagram Mermaid dengan gaya CSS kustom yang diterapkan pada node Mulai, Pemrosesan, dan Akhir.\" class=\"alignnone size-full wp-image-20173\" decoding=\"async\" height=\"870\" loading=\"lazy\" sizes=\"auto, (max-width: 1914px) 100vw, 1914px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24.png 1914w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-1024x465.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-768x349.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-1536x698.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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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\">\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:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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:eNpLL0osyFAIceHlUgACx2jf0pzEzFgFXV07BafogKL84tTiWIicE1jQOTo4NSe1GKgGIgohi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwAetUJM\" \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\">graph TD\r\n    A[Mulai] --&gt; B[Proses]\r\n    B --&gt; C[Selesai]\r\n    \r\n    style A fill:#f9f,stroke:#333,stroke-width:4px\r\n    style B fill:#bbf,stroke:#333,stroke-width:2px\r\n    style C fill:#bfb,stroke:#333,stroke-width:2px\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx2jf0pzEzFgFXV07BafogKL84tTiWIicE1jQOTo4NSe1GKgGIgohi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwAetUJM\" \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:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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<h3>7.3 Peristiwa Klik dan Tautan<\/h3>\n<p>Tingkatkan interaktivitas, menjadikan diagram sebagai dokumen yang dapat dinavigasi.<\/p>\n<p id=\"mpjkdIG\"><img alt=\"Kode diagram Mermaid VPasCode yang membuat tautan yang dapat diklik dari Lihat Dokumen ke Situs Utama Visual Paradigm.\" class=\"alignnone size-full wp-image-20185\" decoding=\"async\" height=\"873\" loading=\"lazy\" sizes=\"auto, (max-width: 1917px) 100vw, 1917px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d.png 1917w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-1024x466.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-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\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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\">\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:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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:eNp9zLsOgkAQBdDexH+42R7oLUwwdlAYjTaEYoLIjss+AjPS8PEaY21\/coaJkkV9xnZTNjVbEhyjU9+HFlm2X6uRHTSIOtTRJ5IVh+bCojOuQp5w41lpxIkmuvPg20\/Ujdw5lLBT\/4CxImneFcWyLPnri7P0w3kXvYGpNDw1DIw\/r3kDIzg6mA==\" \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\">graph LR \r\nA[Lihat Dokumen] --&gt;|Klik untuk Lompat| B[Situs Utama Visual Paradigm] \r\nclick A href \"https:\/\/www.visual-paradigm.com\" \"Kunjungi Situs Utama Visual Paradigm\"\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9zLsOgkAQBdDexH+42R7oLUwwdlAYjTaEYoLIjss+AjPS8PEaY21\/coaJkkV9xnZTNjVbEhyjU9+HFlm2X6uRHTSIOtTRJ5IVh+bCojOuQp5w41lpxIkmuvPg20\/Ujdw5lLBT\/4CxImneFcWyLPnri7P0w3kXvYGpNDw1DIw\/r3kDIzg6mA==\" \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:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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<hr\/>\n<h2>8. Alur Kerja Berbasis AI: VP AI Chatbot + VPasCode dalam Aksi<\/h2>\n<p>Ini adalah bagian yang paling ingin saya bagikan.<strong>Chatbot AI Visual Paradigm<\/strong> dikombinasikan dengan <strong>VPasCode<\/strong> telah sepenuhnya mengubah cara kita membuat diagram.<\/p>\n<h3>8.1 Keunggulan Inti<\/h3>\n<ol>\n<li>\n<p><strong>Generasi Bahasa Alami<\/strong>: Cukup deskripsikan kebutuhan, dan AI secara otomatis menghasilkan kode Mermaid.<\/p>\n<\/li>\n<li>\n<p><strong>Konversi Dua Arah<\/strong>: Konversi diagram GUI yang ada menjadi kode, atau render kode menjadi GUI untuk penyesuaian halus.<\/p>\n<\/li>\n<li>\n<p><strong>Validasi Cerdas<\/strong>: Secara otomatis mendeteksi kesalahan sintaks dan memberikan saran perbaikan.<\/p>\n<\/li>\n<li>\n<p><strong>Ekspor Multi-Format<\/strong>: Ekspor satu klik ke PNG, SVG, PDF, nyaman untuk disematkan dalam presentasi atau laporan.<\/p>\n<\/li>\n<\/ol>\n<h3>8.2 Demo Alur Kerja Praktis<\/h3>\n<p><strong>Langkah 1: Deskripsikan Kebutuhan dalam Bahasa Alami<\/strong><\/p>\n<blockquote>\n<p><em>Saya memasukkan ke VP AI Chatbot:<\/em><br \/>\n&#8220;Saya memerlukan diagram urutan untuk alur autentikasi pengguna OAuth2, termasuk Pengguna, Aplikasi Klien, Server Otorisasi, dan Server Sumber Daya.&#8221;<\/p>\n<\/blockquote>\n<p><strong>Langkah 2: AI Menghasilkan Kode Awal<\/strong><br \/>\n<em>AI dengan cepat menghasilkan kode Mermaid berikut:<br \/>\n<\/em><\/p>\n<p id=\"dgYigOg\"><img alt=\"Diagram urutan Mermaid yang mengilustrasikan alur autentikasi pengguna OAuth2 antara Pengguna, Aplikasi Klien, Server Otorisasi, dan Server Sumber Daya.\" class=\"alignnone size-full wp-image-20184\" decoding=\"async\" height=\"711\" loading=\"lazy\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6.png 878w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6-300x243.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6-768x622.png 768w\" width=\"878\"\/><\/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:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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\">\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:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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:eNqNkEkOwjAMRfdI3CEX6AVYIFWwAAECMRzAFKtYzUSccn6SlqGhRSILL+L3\/7fNeKtRFzgnKB2o8UiEZ8F5KsiC9uLE6Pq\/M0mofW5tv5XX\/npAdx+S7ZFN7Qrs9tsaY7Lp9O07ETt0irQH0GJtStIt9wYC\/ElK6K03jhiYWsWHyoIm5kzEEZQlWQV4ARJUGvEcpeu+Aa6riK8cXlAzgRwy70y\/QnUGSY3GXPB7qF9rbOIO4mgq1P8HNLjIK0buu6cnTw6V75YibFO+LFpxKvidOgcP33EDB47YA7yLyiI=\" \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\">sequenceDiagram\r\n    participant User\r\n    participant ClientApp\r\n    participant AuthServer\r\n    participant ResourceServer\r\n    \r\n    User-&gt;&gt;ClientApp: Permintaan Login\r\n    ClientApp-&gt;&gt;AuthServer: Permintaan Otorisasi\r\n    AuthServer--&gt;&gt;User: Tampilkan Halaman Login\r\n    User-&gt;&gt;AuthServer: Masukkan Kredensial\r\n    AuthServer--&gt;&gt;ClientApp: Kembalikan Kode Otorisasi\r\n    ClientApp-&gt;&gt;AuthServer: Minta Token\r\n    AuthServer--&gt;&gt;ClientApp: Kembalikan Token Akses\r\n    ClientApp-&gt;&gt;ResourceServer: Permintaan API dengan Token\r\n    ResourceServer--&gt;&gt;ClientApp: Kembalikan Data\r\n    ClientApp--&gt;&gt;User: Tampilkan Data\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkEkOwjAMRfdI3CEX6AVYIFWwAAECMRzAFKtYzUSccn6SlqGhRSILL+L3\/7fNeKtRFzgnKB2o8UiEZ8F5KsiC9uLE6Pq\/M0mofW5tv5XX\/npAdx+S7ZFN7Qrs9tsaY7Lp9O07ETt0irQH0GJtStIt9wYC\/ElK6K03jhiYWsWHyoIm5kzEEZQlWQV4ARJUGvEcpeu+Aa6riK8cXlAzgRwy70y\/QnUGSY3GXPB7qF9rbOIO4mgq1P8HNLjIK0buu6cnTw6V75YibFO+LFpxKvidOgcP33EDB47YA7yLyiI=\" \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:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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><strong>Langkah 3: Optimasi Iteratif<\/strong><\/p>\n<blockquote>\n<p><em>Saya melanjutkan:<\/em><br \/>\n\u201cSilakan tambahkan cabang penanganan kesalahan untuk \u2018kredensial tidak valid\u2019.\u201d<\/p>\n<\/blockquote>\n<p><em>AI memperbarui kode, menambahkan logika kondisional.<\/em><\/p>\n<p><strong>Langkah 4: Ekspor dan Integrasi<\/strong><br \/>\nGunakan VPasCode untuk mengekspor kode akhir sebagai SVG beresolusi tinggi dan menyematkannya ke dalam Dokumen Persyaratan Produk (PRD) saya. Sementara itu, komit file sumbernya ke repositori Git untuk memastikan anggota tim lain dapat melacak dan memodifikasinya.<code data-backticks=\"1\">.mmd<\/code> file sumber ke repositori Git untuk memastikan anggota tim lain dapat melacak dan memodifikasinya.<\/p>\n<h3>8.3 Kasus Komprehensif: Alur Kerja Manajemen Produk<\/h3>\n<p>Berikut adalah bagan alur siklus hidup produk lengkap yang dihasilkan dengan bantuan AI:<\/p>\n<p id=\"UGlMfDd\"><img alt=\"Diagram alur vertikal yang menampilkan fase siklus hidup produk: Penemuan, Perencanaan, Eksekusi, dan Loop Umpan Balik.\" class=\"alignnone size-full wp-image-20183\" decoding=\"async\" height=\"1621\" loading=\"lazy\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d522c3d857.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d522c3d857.png 387w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d522c3d857-367x1536.png 367w\" width=\"387\"\/><\/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:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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\">\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:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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:eNqFkstO6zAQhvdIvINVJFZUSqSDUFkcqemF0lJULtVZWCwmZRyGOE7kC9C3xzGldY6Q8CrKfPPPP5dCQ\/PCHrPjI+afcXkRfozJbOo31Fvem4JBtkKFlQPVe\/oC2zfk92TQshUY0E+s3\/\/LMv4P3kFtQEObUhROQZSRBWjEhwokGTJsUVcNWrIkImoUqDEfoyDlMbb0BSS87BBUz18f\/1leSVCKVLF3rNEbUdA1PQ7iE5458M7RApt7bRURk0BM+SMq60pQrZLZ+o5sB5sG7IqvtbMtlcGmlHXxi8nJB26cpVrtXE5Kg6UzFFu8CsozHnXAHhpNykbQLEDXvJ0yVjmoouPuOoTnfP1KbFTnwE7Z3TCKz0N84TfoF\/GL5ynic+67470HKqUzbF01oWFJZex7ETRv+MJVjZPtTJZoNZURchOQJY8UfrqTZcBuD3cyA0MyAm4DMPzZt91KPBwwEyTl5Qmm4lyIM2N1XeLlSZKeXwzyOOH7fHa8EOIPpnt+kF9Aksb8fpOHAiJKSNJB3k34HuO+AKadAkmapJ+ZK\/1F\" \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\">graph TB\r\n    subgraph Discovery[\"Fase Penemuan\"]\r\n        A[Riset Pasar] --&gt; B[Wawancara Pengguna]\r\n        B --&gt; C[Analisis Kompetitif]\r\n        C --&gt; D[Definisi Masalah]\r\n    end\r\n    \r\n    subgraph Planning[\"Fase Perencanaan\"]\r\n        D --&gt; E[Buat Peta Jalan]\r\n        E --&gt; F[Tentukan Persyaratan]\r\n        F --&gt; G[Urutkan Backlog]\r\n    end\r\n    \r\n    subgraph Execution[\"Fase Eksekusi\"]\r\n        G --&gt; H[Perencanaan Sprint]\r\n        H --&gt; I[Pengembangan]\r\n        I --&gt; J[Uji Coba &amp; QA]\r\n        J --&gt; K[Rilis]\r\n    end\r\n    \r\n    subgraph Feedback[\"Siklus Umpan Balik\"]\r\n        K --&gt; L[Kumpulkan Metrik]\r\n        L --&gt; M[Umpan Balik Pengguna]\r\n        M --&gt; N[Analisis Hasil]\r\n        N --&gt; A\r\n    end\r\n    \r\n    style Discovery fill:#e1f5ff,stroke:#01579b\r\n    style Planning fill:#fff4e1,stroke:#9b7a01\r\n    style Execution fill:#e1ffe1,stroke:#019b01\r\n    style Feedback fill:#ffe1e1,stroke:#9b0101\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkstO6zAQhvdIvINVJFZUSqSDUFkcqemF0lJULtVZWCwmZRyGOE7kC9C3xzGldY6Q8CrKfPPPP5dCQ\/PCHrPjI+afcXkRfozJbOo31Fvem4JBtkKFlQPVe\/oC2zfk92TQshUY0E+s3\/\/LMv4P3kFtQEObUhROQZSRBWjEhwokGTJsUVcNWrIkImoUqDEfoyDlMbb0BSS87BBUz18f\/1leSVCKVLF3rNEbUdA1PQ7iE5458M7RApt7bRURk0BM+SMq60pQrZLZ+o5sB5sG7IqvtbMtlcGmlHXxi8nJB26cpVrtXE5Kg6UzFFu8CsozHnXAHhpNykbQLEDXvJ0yVjmoouPuOoTnfP1KbFTnwE7Z3TCKz0N84TfoF\/GL5ynic+67470HKqUzbF01oWFJZex7ETRv+MJVjZPtTJZoNZURchOQJY8UfrqTZcBuD3cyA0MyAm4DMPzZt91KPBwwEyTl5Qmm4lyIM2N1XeLlSZKeXwzyOOH7fHa8EOIPpnt+kF9Aksb8fpOHAiJKSNJB3k34HuO+AKadAkmapJ+ZK\/1F\" \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:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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<h3>8.4 Tips Penggunaan<\/h3>\n<ul>\n<li>\n<p><strong>Jadilah Spesifik<\/strong>: Semakin detail prompt Anda kepada AI (termasuk nama node dan jenis hubungan), semakin akurat kode yang dihasilkan.<\/p>\n<\/li>\n<li>\n<p><strong>Langkah Kecil<\/strong>: Hasilkan kerangka terlebih dahulu, lalu secara bertahap tambahkan detail.<\/p>\n<\/li>\n<li>\n<p><strong>Manfaatkan Templat<\/strong>: VP memiliki banyak templat bawaan standar industri yang dapat digunakan langsung.<\/p>\n<\/li>\n<li>\n<p><strong>Validasi Dini<\/strong>: Biarkan AI memeriksa legalitas sintaks sebelum melakukan modifikasi skala besar.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>9. Praktik Terbaik: Tips untuk Menghindari Jebakan<\/h2>\n<p>Berdasarkan pengalaman saya, berikut beberapa rekomendasi:<\/p>\n<h3>9.1 Konvensi Penamaan<\/h3>\n<ul>\n<li>\n<p><strong>ID yang Bermakna<\/strong>: Cobalah gunakan <code data-backticks=\"1\">Mulai<\/code>,\u00a0<code data-backticks=\"1\">Proses<\/code>,\u00a0<code data-backticks=\"1\">Selesai<\/code> alih-alih <code data-backticks=\"1\">A<\/code>,\u00a0<code data-backticks=\"1\">B<\/code>,\u00a0<code data-backticks=\"1\">C<\/code> untuk kemudahan pemeliharaan.<\/p>\n<\/li>\n<li>\n<p><strong>Label Ringkas<\/strong>: Pertahankan teks node singkat; hindari paragraf panjang.<\/p>\n<\/li>\n<\/ul>\n<h3>9.2 Optimasi Tata Letak<\/h3>\n<ul>\n<li>\n<p><strong>Pilih Arah yang Tepat<\/strong>: Gunakan <code data-backticks=\"1\">TD<\/code> untuk bagan alir, <code data-backticks=\"1\">LR<\/code> untuk urutan.<\/p>\n<\/li>\n<li>\n<p><strong>Kurangi Perpotongan<\/strong>: Kurangi kerumitan garis dengan menyesuaikan urutan node atau menggunakan subgraf.<\/p>\n<\/li>\n<li>\n<p><strong>Kendalikan Kompleksitas<\/strong>: Jika satu diagram melebihi 20 node, pertimbangkan untuk membaginya menjadi beberapa sub-diagram atau grafik yang saling terkait.<\/p>\n<\/li>\n<\/ul>\n<h3>9.3 Strategi Pemeliharaan<\/h3>\n<ul>\n<li>\n<p><strong>Manajemen Git<\/strong>: Pastikan untuk menyertakan <code data-backticks=\"1\">.mmd<\/code> file dalam kontrol versi.<\/p>\n<\/li>\n<li>\n<p><strong>Konteks Dokumen<\/strong>: Jelaskan latar belakang bisnis dan ruang lingkang diagram dalam komentar kode.<\/p>\n<\/li>\n<li>\n<p><strong>Tinjauan Berkala<\/strong>: Secara berkala periksa apakah diagram masih mencerminkan realitas seiring iterasi produk.<\/p>\n<\/li>\n<\/ul>\n<h3>9.4 Aksesibilitas<\/h3>\n<ul>\n<li>\n<p><strong>Sediakan Teks Alternatif<\/strong>: Tambahkan deskripsi teks terperinci untuk diagram guna membantu pengguna tunanetra atau pembaca teks.<\/p>\n<\/li>\n<li>\n<p><strong>Kontras Warna<\/strong>: Pastikan warna gaya memiliki kontras yang cukup.<\/p>\n<\/li>\n<\/ul>\n<h3>9.5 Kolaborasi Tim<\/h3>\n<ul>\n<li>\n<p><strong>Bagikan Kode Sumber<\/strong>: Jangan hanya berbagi gambar; bagikan file sumber.<\/p>\n<\/li>\n<li>\n<p><strong>Gaya Terpadu<\/strong>: Sepakati skema warna dan konvensi penamaan dalam tim.<\/p>\n<\/li>\n<li>\n<p><strong>Tinjauan Kode<\/strong>: Sertakan perubahan kode diagram dalam proses tinjauan PR.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>10. Studi Kasus Lengkap<\/h2>\n<h3>Kasus 1: Alur Kerja Sprint Agile<\/h3>\n<p id=\"EIKoJTD\"><img alt=\"Diagram Mermaid yang mengilustrasikan Alur Kerja Sprint Agile dengan fase Perencanaan Sprint, Pekerjaan Harian, dan Tinjauan &amp; Retro.\" class=\"alignnone size-full wp-image-20182\" decoding=\"async\" height=\"200\" loading=\"lazy\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330.png 2560w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-300x23.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-1024x80.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-768x60.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-1536x120.png 1536w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-2048x160.png 2048w\" width=\"2560\"\/><\/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:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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\">\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:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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:eNp1ks1OwzAQhO9IvINVJG69gUAckNqmv+FQtUUcrB628SY4djaR44D69jhOFNwKfIgizzc748SZgeqTve1ub5hbdXPK\/Ma+MpLsVgORpIyPtmiQEiAA6rXRsbO0a8J3+CXxm00hUbrMjmw8fmVT7lxKmtYzQyMtBJapR2Y8LgtpCySmkB2avBnm9yyS6F6uCkYg9fmjNKrtptDkbcoKjAQKm818TMT3Fkg0VU8EQOSBuatKGRYnoOxCnnt5wQ+ScmjLxaXAQF94fentTf47+r\/a3Xfio2Hevduypgw7L\/3MFY+wKKm2BmqpHDkcM0BXHl3zuCmqRrfUe1G55xS0VAG39tyG+6y6QmVlGsgbL8d8LZCc4uJq6fLMCdrkv48Ue8\/k4pT2rPHq6rBUav1ylyT4mKYhNvzAnhAPKASERH+nOjl9Fk8CfgAvZcI+\" \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\">graph LR\r\n    subgraph SprintPlanning[\"Perencanaan Sprint\"]\r\n        A[Review Backlog] --&gt; B[Perkiraan Cerita]\r\n        B --&gt; C[Komitmen ke Tujuan Sprint]\r\n    end\r\n    \r\n    subgraph DailyWork[\"Pekerjaan Harian\"]\r\n        C --&gt; D[Standup Harian]\r\n        D --&gt; E[Pengembangan]\r\n        E --&gt; F[Tinjauan Kode]\r\n        F --&gt; G[Pengujian]\r\n    end\r\n    \r\n    subgraph Review[\"Tinjauan &amp; Retro\"]\r\n        G --&gt; H[Demonstrasikan Pekerjaan]\r\n        H --&gt; I[Kumpulkan Umpan Balik]\r\n        I --&gt; J[Retrospektif]\r\n        J --&gt; K[Identifikasi Perbaikan]\r\n    end\r\n    \r\n    K --&gt; A\r\n    \r\n    style SprintPlanning fill:#cce5ff\r\n    style DailyWork fill:#d4edda\r\n    style Review fill:#f8d7da\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1ks1OwzAQhO9IvINVJG69gUAckNqmv+FQtUUcrB628SY4djaR44D69jhOFNwKfIgizzc748SZgeqTve1ub5hbdXPK\/Ma+MpLsVgORpIyPtmiQEiAA6rXRsbO0a8J3+CXxm00hUbrMjmw8fmVT7lxKmtYzQyMtBJapR2Y8LgtpCySmkB2avBnm9yyS6F6uCkYg9fmjNKrtptDkbcoKjAQKm818TMT3Fkg0VU8EQOSBuatKGRYnoOxCnnt5wQ+ScmjLxaXAQF94fentTf47+r\/a3Xfio2Hevduypgw7L\/3MFY+wKKm2BmqpHDkcM0BXHl3zuCmqRrfUe1G55xS0VAG39tyG+6y6QmVlGsgbL8d8LZCc4uJq6fLMCdrkv48Ue8\/k4pT2rPHq6rBUav1ylyT4mKYhNvzAnhAPKASERH+nOjl9Fk8CfgAvZcI+\" \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:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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<h3>Kasus 2: Gambaran Umum Arsitektur Microservices<\/h3>\n<p id=\"mYEhBIm\"><img alt=\"Diagram yang menampilkan arsitektur mikro layanan dengan API Gateway, Layanan Pesanan, Pembayaran, Pengguna, Otorisasi, dan Notifikasi yang terhubung ke infrastruktur.\" class=\"alignnone size-full wp-image-20181\" decoding=\"async\" height=\"629\" loading=\"lazy\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8.png 1003w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8-300x188.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8-768x482.png 768w\" width=\"1003\"\/><\/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:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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\">\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:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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:eNp1ksluwjAQhu+V+g5ReqEHVG5AD5UCSAhVtHQTB6uHcTIJFsGpvLTK2zdeoBNEfbA9\/3y2Z3Gl4GuXvM+ur5JuzGuB0rBHtyRb5HfrhosaP4M3zNryyh\/KNqslGPyBlqVx47Q00m4st4x4ogNlcfG+N1TfIkfN0rXIVaOjSe\/LrNmxyDmjC1bsQQuCfHTnTsgGZVVZCcT\/rIoeoEGCJP4NtAdXgz\/iwKEF1YOeGiNKkYMRjTyRQSTh\/JfoSpYKtFE2N1YhS0\/2vrNpuosZGyzAAAeNt0SfQ75DNvBL8oqF0NT7YtEiy6RRAmTI8HJAodvJcPjQNSpIy603XZ17gqtqT\/BlDIrfejHW7lz2AQXRb71IS0iDck97YBH\/pHv6suDzP3\/sSMVYelrsg2lrJL83KUVd39+UZTEejShy\/JARmIxzRE6BfiMjNp2UfDr5BRBw7ZM=\" \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\">graph TB\r\n    Client[Klien Web\/Mobile]\r\n    \r\n    subgraph APIGateway[\"Gateway API\"]\r\n        GW[Gateway API]\r\n    end\r\n    \r\n    subgraph Services[\"Microservices\"]\r\n        Auth[Service Autentikasi]\r\n        User[Service Pengguna]\r\n        Order[Service Pesanan]\r\n        Payment[Service Pembayaran]\r\n        Notification[Service Notifikasi]\r\n    end\r\n    \r\n    subgraph Infrastructure[\"Infrastruktur\"]\r\n        DB[(Database)]\r\n        Cache[(Cache Redis)]\r\n        Queue[Antrian Pesan]\r\n    end\r\n    \r\n    Client --&gt; GW\r\n    GW --&gt; Auth\r\n    GW --&gt; User\r\n    GW --&gt; Order\r\n    Order --&gt; Payment\r\n    Order --&gt; Queue\r\n    Queue --&gt; Notification\r\n    \r\n    Auth --&gt; DB\r\n    User --&gt; DB\r\n    User --&gt; Cache\r\n    Order --&gt; DB\r\n    Payment --&gt; DB\r\n    \r\n    style APIGateway fill:#ffd700\r\n    style Services fill:#87ceeb\r\n    style Infrastructure fill:#98fb98\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1ksluwjAQhu+V+g5ReqEHVG5AD5UCSAhVtHQTB6uHcTIJFsGpvLTK2zdeoBNEfbA9\/3y2Z3Gl4GuXvM+ur5JuzGuB0rBHtyRb5HfrhosaP4M3zNryyh\/KNqslGPyBlqVx47Q00m4st4x4ogNlcfG+N1TfIkfN0rXIVaOjSe\/LrNmxyDmjC1bsQQuCfHTnTsgGZVVZCcT\/rIoeoEGCJP4NtAdXgz\/iwKEF1YOeGiNKkYMRjTyRQSTh\/JfoSpYKtFE2N1YhS0\/2vrNpuosZGyzAAAeNt0SfQ75DNvBL8oqF0NT7YtEiy6RRAmTI8HJAodvJcPjQNSpIy603XZ17gqtqT\/BlDIrfejHW7lz2AQXRb71IS0iDck97YBH\/pHv6suDzP3\/sSMVYelrsg2lrJL83KUVd39+UZTEejShy\/JARmIxzRE6BfiMjNp2UfDr5BRBw7ZM=\" \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:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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<h3>Kasus 3: Pohon Keputusan Prioritisasi Fitur<\/h3>\n<p id=\"qKbzBOw\"><img alt=\"Diagram pohon keputusan prioritas fitur yang mengevaluasi dampak, kelayakan, sumber daya, dan keselarasan.\" class=\"alignnone size-full wp-image-20179\" decoding=\"async\" height=\"1168\" loading=\"lazy\" sizes=\"auto, (max-width: 831px) 100vw, 831px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021.png 831w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021-213x300.png 213w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021-729x1024.png 729w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021-768x1079.png 768w\" width=\"831\"\/><\/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:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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\">\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:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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:eNp1kT9rwzAQxfdCv8NBoVvAU0o6FOKGDm2HYLuTyXCxL7ZiWTbSqRDifPfK\/xJlqBbB3b33Oz0VGtsSks3jA7gTM2o+b0nXQjGigg\/BVkOI2l7GCW8OFou3boN1ixUkQhWF6GB9\/iKJJ6ycNqFKCXP5RxGRyrHs3H2kjNOkka6IjBa2WjRaMJppZueT14PHd4\/oIHQ0Jm0oF\/2ysa33pGHjmhd\/OhG58540ERlCnZVpJAwxPDtcww2Llu444aiczDt4d6mok3ubRtOjWCNTcX1e6IFuohCzSjZFmmC9x7LPpKK5eEd7H+TxaO9SbFvd\/FIaE9ujFWAV2wq2xAifKFHtfNUIvWojyhplRE46dRsLicJhf5youAV7x54D6c1gPddmk6E6fJ6vMXySNK8JByHl69MqIFoFfn\/82ql9OCz3y73fnoK49vOXIPgDKv7Lag==\" \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\">graph TD\r\n    Start{Permintaan Fitur Baru}\r\n    \r\n    Start --&gt;|Dampak Tinggi| A{Kelayakan Teknis}\r\n    Start --&gt;|Dampak Rendah| Reject[Tolak atau Prioritas Rendah]\r\n    \r\n    A --&gt;|Layak| B{Ketersediaan Sumber Daya}\r\n    A --&gt;|Tidak Layak| Research[Riset &amp; Prototipe]\r\n    \r\n    B --&gt;|Tersedia| C{Penyelarasan Strategis}\r\n    B --&gt;|Tidak Tersedia| Backlog[Tambahkan ke Backlog]\r\n    \r\n    C --&gt;|Selaras| Approve[Setujui untuk Peta Jalan]\r\n    C --&gt;|Tidak Selaras| Reconsider[Penilaian Ulang Prioritas]\r\n    \r\n    Research --&gt; A\r\n    Reconsider --&gt; Start\r\n    \r\n    style Approve fill:#90ee90\r\n    style Reject fill:#ff6b6b\r\n    style Backlog fill:#ffd700\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kT9rwzAQxfdCv8NBoVvAU0o6FOKGDm2HYLuTyXCxL7ZiWTbSqRDifPfK\/xJlqBbB3b33Oz0VGtsSks3jA7gTM2o+b0nXQjGigg\/BVkOI2l7GCW8OFou3boN1ixUkQhWF6GB9\/iKJJ6ycNqFKCXP5RxGRyrHs3H2kjNOkka6IjBa2WjRaMJppZueT14PHd4\/oIHQ0Jm0oF\/2ysa33pGHjmhd\/OhG58540ERlCnZVpJAwxPDtcww2Llu444aiczDt4d6mok3ubRtOjWCNTcX1e6IFuohCzSjZFmmC9x7LPpKK5eEd7H+TxaO9SbFvd\/FIaE9ujFWAV2wq2xAifKFHtfNUIvWojyhplRE46dRsLicJhf5youAV7x54D6c1gPddmk6E6fJ6vMXySNK8JByHl69MqIFoFfn\/82ql9OCz3y73fnoK49vOXIPgDKv7Lag==\" \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:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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<hr\/>\n<h2>\ud83d\udcdd Kesimpulan<\/h2>\n<p>Melalui periode praktik ini, saya percaya bahwa <strong><a href=\"https:\/\/www.visual-paradigm.com\/features\/mermaid-editor\/\">Mermaid<\/a> + <a href=\"https:\/\/ai-toolbox.visual-paradigm.com\/app\/chatbot\/\">Chatbot AI Visual Paradigm<\/a> + <a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\">VPasCode<\/a><\/strong> adalah solusi &#8220;Diagram sebagai Kode&#8221; yang sangat potensial.<\/p>\n<ul>\n<li>\n<p><strong>Untuk Individu<\/strong>: Ini menurunkan hambatan dalam menggambar, memungkinkan Anda fokus pada logika daripada tata letak.<\/p>\n<\/li>\n<li>\n<p><strong>Untuk Tim<\/strong>: Ini menyelesaikan masalah sinkronisasi dokumen dan manajemen versi, meningkatkan efisiensi kolaborasi.<\/p>\n<\/li>\n<li>\n<p><strong>Untuk Perusahaan<\/strong>: Ini mencapai struktur dan otomatisasi aset pengetahuan, selaras dengan konsep DevOps dan Agile.<\/p>\n<\/li>\n<\/ul>\n<p>Jika Anda masih kesulitan memperbarui diagram arsitektur atau ingin meningkatkan profesionalitas dan kemudahan pemeliharaan dokumentasi produk Anda, saya sangat merekomendasikan untuk mencoba alur kerja ini.<\/p>\n<p>Semoga berbagi ini bermanfaat! Jika Anda memiliki pertanyaan spesifik mengenai penggunaan, jangan ragu untuk menghubungi kapan saja.<\/p>\n<p class=\"\"><em>(Catatan: Semua kode Mermaid dalam artikel ini dapat dirender langsung di VPasCode yang mendukung Mermaid di Visual Paradigm.)<br \/>\n<\/em><\/p>\n<h2>Referensi<\/h2>\n<div class=\"sc-46jc02-0 fPzQAv\">\n<div class=\"sc-46jc02-1 gNJhWh\">\n<div id=\"editor\">\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<ol>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-chart-generation-create-with-chatbot-edit-with-vpascode\/#content\"><strong>Pembuatan Grafik AI: Buat dengan Chatbot, Edit dengan VPasCode<\/strong><\/a>: Catatan rilis resmi mengenai alur kerja generator grafik AI, yang memungkinkan pembuatan grafik melalui chatbot dan pengeditan langsung di VPasCode untuk penyempurnaan data dan gaya.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs\/\"><strong>Dari Kode ke Kejelasan: Panduan Pemula untuk Diagram yang Mulus dengan VPasCode dan OpenDocs<\/strong><\/a>: Tutorial (Bahasa Prancis) yang mencakup alur kerja dari VPasCode ke OpenDocs untuk mendorong diagram langsung ke dalam dokumentasi, dengan contoh praktis PlantUML.<\/li>\n<li><a href=\"https:\/\/www.cnblogs.com\/uml-tool\/p\/19569737\/visual-paradigm-ai-chatbot-diagram-refinement#1\"><strong>Ulasan Produk: Visual Paradigm AI Chatbot \u2013 &#8220;Akselerator AI&#8221; untuk Pemodelan Pengembang<\/strong><\/a>: Ulasan praktis (Bahasa Tiongkok) yang merinci bagaimana AI Chatbot menghasilkan diagram kasus penggunaan UML dari perintah, menangani<code data-backticks=\"1\">&lt;&lt;include&gt;&gt;<\/code> dan <code data-backticks=\"1\">&lt;&lt;extend&gt;&gt;<\/code> relasi, dan mendukung penyempurnaan percakapan secara iteratif.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/\"><strong>VPasCode: Alat Gratis dari Teks ke Diagram &amp; Editor Diagram-sebagai-Kode<\/strong><\/a>: Halaman produk resmi untuk VPasCode, yang menyoroti dukungannya terhadap PlantUML, Mermaid, dan Graphviz, serta fitur berbasis AI seperti perbaikan kesalahan sintaks dan terjemahan diagram.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/introduction-getting-started\/60-second-vpascode-quickstart-guide\/\"><strong>Panduan Cepat VPasCode 60 Detik<\/strong><\/a>: Panduan cepat yang menunjukkan cara membuat, menyesuaikan, dan membagikan diagram dalam waktu kurang dari satu menit menggunakan pratinjau real-time dan URL yang dapat dibagikan dari VPasCode.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/edit-sync-diagrams-ai-chatbot-opendocs-vpascode\/\"><strong>Manajemen Siklus Hidup Diagram yang Mulus: Edit &amp; Sinkronisasi Diagram Hasil AI dari AI Chatbot ke OpenDocs melalui VPasCode<\/strong><\/a>: Pengumuman mengenai alur kerja yang ditingkatkan di mana pengguna dapat menghasilkan diagram dengan AI Chatbot, mendokumentasikannya di OpenDocs, dan mengeditnya kembali melalui VPasCode untuk kontrol penuh atas siklus hidupnya.<\/li>\n<li><a href=\"https:\/\/www.go-diagram.com\/mastering-data-flow-diagrams-a-hands-on-review-of-visual-paradigms-ai-powered-dfd-generator\/\"><strong>Menguasai Diagram Alur Data: Ulasan Praktis Generator DFD Berbasis AI dari Visual Paradigm<\/strong><\/a>: Ulasan mengenai kemampuan generator DFD AI Chatbot, dengan fokus pada batas sistem dan integrasi dengan VPasCode untuk kustomisasi instan menggunakan sintaks Graphviz.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/whats-new-in-vpascode-launch-feature-roundup\/#content\"><strong>Apa yang Baru di VPasCode \u2013 Ringkasan Fitur Peluncuran<\/strong><\/a>: Ringkasan fitur yang merinci dukungan multi-sintaks VPasCode, perbaikan kesalahan kode AI, terjemahan AI, dan integrasinya dengan Visual Paradigm OpenDocs untuk dokumentasi.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/seamlessly-connect-diagrams-to-documentation-with-opendocs\/#content\"><strong>Hubungkan Diagram ke Dokumentasi dengan Mulus Menggunakan OpenDocs<\/strong><\/a>: Artikel yang menjelaskan bagaimana VPasCode bertindak sebagai jembatan ke OpenDocs, mengubah diagram statis menjadi aset dokumentasi yang hidup dan menyelesaikan masalah &#8220;doc-rot&#8221;.<\/li>\n<li><a href=\"https:\/\/www.cnblogs.com\/uml-tool\/p\/22514491\/DFD-top-down-decomposition-visual-paradigm-tool-with-ai-chatbot-vpascode-features#commentform#1\"><strong>Ulasan Praktis: Menggunakan Dekomposisi Top-Down DFD yang Dibantu AI dengan Visual Paradigm + VPasCode<\/strong><\/a>: Pengalaman pengguna (Bahasa Tiongkok) yang menggunakan AI Chatbot sebagai &#8220;pelatih DFD pribadi&#8221; untuk dekomposisi top-down, dan menggunakan VPasCode untuk mengedit dan menyempurnakan diagram.<\/li>\n<li><a href=\"https:\/\/blog.51cto.com\/u_13102515\/14841078#1\"><strong>Ulasan Mendalam: VPasCode dengan Apache ECharts &amp; AI \u2013 Ucapkan Selamat Tinggal pada Seret dan Lepas<\/strong><\/a>: Ulasan pengembang (Bahasa Tiongkok) yang menunjukkan bagaimana VPasCode menyatukan Diagram-sebagai-Kode dengan AI untuk menghasilkan dashboard ECharts dan diagram PlantUML, bersama dengan panduan 5 langkah untuk memulai.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sc-afr2nh-0 sc-97fke2-1 jmpjbl hkyNvy\">\n<div class=\"sc-97fke2-2 geHObL\">\n<h3 id=\"packages\"><\/h3>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u2014\u2014 Berbagi Praktik Terbaik dengan Visual Paradigm AI Chatbot + VPasCode Halo semuanya, saya Angus. Sebagai Product Manager dengan pengalaman<\/p>\n","protected":false},"author":11,"featured_media":12151,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[117],"tags":[],"class_list":["post-12150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vpascode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode - Media Maya<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode - Media Maya\" \/>\n<meta property=\"og:description\" content=\"\u2014\u2014 Berbagi Praktik Terbaik dengan Visual Paradigm AI Chatbot + VPasCode Halo semuanya, saya Angus. Sebagai Product Manager dengan pengalaman\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\" \/>\n<meta property=\"og:site_name\" content=\"Media Maya\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-25T07:50:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-03T15:26:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode\",\"datePublished\":\"2026-08-25T07:50:31+00:00\",\"dateModified\":\"2026-09-03T15:26:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\"},\"wordCount\":2004,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png\",\"articleSection\":[\"VPasCode\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\",\"url\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\",\"name\":\"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode - Media Maya\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png\",\"datePublished\":\"2026-08-25T07:50:31+00:00\",\"dateModified\":\"2026-09-03T15:26:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png\",\"width\":1024,\"height\":572},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/id\/\",\"name\":\"Media Maya\",\"description\":\"Belajar satu hal baru setiap hari\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/id\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode - Media Maya","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","og_locale":"id_ID","og_type":"article","og_title":"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode - Media Maya","og_description":"\u2014\u2014 Berbagi Praktik Terbaik dengan Visual Paradigm AI Chatbot + VPasCode Halo semuanya, saya Angus. Sebagai Product Manager dengan pengalaman","og_url":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","og_site_name":"Media Maya","article_published_time":"2026-08-25T07:50:31+00:00","article_modified_time":"2026-09-03T15:26:01+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png","type":"","width":"","height":""},{"width":1024,"height":572,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png","twitter_misc":{"Ditulis oleh":"curtis","Estimasi waktu membaca":"12 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode","datePublished":"2026-08-25T07:50:31+00:00","dateModified":"2026-09-03T15:26:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"},"wordCount":2004,"image":{"@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png","articleSection":["VPasCode"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","url":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","name":"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode - Media Maya","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png","datePublished":"2026-08-25T07:50:31+00:00","dateModified":"2026-09-03T15:26:01+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage","url":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png","contentUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/08\/img_6a8d4f60c67dd.png","width":1024,"height":572},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/id\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/id\/"},{"@type":"ListItem","position":2,"name":"Ulasan Mendalam: Diagram sebagai Kode dengan Mermaid Menggunakan VPasCode"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/id\/#website","url":"https:\/\/www.cybermedian.com\/id\/","name":"Media Maya","description":"Belajar satu hal baru setiap hari","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/id\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/comments?post=12150"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12150\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media\/12151"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media?parent=12150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/categories?post=12150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/tags?post=12150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}