{"id":2078,"date":"2026-07-08T06:48:07","date_gmt":"2026-07-08T06:48:07","guid":{"rendered":"https:\/\/www.vpascode.com\/id\/docs\/uncategorized\/mermaid-js-c4-diagram-syntax-architecture-guide\/"},"modified":"2026-07-08T06:48:07","modified_gmt":"2026-07-08T06:48:07","slug":"mermaid-js-c4-diagram-syntax-architecture-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide","title":{"rendered":"Sintaks Diagram C4 Mermaid.js &#038; Panduan Arsitektur"},"content":{"rendered":"<p>Diagram C4 adalah metode visualisasi arsitektur yang distandarisasi yang dirancang untuk memodelkan sistem perangkat lunak pada berbagai tingkat abstraksi struktural. Dibangun secara native ke dalam Mermaid.js, <code>c4<\/code>mesin mengikuti empat tingkatan inti dari model C4: <strong>Konteks<\/strong> (ekosistem makro), <strong>Kontainer<\/strong> (aplikasi, layanan, dan basis data), <strong>Komponen<\/strong> (modul struktural internal), dan <strong>Interaksi dinamis<\/strong>. Alat ini menghilangkan kesulitan dalam styling CSS khusus dengan menerapkan blok arsitektur yang konsisten dan siap presentasi berdasarkan deklarasi teks Anda.<\/p>\n<h2>Memahami Abstraksi dan Kata Kunci Diagram C4<\/h2>\n<p>Mermaid mendukung empat header inisialisasi diagram khusus tergantung pada tingkat detail tata letak sistem Anda yang dibutuhkan:<\/p>\n<ul>\n<li><code>C4Context<\/code>: Berfokus pada tampilan gambaran besar, menampilkan pengguna, ekosistem perangkat lunak inti, dan ketergantungan eksternal tingkat tinggi.<\/li>\n<li><code>C4Container<\/code>: Memperbesar satu tingkatan untuk menguraikan aplikasi mandiri, antarmuka frontend, mikroservis, sistem penyimpanan basis data, dan antrian.<\/li>\n<li><code>C4Component<\/code>: Menggali lebih dalam ke dalam sebuah kontainer untuk menampilkan modul tingkat kode internal, seperti Kontroler, Layanan, dan Repositori.<\/li>\n<li><code>C4Dynamic<\/code>: Berfokus pada pelacakan interaksi data saat runtime atau urutan transaksi langkah demi langkah antar blok infrastruktur.<\/li>\n<\/ul>\n<h2>Struktur Sintaks Dasar<\/h2>\n<p>Setiap diagram C4 dimulai dengan header tingkatan khusus, diikuti oleh pernyataan judul opsional dan komponen makro yang dipisahkan koma. Kurung menyimpan parameter, dengan string dibatasi oleh tanda kutip ganda.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Sunting Mermaid di VPasCode<\/span>\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:eNplj00KwkAMRveCdwizqiCuvEE3ioil7V7SNtaxnVTmB\/T2TmxpBTcDk5fkfUn36cCeXn69AniEJvSgcuQauUWGk7DOQaGdJwOBfejgyF7LQ5bJK5m72Nie1MH5wZDdgsqojxXZkJGtkDtkFcsFDdIJzxkLg4a+MksdsRZsdYWN3qmNLB\/diXRGeHVv+cqyMdMsWCJFeCYTuI0DAhadoV7f0YPm22ANOj1LJ1lO\/c8df85zTNoGxumeQ1lmhdp8AFYpcC4=\" \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\">C4Context\r\n  judul \"Rancangan Konteks Sistem untuk Inti Internet\"\r\n  Orang(customer, \"Pelanggan Perbankan\", \"Seorang pelanggan bank dengan rekening pribadi.\")\r\n  Sistem(banking_system, \"Sistem Perbankan Internet\", \"Memungkinkan pelanggan melihat informasi rekening.\")\r\n  Rel(customer, banking_system, \"Menggunakan\", \"HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplj00KwkAMRveCdwizqiCuvEE3ioil7V7SNtaxnVTmB\/T2TmxpBTcDk5fkfUn36cCeXn69AniEJvSgcuQauUWGk7DOQaGdJwOBfejgyF7LQ5bJK5m72Nie1MH5wZDdgsqojxXZkJGtkDtkFcsFDdIJzxkLg4a+MksdsRZsdYWN3qmNLB\/diXRGeHVv+cqyMdMsWCJFeCYTuI0DAhadoV7f0YPm22ANOj1LJ1lO\/c8df85zTNoGxumeQ1lmhdp8AFYpcC4=\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Sunting Mermaid di VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"eQIcfSE\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-981\" decoding=\"async\" fetchpriority=\"high\" height=\"486\" sizes=\"(max-width: 1002px) 100vw, 1002px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png 1002w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-300x146.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-768x373.png 768w\" width=\"1002\"\/><\/p>\n<h2>Klasifikasi Makro Elemen C4 Lengkap<\/h2>\n<p>Perpustakaan C4 Mermaid menyediakan berbagai macam makro khusus yang luas untuk membedakan secara jelas antara komponen internal, sistem eksternal, dan lapisan basis data di semua tingkatan abstraksi.<\/p>\n<h3>1. Makro Orang &amp; Pengguna<\/h3>\n<ul>\n<li><code>Person(alias, label, [deskripsi], [sprite], [tag])<\/code>: Memodelkan pengguna manusia internal atau pemangku kepentingan.<\/li>\n<li><code>Person_Ext(alias, label, [deskripsi], [sprite], [tag])<\/code>: Memodelkan pengguna eksternal (misalnya, pihak ketiga pemasok atau auditor) di luar batas organisasi inti Anda.<\/li>\n<\/ul>\n<h3>2. Makro Sistem &amp; Ekosistem Perangkat Lunak<\/h3>\n<ul>\n<li><code>System(alias, label, [deskripsi], [sprite], [tag])<\/code>: Mewakili kumpulan sistem perangkat lunak internal yang berada dalam cakupan langsung manajemen Anda.<\/li>\n<li><code>System_Ext(alias, label, [deskripsi], [sprite], [tag])<\/code>: Memodelkan sistem perangkat lunak eksternal yang penting yang dikelola oleh pihak ketiga (misalnya, penyedia identitas, buku besar perbankan inti).<\/li>\n<li><code>SystemDb(alias, label, [deskripsi], [sprite], [tag])<\/code>: Menampilkan kotak penyimpanan data tingkat sistem berbentuk silinder.<\/li>\n<li><code>SystemDb_Ext(alias, label, [deskripsi], [sprite], [tag])<\/code>: Menampilkan lapisan basis data pihak ketiga eksternal.<\/li>\n<\/ul>\n<h3>3. Makro Lapisan Container (Lapisan C4Container)<\/h3>\n<ul>\n<li><code>Container(alias, label, teknologi, [deskripsi], [sprite], [tag])<\/code>: Memodelkan aplikasi yang dapat dijalankan secara terpisah, server API, atau antarmuka frontend.<\/li>\n<li><code>ContainerDb(alias, label, teknologi, [deskripsi], [sprite], [tag])<\/code>: Menampilkan pembungkus mesin basis data relasional atau non-relasional tingkat container.<\/li>\n<li><code>Container_Ext(alias, label, teknologi, [deskripsi], [sprite], [tag])<\/code>: Mewakili layanan kontainer awan eksternal atau aplikasi.<\/li>\n<li><code>ContainerDb_Ext(alias, label, teknologi, [deskripsi], [sprite], [tag])<\/code>: Mewakili lapisan penyimpanan basis data awan yang dikelola secara eksternal.<\/li>\n<\/ul>\n<h3>4. Makro Lapisan Komponen (Lapisan C4Component)<\/h3>\n<ul>\n<li><code>Komponen(alias, label, teknologi, [deskripsi], [sprite], [tag])<\/code>: Memetakan modul tingkat kode internal, lapisan, atau pengontrol kelas.<\/li>\n<li><code>KomponenDb(alias, label, teknologi, [deskripsi], [sprite], [tag])<\/code>: Memodelkan sistem penyimpanan mikro-komponen internal atau sistem penyimpanan sementara file tingkat rendah.<\/li>\n<\/ul>\n<hr \/>\n<h2>Kotak Batas &amp; Pembungkusan Struktural<\/h2>\n<p>Untuk menunjukkan perimeter keamanan, firewall perusahaan, atau batas aplikasi logis, Mermaid menyediakan tiga pembungkus kotak yang dikelilingi tanda kurung khusus. Elemen yang berada di dalamnya dikelompokkan secara visual bersama.<\/p>\n<ul>\n<li><code>Enterprise_Boundary(alias, label) { ... }<\/code>: Membungkus sistem tingkat tinggi di dalam batas visual yang luas yang mewakili perimeter infrastruktur perusahaan atau perusahaan secara keseluruhan.<\/li>\n<li><code>System_Boundary(alias, label) { ... }<\/code>: Mengelompokkan wadah aplikasi atau mikroservis yang saling terkait erat di dalam kotak ekosistem perangkat lunak yang terpadu.<\/li>\n<li><code>Container_Boundary(alias, label) { ... }<\/code>: Mengisolasi komponen tingkat kode di dalam lapisan konteks modul aplikasi tunggal.<\/li>\n<\/ul>\n<hr \/>\n<h2>Operator Arah Hubungan Lanjutan<\/h2>\n<p>Menghubungkan blok dalam diagram C4 bergantung pada <code>Rel<\/code>makro atau variasi arahnya yang secara eksplisit didefinisikan. Alih-alih melewatkan garis bagan alir mentah, Anda melacak koneksi secara semantik dengan menyatakan vektor teknologi langsung di dalam blok logika.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Token Sintaks Hubungan<\/th>\n<th>Arah Panah Visual<\/th>\n<th>Konteks Penyesuaian Penggunaan<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>Rel(from, to, label, [tech])<\/code><\/td>\n<td>Dinamis \/ Otomatis<\/td>\n<td>Hubungan bawaan. Biarkan algoritma tata letak menentukan jalur garis terbaik.<\/td>\n<\/tr>\n<tr>\n<td><code>BiRel(from, to, label, [tech])<\/code><\/td>\n<td>Dua Arah (&lt;\u2013&gt;)<\/td>\n<td>Menunjukkan saling tukar sapa dua arah, protokol duplex, atau proses sinkronisasi.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Back(from, to, label, [tech])<\/code><\/td>\n<td>Panah Terbalik Atas (&lt;\u2013)<\/td>\n<td>Menggambar hubungan maju dalam logika kode tetapi membalik panah visual yang terlihat ke belakang.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Neighbor(from, to, label, [tech])<\/code><\/td>\n<td>Preferensi Tata Letak Horizontal<\/td>\n<td>Memaksa simpul tujuan tetap tepat di samping simpul sumber pada baris horizontal yang sama.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Down(from, to, label, [tech])<\/code> \/ <code>Rel_D(...)<\/code><\/td>\n<td>Lurus ke Bawah (v)<\/td>\n<td>Memaksa aliran data vertikal turun ke lapisan basis data atau proses latar belakang berikutnya.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Up(from, to, label, [tech])<\/code> \/ <code>Rel_U(...)<\/code><\/td>\n<td>Langsung Ke Atas (^)<\/td>\n<td>Memaksa jalur hubungan bergerak lurus ke atas menuju komponen antarmuka pengguna klien.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Kiri(from, to, label, [tech])<\/code> \/ <code>Rel_L(...)<\/code><\/td>\n<td>Langsung Ke Kiri (&lt;-)<\/td>\n<td>Mengarahkan jalur secara horizontal ke sisi kiri elemen kanvas.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Kanan(from, to, label, [tech])<\/code> \/ <code>Rel_R(...)<\/code><\/td>\n<td>Langsung Ke Kanan (-&gt;)<\/td>\n<td>Mengarahkan jalur secara horizontal ke sisi kanan elemen kanvas.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Pengaturan Gaya Dinamis Kustom &amp; Penandaan (Overshoot Bentuk C4)<\/h2>\n<p>Untuk menandai aplikasi lama, menonjolkan sistem premium, atau menyoroti aliran data aman, Anda dapat membuat gaya kustom dengan menggunakan mesin penanda elemen. Anda menentukan matriks properti penanda di bagian atas dokumen Anda, lalu menambahkan label penanda tersebut ke definisi elemen Anda.<\/p>\n<h3>Kata Kunci Modifikasi Gaya:<\/h3>\n<ul>\n<li><code>UpdateGayaElemen(namaElemen, warnaLatar, warnaFont, [warnaBatas], [bayangan])<\/code>: Penggantian langsung palet latar belakang default kotak elemen yang eksplisit.<\/li>\n<li><code>UpdateGayaRel(from, to, warnaGaris, warnaTeks)<\/code>: Secara eksplisit menargetkan rute koneksi untuk mengubah warna jalur garis atau deskripsi koneksi.<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Edit Mermaid di VPasCode<\/span>\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:eNplj91KAzEQhe8F32HYpaAgInYX7KVWKaLCQhEvy2x2uo1NJiE\/1L59k9290BoYGGZyvjNnWS0NB\/oJlxcA37GLCoqGAsKj8zLQPkQHK2VaVPBEbm86gi90jPAWfTC6yLJca+kD6StFPYrjBq28geKVg4SGGHu5Q4Z31Fik8Qdp64wnD5Z0iy6mnULue2Tk2+L6F04nP8cba1xAlaTN0MAz+l1r0HWJPilHsJcMAbWVaQoHapND2sZ07kia6LlmsymC9OglHIZQGeYj9\/nDp+0w0AqP+KJIE\/\/NVnaLel5ts225Hd7QisX87l6MLv8A52nKWrQPtThnVAKpSowTYt+EVw==\" \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\">C4Context\r\n  judul \"Peta Arsitektur Global Berkode Warna Kustom\"\r\n  \r\n  Sistem(legacy_api, \"Inti Penagihan Lama\", \"Memproses pembaruan langganan.\")\r\n  Sistem(modern_portal, \"Portal Dashboard Pelanggan\", \"Mesin tampilan web pengguna modern.\")\r\n  \r\n  %% Kustomisasi warna langsung\r\n  UpdateGayaElemen(legacy_api, \"#d9534f\", \"#ffffff\", \"#c9302c\")\r\n  UpdateGayaElemen(modern_portal, \"#5cb85c\", \"#ffffff\", \"#4cae4c\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNplj91KAzEQhe8F32HYpaAgInYX7KVWKaLCQhEvy2x2uo1NJiE\/1L59k9290BoYGGZyvjNnWS0NB\/oJlxcA37GLCoqGAsKj8zLQPkQHK2VaVPBEbm86gi90jPAWfTC6yLJca+kD6StFPYrjBq28geKVg4SGGHu5Q4Z31Fik8Qdp64wnD5Z0iy6mnULue2Tk2+L6F04nP8cba1xAlaTN0MAz+l1r0HWJPilHsJcMAbWVaQoHapND2sZ07kia6LlmsymC9OglHIZQGeYj9\/nDp+0w0AqP+KJIE\/\/NVnaLel5ts225Hd7QisX87l6MLv8A52nKWrQPtThnVAKpSowTYt+EVw==\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Edit Mermaid di VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"dwmLoBg\"><img alt=\"\" class=\"alignnone size-full wp-image-982\" decoding=\"async\" height=\"438\" sizes=\"(max-width: 877px) 100vw, 877px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png 877w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-300x150.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-768x384.png 768w\" width=\"877\"\/><\/p>\n<hr \/>\n<h2>Blue Print Dunia Nyata: Peta Wadah Batas Sistem E-Commerce Perusahaan<\/h2>\n<p>Blue print wadah yang komprehensif dan berlapis ini melacak ekosistem e-commerce daring. Ia mengisolasi server inti internal menggunakan <code>Batasan_Sistem<\/code> wadah blok, menerapkan relay pemberitahuan awan eksternal melalui <code>System_Ext<\/code>, memetakan penyimpanan basis data relasional internal bersama layanan mikro pelacakan eksternal, dan menetapkan saluran komunikasi menggunakan parameter tumpukan teknologi yang eksplisit.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Edit Mermaid di VPasCode<\/span>\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:eNptVF1r20AQfC\/kPyyGgANp\/NI\/4C9oEidxLUMfzUraSOfT3Ym7vSam9L93T5ITkQQMOsmrmdmZXS1\/LJ1lVJb8xTeAYyxjA5Md2gJthRbuyctBI9yfyyBajhq2DfKz8wbW35fOGPIFwZZ8DFgj2snFtwT3lF6eFjGwk4prmGzJ5NQoeLKNYE3kyQPZIzV4xFqBYjKgkbFxFZTCbsiiybHWcm69K4VXk\/wE9ijIUKpKSbXUedJ4M7lKpNkpCM5h\/crTFk8CwYcKmV7wJHQbPKEVtPn2FjL2qu1E3DtGDS3ZkzJt979GzxG0p1IxtKrGxMyqwkFXUKKIjHeBQsc7Yl64aEv0pykVgzOHULiWuv69MsTi4q1lNfJucgV\/EwTAWx7TZy9HsuUB21benbeN0hgU\/KYc9k67pPyRXvnmGK5hR1jwYGilhCV5hoEYAiOr8OZnilWByFYjI6X1qor2bOFYRVFToV3kQyD\/RxU0MvFBae9gORR0clxJnZz1a+sphF6QaTufAJvoE+kRR9QyD+l01lfVimNSJCOhP8tZ5VPnS\/KHMhfolcxKLk3CIuoIS7ljQdlSSPIS99YFrjxlvzaDNX3AkKMXS1g0BNTiRK1kRP3gUjHg5Am0obKSuE5JKhq0g6R\/feKXl3DXdSVxSkcJau6DzLHm6LFJJTtqRhvwIdMHWYYa+TzcvQcm6e+8SJHovpOf+\/02my28e5Eceg2CfFi5F\/thUL4IbDwT703LdjQOy7cEjFybqBLbXfb0ONuts31alJ7tzLhTVc1fTMUolnef0+zFkdHOyraWShpt0CQiSWZ2t1os0\/eFpOC9sw09f0XzeaVTc65LD7umxDbVYLeeuQyqUPfpsbRXC7msaIvcWeE0WSgprUQSkz4K+002m0vOs87wydV\/d8PCpQ==\" \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\">C4Container\r\n  judul \"Rancangan Kerangka Kontainer untuk Platform E-Commerce Perusahaan\"\r\n\r\n  Orang(customer, \"Pembeli Online\", \"Menjelajahi item katalog dan menambahkan produk ke keranjang digital mereka.\")\r\n  System_Ext(payment_gateway, \"Layanan API Stripe\", \"Kotak penyimpanan kartu kredit pihak ketiga dan mesin pemroses.\")\r\n\r\n  System_Boundary(ecommerce_scope, \"Perimeter Inti E-Commerce\") {\r\n    Container(frontend_app, \"Aplikasi Web Toko\", \"Next.js, React\", \"Mengirimkan aset statis dan menangani sesi keranjang pengguna.\")\r\n    Container(checkout_service, \"Layanan Mikro Checkout\", \"Node.js, Express\", \"Memproses alur kerja keranjang belanja dan menghitung pajak.\")\r\n    ContainerDb(order_db, \"Database Buku Catatan Pesanan\", \"PostgreSQL\", \"Menyimpan baris transaksi historis dan catatan buku ledger yang aman.\")\r\n  }\r\n\r\n  %% Jalur Interaksi Arsitektural\r\n  Rel(customer, frontend_app, \"Melihat produk dan memesan menggunakan\", \"HTTPS\/Browser\")\r\n  Rel_Down(frontend_app, checkout_service, \"Mengirimkan transaksi payload belanja melalui\", \"JSON\/REST API\")\r\n  \r\n  Rel_Right(checkout_service, order_db, \"Menyimpan status transaksional di dalam\", \"SQL\/JDBC Koneksi\")\r\n  Rel_Left(checkout_service, payment_gateway, \"Mengotorisasi panggilan pembayaran yang telah ditempatkan token dengan\", \"API TLS\/Aman\/HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptVF1r20AQfC\/kPyyGgANp\/NI\/4C9oEidxLUMfzUraSOfT3Ym7vSam9L93T5ITkQQMOsmrmdmZXS1\/LJ1lVJb8xTeAYyxjA5Md2gJthRbuyctBI9yfyyBajhq2DfKz8wbW35fOGPIFwZZ8DFgj2snFtwT3lF6eFjGwk4prmGzJ5NQoeLKNYE3kyQPZIzV4xFqBYjKgkbFxFZTCbsiiybHWcm69K4VXk\/wE9ijIUKpKSbXUedJ4M7lKpNkpCM5h\/crTFk8CwYcKmV7wJHQbPKEVtPn2FjL2qu1E3DtGDS3ZkzJt979GzxG0p1IxtKrGxMyqwkFXUKKIjHeBQsc7Yl64aEv0pykVgzOHULiWuv69MsTi4q1lNfJucgV\/EwTAWx7TZy9HsuUB21benbeN0hgU\/KYc9k67pPyRXvnmGK5hR1jwYGilhCV5hoEYAiOr8OZnilWByFYjI6X1qor2bOFYRVFToV3kQyD\/RxU0MvFBae9gORR0clxJnZz1a+sphF6QaTufAJvoE+kRR9QyD+l01lfVimNSJCOhP8tZ5VPnS\/KHMhfolcxKLk3CIuoIS7ljQdlSSPIS99YFrjxlvzaDNX3AkKMXS1g0BNTiRK1kRP3gUjHg5Am0obKSuE5JKhq0g6R\/feKXl3DXdSVxSkcJau6DzLHm6LFJJTtqRhvwIdMHWYYa+TzcvQcm6e+8SJHovpOf+\/02my28e5Eceg2CfFi5F\/thUL4IbDwT703LdjQOy7cEjFybqBLbXfb0ONuts31alJ7tzLhTVc1fTMUolnef0+zFkdHOyraWShpt0CQiSWZ2t1os0\/eFpOC9sw09f0XzeaVTc65LD7umxDbVYLeeuQyqUPfpsbRXC7msaIvcWeE0WSgprUQSkz4K+002m0vOs87wydV\/d8PCpQ==\" \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             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\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>\n<span>Edit Mermaid di VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"iepSRLk\"><img alt=\"\" class=\"alignnone size-full wp-image-983\" decoding=\"async\" height=\"863\" sizes=\"(max-width: 1746px) 100vw, 1746px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png 1746w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-300x148.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1024x506.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-768x380.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1536x759.png 1536w\" width=\"1746\"\/><\/p>\n<hr \/>\n<h2>Kesalahan Sintaks Umum &amp; Kendala Sistem<\/h2>\n<p>Saat mengompilasi peta C4 yang bersih untuk kerangka perangkat lunak, waspadai parameter eksekusi berikut untuk mencegah kerusakan diagram:<\/p>\n<ul>\n<li><strong>Format Pemisah Koma:<\/strong> Berbeda dengan hampir semua skema Mermaid lainnya, makro C4 mengharuskan koma yang ketat di antara parameter: <code>Orang(id, \"Label\", \"Desc\")<\/code>. Melewatkan koma pemisah akan membuat pembuat tata letak benar-benar gagal.<\/li>\n<li><strong>Kutipan Label yang Direservasi:<\/strong> Bidang tampilan, tag teknologi, dan blok deskripsi di dalam makro *harus* dibungkus dengan tanda kutip ganda yang jelas. Menempatkan teks mentah ke dalam bidang tanpa bungkus kutipan akan menyebabkan kesalahan parsing yang merusak.<\/li>\n<li><strong>Urutan Penempatan Batas:<\/strong> Saat membungkus elemen di dalam <code>System_Boundary<\/code> atau <code>Enterprise_Boundary<\/code> blok, Anda harus secara eksplisit membersihkan isi ruang kerjanya menggunakan kurung kurawal standar <code>{ }<\/code>. Meninggalkan kurung batas terbuka atau mencocokkannya secara salah akan merusak tata letak rendering.<\/li>\n<li><strong>Instansiasi Alias Dinamis:<\/strong> Anda tidak dapat menggambar hubungan (<code>Rel<\/code>) ke identifikasi alias yang belum secara eksplisit diinisialisasi oleh blok makro elemen di atasnya. Pertahankan alur deklarasi Anda berjalan secara progresif dari atas ke bawah.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Diagram C4 adalah metode visualisasi arsitektur yang distandarisasi yang dirancang untuk memodelkan sistem perangkat lunak pada berbagai tingkat abstraksi struktural. Dibangun secara native ke dalam Mermaid.js, c4mesin mengikuti empat tingkatan inti dari model C4: Konteks (ekosistem makro), Kontainer (aplikasi, layanan,&#8230;","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":24,"template":"","meta":{"_yoast_wpseo_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","_yoast_wpseo_metadesc":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","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":""}},"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":""},"ld_collection":[14],"class_list":["post-2078","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 C4 Model Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile 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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-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_6a4df36e38f3c.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-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"name\":\"Mermaid C4 Model 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-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"datePublished\":\"2026-07-08T06:48:07+00:00\",\"description\":\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/id\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-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\":\"Sintaks Diagram C4 Mermaid.js &#038; Panduan Arsitektur\"}]},{\"@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 C4 Model Syntax | VPasCode Text to Diagram Guide","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile 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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_locale":"id_ID","og_type":"article","og_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","og_description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","url":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","name":"Mermaid C4 Model 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-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","datePublished":"2026-07-08T06:48:07+00:00","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/id\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-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":"Sintaks Diagram C4 Mermaid.js &#038; Panduan Arsitektur"}]},{"@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\/2078","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=2078"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/id\/wp-json\/wp\/v2\/ld_collection?post=2078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}