{"id":2114,"date":"2026-05-26T08:00:30","date_gmt":"2026-05-26T08:00:30","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-syntax-basis\/"},"modified":"2026-05-26T08:00:30","modified_gmt":"2026-05-26T08:00:30","slug":"mermaid-js-syntax-basis","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","title":{"rendered":"Dasar Sintaks Mermaid.js"},"content":{"rendered":"<p>Sebelum terjun ke tata letak arsitektur tertentu seperti bagan alur yang kompleks atau bagan timeline urutan waktu, sangat penting untuk memahami aturan dasar yang mengatur <strong>Buku Panduan Mermaid<\/strong>. Mermaid mengandalkan sistem notasi teks yang bersih dan sangat intuitif. Setelah Anda memahami bagaimana mesin menginisialisasi jenis kanvas, memberi nama komponen struktural, dan mengarahkan panah arah, menulis tata letak sistem yang kompleks menjadi benar-benar alami.<\/p>\n<p>Panduan singkat ini membahas mekanisme sintaks struktural global yang berlaku di hampir semua jenis bagan Mermaid di dalam lingkungan kerja VPasCode.<\/p>\n<h2>1. Pembungkus Tipe Diagram Wajib<\/h2>\n<p>Setiap blok kode Mermaid harus dimulai dengan menyatakan secara eksplisit arketipe diagram pada baris pertama. Ini memberi tahu parser VPasCode secara tepat mesin struktural mana yang harus diaktifkan di kanvas pratinjau Anda:<\/p>\n<ul>\n<li><code>graph TD<\/code> \u2014 Menentukan tata letak bagan alur yang diatur dari Atas ke Bawah.<\/li>\n<li><code>sequenceDiagram<\/code> \u2014 Menentukan bagan timeline runtime kronologis.<\/li>\n<li><code>classDiagram<\/code> \u2014 Menentukan gambaran kerja perangkat lunak berbasis objek struktural.<\/li>\n<\/ul>\n<p>Berbeda dengan mesin teks-ke-bagan lainnya, Mermaid tidak memerlukan tag penutup di akhir. Parser hanya membaca deklarasi struktural pada baris pertama dan mengompilasi semua elemen yang bersarang langsung di bawahnya dalam kontainer blok kode Anda.<\/p>\n<h2>2. Mendeklarasikan Elemen: ID vs. Label Tampilan<\/h2>\n<p>Ketika memodelkan sistem perangkat lunak, Anda akan membuat berbagai elemen struktural seperti komponen, basis data, atau mikroservis. Dalam Mermaid, Anda mendeklarasikan elemen dengan menentukan ID alfanumerik internal yang pendek, diikuti langsung oleh gaya kurung yang mengendalikan bentuk visualnya, dan nama tampilan yang ramah pengguna:<\/p>\n<pre><code>microservice_id[API Pemrosesan Pembayaran]\r\ndb_id[(SQL Transaksi Pengguna)]<\/code><\/pre>\n<p><strong>Mengapa ini merupakan praktik terbaik:<\/strong> Menggunakan ID internal yang pendek dan bersih (seperti <code>microservice_id<\/code>) membuat menggambar garis hubungan jauh lebih cepat nantinya. Jika suatu saat Anda perlu mengubah label yang ditampilkan ke pelanggan dari \u201cAPI Pemrosesan Pembayaran\u201d menjadi \u201cLayanan Checkout Global\u201d, Anda hanya perlu mengeditnya di satu baris tempat deklarasi dilakukan, daripada memperbarui puluhan baris di seluruh skrip Anda.<\/p>\n<h2>3. Menguasai Panah Hubungan dan Rute Arah<\/h2>\n<p>Koneksi antar simpul sistem digambar menggunakan kombinasi tanda hubung (<code>-<\/code>), tanda sama dengan (<code>=<\/code>), dan kurung panah (<code>&gt;<\/code>). Gaya garis Anda memberi Anda kendali implisit atas bagaimana mesin tata letak otomatis menyesuaikan ukuran diagram Anda:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> menggambar panah berarah standar yang menunjuk dari elemen A langsung ke elemen B.<\/li>\n<li><code>A --- B<\/code>menggambar garis hubungan datar dan tidak berarah tanpa ujung panah, ideal untuk asosiasi sederhana.<\/li>\n<li><code>A -.-&gt; B<\/code>menciptakan garis ketergantungan titik-titik, yang merupakan standar industri untuk menunjukkan ketergantungan asinkron atau webhook jaringan.<\/li>\n<li><code>A ==&gt; B<\/code>menciptakan garis koneksi tebal dan tebal, sempurna untuk menyoroti jalur pemrosesan data utama atau tautan infrastruktur kritis.<\/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 memasukkan string teks di antara dua pasang tanda hubung, atau dengan menambahkan karakter pipa (<code>|Text|<\/code>) tepat setelah pemetaan hubungan Anda:<\/p>\n<pre><code>client_id -- \"HTTPS POST \/v1\/checkout\" --&gt; api_id\r\nclient_id --&gt; |HTTPS POST \/v1\/checkout| api_id<\/code><\/pre>\n<h3>Menulis Komentar Kode<\/h3>\n<p>Jika Anda ingin meninggalkan catatan administratif, kredit desain, atau penjelasan arsitektur di dalam file skrip Anda tanpa menampilkan kotak visual di kanvas, gunakan tanda persen ganda (<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","protected":false},"excerpt":{"rendered":"<p>Sebelum terjun ke tata letak arsitektur tertentu seperti bagan alur yang kompleks atau bagan timeline urutan waktu, sangat penting untuk memahami aturan dasar yang mengatur Buku Panduan Mermaid. Mermaid mengandalkan sistem notasi teks yang bersih dan sangat intuitif. Setelah Anda&#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-2114","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>Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\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\/mermaid-js-syntax-basis\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/\" \/>\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\\\/mermaid-js-syntax-basis\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\",\"name\":\"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"datePublished\":\"2026-05-26T08:00:30+00:00\",\"description\":\"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-syntax-basis\\\/#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 Sintaks Mermaid.js\"}]},{\"@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":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","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\/mermaid-js-syntax-basis\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","og_description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","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\/mermaid-js-syntax-basis\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/","name":"Mermaid.js Syntax Basics | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"datePublished":"2026-05-26T08:00:30+00:00","description":"Learn basic Mermaid.js notation in VPasCode, a flexible diagram-as-code tool that turns simple text to diagram assets.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-syntax-basis\/#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 Sintaks Mermaid.js"}]},{"@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\/2114","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=2114"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}