{"id":2815,"date":"2026-08-06T12:59:49","date_gmt":"2026-08-06T04:59:49","guid":{"rendered":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/"},"modified":"2026-08-06T12:59:49","modified_gmt":"2026-08-06T04:59:49","slug":"vpascode-d2-diagram-support-announcement","status":"publish","type":"releases","link":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/","title":{"rendered":"Mengumumkan Dukungan Diagram D2 di VPasCode: Editor D2 Gratis Utama dan Alat D2 Online"},"content":{"rendered":"<p>Kami sangat senang mengumumkan pembaruan besar untuk <strong>VPasCode<\/strong>: dukungan penuh untuk <strong>D2<\/strong> bahasa diagram-as-code! Dengan pembaruan ini, arsitek, pengembang, dan penulis teknis dapat langsung mengubah skrip teks D2 deklaratif menjadi diagram visual yang bersih dan profesional tanpa hambatan.<\/p>\n<p>Apakah Anda sedang memetakan arsitektur awan yang kompleks, topologi mikroservis, atau alur kerja organisasi, VPasCode berfungsi sebagai editor D2 gratis yang Anda andalkan dan alat D2 online yang kaya fitur.<strong>editor D2 gratis<\/strong> dan alat D2 online yang kaya fitur<strong>alat D2 online<\/strong>. Rasakan visualisasi yang mulus dan real-time langsung di dalam browser Anda.<\/p>\n<p><img fetchpriority=\"high\" alt=\"A screenshot of Visual Paradigm VPasCode editing a D2 code in its D2 editor\" class=\"alignnone wp-image-3564 size-full\" decoding=\"async\" fetchpriority=\"high\" height=\"745\" sizes=\"(max-width: 1192px) 100vw, 1192px\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a73f61a158f4.png\" srcset=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a73f61a158f4.png 1192w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a73f61a158f4-300x188.png 300w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a73f61a158f4-1024x640.png 1024w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a73f61a158f4-768x480.png 768w\" width=\"1192\"\/><\/p>\n<p>Untuk mempelajari lebih lanjut tentang kemampuan dan pembaruan platform kami, kunjungi halaman resmi <a href=\"https:\/\/www.vpascode.com\/overview\/\" rel=\"noopener\" target=\"_blank\">Halaman VPasCode<\/a>.<\/p>\n<h2>Cara Kerja Integrasi D2 di VPasCode<\/h2>\n<p>Menggunakan D2 di VPasCode cepat, intuitif, dan dirancang untuk memaksimalkan produktivitas Anda. Ruang kerja memiliki tata letak samping-samping yang nyaman:<\/p>\n<ul>\n<li><strong>Panel Kiri (Editor Kode):<\/strong>Cukup tempel, ketik, atau edit skrip D2 Anda. Deteksi format otomatis VPasCode langsung mengenali kode Anda tanpa perlu beralih bahasa secara manual.<\/li>\n<li><strong>Panel Kanan (Visualizer Langsung):<\/strong> Amati diagram Anda dirender secara dinamis secara real-time saat Anda mengetik atau mengubah blok kode.<\/li>\n<\/ul>\n<p>Video di bawah ini menunjukkan cara membuat diagram D2 di editor diagram-as-code Visual Paradigm VPasCode.<\/p>\n<p><iframe allowfullscreen=\"allowfullscreen\" frameborder=\"0\" src=\"https:\/\/www.youtube.com\/embed\/7CEBtQjyjNk?si=BXYAVRGqgwVTLWgY\" style=\"width: 100%; aspect-ratio: 16 \/ 9; height: auto;\" title=\"YouTube video player\"><span class=\"mce_SELRES_start\" data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\">\ufeff<\/span><span class=\"mce_SELRES_start\" data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\">\ufeff<\/span><\/iframe><\/p>\n<p>Siap mencobanya sendiri? Langsung mulai dengan <a href=\"https:\/\/www.vpascode.com\/\" rel=\"noopener\" target=\"_blank\">Editor VPasCode<\/a>.<\/p>\n<h2>Fitur Utama yang Disertakan dengan Dukungan D2<\/h2>\n<p>Selain tampilan langsung, integrasi D2 baru kami dilengkapi berbagai pilihan kolaborasi dan output yang fleksibel agar sesuai dengan alur kerja Anda:<\/p>\n<ol>\n<li><strong>Pilihan Ekspor yang Fleksibel:<\/strong> Unduh diagram selesai Anda secara instan sebagai grafik vektor SVG yang dapat diskalakan atau gambar PNG beresolusi tinggi untuk laporan, presentasi, dan dokumentasi.\n<p id=\"gBVyRNb\"><img alt=\"A screenshot of VPasCode, showing how to export a D2 diagram as image (PNG, SVG)\" class=\"alignnone wp-image-3567 size-full\" decoding=\"async\" height=\"470\" sizes=\"(max-width: 884px) 100vw, 884px\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a74148ac959e.png\" srcset=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a74148ac959e.png 884w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a74148ac959e-300x160.png 300w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a74148ac959e-768x408.png 768w\" width=\"884\"\/><\/p>\n<\/li>\n<li><strong>Integrasi Papan Klip:<\/strong>Salin gambar diagram yang telah dirender ke papan klip Anda dengan satu klik untuk menempelkan langsung ke Slack, email, atau prosesor kata.<\/li>\n<li><strong>Berbagi URL Instan:<\/strong>Bagikan karya Anda dengan mudah kepada rekan kerja atau klien melalui tautan langsung. Yang terbaik dari semua, tidak diperlukan login bagi penonton untuk memeriksa diagram yang Anda bagikan.<\/li>\n<\/ol>\n<h2>Demonstrasi: Membangun Diagram Jaringan Dasar di D2<\/h2>\n<p>Untuk melihat betapa mudahnya memodelkan sistem menggunakan ini <strong>editor D2 gratis<\/strong>, pertimbangkan contoh berikut tentang arsitektur jaringan multi-tier dasar.<\/p>\n<h3>Kode Sumber D2<\/h3>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">D2<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#d2:eNptjz0PwiAURfcm\/Q+kzprIYsLgZnRw0LS7QXilJC9AgMH+e6WVaD\/Wc+7Nu09qDyJqaxjxWnWxLARqMJFsjwQtl48nR24EeEYuTXOry2JCU4w7tx\/tuqRZpmBiHqQOjJxPzcDoChtyzoaoPHxwfb\/+ojM87t2FjjtgxIEP1syGZJle5UYhjDcy7uDFVSqlCws4LMtU9KiNBF8WecXSfAuxR9i1GpGRatMCUKDVf23ipWgFHKo3KvSCiA==\" 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 D2 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\">D2<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNptjj8PgjAQR3cSvkODsyZ2MengZnRw0MBuzvaAaj2alsVvry2i8md9713uBw5qwe5AQGkijUZq2XLLTAPqcgUDJNEJdiiKU54mAxoysHbd2XnJexnCwBwq7QXb74rI+AyLnW18Wzl84\/x8\/KUj3O1d+RosCtY4oGq0o3cWncdKMwt0i1V41MtgkODR\/ZnSOPCLtdGk0KVJP2ZqPgft0+Cq1MYIli1KRI48+z8beCVLiZvsBUyrgsU=\" \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 D2 in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"language-d2\"><code class=\"language-d2\" data-language=\"d2\" class=\"language-d2\">arah: kanan\r\nclient -&gt; load_balancer: HTTPS\r\nload_balancer -&gt; app1: HTTP\r\nload_balancer -&gt; app2: HTTP\r\napp1 -&gt; redis: GET\r\napp2 -&gt; redis: GET\r\napp1 -&gt; postgres: SQL\r\napp2 -&gt; postgres: SQL\r\nclient.shape: orang\r\nload_balancer.shape: persegi panjang\r\napp1.shape: segienam\r\napp2.shape: segienam\r\nredis.shape: silinder\r\npostgres.shape: silinder\r\nredis.style.fill: \"#fee2e2\"\r\npostgres.style.fill: \"#dcfce7\"<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNptjj8PgjAQR3cSvkODsyZ2MengZnRw0MBuzvaAaj2alsVvry2i8md9713uBw5qwe5AQGkijUZq2XLLTAPqcgUDJNEJdiiKU54mAxoysHbd2XnJexnCwBwq7QXb74rI+AyLnW18Wzl84\/x8\/KUj3O1d+RosCtY4oGq0o3cWncdKMwt0i1V41MtgkODR\/ZnSOPCLtdGk0KVJP2ZqPgft0+Cq1MYIli1KRI48+z8beCVLiZvsBUyrgsU=\" \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 D2 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\/#d2:eNptjz0PwiAURfcm\/Q+kzprIYsLgZnRw0LS7QXilJC9AgMH+e6WVaD\/Wc+7Nu09qDyJqaxjxWnWxLARqMJFsjwQtl48nR24EeEYuTXOry2JCU4w7tx\/tuqRZpmBiHqQOjJxPzcDoChtyzoaoPHxwfb\/+ojM87t2FjjtgxIEP1syGZJle5UYhjDcy7uDFVSqlCws4LMtU9KiNBF8WecXSfAuxR9i1GpGRatMCUKDVf23ipWgFHKo3KvSCiA==\" 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 D2 di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Bagaimana Ini Dirender di Alat D2 Online Kami<\/h3>\n<p>Ketika Anda menempelkan skrip di atas ke VPasCode, mesin akan memproses hubungan, arah, dan gaya bentuk khusus secara otomatis:<\/p>\n<ul>\n<li>Yang <strong>client<\/strong>diberi gaya sebagai ikon orang yang jelas, memulai permintaan HTTPS ke sebuah <strong>load_balancer<\/strong>.<\/li>\n<li>Lalu lintas terbagi dengan jelas di antara dua node aplikasi segienam (<strong>app1<\/strong> dan <strong>app2<\/strong>).<\/li>\n<li>Kedua node aplikasi mengakses lapisan penyimpanan sementara backend secara aman (<strong>redis<\/strong>, diberi gaya dengan warna merah lembut) dan penyimpanan data relasional (<strong>postgres<\/strong>, diberi gaya dengan warna hijau lembut).<\/li>\n<\/ul>\n<h2>Contoh Diagram D2 Lainnya<\/h2>\n<h3>Bentuk Dasar<\/h3>\n<p id=\"SAKMCCV\"><img alt=\"\" class=\"alignnone size-full wp-image-3576\" decoding=\"async\" height=\"307\" sizes=\"(max-width: 181px) 100vw, 181px\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417a67c6bc.png\" srcset=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417a67c6bc.png 181w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417a67c6bc-177x300.png 177w\" width=\"181\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">D2<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#d2:eNorTi0qSy1S0LVTSM7JTM0rsVLwCAkJ4OUqhounJFkpFJamFlXycsGUVPNyKSgUZyQWpFopFKQWFefngQVKKnNS9dIyc3KsFJSUk9NSjdLSlHi5anm5QEYg60muzMnMS0ktwtSVYphqnpIC0QVxgh6qgrS0NOPkFCUARUE39Q==\" 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 D2 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\">D2<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNorTi0qSy1S0LVTSM7JTM0rsVLwCAkJ4OUqhounJFkpFJamFlXycsGUVPNyKSgUZyQWpFopFKQWFefngQVKKnNS9dIyc3KsFJSUk9NSjdLSlHi5anm5QEYg60muzMnMS0ktwtSVYphqnpIC0QVxgh6qgrS0NOPkFCUARUE39Q==\" \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 D2 in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"language-d2\"><code class=\"language-d2\" data-language=\"d2\" class=\"language-d2\">\r\nserver -&gt; client: HTTP\r\nserver -&gt; db: query\r\nclient: {\r\n  shape: person\r\n  style.fill: \"#cfe2ff\"\r\n}\r\ndb: {\r\n  shape: cylinder\r\n  style.fill: \"#d1e7dd\"\r\n}\r\nserver.style.fill: \"#fff3cd\"\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNorTi0qSy1S0LVTSM7JTM0rsVLwCAkJ4OUqhounJFkpFJamFlXycsGUVPNyKSgUZyQWpFopFKQWFefngQVKKnNS9dIyc3KsFJSUk9NSjdLSlHi5anm5QEYg60muzMnMS0ktwtSVYphqnpIC0QVxgh6qgrS0NOPkFCUARUE39Q==\" \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 D2 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\/#d2:eNorTi0qSy1S0LVTSM7JTM0rsVLwCAkJ4OUqhounJFkpFJamFlXycsGUVPNyKSgUZyQWpFopFKQWFefngQVKKnNS9dIyc3KsFJSUk9NSjdLSlHi5anm5QEYg60muzMnMS0ktwtSVYphqnpIC0QVxgh6qgrS0NOPkFCUARUE39Q==\" 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 D2 di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h2>Kontainer<\/h2>\n<p id=\"WMOozNs\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-3575\" decoding=\"async\" height=\"669\" loading=\"lazy\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417950d8ff.png\" srcset=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417950d8ff.png 370w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417950d8ff-166x300.png 166w\" width=\"370\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">D2<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#d2:eNqVkMEOgjAMhu8kvEODZ0mIBwwHb968KL7A2FpYmNsyZ5AY3l2JSxDCxUvT9M\/\/tX81+s64toBXHAF0WIUO4N4wiwU0+GS10WHme4UpSaUKSDaYU0aUjNIwFmbl0u2Qe6ZrhWt+ItpxMflFlVonb8z1SwzvldQC3RpFZJiLOYUz3uA\/DNqLXLCJ8fkDbA\/fQJdjeQ3pxtnvkeX5NFfCYmVM+7BxNLwByuNhaQ==\" 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 D2 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\">D2<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNqVkMEOgjAMhu8kvEODZ0mIBwwHb968KL7A2FpYmNsyZ5AY3l2JSxDCxUvT9M\/\/tX81+s64toBXHAF0WIUO4N4wiwU0+GS10WHme4UpSaUKSDaYU0aUjNIwFmbl0u2Qe6ZrhWt+ItpxMflFlVonb8z1SwzvldQC3RpFZJiLOYUz3uA\/DNqLXLCJ8fkDbA\/fQJdjeQ3pxtnvkeX5NFfCYmVM+7BxNLwByuNhaQ==\" \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 D2 in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"language-d2\"><code class=\"language-d2\" data-language=\"d2\" class=\"language-d2\">network: {\r\n  web: {\r\n    shape: hexagon\r\n    style.fill: \"#e7f1ff\"\r\n  }\r\n  api: {\r\n    shape: rectangle\r\n    style.fill: \"#fff3cd\"\r\n  }\r\n  db.primary: {\r\n    shape: cylinder\r\n    style.fill: \"#d1e7dd\"\r\n  }\r\n  db.cache: {\r\n    shape: cylinder\r\n    style.fill: \"#f8d7da\"\r\n  }\r\n  web -&gt; api: REST\r\n  api -&gt; db.primary: SQL\r\n  api -&gt; db.cache: lookup\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNqVkMEOgjAMhu8kvEODZ0mIBwwHb968KL7A2FpYmNsyZ5AY3l2JSxDCxUvT9M\/\/tX81+s64toBXHAF0WIUO4N4wiwU0+GS10WHme4UpSaUKSDaYU0aUjNIwFmbl0u2Qe6ZrhWt+ItpxMflFlVonb8z1SwzvldQC3RpFZJiLOYUz3uA\/DNqLXLCJ8fkDbA\/fQJdjeQ3pxtnvkeX5NFfCYmVM+7BxNLwByuNhaQ==\" \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 D2 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\/#d2:eNqVkMEOgjAMhu8kvEODZ0mIBwwHb968KL7A2FpYmNsyZ5AY3l2JSxDCxUvT9M\/\/tX81+s64toBXHAF0WIUO4N4wiwU0+GS10WHme4UpSaUKSDaYU0aUjNIwFmbl0u2Qe6ZrhWt+ItpxMflFlVonb8z1SwzvldQC3RpFZJiLOYUz3uA\/DNqLXLCJ8fkDbA\/fQJdjeQ3pxtnvkeX5NFfCYmVM+7BxNLwByuNhaQ==\" 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 D2 di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><span style=\"font-size: 1.7em; font-weight: bold;\">Dengan Gaya<\/span><\/p>\n<p id=\"PZEHtiy\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-3577\" decoding=\"async\" height=\"1015\" loading=\"lazy\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417c197f05.png\" srcset=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417c197f05.png 281w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a7417c197f05-83x300.png 83w\" width=\"281\"\/><\/p>\n<p>\u00a0<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">D2<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#d2:eNqNkVFrwyAQx98L\/Q5H9pwwOrYwH\/a8hz20tF\/A6plKrAY1DWH0u8\/UmDq2wUBQ\/3f38+7vhVpH4HO9AuCbkhktZDPfAVyLnp0IeNtjVBQdTe9L1I3USABVO+nX9SosOiTSpWMLY8Djcg7EE+1CnUXmqW4ULrofFWZ5AEIqRaB4ECieWF3cA85b0+IU4q91\/fjyI1QOkvvQ9SaDGe0JnI02SbvGw7zRTv63ySo1xo9IBRbfOPyXWdmopOZo\/6AwwbDOKdHM3qGF8g2CqVWws7rZ+H44bPfxgUihWp6pR56+KP5CKsjrbxNO9feMIOUZU+\/73UeOn\/3k1AU7nwP+C5tRlWo=\" 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 D2 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\">D2<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNqNkVFrwyAQx98L\/Q5H9pwwOrYwH\/a8hz20tF\/A6plKrAY1DWH0u8\/UmDq2wUBQ\/3f38+7vhVpH4HO9AuCbkhktZDPfAVyLnp0IeNtjVBQdTe9L1I3USABVO+nX9SosOiTSpWMLY8Djcg7EE+1CnUXmqW4ULrofFWZ5AEIqRaB4ECieWF3cA85b0+IU4q91\/fjyI1QOkvvQ9SaDGe0JnI02SbvGw7zRTv63ySo1xo9IBRbfOPyXWdmopOZo\/6AwwbDOKdHM3qGF8g2CqVWws7rZ+H44bPfxgUihWp6pR56+KP5CKsjrbxNO9feMIOUZU+\/73UeOn\/3k1AU7nwP+C5tRlWo=\" \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 D2 in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"language-d2\"><code class=\"language-d2\" data-language=\"d2\" class=\"language-d2\">vars: {\r\n  d2-config: {\r\n    sketch: true\r\n    layout-engine: elk\r\n  }\r\n}\r\naws: {\r\n  vpc: {\r\n    web: {\r\n      shape: rectangle\r\n      style: {\r\n        fill: \"#fef3c7\"\r\n        stroke: \"#d97706\"\r\n        stroke-width: 2\r\n        font: mono\r\n      }\r\n    }\r\n    api: {\r\n      shape: rectangle\r\n      style.fill: \"#dbeafe\"\r\n    }\r\n    db: {\r\n      shape: cylinder\r\n      style.fill: \"#dcfce7\"\r\n    }\r\n  }\r\n}\r\nuser -&gt; aws.vpc.web: HTTPS {\r\n  style.animated: true\r\n}\r\naws.vpc.web -&gt; aws.vpc.api: HTTP\r\naws.vpc.api -&gt; aws.vpc.db: SQL {\r\n  style.stroke-dash: 5\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNqNkVFrwyAQx98L\/Q5H9pwwOrYwH\/a8hz20tF\/A6plKrAY1DWH0u8\/UmDq2wUBQ\/3f38+7vhVpH4HO9AuCbkhktZDPfAVyLnp0IeNtjVBQdTe9L1I3USABVO+nX9SosOiTSpWMLY8Djcg7EE+1CnUXmqW4ULrofFWZ5AEIqRaB4ECieWF3cA85b0+IU4q91\/fjyI1QOkvvQ9SaDGe0JnI02SbvGw7zRTv63ySo1xo9IBRbfOPyXWdmopOZo\/6AwwbDOKdHM3qGF8g2CqVWws7rZ+H44bPfxgUihWp6pR56+KP5CKsjrbxNO9feMIOUZU+\/73UeOn\/3k1AU7nwP+C5tRlWo=\" \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 D2 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\/#d2:eNqNkVFrwyAQx98L\/Q5H9pwwOrYwH\/a8hz20tF\/A6plKrAY1DWH0u8\/UmDq2wUBQ\/3f38+7vhVpH4HO9AuCbkhktZDPfAVyLnp0IeNtjVBQdTe9L1I3USABVO+nX9SosOiTSpWMLY8Djcg7EE+1CnUXmqW4ULrofFWZ5AEIqRaB4ECieWF3cA85b0+IU4q91\/fjyI1QOkvvQ9SaDGe0JnI02SbvGw7zRTv63ySo1xo9IBRbfOPyXWdmopOZo\/6AwwbDOKdHM3qGF8g2CqVWws7rZ+H44bPfxgUihWp6pR56+KP5CKsjrbxNO9feMIOUZU+\/73UeOn\/3k1AU7nwP+C5tRlWo=\" 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 D2 di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h2>Urutan<\/h2>\n<p id=\"LRvpxDA\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-3578\" decoding=\"async\" height=\"845\" loading=\"lazy\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" src=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a741847708b9.png\" srcset=\"https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a741847708b9.png 402w, https:\/\/updates.visual-paradigm.com\/wp-content\/uploads\/2026\/08\/img_6a741847708b9-143x300.png 143w\" width=\"402\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">D2<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/#d2:eNorzkgsSLVSKE4tLE3NS06NT8lMTC9KzOXlKi1OLVLQtVNILMi0UnB3DVHQB4kU83IBBUDiKUlWCsGuPq7OIQpavFwpSXC1RfnlCFUgPVYKRgYGCv7eaGYG+AdjNdTTL9g1KATdSAwTDRWci1ITS1JTADJTOJ4=\" 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 D2 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\">D2<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNorzkgsSLVSKE4tLE3NS06NT8lMTC9KzOXlKi1OLVLQtVNILMi0UnB3DVHQB4kU83IBBUDiKUlWCsGuPq7OIQpavFwpSXC1RfnlCFUgPVYKRgYGCv7eaGYG+AdjNdTTL9g1KATdSAwTDRWci1ITS1JTADJTOJ4=\" \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 D2 in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"language-d2\"><code class=\"language-d2\" data-language=\"d2\" class=\"language-d2\">shape: sequence_diagram\r\nuser -&gt; api: GET \/users\r\napi -&gt; db: SELECT *\r\ndb -&gt; api: rows\r\napi -&gt; user: 200 OK\r\nuser -&gt; api: POST \/users\r\napi -&gt; db: INSERT\r\ndb -&gt; api: row\r\napi -&gt; user: 201 Created<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#d2:eNorzkgsSLVSKE4tLE3NS06NT8lMTC9KzOXlKi1OLVLQtVNILMi0UnB3DVHQB4kU83IBBUDiKUlWCsGuPq7OIQpavFwpSXC1RfnlCFUgPVYKRgYGCv7eaGYG+AdjNdTTL9g1KATdSAwTDRWci1ITS1JTADJTOJ4=\" \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 D2 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\/#d2:eNorzkgsSLVSKE4tLE3NS06NT8lMTC9KzOXlKi1OLVLQtVNILMi0UnB3DVHQB4kU83IBBUDiKUlWCsGuPq7OIQpavFwpSXC1RfnlCFUgPVYKRgYGCv7eaGYG+AdjNdTTL9g1KATdSAwTDRWci1ITS1JTADJTOJ4=\" 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 D2 di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p>Catatan: Anda mungkin ingin membuat Diagram Urutan dengan PlantUML. Cek cara melakukannya di:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"UG1XDYeanz\">\n<p><a href=\"https:\/\/www.vpascode.com\/complete-guide-to-plantuml-sequence-diagrams-syntax-examples-best-practices\/\">Panduan Lengkap untuk Diagram Urutan PlantUML: Sintaks, Contoh, dan Praktik Terbaik<\/a><\/p>\n<\/blockquote>\n<p><iframe class=\"wp-embedded-content\" data-secret=\"UG1XDYeanz\" frameborder=\"0\" height=\"282\" marginheight=\"0\" marginwidth=\"0\" sandbox=\"allow-scripts\" scrolling=\"no\" security=\"restricted\" src=\"https:\/\/www.vpascode.com\/complete-guide-to-plantuml-sequence-diagrams-syntax-examples-best-practices\/embed\/#?secret=IlOQ6XvBnM#?secret=UG1XDYeanz\" style=\"position: absolute; visibility: hidden;\" title=\"\u201cComplete Guide to PlantUML Sequence Diagrams: Syntax, Examples &amp; Best Practices\u201d \u2014 VPasCode\" width=\"500\"><\/iframe><\/p>\n<h2>Apa itu VPasCode?<\/h2>\n<p>Jika Anda baru mengenal platform kami, <strong>Visual Paradigm VPasCode<\/strong> adalah solusi diagram sebagai kode yang terpadu, berbasis browser, yang dibuat untuk tim teknis modern. Ini menghilangkan kesulitan penggunaan alat gambar manual dengan menyeret dan menjatuhkan dengan memungkinkan Anda mendefinisikan arsitektur dan model data sepenuhnya melalui kode.<\/p>\n<p>Selain D2, VPasCode mendukung berbagai format diagram populer dan bahasa terstruktur, termasuk PlantUML, Mermaid, Graphviz, <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-echarts-support-chart-maker\/\">ECharts<\/a>, <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/free-sql-to-erd-tool-online-editor\/\">SQL<\/a>, <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/free-online-yaml-diagram-tool-vpascode-update\/\">YAML<\/a>, <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/free-online-json-editor-visualizer-vpascode-update\/\">JSON<\/a>, dan bahasa pemrograman utama seperti <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/vpascode-java-code-to-uml-class-diagram\/\">Java<\/a>, <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/visualize-python-code-as-uml-class-diagrams-vpascode\/\">Python<\/a>, <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/visualize-rust-code-uml-diagram-as-code\/\">Rust<\/a>, dan <a href=\"https:\/\/updates.visual-paradigm.com\/releases\/typescript-to-uml-class-diagram-generator\/\">TypeScript<\/a>. Pengeditan kode inti, pratinjau langsung, dan ekspor gambar sepenuhnya gratis.<\/p>\n<h2>Mulai Menciptakan Hari Ini<\/h2>\n<p>Tingkatkan dokumentasi teknis dan pemodelan arsitektur Anda hari ini. Rasakan kecepatan dan kemudahan fitur D2 baru kami dengan langsung meluncurkan aplikasi sekarang di <a href=\"https:\/\/www.vpascode.com\/\" rel=\"noopener\" target=\"_blank\">Editor VPasCode<\/a>.<\/p>\n","protected":false},"featured_media":2816,"template":"","meta":{"_acf_changed":false,"_yoast_wpseo_title":"Editor D2 Gratis & Alat D2 Online: VPasCode Sekarang Mendukung Visualisasi D2","_yoast_wpseo_metadesc":"Temukan cara menggunakan editor D2 gratis dan alat D2 online VPasCode untuk menulis, melihat pratinjau, mengekspor, dan berbagi diagram D2 secara real time. Baca pengumuman sekarang!","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"product":[2,3],"product-area":[49],"version":[50],"release-type":[16],"class_list":["post-2815","releases","type-releases","status-publish","has-post-thumbnail","hentry","product-visual-paradigm","product-visual-paradigm-online","product-area-vpascode","version-18-1","release-type-new-feature"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Editor D2 Gratis &amp; Alat D2 Online: VPasCode Sekarang Mendukung Visualisasi D2<\/title>\n<meta name=\"description\" content=\"Temukan cara menggunakan editor D2 gratis dan alat D2 online VPasCode untuk menulis, melihat pratinjau, mengekspor, dan berbagi diagram D2 secara real time. Baca pengumuman sekarang!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Editor D2 Gratis &amp; Alat D2 Online: VPasCode Sekarang Mendukung Visualisasi D2\" \/>\n<meta property=\"og:description\" content=\"Temukan cara menggunakan editor D2 gratis dan alat D2 online VPasCode untuk menulis, melihat pratinjau, mengekspor, dan berbagi diagram D2 secara real time. Baca pengumuman sekarang!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/\" \/>\n<meta property=\"og:site_name\" content=\"Visual Paradigm Product Updates Indonesian\" \/>\n<meta property=\"og:image\" content=\"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1680\" \/>\n\t<meta property=\"og:image:height\" content=\"945\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/\",\"url\":\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/\",\"name\":\"Editor D2 Gratis & Alat D2 Online: VPasCode Sekarang Mendukung Visualisasi D2\",\"isPartOf\":{\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png\",\"datePublished\":\"2026-08-06T04:59:49+00:00\",\"description\":\"Temukan cara menggunakan editor D2 gratis dan alat D2 online VPasCode untuk menulis, melihat pratinjau, mengekspor, dan berbagi diagram D2 secara real time. Baca pengumuman sekarang!\",\"breadcrumb\":{\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#primaryimage\",\"url\":\"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png\",\"contentUrl\":\"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png\",\"width\":1680,\"height\":945},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/updates.visual-paradigm.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mengumumkan Dukungan Diagram D2 di VPasCode: Editor D2 Gratis Utama dan Alat D2 Online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/#website\",\"url\":\"https:\/\/updates.visual-paradigm.com\/id\/\",\"name\":\"Visual Paradigm Product Updates Indonesian\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/updates.visual-paradigm.com\/id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/#organization\",\"name\":\"Visual Paradigm Product Updates Indonesian\",\"url\":\"https:\/\/updates.visual-paradigm.com\/id\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2025\/11\/vp-updates.png\",\"contentUrl\":\"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2025\/11\/vp-updates.png\",\"width\":185,\"height\":50,\"caption\":\"Visual Paradigm Product Updates Indonesian\"},\"image\":{\"@id\":\"https:\/\/updates.visual-paradigm.com\/id\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Editor D2 Gratis & Alat D2 Online: VPasCode Sekarang Mendukung Visualisasi D2","description":"Temukan cara menggunakan editor D2 gratis dan alat D2 online VPasCode untuk menulis, melihat pratinjau, mengekspor, dan berbagi diagram D2 secara real time. Baca pengumuman sekarang!","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:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/","og_locale":"id_ID","og_type":"article","og_title":"Editor D2 Gratis & Alat D2 Online: VPasCode Sekarang Mendukung Visualisasi D2","og_description":"Temukan cara menggunakan editor D2 gratis dan alat D2 online VPasCode untuk menulis, melihat pratinjau, mengekspor, dan berbagi diagram D2 secara real time. Baca pengumuman sekarang!","og_url":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/","og_site_name":"Visual Paradigm Product Updates Indonesian","og_image":[{"width":1680,"height":945,"url":"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/","url":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/","name":"Editor D2 Gratis & Alat D2 Online: VPasCode Sekarang Mendukung Visualisasi D2","isPartOf":{"@id":"https:\/\/updates.visual-paradigm.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#primaryimage"},"image":{"@id":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#primaryimage"},"thumbnailUrl":"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png","datePublished":"2026-08-06T04:59:49+00:00","description":"Temukan cara menggunakan editor D2 gratis dan alat D2 online VPasCode untuk menulis, melihat pratinjau, mengekspor, dan berbagi diagram D2 secara real time. Baca pengumuman sekarang!","breadcrumb":{"@id":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#primaryimage","url":"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png","contentUrl":"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2026\/08\/vpascode-free-d2-editor-online-tutorial.png","width":1680,"height":945},{"@type":"BreadcrumbList","@id":"https:\/\/updates.visual-paradigm.com\/id\/releases\/vpascode-d2-diagram-support-announcement\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/updates.visual-paradigm.com\/id\/"},{"@type":"ListItem","position":2,"name":"Mengumumkan Dukungan Diagram D2 di VPasCode: Editor D2 Gratis Utama dan Alat D2 Online"}]},{"@type":"WebSite","@id":"https:\/\/updates.visual-paradigm.com\/id\/#website","url":"https:\/\/updates.visual-paradigm.com\/id\/","name":"Visual Paradigm Product Updates Indonesian","description":"","publisher":{"@id":"https:\/\/updates.visual-paradigm.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/updates.visual-paradigm.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/updates.visual-paradigm.com\/id\/#organization","name":"Visual Paradigm Product Updates Indonesian","url":"https:\/\/updates.visual-paradigm.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/updates.visual-paradigm.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2025\/11\/vp-updates.png","contentUrl":"https:\/\/updates.visual-paradigm.com\/id\/wp-content\/uploads\/sites\/12\/2025\/11\/vp-updates.png","width":185,"height":50,"caption":"Visual Paradigm Product Updates Indonesian"},"image":{"@id":"https:\/\/updates.visual-paradigm.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/releases\/2815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/releases"}],"about":[{"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/types\/releases"}],"version-history":[{"count":0,"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/releases\/2815\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/media\/2816"}],"wp:attachment":[{"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/media?parent=2815"}],"wp:term":[{"taxonomy":"product","embeddable":true,"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/product?post=2815"},{"taxonomy":"product-area","embeddable":true,"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/product-area?post=2815"},{"taxonomy":"version","embeddable":true,"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/version?post=2815"},{"taxonomy":"release-type","embeddable":true,"href":"https:\/\/updates.visual-paradigm.com\/id\/wp-json\/wp\/v2\/release-type?post=2815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}