Panduan Sintaks dan Tata Letak Diagram Arsitektur Mermaid.js

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-betamesin, 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.

Struktur Sintaks Dasar

Setiap diagram dimulai dengan architecture-betaheader deklarasi. Anda mengisi kanvas dengan mendefinisikan elemen node individual menggunakan servicekata kunci, dan peta jalur koneksi dengan menentukan port koordinat arah yang tepat (Top, Bottom, Left, Right) yang dipisahkan oleh titik dua dan tanda hubung ganda.

architecture-beta
  service gateway(internet)[Label Gateway]
  service server(server)[Server Aplikasi]
  
  gateway:B -- T:server

Referensi Sintaks

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.

Pengelompokan Lanjutan & Penanganan Sisi Port

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.

1. Aturan Koneksi Port yang Tepat

Anda menentukan di mana garis koneksi keluar dan masuk ke suatu komponen dengan menambahkan tanda titik dua dan bendera arah tepi (“T, B, K, K) ke identifikasi node yang sesuai:

• db:K -- K:server : Garis keluar dari **Kanan** database dan masuk ke **Kiri** server sebagai garis horizontal lurus.
• db:T -- K:server : Garis keluar dari **Atas** database dan masuk ke **Kiri** server, membengkok secara otomatis pada sudut siku 90° yang bersih.
• src:B --> T:proc : Garis keluar dari **Bawah** node sumber dan menuju ke bawah ke **Atas** prosesor dengan ujung panah arah.

2. Mengelompokkan Sistem dengan Kelompok

Untuk menyatakan kelompok visual (seperti cloud pribadi virtual atau klaster basis data), gunakan kata kunci group kata kunci, dan menetapkan node ke dalamnya melalui modifier in modifier:

architecture-beta
  group cloudNetwork(cloud)[Cloud Pribadi]
    service auth(server)[Node Otorisasi] in cloudNetwork
    service api(server)[Titik Akhir API] in cloudNetwork

Menyelaraskan Elemen Sibling (v11.16.0+)

Ketika beberapa layanan yang berbeda berbagi jalur routing tepi yang identik (misalnya, tiga sumber data terpisah yang mengalir ke satu pekerja pesan tunggal), algoritma tata letak kadang-kadang mengelompokkannya bersama. The align row dan ratakan kolomarahkan memaksa mesin untuk mendistribusikan elemen bersaudara tersebut secara merata di sepanjang garis sumbu tertentu.

arsitektur-beta
  layanan src1(server)[Sumber 1]
  layanan src2(server)[Sumber 2]
  layanan proc(server)[Pusat Pemroses]

  src1:B --> T:proc
  src2:B --> T:proc

  ratakan baris src1 src2

Rancangan Dunia Nyata: Rancangan Klaster Mikroservis

Rancangan ini menunjukkan arsitektur cloud tingkat perusahaan yang sangat tangguh. Dengan menempatkan mesin API utama di tengah dan cabang otentikasi serta tugas asinkron secara horizontal ke kedua sisi, tata letak ini menggunakan prinsip desain simetris untuk mencegah tumpang tindih garis. Seluruh aliran data bergerak secara terprediksi dari gerbang publik ke lapisan penyimpanan data yang rapi, menggunakan dual ratakan barisarahkan untuk mengunci komponen ke jalur horizontal yang tajam dan terprediksi.

arsitektur-beta
  judul "Arsitektur Mikroservis Ketersediaan Tinggi"

  %% Tingkat Masuk Eksternal
  layanan cloudflare(internet)[Cloudflare WAF]
  layanan alb(server)[AWS Application Load Balancer]

  %% Klaster Aplikasi Inti
  kelompok appCluster(cloud)[Mikroservis EKS yang Dikelola]
    layanan authService(server)[Layanan Otentikasi] di appCluster
    layanan apiService(server)[Mesin API Inti] di appCluster
    layanan workerNode(server)[Pekerja Tugas Asinkron] di appCluster

  %% Tingkat Penyimpanan Aman
  kelompok dataCluster(database)[Lapisan Data yang Dilindungi]
    layanan redis(disk)[Kelompok Cache Redis] di dataCluster
    layanan postgres(database)[Utama PostgreSQL] di dataCluster

  %% 1. Aliran Vertikal: Masuknya lalu lintas dari publik ke inti komputasi
  cloudflare:B --> T:alb
  alb:B --> T:apiService

  %% 2. Aliran Horizontal: API Inti bercabang ke kiri dan kanan secara simetris
  apiService:L --> R:authService
  apiService:R --> L:workerNode

  %% 3. Aliran Dasar: Pekerja aplikasi turun langsung ke slot data masing-masing
  authService:B --> T:redis
  workerNode:B --> T:postgres

  %% Penyelarasan Sumbu Tata Letak untuk Grid yang Sempurna
  ratakan baris authService apiService workerNode
  ratakan baris redis postgres

Kesalahan Sintaks Umum & Kendala Sistem

Saat menulis kode infrastruktur, pertimbangkan aturan validasi konfigurasi khusus ini untuk mencegah kesalahan pemrosesan:

• Urutan Kurung Label:String teks tampilan harus menggunakan kurung siku [Teks Label] dan ikuti tanda kurung ikon secara langsung tanpa spasi: layanan id(server)[Teks] adalah benar. Menggunakan tanda kutip di dalam tanda kurung akan merusak parser.
• Kesensitifan Huruf Besar/Kecil Port:Tambat port tepi koneksi harus ditulis dalam karakter huruf besar (T, B, L, R). Huruf kecil (t, b, l, r) tidak dikenali dan akan menyebabkan kegagalan saat pembuatan tata letak.
• Aturan Deklarasi Awal: Setiap identifikasi simpul atau persimpangan yang digunakan di dalam pernyataan jalur tepi harus dideklarasikan secara eksplisit pada baris terpisah di atasnya. Menghubungkan ke nama simpul implisit akan gagal saat pembuatan.
• Batasan Anggota Penyelarasan: Saat menggunakan align row atau align column petunjuk penempatan, Anda harus menyediakan setidaknya dua atau lebih identifikasi layanan atau persimpangan yang valid dan telah dideklarasikan sebelumnya di baris perintah.