{"id":2128,"date":"2026-05-26T06:46:41","date_gmt":"2026-05-26T06:46:41","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/plantuml-syntax-basics\/"},"modified":"2026-05-26T06:46:41","modified_gmt":"2026-05-26T06:46:41","slug":"plantuml-syntax-basics","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/","title":{"rendered":"Dasar-dasar Sintaks PlantUML"},"content":{"rendered":"<p>Sebelum memasuki tata letak arsitektur tertentu seperti model C4 atau timeline urutan, sangat penting untuk memahami aturan dasar yang mengatur <strong>Buku Panduan PlantUML<\/strong>. PlantUML mengandalkan sistem notasi teks yang bersih dan sangat intuitif. Setelah Anda memahami bagaimana mesin membuka dokumen, memberi nama komponen struktural, dan menentukan rute garis koneksi, menulis tata letak sistem yang kompleks menjadi sangat alami.<\/p>\n<p>Panduan singkat ini membahas mekanisme sintaks struktural global yang berlaku di hampir semua jenis diagram PlantUML di dalam lingkungan kerja VPasCode.<\/p>\n<h2>1. Pembungkus Dokumen Wajib<\/h2>\n<p>Setiap blok kode PlantUML harus dimulai dan diakhiri dengan tag kerangka yang eksplisit. Tag-tag ini memberi tahu parser VPasCode untuk mengaktifkan mesin rendering yang benar di kanvas pratinjau Anda:<\/p>\n<ul>\n<li><code>@startuml<\/code> \u2014 Baris ini harus ditempatkan tepat di bagian paling atas skrip Anda. Tidak ada yang boleh mendahului baris ini.<\/li>\n<li><code>@enduml<\/code> \u2014 Baris ini harus ditempatkan tepat di bagian paling bawah skrip Anda, menandai akhir dari blok data diagram Anda.<\/li>\n<\/ul>\n<p>Setiap kode yang ditulis di luar dua tanda ini akan diabaikan dengan aman oleh kompilator, atau dapat memicu peringatan validasi sintaks di panel diagnostik lingkungan kerja Anda.<\/p>\n<h2>2. Deklarasi Elemen: ID vs. Label Tampilan<\/h2>\n<p>Ketika memodelkan sistem perangkat lunak, Anda akan membuat berbagai elemen struktural seperti komponen, basis data, aktor, atau mikroservis. Dalam PlantUML, Anda dapat mendeklarasikan suatu elemen secara eksplisit dengan menentukan jenisnya, ID singkat internal, dan nama tampilan yang ramah pengguna yang dibungkus dengan tanda kutip:<\/p>\n<pre><code>komponen microservice_id sebagai \"Payment Processing API\"\r\ndatabase db_id sebagai \"User Transaction SQL\"<\/code><\/pre>\n<p><strong>Mengapa ini merupakan praktik terbaik:<\/strong> Menggunakan ID internal yang singkat dan bersih (seperti <code>microservice_id<\/code>) membuat menggambar garis hubungan jauh lebih cepat di kemudian hari. Jika suatu saat Anda perlu mengubah label yang ditampilkan ke pelanggan dari \u201cPayment Processing API\u201d menjadi \u201cGlobal Checkout Service\u201d, Anda hanya perlu mengeditnya di satu baris kode saja, bukan memperbarui puluhan baris di seluruh skrip Anda.<\/p>\n<h2>3. Menguasai Panah Hubungan dan Rute Berarah<\/h2>\n<p>Koneksi antar node sistem digambar menggunakan kombinasi garis miring (<code>-<\/code>) dan tanda kurung panah (<code>&gt;<\/code>). Panjang garis miring dan penggunaan kata kunci berarah memberi Anda kendali implisit atas bagaimana mesin tata letak otomatis menyesuaikan ukuran diagram Anda:<\/p>\n<ul>\n<li><strong>Koneksi Dasar:<\/strong> <code>A --&gt; B<\/code>menggambar panah berarah standar yang menunjuk dari elemen A langsung ke elemen B.<\/li>\n<li><strong>Garis Ketergantungan Titik-titik:<\/strong> Mengganti garis miring dengan titik menghasilkan garis putus-putus, yang merupakan standar industri untuk menunjukkan ketergantungan asinkron atau panggilan jaringan: <code>A ..&gt; B<\/code>.<\/li>\n<li><strong>Memaksa Orientasi Tata Letak:<\/strong> Meskipun mesin tata letak secara otomatis menempatkan kotak-kotak, Anda dapat secara eksplisit mengarahkan orientasi dengan memasukkan kata kunci arah langsung di dalam string panah:\n<ul>\n<li><code>A -up-&gt; B<\/code> (Memaksa B untuk dirender di atas A)<\/li>\n<li><code>A -down-&gt; B<\/code> (Memaksa B untuk dirender di bawah A)<\/li>\n<li><code>A -left-&gt; B<\/code> (Memaksa B untuk dirender di sebelah kiri A)<\/li>\n<li><code>A -right-&gt; B<\/code> (Memaksa B untuk dirender di sebelah kanan A)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>4. Menambahkan Konteks Secara Langsung: Label dan Komentar Kode<\/h2>\n<p>Dokumentasi yang jelas sangat bergantung pada penempatan konteks yang tepat di sekitar garis visual dan skrip teks Anda:<\/p>\n<h3>Menandai Garis Koneksi<\/h3>\n<p>Anda dapat menambahkan teks penjelas langsung ke setiap garis koneksi dengan menambahkan tanda titik dua (&#8220;<code>:<\/code>) tepat setelah pemetaan hubungan Anda:<\/p>\n<pre><code>client_id --&gt; api_id : \"HTTPS POST \/v1\/checkout\"<\/code><\/pre>\n<h3>Menulis Komentar Kode<\/h3>\n<p>Jika Anda ingin meninggalkan catatan administratif, kredit desain, atau penjelasan arsitektural di dalam file skrip Anda tanpa merender kotak visual di kanvas, gunakan karakter petik tunggal (&#8220;<code>'<\/code>). Ini memberi tahu mesin untuk melewatkan parsing baris tersebut sepenuhnya:<\/p>\n<pre><code>' TODO: Kita perlu memperbarui kotak batas ini setelah migrasi DevOps selesai\r\n[Monolit Lama] --&gt; [Microservice Baru]<\/code><\/pre>\n<p>Sekarang Anda sudah terbiasa dengan pembungkus sintaks global, deklarasi komponen, dan parameter panah arah dari PlantUML, Anda benar-benar siap untuk mulai membangun bentuk sistem lanjutan. Lanjutkan ke halaman berikutnya untuk membuka koleksi kami tentang <strong>Diagram Arsitektur &amp; Desain Tingkat Tinggi<\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sebelum memasuki tata letak arsitektur tertentu seperti model C4 atau timeline urutan, sangat penting untuk memahami aturan dasar yang mengatur Buku Panduan PlantUML. PlantUML mengandalkan sistem notasi teks yang bersih dan sangat intuitif. Setelah Anda memahami bagaimana mesin membuka dokumen,&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"template":"","meta":{"inline_featured_image":false,"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":"","ast-disable-related-posts":"","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":""}}},"ld_collection":[14],"class_list":["post-2128","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>PlantUML Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.\" \/>\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.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PlantUML Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\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=\"3 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/\",\"name\":\"PlantUML Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"datePublished\":\"2026-05-26T06:46:41+00:00\",\"description\":\"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/plantuml-syntax-basics\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dasar-dasar Sintaks PlantUML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PlantUML Syntax Basics | VPasCode Text to Diagram Guide","description":"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.","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.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/","og_locale":"id_ID","og_type":"article","og_title":"PlantUML Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/","og_site_name":"VPasCode","twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/","name":"PlantUML Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"datePublished":"2026-05-26T06:46:41+00:00","description":"Master PlantUML syntax fundamentals in VPasCode, a versatile diagram-as-code tool to convert text to diagram architecture maps.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/plantuml-syntax-basics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/id\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/id\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Dasar-dasar Sintaks PlantUML"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/id\/#website","url":"https:\/\/www.vpascode.com\/id\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/id\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/id\/wp-content\/uploads\/sites\/7\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs\/2128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/users\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2128"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}