{"id":2082,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Panduan Sintaks dan Tata Letak Diagram Arsitektur Mermaid.js"},"content":{"rendered":"

Diagram arsitektur menyediakan kerangka kerja terstruktur yang digunakan oleh arsitek sistem dan tim DevOps untuk memvisualisasikan pengaturan infrastruktur, mikroservis awan, dan konfigurasi tata letak struktural. Dibangun di atas architecture-beta<\/code>mesin, alat berbasis teks ini menggantikan utilitas seret manual dengan mengatur secara otomatis kelompok layanan struktural, klaster basis data, gateway, dan jalur tepi menjadi tata letak sistem yang bersih dan dapat diprediksi.<\/p>\n

Struktur Sintaks Dasar<\/h2>\n

Setiap diagram dimulai dengan architecture-beta<\/code>header deklarasi. Anda mengisi kanvas dengan mendefinisikan elemen node individual menggunakan service<\/code>kata kunci, dan peta jalur koneksi dengan menentukan port koordinat arah yang tepat (T<\/strong>op, B<\/strong>ottom, L<\/strong>eft, R<\/strong>ight) yang dipisahkan oleh titik dua dan tanda hubung ganda.<\/p>\n

\n
\nMermaid<\/span>\n\n<\/path><\/path><\/svg>\nEdit Mermaid di VPasCode<\/span>\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
architecture-beta\r\n  service gateway(internet)[Label Gateway]\r\n  service server(server)[Server Aplikasi]\r\n  \r\n  gateway:B -- T:server<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEdit Mermaid di VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Referensi Sintaks<\/h2>\n
Tabel di bawah ini menjelaskan komponen data utama, kata kunci format, dan atribut konektor yang digunakan untuk membuat peta ruang kerja arsitektur dalam Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Komponen Sintaks<\/th>\nPersyaratan Tipe<\/th>\nDeskripsi & Aturan Penggunaan<\/th>\n<\/tr>\n<\/thead>\n
Deklarasi<\/strong><\/td>\nIdentifikasi Kata Kunci<\/td>\nMenginisialisasi kanvas ruang kerja pemetaan infrastruktur. Harus menggunakan arsitektur-beta<\/code> blok.<\/td>\n<\/tr>\n
Node Layanan<\/strong><\/td>\nKata Kunci + Blok Identitas<\/td>\nMendeklarasikan entitas arsitektural. Menggunakan sintaks: layanan id(ikon)[Label Tampilan]<\/code>.<\/td>\n<\/tr>\n
Bingkai Grup<\/strong><\/td>\nKata Kunci Kontainer<\/td>\nMengelompokkan layanan yang terkait di dalam wadah visual. Menggunakan sintaks: grup id(ikon)[Label Grup]<\/code>.<\/td>\n<\/tr>\n
Kata Kunci Dalam<\/strong><\/td>\nModifikasi Penugasan<\/td>\nSecara eksplisit menugaskan node layanan untuk berada di dalam bingkai grup yang dideklarasikan secara khusus: layanan id(ikon)[Label] dalam groupId<\/code>.<\/td>\n<\/tr>\n
Node Persimpangan<\/strong><\/td>\nIdentifikasi Kata Kunci<\/td>\nMembentuk titik pusat penyesuaian struktural yang digunakan untuk mengarahkan dengan rapi jalur tautan kompleks yang bersifat multi-arah: id persimpangan<\/code>.<\/td>\n<\/tr>\n
Sisi Koneksi<\/strong><\/td>\nOperator Arah Port<\/td>\nMengkonfigurasi jalur pelacakan arah dengan menempelkan tautan pada sisi node tertentu (T, B, L, R): sumber:side -- side:target<\/code>. Mendukung ujung panah arah (--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Pengelompokan Lanjutan & Penanganan Sisi Port<\/h2>\n
Untuk mengendalikan secara tepat bagaimana tautan bergerak antar elemen tanpa terlihat berantakan, mesin arsitektur memerlukan koneksi port eksplisit. Node-node yang terkait dapat dikelompokkan di dalam kelompok struktural untuk memperjelas batas sistem.<\/p>\n
1. Aturan Koneksi Port yang Tepat<\/h3>\n
Anda menentukan di mana garis koneksi keluar dan masuk ke suatu komponen dengan menambahkan tanda titik dua dan bendera arah tepi (“T<\/code>, B<\/code>, K<\/code>, K<\/code>) ke identifikasi node yang sesuai:<\/p>\n