{"id":2080,"date":"2026-07-08T06:20:18","date_gmt":"2026-07-08T06:20:18","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"},"modified":"2026-07-08T06:20:18","modified_gmt":"2026-07-08T06:20:18","slug":"mermaid-js-block-diagram-syntax-grid-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","title":{"rendered":"Panduan Sintaks Diagram Blok Mermaid.js &#038; Tata Letak Grid"},"content":{"rendered":"<p>Diagram Blok adalah mesin tata letak terstruktur yang digunakan untuk mewakili arsitektur perangkat lunak yang kompleks, platform perangkat keras, atau model organisasi. Diperkenalkan secara bawaan di Mermaid.js, mesin ini<code>blok<\/code>mesin memperlakukan kanvas tata letak sebagai matriks grid matematis absolut. Ini memberikan kontrol yang tepat atas penyelarasan kolom, batas-batas penyusunan tata letak yang terisolasi, blok jarak struktural, dan konfigurasi koneksi port tepi yang eksplisit.<\/p>\n<h2>Memahami Strategi Matriks Grid<\/h2>\n<p>Berbeda dengan bagan alir bentuk bebas standar yang secara dinamis menebak jalur tata letak, diagram blok dibangun di atas sistem koordinat grid linier yang kaku:<\/p>\n<ul>\n<li><strong>Ambang Kolom:<\/strong>Anda menetapkan batas horizontal yang ketat menggunakan<code>kolom<\/code>modifier. Ketika grid penuh dengan blok, elemen tambahan akan melingkari secara bersih ke baris berikutnya secara otomatis.<\/li>\n<li><strong>Penentuan Ukuran Berdasarkan Bidang Grid:<\/strong>Secara default, setiap blok menempati satu slot koordinat ($1 times 1$). Anda dapat mengubah perilaku ini dengan menetapkan lebar kolom eksplisit agar elemen menyebar sempurna di beberapa jalur.<\/li>\n<\/ul>\n<h2>Struktur Sintaks Dasar<\/h2>\n<p>Setiap tata letak dimulai dengan<code>blok<\/code>header deklarasi. Diikuti dengan menetapkan kapasitas lebar baris menggunakan<code>kolom<\/code>kata kunci, dan mendeklarasikan blok pada baris-baris berurutan.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOz8nPVTAGMZPzcwvy81LzShyjlZyA0goBqUUlibmJSrEosk5Q2ZDUvPTEDDRJZ6ikd2JeYp5SLABu\/yCv\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">blok\r\n  kolom 3\r\n  componentA[\"Blok Pertama\"]\r\n  componentB[\"Blok Tengah\"]\r\n  componentC[\"Blok Kanan\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOz8nPVTAGMZPzcwvy81LzShyjlZyA0goBqUUlibmJSrEosk5Q2ZDUvPTEDDRJZ6ikd2JeYp5SLABu\/yCv\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjCGcHIL8vNS80oco5XcMouKSxScQOqUYlEknaKVfDNTUnJSsco6RysFZaZnwLUCABGuImU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"MVMmAKu\"><img alt=\"\" class=\"alignnone size-full wp-image-966\" decoding=\"async\" height=\"42\" sizes=\"(max-width: 321px) 100vw, 321px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png 321w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466-300x39.png 300w\" width=\"321\"\/><\/p>\n<h2>Referensi Sintaks<\/h2>\n<p>Tabel di bawah ini menjelaskan parameter data dasar, kata kunci gaya khusus, dan wadah struktural yang secara bawaan dikenali oleh penerjemah blok.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Komponen Sintaks<\/th>\n<th>Persyaratan Tipe<\/th>\n<th>Deskripsi &amp; Aturan Tata Letak Visual<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Deklarasi<\/strong><\/td>\n<td>Pengenal Kata Kunci<\/td>\n<td>Menginisialisasi kanvas blok matriks grid. Harus menggunakan<code>blok<\/code> string header.<\/td>\n<\/tr>\n<tr>\n<td><strong>Set Kolom<\/strong><\/td>\n<td>Kata Kunci + Bilangan Bulat<\/td>\n<td>Menentukan jumlah total slot horizontal sebelum melingkari baris (contoh: <code>kolom 4<\/code>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Blok Standar<\/strong><\/td>\n<td>ID + Label Opsional<\/td>\n<td>Menciptakan kotak data standar: <code>id[\"Teks Label\"]<\/code>. Dekorator bentuk sesuai dengan sintaks diagram alir (contoh: <code>(())<\/code> untuk lingkaran, <code>[()]<\/code> untuk basis data).<\/td>\n<\/tr>\n<tr>\n<td><strong>Overskrip Dimensi Blok<\/strong><\/td>\n<td>Blok Parameter Titik Dua<\/td>\n<td>Mengganti footprint grid skala tata letak default $1 times 1$ dengan secara eksplisit menetapkan blok lebar kolom yang disesuaikan: <code>id:lebar<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Elemen Ruang<\/strong><\/td>\n<td>Kata Kunci yang Direservasi<\/td>\n<td>Memasukkan ubin ruang kosong $1 times 1$ yang tidak terlihat dan struktural ke dalam baris aktif menggunakan kata kunci tepat <code>ruang<\/code> kata kunci. Anda dapat mengalikan rentang lebar secara langsung seperti <code>ruang:2<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Panah Blok<\/strong><\/td>\n<td>ID Entitas Khusus<\/td>\n<td>Menampilkan kotak panah transisi tebal dan terstruktur di dalam slot kisi: <code>arrowId&lt;[\"Label\"]&gt;(arah)<\/code>. Arah meliputi <code>atas<\/code>, <code>bawah<\/code>, <code>kiri<\/code>, <code>kanan<\/code>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bingkai Komposit<\/strong><\/td>\n<td>Blok \/ Kontainer Akhir<\/td>\n<td>Menempatkan matriks sub-kisi terpisah secara langsung di dalam slot blok induk: <code>blok:SubID ... akhir<\/code>. Sub-blok dapat menentukan batas kolom mandiri mereka sendiri.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr\/>\n<h2>Fitur Lanjutan: Dimensi Blok dan Modifikasi Ruang yang Jelas<\/h2>\n<p>Untuk tata letak asimetris, Anda dapat memberikan metrik ukuran horizontal yang jelas langsung ke blok standar atau pembagi ruang menggunakan pemisah notasi titik dua (<code>:lebar<\/code>). Ini memaksa elemen untuk memanjang melintasi beberapa posisi kisi dengan bersih.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOz8nPVTABMcszU1Kd83ML8vNS80qilTxSE1NSixRcEoszkvITi1IUfFKTEouUYq3AinNS00qcEouilYKBusDiCkWliXnpVkYKRZnpGRC5gMS81ByF0JLE3ESlWAA2CSVX\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">blok\r\n  kolom 4\r\n  wideComponent[\"Header Dashboard Lebar\"]:4\r\n  leftBar[\"Sidebar\"] ruang:2 rightBar[\"Panel Utama\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOz8nPVTABMcszU1Kd83ML8vNS80qilTxSE1NSixRcEoszkvITi1IUfFKTEouUYq3AinNS00qcEouilYKBusDiCkWliXnpVkYKRZnpGRC5gMS81ByF0JLE3ESlWAA2CSVX\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjABccozU1Kd83ML8vNS80qilcKBXAWXxOKMpPzEohQFj9TElNQipVgrsNqc1LQSp8SiaKVgoKqkRKC4QnFBYnKqlZFCUWZ6BkTONzEzTyEgMS81RykWAHJPJbg=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZuoRoRz\"><img alt=\"\" class=\"alignnone size-full wp-image-967\" decoding=\"async\" height=\"82\" sizes=\"(max-width: 372px) 100vw, 372px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a.png 372w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded784d18a-300x66.png 300w\" width=\"372\"\/><\/p>\n<hr\/>\n<h2>Fitur Lanjutan: Jenis Sisi, Arah, dan Opsi Tautan<\/h2>\n<p>Koneksi di dalam <code>blok<\/code>engine dibagi menjadi garis semantik standar dan panah blok tata letak struktural. Garis koneksi standar mendukung penentuan batasan arah eksplisit untuk menentukan bagaimana garis membungkus elemen.<\/p>\n<h3>1. Penghubung Garis Standar<\/h3>\n<p>Koneksi blok menggunakan operator tautan standar (<code>--&gt;<\/code>, <code>--<\/code>, <code>&lt;--&gt;<\/code>). Namun, Anda dapat mengendalikan rute dengan menambahkan arah atau modifikasi di dalam tanda kurung:<\/p>\n<ul>\n<li><code>A --&gt; B<\/code> : Menggambar garis arah standar dari elemen A ke elemen B.<\/li>\n<li><code>A -- x B<\/code> : Menggambar jalur koneksi yang diakhiri dengan tanda \u201cX\u201d yang menunjukkan jalur yang terhalang.<\/li>\n<li><code>A -- o B<\/code> : Menggambar jalur koneksi yang diakhiri dengan titik penghubung lingkaran terbuka.<\/li>\n<\/ul>\n<h3>2. Panah Blok Tata Letak Dinamis<\/h3>\n<p>Panah blok diperlakukan sebagai komponen tata letak yang sebenarnya dan menempati blok indeks koordinat yang sebenarnya dalam matriks anggaran baris Anda. Mereka menggunakan properti sintaks lebih besar dari dan kurang dari untuk memetakan jalur aliran fisik:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOz8nPVTAGMQuK8lNKi1PzopUCoCwFl8SSRKVYsGRiXmJGSGpeemKGTbRSSFFiXnFaflGuApCVlpaZrBRrp5ENVJKnCTE0r7g0F2SSN5QFNQkA0\/Qm8A==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">blok\r\n  kolom 3\r\n  produsen[\"Produsen Data\"]\r\n  panahTengah&lt;[\"Transform Traffic\"]&gt;(kanan)\r\n  konsumen[\"Konsumen Data\"]<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLysnP5uVSUMjOz8nPVTAGMQuK8lNKi1PzopUCoCwFl8SSRKVYsGRiXmJGSGpeemKGTbRSSFFiXnFaflGuApCVlpaZrBRrp5ENVJKnCTE0r7g0F2SSN5QFNQkA0\/Qm8A==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLyslPzublUlBIzs8pzc0rVjAGcQqK8lNKk1OLopVcEksSFQKgXKVYkGRuZopjUVF+uU20UkhRYl5xWn5RrgKQlZaWmawUa6dRlJmeUaIJMTOvuDQXbowzlKsUCwDgCicN\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"uiUqlGG\"><img alt=\"\" class=\"alignnone size-full wp-image-968\" decoding=\"async\" height=\"50\" sizes=\"(max-width: 477px) 100vw, 477px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30.png 477w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded82bcd30-300x31.png 300w\" width=\"477\"\/><\/p>\n<hr\/>\n<h2>Fitur Lanjutan: Penumpukan Matriks Blok Bawah (Pengelompokan Komposit)<\/h2>\n<p>The <code>blok:id<\/code>wrapper berfungsi sebagai lingkungan konteks kotak tata letak yang terisolasi. Sebuah kontainer grup aplikasi dapat menetapkan jumlah kolom horizontal unik sendiri di dalam blok bawah, memungkinkan komponen kompleks dikelompokkan erat tanpa memengaruhi jarak grid templat kanvas induk global.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo1jLEOwjAMRHck\/sHKJ8DGVjFUHUBdmCIGp1jUJK0rJ6Xi70kUdbB07+58Log\/HgC8BJngVOQbE234eySc0Jq2ErRBHAbzLI1yLj9eJh5UIumXB7qGNSbSku1z5wq4ptGau7wImizrRrYXtqbpO+jmxLu5iXpSa24UeYaeMnywhuhH1j9x8zTG\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">blok\r\n  kolom 2\r\n  gatewayUtama[\"Gateway Global\"]\r\n  \r\n  blok:microserviceCluster\r\n    kolom 3\r\n    auth[\"Node Auth\"]\r\n    api[\"API Inti\"]\r\n    worker[\"Mesin Pekerja\"]\r\n  akhir<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNo1jLEOwjAMRHck\/sHKJ8DGVjFUHUBdmCIGp1jUJK0rJ6Xi70kUdbB07+58Log\/HgC8BJngVOQbE234eySc0Jq2ErRBHAbzLI1yLj9eJh5UIumXB7qGNSbSku1z5wq4ptGau7wImizrRrYXtqbpO+jmxLu5iXpSa24UeYaeMnywhuhH1j9x8zTG\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjLEOwjAMRHck\/sHyJ8DGVlWoYkFsDBFDkloQNY2Rk1Dx99S0iMFnvbPvXGQ\/bDcAnmMdU4adgjCXzhaa7NtgF9nZCCvjTR90nEYPY\/DCmeQVPLWx5kKix3\/hfkFby8NgMyucuaelZrafwWDLQtBcTj9zYhlIDF6\/G47pHtKaoNR\/AG9nNiU=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"kcZGAdG\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-969\" decoding=\"async\" height=\"58\" loading=\"lazy\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8.png 747w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded8d55ac8-300x23.png 300w\" width=\"747\"\/><\/p>\n<hr\/>\n<h2>Blue Print Dunia Nyata: Infrastruktur Multi-Tier dengan Cache<\/h2>\n<p>Blue print komprehensif ini menunjukkan pengaturan infrastruktur tingkat produksi yang bersih. Ini menetapkan tata letak kisi pemrosesan 3 kolom, menggunakan elemen struktural<code>ruang<\/code>elemen untuk memisahkan lapisan basis data, memetakan arah bawah yang tebal<code>blockArrow<\/code>, dan mengisolasi kontainer sub-sistem internal terpisah menggunakan nested <code>block:id ... end<\/code> wrapper komposit.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UU1rAjEQvQv+h2FBcA97qN6kCGpbkFWwVehBPMzuDtuYOAn5qPTfN9Faq9DbvMx7mfdmKqVr2e0A1FqFAzsYdjsJ9nowRSscPIxggV\/IyLBEF07cht1MCWLf72dlKuCdqizPU09pbKaokGuy22wREVwgbMiIbJdYzmBNd5MGI5ioYKHUTNIJ2AQbGCTBUkirHdlP4f5oow195DcdPD3GQagCLAR7dPCi7RFtk+3G\/UTJ\/xs4HEGp0PnoLCpbGbiNKSdGCYlxfqkPRjvhk6ZKaxqhMTMVkiC9XXc2OEMM\/mOdbNa0zSbRF\/vTT+fIsW\/EM7eCY3dFkuweYbKawzzSzhTi5jYgeqzQ0bafPU1hpZ1vLa1fF1m++42yJCaPRkbnhjgKYtGe4jlvg\/TBooIDeiukKyQVPyXEk7awp5j\/\/mpQFGO4jXpFp+bF1zdSRrN0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">block\r\n  columns 3\r\n\r\n  %% Baris 1: Layanan Masuk\r\n  dnsClient((\"Klien Web\"))\r\n  loadBalancer[\"Load Balancer Tepi\"]\r\n  space\r\n\r\n  %% Baris 2: Alur Koneksi Turun ke Mikroservis\r\n  space\r\n  downRoute&lt;[\"Lalu Lintas Forward\"]&gt;(down)\r\n  space\r\n\r\n  %% Baris 3: Klaster Lingkungan Aplikasi Komposit\r\n  block:appCluster\r\n    columns 2\r\n    authService[\"Autentikasi\"]\r\n    apiEngine[\"Pekerja API Inti\"]\r\n  end\r\n  space\r\n  database[(\"DB PostgreSQL\")]\r\n\r\n  %% Menetapkan penataan garis struktural matriks-ke-matriks yang jelas\r\n  loadBalancer --&gt; appCluster\r\n  appCluster --&gt; database<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UU1rAjEQvQv+h2FBcA97qN6kCGpbkFWwVehBPMzuDtuYOAn5qPTfN9Faq9DbvMx7mfdmKqVr2e0A1FqFAzsYdjsJ9nowRSscPIxggV\/IyLBEF07cht1MCWLf72dlKuCdqizPU09pbKaokGuy22wREVwgbMiIbJdYzmBNd5MGI5ioYKHUTNIJ2AQbGCTBUkirHdlP4f5oow195DcdPD3GQagCLAR7dPCi7RFtk+3G\/UTJ\/xs4HEGp0PnoLCpbGbiNKSdGCYlxfqkPRjvhk6ZKaxqhMTMVkiC9XXc2OEMM\/mOdbNa0zSbRF\/vTT+fIsW\/EM7eCY3dFkuweYbKawzzSzhTi5jYgeqzQ0bafPU1hpZ1vLa1fF1m++42yJCaPRkbnhjgKYtGe4jlvg\/TBooIDeiukKyQVPyXEk7awp5j\/\/mpQFGO4jXpFp+bF1zdSRrN0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptUcFqAjEQvQv+wxAQdg97qN6kCGpXKFiwWvAgHsZsXIPZzDLJaj+\/iatVS295897MmzfZGZLHbgdAkmkq62DQ7UTY68GSzvAyhNx6RisVrBSftFQu0oV1U6OV9Uki1moHLRBpGklDWEzQxCbeiLwoFcxDCW41sY0qV6NUT2b9IUzJWiW9tiXMTCgVdLbgCT60ZHIPC1y74aJYUuPV60bMiM\/IBXwx7vdaiu0oiXT6v90g2lU1Oe0VjOvaaIlekw2JT5rJViFRCNY4rzi27eKphljXD7X73fotxMYfrofaiHEAYch1bhs7SGqd21LbIJgSB+vFO6yJj7fDKFs8J0SPO3Rqk4gFOV+yWn3O4W0i0u1vntwFjdHuANIoZKjQs\/7OPGXtC5znRvqG0YAJ1oBGl5eE7u+PQZaN4DnlHV3I20I\/aXq0Mg==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edit Mermaid di VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"nAmZcPX\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-970\" decoding=\"async\" height=\"284\" loading=\"lazy\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf.png 838w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-300x102.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4deda7017bf-768x260.png 768w\" width=\"838\"\/><\/p>\n<hr\/>\n<h2>Kesalahan Sintaks Umum &amp; Kendala Sistem<\/h2>\n<p>Saat mengompilasi peta matriks kisi yang akurat, pertimbangkan pemeriksaan validasi berikut untuk mencegah kesalahan pemrosesan:<\/p>\n<ul>\n<li><strong>Penerapan Anggaran Kolom:<\/strong>Catat dengan cermat jumlah kolom Anda. Jika Anda menentukan <code>kolom 3<\/code> dan menulis 4 blok berurutan pada satu baris, blok keempat akan secara otomatis turun ke baris 2, yang dapat merusak jalur koneksi kiri-ke-kanan yang dimaksudkan.<\/li>\n<li><strong>Urutan Penempatan Bersarang Komposit:<\/strong> Saat membangun kontainer internal dengan <code>block:id<\/code>, Anda harus selalu menutup ruang kerja sub-kisi menggunakan <code>end<\/code> kata kunci pada baris terpisah sebelum menyatakan elemen berikutnya. Gagal menutup blok akan menghentikan pembangunan diagram.<\/li>\n<li><strong>Keterbatasan Target Panah Blok:<\/strong> Properti arah yang dikelilingi tanda kurung setelah panah blok (misalnya, <code>(up)<\/code>, <code>(down)<\/code>) harus berupa literal kecil yang cocok sempurna dengan kata kunci sistem. Menggunakan huruf besar pada arah akan menyebabkan kesalahan pemrosesan.<\/li>\n<li><strong>Tabrakan Batas Label:<\/strong> Dekorator bentuk bagan alir standar (seperti tanda kurung <code>()<\/code> untuk kotak bulat atau kurung kurawal <code>{}<\/code> untuk berlian) sepenuhnya didukung. Pastikan semua label teks tampilan di dalam bentuk menggunakan tanda kutip ganda yang bersih untuk menghindari penghapusan karakter.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Diagram Blok adalah mesin tata letak terstruktur yang digunakan untuk mewakili arsitektur perangkat lunak yang kompleks, platform perangkat keras, atau model organisasi. Diperkenalkan secara bawaan di Mermaid.js, mesin iniblokmesin memperlakukan kanvas tata letak sebagai matriks grid matematis absolut. Ini memberikan&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":22,"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-2080","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 Block Diagram Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\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-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.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=\"5 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-block-diagram-syntax-grid-layout-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\",\"name\":\"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"datePublished\":\"2026-07-08T06:20:18+00:00\",\"description\":\"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4ded6cdf466.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-block-diagram-syntax-grid-layout-guide\\\/#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\":\"Panduan Sintaks Diagram Blok Mermaid.js &#038; Tata Letak Grid\"}]},{\"@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 Block Diagram Syntax | VPasCode Text to Diagram Guide","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","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-block-diagram-syntax-grid-layout-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","og_description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"5 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/","name":"Mermaid Block Diagram Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","datePublished":"2026-07-08T06:20:18+00:00","description":"Model hardware components and high-level software blocks with Mermaid in VPasCode, a free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4ded6cdf466.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-block-diagram-syntax-grid-layout-guide\/#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":"Panduan Sintaks Diagram Blok Mermaid.js &#038; Tata Letak Grid"}]},{"@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\/2080","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\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/media?parent=2080"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}