{"id":12283,"date":"2026-10-14T15:24:34","date_gmt":"2026-10-14T07:24:34","guid":{"rendered":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/"},"modified":"2026-10-14T15:24:34","modified_gmt":"2026-10-14T07:24:34","slug":"mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/","title":{"rendered":"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan VPasCode"},"content":{"rendered":"<h2 data-nodeid=\"19796\">Pendahuluan<\/h2>\n<p data-nodeid=\"19797\">Mesin preprocessor PlantUML mengubah kode diagram statis menjadi templat dinamis yang dapat digunakan kembali. Ketika dikombinasikan dengan <strong data-nodeid=\"19910\">Visual Paradigm VPasCode<\/strong>\u2014sebuah ruang kerja berbasis browser yang ditingkatkan dengan AI untuk diagram-sebagai-kode\u2014Anda memperoleh kemampuan untuk menulis, menguji, dan melakukan iterasi pada arsitektur kompleks tanpa instalasi lokal. Panduan ini mencakup segala hal mulai dari sintaks variabel dasar hingga pola modular tingkat lanjut, yang dioptimalkan khusus untuk alur kerja VPasCode.<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-22010\" decoding=\"async\" height=\"1122\" loading=\"lazy\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png 1402w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7-300x240.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7-1024x819.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7-768x615.png 768w\" width=\"1402\"\/><\/p>\n<hr data-nodeid=\"19798\"\/>\n<h2 data-nodeid=\"19799\">1. Mengapa Menggunakan Variabel di PlantUML?<\/h2>\n<p data-nodeid=\"19800\">Menggunakan nilai yang dikodekan secara keras (hardcoding) menyebabkan mimpi buruk dalam pemeliharaan. Variabel memungkinkan Anda untuk:<\/p>\n<ul data-nodeid=\"19801\">\n<li data-nodeid=\"19802\">\n<p data-nodeid=\"19803\"><strong data-nodeid=\"19917\">Memusatkan Konfigurasi:<\/strong>Mengubah nama basis data atau nilai waktu tunggu di satu tempat, dan perubahan tersebut akan diperbarui di semua tempat.<\/p>\n<\/li>\n<li data-nodeid=\"19804\">\n<p data-nodeid=\"19805\"><strong data-nodeid=\"19922\">Mengaktifkan Modularitas:<\/strong>Membuat file templat bersama yang beradaptasi berdasarkan konteks (misalnya, Pengembangan vs. Produksi).<\/p>\n<\/li>\n<li data-nodeid=\"19806\">\n<p data-nodeid=\"19807\"><strong data-nodeid=\"19927\">Mengurangi Pengulangan:<\/strong>Menggunakan loop dan makro untuk menghasilkan struktur yang berulang seperti kluster mikroservice atau titik akhir API.<\/p>\n<\/li>\n<\/ul>\n<p data-nodeid=\"19808\">Di VPasCode, manfaat ini diperkuat oleh <strong data-nodeid=\"19933\">pratinjau langsung<\/strong>yang berarti Anda melihat dampak perubahan variabel Anda secara instan saat Anda mengetik.<\/p>\n<hr data-nodeid=\"19809\"\/>\n<h2 data-nodeid=\"19810\">2. Sintaks dan Deklarasi Variabel<\/h2>\n<p data-nodeid=\"19811\">PlantUML modern menggunakan prefiks &#8221; untuk variabel, menawarkan skoping dan keamanan tipe yang lebih baik daripada pendekatan lama &#8220;<code data-backticks=\"1\" data-nodeid=\"19936\">!$<\/code>PlantUML modern menggunakan prefiks &#8221; untuk variabel, menawarkan skoping dan keamanan tipe yang lebih baik daripada pendekatan lama &#8220;<code data-backticks=\"1\" data-nodeid=\"19938\">!define<\/code>.<\/p>\n<h3 data-nodeid=\"19812\">Penugasan Dasar (<code data-backticks=\"1\" data-nodeid=\"19941\">=<\/code>)<\/h3>\n<p data-nodeid=\"19813\">Gunakan &#8220;<code data-backticks=\"1\" data-nodeid=\"19944\">=<\/code> untuk menugaskan atau menugaskan ulang sebuah nilai.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:KrH9B2ZmIynDLR1LKF8lIaaj2aujAijCJbNYvL9KoKsi24ejASfCBGPAcm80\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:KrH9B2ZmIynDLR1LKF8lIaaj2aujAijCJbNYvL9KoKsi24ejASfCBGPAcm80\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"19814\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!$appName = \"OrderService\"\r\n!$maxRetries = 5\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:KrH9B2ZmIynDLR1LKF8lIaaj2aujAijCJbNYvL9KoKsi24ejASfCBGPAcm80\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:KrH9B2ZmIynDLR1LKF8lIaaj2aujAijCJbNYvL9KoKsi24ejASfCBGPAcm80\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3 data-nodeid=\"19815\">Penugasan Bersyarat (<code data-backticks=\"1\" data-nodeid=\"19947\">?=<\/code>)<\/h3>\n<p data-nodeid=\"19816\">Gunakan <code data-backticks=\"1\" data-nodeid=\"19950\">?=<\/code> untuk menetapkan nilai default hanya jika variabel belum didefinisikan. Ini sangat penting untuk membuat templat fleksibel yang dapat ditimpa dengan menyertakan file.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LSen3a1040NGNk8EtqOfzWIYKgYTODZ1n1fY5t5xMjLhNfOtUicnwSeQKLSmNQH9T3984slHZlYDcmB87qpkGU28_W4fH0T_EiOedWl4MGAyAECpBBBlxCeN\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LSen3a1040NGNk8EdoY54uXAetM2OGS_raZiulgqofUyhEZivddOhXRHDiY7A0jjoP4cTOsUc-1tmkLaXMFGYCFhYfbUGPlyvRJ4A2V3Htx5woEHrGi0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"19817\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!$Environment ?= \"Staging\" \r\n\/\/ Jika $Environment sudah diset oleh file include, baris ini dilewati.\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LSen3a1040NGNk8EdoY54uXAetM2OGS_raZiulgqofUyhEZivddOhXRHDiY7A0jjoP4cTOsUc-1tmkLaXMFGYCFhYfbUGPlyvRJ4A2V3Htx5woEHrGi0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LSen3a1040NGNk8EtqOfzWIYKgYTODZ1n1fY5t5xMjLhNfOtUicnwSeQKLSmNQH9T3984slHZlYDcmB87qpkGU28_W4fH0T_EiOedWl4MGAyAECpBBBlxCeN\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3 data-nodeid=\"19818\">Aturan Lingkup<\/h3>\n<ul data-nodeid=\"19819\">\n<li data-nodeid=\"19820\">\n<p data-nodeid=\"19821\">Variabel yang dideklarasikan di tingkat atas bersifat global dalam skrip.<\/p>\n<\/li>\n<li data-nodeid=\"19822\">\n<p data-nodeid=\"19823\">Variabel di dalam <code data-backticks=\"1\" data-nodeid=\"19955\">!function<\/code> atau <code data-backticks=\"1\" data-nodeid=\"19957\">!procedure<\/code> bersifat lokal pada lingkup tersebut kecuali jika dikelola secara eksplisit.<\/p>\n<\/li>\n<\/ul>\n<hr data-nodeid=\"19824\"\/>\n<h2 data-nodeid=\"19825\">3. Tipe Data dan Penanganan<\/h2>\n<p data-nodeid=\"19826\">PlantUML mendukung tiga tipe data utama:<\/p>\n<table data-nodeid=\"19828\">\n<thead data-nodeid=\"19829\">\n<tr data-nodeid=\"19830\">\n<th align=\"left\" data-nodeid=\"19832\">Tipe<\/th>\n<th align=\"left\" data-nodeid=\"19833\">Deskripsi<\/th>\n<th align=\"left\" data-nodeid=\"19834\">Contoh<\/th>\n<\/tr>\n<\/thead>\n<tbody data-nodeid=\"19838\">\n<tr data-nodeid=\"19839\">\n<td align=\"left\" data-nodeid=\"19840\"><strong data-nodeid=\"19967\">String<\/strong><\/td>\n<td align=\"left\" data-nodeid=\"19841\">Teks yang diapit tanda kutip.<\/td>\n<td align=\"left\" data-nodeid=\"19842\"><code data-backticks=\"1\" data-nodeid=\"19969\">!$host = \"api.example.com\"<\/code><\/td>\n<\/tr>\n<tr data-nodeid=\"19843\">\n<td align=\"left\" data-nodeid=\"19844\"><strong data-nodeid=\"19973\">Integer<\/strong><\/td>\n<td align=\"left\" data-nodeid=\"19845\">Angka bulat untuk matematika\/loop.<\/td>\n<td align=\"left\" data-nodeid=\"19846\"><code data-backticks=\"1\" data-nodeid=\"19975\">!$port = 8080<\/code><\/td>\n<\/tr>\n<tr data-nodeid=\"19847\">\n<td align=\"left\" data-nodeid=\"19848\"><strong data-nodeid=\"19979\">JSON<\/strong><\/td>\n<td align=\"left\" data-nodeid=\"19849\">Data terstruktur untuk konfigurasi kompleks.<\/td>\n<td align=\"left\" data-nodeid=\"19850\"><code data-backticks=\"1\" data-nodeid=\"19981\">!$config = %str2json(\"{ 'debug': true }\")<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote data-nodeid=\"19851\">\n<p data-nodeid=\"19852\"><strong data-nodeid=\"19992\">Catatan tentang Boolean:<\/strong> PlantUML memperlakukan <code data-backticks=\"1\" data-nodeid=\"19986\">0<\/code> sebagai false dan angka non-nol atau string non-kosong sebagai true. Gunakan <code data-backticks=\"1\" data-nodeid=\"19988\">%true()<\/code> dan <code data-backticks=\"1\" data-nodeid=\"19990\">%false()<\/code> untuk kejelasan.<\/p>\n<\/blockquote>\n<hr data-nodeid=\"19853\"\/>\n<h2 data-nodeid=\"19854\">4. Implementasi Praktis: Diagram Urutan Dinamis<\/h2>\n<p data-nodeid=\"19855\">Variabel sangat berguna saat mendefinisikan aktor dan pesan. Di bawah ini adalah contoh lengkap yang siap untuk VPasCode.<\/p>\n<p id=\"lbVEtrQ\"><img alt=\"\" class=\"alignnone size-full wp-image-22011\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dda5a7cd.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dda5a7cd.png 1919w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dda5a7cd-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dda5a7cd-1024x465.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dda5a7cd-768x349.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dda5a7cd-1536x697.png 1536w\" width=\"1919\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bP8nJyCm48NtIFaFrwe37Ie2Oee4QWS41Keh4bXHcfnI2ySNx4iG_7hif0d9m51lT_Uzv-UJbuOJpLKXVMyoIwL0nN0DqmtjXSHLMKvTFqyOlv9lDrZjrkztRTcCaeeF4UfQfDYCRRaHgIRJzXgcrCIKadJ0VHplelE7QFjiHxvdvQIgOe_QLLs0nGtqTuRmHBbGy8AV5Hg6izvkRkKfYzg2FTwuT59dCymNmbiYHURuc3vG3VK3hiabkOKx4kmPcIt68I-30BQFleVI8AnLVOhsAhY0L-K0qk87C-kYCfSYmty2_ZtHEHst5jeTcPAKmR5oi1f5jg55Vk0GRbKjDAd2IOK1WmnCC9aD-hwtj4div_W5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9FJyCm3CNlbVeTl6a7E4mCnAaIQ3iW_criOeKhobghivewLPeMmQV7QRVI7P38pVRxlRnOcLTEMLSNEWn6aqGJieCR6A_CZZGkodBi-vbo-Ac-_62nUVouxyfsf6gttw9jAC5sBEMA4ckghjTgIckSIOpsWeSutcmldhRh5nc5WU26wsA7rbV70DDRwE-CO8Es87PACInDHWndlUEvE2IE6j7sH6jqfBtJC684xqfJgYg2sEJ8GtwWQwDfrsaw90n0pedPz3JdrMm6w-SmG5tXWOpbglo__FNi4jxO2uobRnG2EVL9KlmZvEyplTDXUH6yObKQhax1mNROICDIjdSHB8cplEPCbfkIShM5764qkUE6hE523CDWBZdaX_m0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"19856\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!$client = \"MobileApp\"\r\n!$gateway = \"API_Gateway\"\r\n!$authService = \"AuthMicroservice\"\r\n!$protocol = \"HTTPS\/JSON\"\r\n\r\nautonumber\r\n\r\n$client -&gt; $gateway : Permintaan Login ($protocol)\r\nactivate $gateway\r\n\r\n$gateway -&gt; $authService : Validasi Token\r\nactivate $authService\r\n\r\nalt Token Valid\r\n    $authService --&gt; $gateway : 200 OK\r\nelse Token Tidak Valid\r\n    $authService --&gt; $gateway : 401 Unauthorized\r\nend\r\n\r\ndeactivate $authService\r\n$gateway --&gt; $client : Respons\r\ndeactivate $gateway\r\n\r\nnote right: Lingkungan diatur ke !$Environment\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:ZP9FJyCm3CNlbVeTl6a7E4mCnAaIQ3iW_criOeKhobghivewLPeMmQV7QRVI7P38pVRxlRnOcLTEMLSNEWn6aqGJieCR6A_CZZGkodBi-vbo-Ac-_62nUVouxyfsf6gttw9jAC5sBEMA4ckghjTgIckSIOpsWeSutcmldhRh5nc5WU26wsA7rbV70DDRwE-CO8Es87PACInDHWndlUEvE2IE6j7sH6jqfBtJC684xqfJgYg2sEJ8GtwWQwDfrsaw90n0pedPz3JdrMm6w-SmG5tXWOpbglo__FNi4jxO2uobRnG2EVL9KlmZvEyplTDXUH6yObKQhax1mNROICDIjdSHB8cplEPCbfkIShM5764qkUE6hE523CDWBZdaX_m0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bP8nJyCm48NtIFaFrwe37Ie2Oee4QWS41Keh4bXHcfnI2ySNx4iG_7hif0d9m51lT_Uzv-UJbuOJpLKXVMyoIwL0nN0DqmtjXSHLMKvTFqyOlv9lDrZjrkztRTcCaeeF4UfQfDYCRRaHgIRJzXgcrCIKadJ0VHplelE7QFjiHxvdvQIgOe_QLLs0nGtqTuRmHBbGy8AV5Hg6izvkRkKfYzg2FTwuT59dCymNmbiYHURuc3vG3VK3hiabkOKx4kmPcIt68I-30BQFleVI8AnLVOhsAhY0L-K0qk87C-kYCfSYmty2_ZtHEHst5jeTcPAKmR5oi1f5jg55Vk0GRbKjDAd2IOK1WmnCC9aD-hwtj4div_W5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p data-nodeid=\"19857\"><strong data-nodeid=\"20003\">Tip VPasCode:<\/strong> Saat Anda mengubah <code data-backticks=\"1\" data-nodeid=\"19999\">$client<\/code> menjadi <code data-backticks=\"1\" data-nodeid=\"20001\">\"WebDashboard\"<\/code>, diagram akan diperbarui secara real-time, memungkinkan Anda memverifikasi penyesuaian tata letak secara langsung.<\/p>\n<hr data-nodeid=\"19858\"\/>\n<h2 data-nodeid=\"19859\">5. Fitur Lanjutan: Fungsi dan Bawaan<\/h2>\n<h3 data-nodeid=\"19860\">Fungsi Kustom (<code data-backticks=\"1\" data-nodeid=\"20006\">!function<\/code>)<\/h3>\n<p data-nodeid=\"19861\">Fungsi memungkinkan Anda melakukan perhitungan atau manipulasi string dan mengembalikan hasil langsung ke label diagram.<\/p>\n<p id=\"shmyjCy\"><img alt=\"\" class=\"alignnone size-full wp-image-22012\" decoding=\"async\" height=\"875\" loading=\"lazy\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dfc6847f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dfc6847f.png 1918w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dfc6847f-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dfc6847f-1024x467.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dfc6847f-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2dfc6847f-1536x701.png 1536w\" width=\"1918\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuULIJ2lDIox9pCzJK4dBByfDB0dEh4hLKCbDqkJbKb1GB4ejAIq2okKcAMWhA2duEYa1jQJcfS1qyNBnSZdcP2QdAkZQAJZb9obOAOGMvEGdfYZaPEPcbYXa5gEOQse0DDO1g1zeDm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuULIJ2lDIox9pCzJK4dBByfDB0dEh4hLKCbDqkJbKb1GB4ejAIq2okKcAMWhA2duEYa1jQJcfS1qyNBnSZdcP2QdAkZQAJZb9obOAJWbbYGMAvJcfQSdPYWafYJc02baiqqDW4Ox0Cq0sWy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\" data-nodeid=\"19862\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!function $formatSize($mb)\r\n  !return $mb + \" MB\"\r\n!endfunction\r\n\r\nAlice -&gt; Bob : Batas unggah adalah $formatSize(50)\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuULIJ2lDIox9pCzJK4dBByfDB0dEh4hLKCbDqkJbKb1GB4ejAIq2okKcAMWhA2duEYa1jQJcfS1qyNBnSZdcP2QdAkZQAJZb9obOAJWbbYGMAvJcfQSdPYWafYJc02baiqqDW4Ox0Cq0sWy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:SoWkIImgAStDuULIJ2lDIox9pCzJK4dBByfDB0dEh4hLKCbDqkJbKb1GB4ejAIq2okKcAMWhA2duEYa1jQJcfS1qyNBnSZdcP2QdAkZQAJZb9obOAOGMvEGdfYZaPEPcbYXa5gEOQse0DDO1g1zeDm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit PlantUML di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3 data-nodeid=\"19863\">Fungsi Bawaan yang Berguna<\/h3>\n<ul data-nodeid=\"19864\">\n<li data-nodeid=\"19865\">\n<p data-nodeid=\"19866\"><code data-backticks=\"1\" data-nodeid=\"20010\">%variable_exists(\"$varName\")<\/code>: Periksa apakah variabel telah didefinisikan sebelum menggunakannya untuk mencegah kesalahan.<\/p>\n<\/li>\n<li data-nodeid=\"19867\">\n<p data-nodeid=\"19868\"><code data-backticks=\"1\" data-nodeid=\"20012\">%get_variable_value(\"$varName\")<\/code>: Ambil nilai variabel secara dinamis, berguna untuk penelusuran kesalahan.<\/p>\n<\/li>\n<li data-nodeid=\"19869\">\n<p data-nodeid=\"19870\"><code data-backticks=\"1\" data-nodeid=\"20014\">%strlen(\"$text\")<\/code>: Dapatkan panjang string untuk pemformatan bersyarat.<\/p>\n<\/li>\n<\/ul>\n<hr data-nodeid=\"19871\"\/>\n<h2 data-nodeid=\"19872\">6. Mengoptimalkan Alur Kerja Anda di VPasCode<\/h2>\n<p data-nodeid=\"19873\">VPasCode menyediakan alat khusus untuk meningkatkan pengalaman pengembangan berbasis variabel:<\/p>\n<h3 data-nodeid=\"19874\">1. Pratinjau Langsung &amp; Deteksi Kesalahan<\/h3>\n<ul data-nodeid=\"19875\">\n<li data-nodeid=\"19876\">\n<p data-nodeid=\"19877\"><strong data-nodeid=\"20025\">Umpan Balik Instan:<\/strong> Ubah nilai variabel di panel editor dan saksikan diagram dirender ulang secara instan.<\/p>\n<\/li>\n<li data-nodeid=\"19878\">\n<p data-nodeid=\"19879\"><strong data-nodeid=\"20036\">Penelusuran Kesalahan Dibantu AI:<\/strong> Jika Anda melewatkan <code data-backticks=\"1\" data-nodeid=\"20030\">$<\/code> awalan atau memiliki kesalahan ruang lingkup, gunakan <strong data-nodeid=\"20037\">Pembuat Kode AI<\/strong> tombol. Ini menganalisis logika pra-pemroses dan menyarankan perbaikan secara otomatis.<\/p>\n<\/li>\n<\/ul>\n<h3 data-nodeid=\"19880\">2. Desain Modular dengan Include<\/h3>\n<p data-nodeid=\"19881\">Meskipun VPasCode berbasis browser, Anda dapat mensimulasikan modularitas dengan mengatur kode Anda ke dalam blok logis. Untuk alur kerja lokal, Anda akan menggunakan <code data-backticks=\"1\" data-nodeid=\"20040\">!include<\/code>, tetapi di VPasCode, Anda dapat menyimpan variabel bersama di bagian atas skrip Anda untuk akses mudah.<\/p>\n<h3 data-nodeid=\"19882\">3. Ekspor untuk Dokumentasi<\/h3>\n<p data-nodeid=\"19883\">Setelah diagram dinamis Anda selesai:<\/p>\n<ul data-nodeid=\"19884\">\n<li data-nodeid=\"19885\">\n<p data-nodeid=\"19886\"><strong data-nodeid=\"20048\">SVG:<\/strong> Terbaik untuk dokumentasi teknis di mana skalabilitas dan kemampuan pencarian teks diperlukan.<\/p>\n<\/li>\n<li data-nodeid=\"19887\">\n<p data-nodeid=\"19888\"><strong data-nodeid=\"20053\">PNG:<\/strong> Ideal untuk berbagi cepat di Slack, Teams, atau komunikasi email.<\/p>\n<\/li>\n<\/ul>\n<hr data-nodeid=\"19889\"\/>\n<h2 data-nodeid=\"19890\">7. Praktik Terbaik untuk Kode yang Mudah Dipelihara<\/h2>\n<ol data-nodeid=\"19891\">\n<li data-nodeid=\"19892\">\n<p data-nodeid=\"19893\"><strong data-nodeid=\"20065\">Konvensi Penamaan:<\/strong> Gunakan camelCase atau snake_case secara konsisten (misalnya, &#8220;<code data-backticks=\"1\" data-nodeid=\"20061\">$dbName<\/code> atau &#8220;<code data-backticks=\"1\" data-nodeid=\"20063\">$db_name<\/code>).<\/p>\n<\/li>\n<li data-nodeid=\"19894\">\n<p data-nodeid=\"19895\"><strong data-nodeid=\"20072\">Nilai Default:<\/strong> Selalu gunakan &#8220;<code data-backticks=\"1\" data-nodeid=\"20070\">?=<\/code> untuk variabel yang mungkin ditimpa di lingkungan yang berbeda.<\/p>\n<\/li>\n<li data-nodeid=\"19896\">\n<p data-nodeid=\"19897\"><strong data-nodeid=\"20077\">Komentar:<\/strong> Tambahkan komentar di atas blok variabel untuk menjelaskan tujuannya, terutama untuk konfigurasi JSON.<\/p>\n<\/li>\n<li data-nodeid=\"19898\">\n<p data-nodeid=\"19899\"><strong data-nodeid=\"20082\">Jaga Logika Tetap Sederhana:<\/strong> Meskipun PlantUML mendukung perulangan dan kondisional, logika yang terlalu kompleks dapat membuat diagram sulit dibaca. Gunakan variabel untuk konfigurasi, bukan untuk membangun seluruh logika aplikasi.<\/p>\n<\/li>\n<\/ol>\n<hr data-nodeid=\"19900\"\/>\n<h2 data-nodeid=\"19901\">Kesimpulan<\/h2>\n<p class=\"\" data-nodeid=\"19902\">Dengan menguasai variabel dan direktif preprocessor di PlantUML, Anda mengubah diagram Anda dari gambar statis menjadi dokumentasi yang hidup. Menggunakan &#8220;<strong data-nodeid=\"20089\">VPasCode<\/strong> menyederhanakan proses ini dengan kemampuan penyuntingan yang ditingkatkan AI dan pratinjau langsung, memungkinkan Anda fokus pada arsitektur daripada sintaks. Mulailah bereksperimen dengan penugasan kondisional dan fungsi kustom hari ini untuk membangun template diagram yang lebih tangguh dan dapat digunakan kembali.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pendahuluan Mesin preprocessor PlantUML mengubah kode diagram statis menjadi templat dinamis yang dapat digunakan kembali. Ketika dikombinasikan dengan Visual Paradigm<\/p>\n","protected":false},"author":11,"featured_media":12284,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","source_url":"","source_h1_title":"","fifu_image_url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[82,120],"tags":[],"asset-category":[],"class_list":["post-12283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-vpascode-editor"],"source_url":"","source_h1_title":"","fifu_image_url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan 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\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan VPasCode - Media Maya\" \/>\n<meta property=\"og:description\" content=\"Pendahuluan Mesin preprocessor PlantUML mengubah kode diagram statis menjadi templat dinamis yang dapat digunakan kembali. Ketika dikombinasikan dengan Visual Paradigm\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/\" \/>\n<meta property=\"og:site_name\" content=\"Media Maya\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-14T07:24:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1402\" \/>\n\t<meta property=\"og:image:height\" content=\"1122\" \/>\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\/10\/img_6acf2d8d765e7.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=\"4 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan VPasCode\",\"datePublished\":\"2026-10-14T07:24:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/\"},\"wordCount\":725,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png\",\"articleSection\":[\"AI\",\"VPasCode Editor\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/\",\"url\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/\",\"name\":\"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan VPasCode - Media Maya\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png\",\"datePublished\":\"2026-10-14T07:24:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png\",\"width\":1402,\"height\":1122},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan 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":"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan 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\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/","og_locale":"id_ID","og_type":"article","og_title":"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan VPasCode - Media Maya","og_description":"Pendahuluan Mesin preprocessor PlantUML mengubah kode diagram statis menjadi templat dinamis yang dapat digunakan kembali. Ketika dikombinasikan dengan Visual Paradigm","og_url":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/","og_site_name":"Media Maya","article_published_time":"2026-10-14T07:24:34+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png","type":"","width":"","height":""},{"width":1402,"height":1122,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/10\/img_6acf2d8d765e7.png","twitter_misc":{"Ditulis oleh":"curtis","Estimasi waktu membaca":"4 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan VPasCode","datePublished":"2026-10-14T07:24:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/"},"wordCount":725,"image":{"@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png","articleSection":["AI","VPasCode Editor"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/","url":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/","name":"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan VPasCode - Media Maya","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png","datePublished":"2026-10-14T07:24:34+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/id\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#primaryimage","url":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png","contentUrl":"https:\/\/www.cybermedian.com\/id\/wp-content\/uploads\/sites\/17\/2026\/10\/img_6acf2d8d765e7.png","width":1402,"height":1122},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/id\/mastering-variables-and-preprocessor-directives-in-plantuml-with-vpascode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/id\/"},{"@type":"ListItem","position":2,"name":"Menguasai Variabel dan Direktif Preprocessor di PlantUML dengan 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\/12283","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=12283"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/posts\/12283\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media\/12284"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/media?parent=12283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/categories?post=12283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/tags?post=12283"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/id\/wp-json\/wp\/v2\/asset-category?post=12283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}