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 kontrol yang tepat atas penyelarasan kolom, batas-batas penyusunan tata letak yang terisolasi, blok jarak struktural, dan konfigurasi koneksi port tepi yang eksplisit.
Memahami Strategi Matriks Grid
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:
- Ambang Kolom:Anda menetapkan batas horizontal yang ketat menggunakan
kolommodifier. Ketika grid penuh dengan blok, elemen tambahan akan melingkari secara bersih ke baris berikutnya secara otomatis. - Penentuan Ukuran Berdasarkan Bidang Grid: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.
Struktur Sintaks Dasar
Setiap tata letak dimulai denganblokheader deklarasi. Diikuti dengan menetapkan kapasitas lebar baris menggunakankolomkata kunci, dan mendeklarasikan blok pada baris-baris berurutan.
blok
kolom 3
componentA["Blok Pertama"]
componentB["Blok Tengah"]
componentC["Blok Kanan"]
Referensi Sintaks
Tabel di bawah ini menjelaskan parameter data dasar, kata kunci gaya khusus, dan wadah struktural yang secara bawaan dikenali oleh penerjemah blok.
| Komponen Sintaks | Persyaratan Tipe | Deskripsi & Aturan Tata Letak Visual |
|---|---|---|
| Deklarasi | Pengenal Kata Kunci | Menginisialisasi kanvas blok matriks grid. Harus menggunakanblok string header. |
| Set Kolom | Kata Kunci + Bilangan Bulat | Menentukan jumlah total slot horizontal sebelum melingkari baris (contoh: kolom 4). |
| Blok Standar | ID + Label Opsional | Menciptakan kotak data standar: id["Teks Label"]. Dekorator bentuk sesuai dengan sintaks diagram alir (contoh: (()) untuk lingkaran, [()] untuk basis data). |
| Overskrip Dimensi Blok | Blok Parameter Titik Dua | Mengganti footprint grid skala tata letak default $1 times 1$ dengan secara eksplisit menetapkan blok lebar kolom yang disesuaikan: id:lebar. |
| Elemen Ruang | Kata Kunci yang Direservasi | Memasukkan ubin ruang kosong $1 times 1$ yang tidak terlihat dan struktural ke dalam baris aktif menggunakan kata kunci tepat ruang kata kunci. Anda dapat mengalikan rentang lebar secara langsung seperti ruang:2. |
| Panah Blok | ID Entitas Khusus | Menampilkan kotak panah transisi tebal dan terstruktur di dalam slot kisi: arrowId<["Label"]>(arah). Arah meliputi atas, bawah, kiri, kanan. |
| Bingkai Komposit | Blok / Kontainer Akhir | Menempatkan matriks sub-kisi terpisah secara langsung di dalam slot blok induk: blok:SubID ... akhir. Sub-blok dapat menentukan batas kolom mandiri mereka sendiri. |
Fitur Lanjutan: Dimensi Blok dan Modifikasi Ruang yang Jelas
Untuk tata letak asimetris, Anda dapat memberikan metrik ukuran horizontal yang jelas langsung ke blok standar atau pembagi ruang menggunakan pemisah notasi titik dua (:lebar). Ini memaksa elemen untuk memanjang melintasi beberapa posisi kisi dengan bersih.
blok
kolom 4
wideComponent["Header Dashboard Lebar"]:4
leftBar["Sidebar"] ruang:2 rightBar["Panel Utama"]
Fitur Lanjutan: Jenis Sisi, Arah, dan Opsi Tautan
Koneksi di dalam blokengine 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.
1. Penghubung Garis Standar
Koneksi blok menggunakan operator tautan standar (-->, --, <-->). Namun, Anda dapat mengendalikan rute dengan menambahkan arah atau modifikasi di dalam tanda kurung:
A --> B: Menggambar garis arah standar dari elemen A ke elemen B.A -- x B: Menggambar jalur koneksi yang diakhiri dengan tanda “X” yang menunjukkan jalur yang terhalang.A -- o B: Menggambar jalur koneksi yang diakhiri dengan titik penghubung lingkaran terbuka.
2. Panah Blok Tata Letak Dinamis
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:
blok
kolom 3
produsen["Produsen Data"]
panahTengah<["Transform Traffic"]>(kanan)
konsumen["Konsumen Data"]
Fitur Lanjutan: Penumpukan Matriks Blok Bawah (Pengelompokan Komposit)
The blok:idwrapper 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.
blok
kolom 2
gatewayUtama["Gateway Global"]
blok:microserviceCluster
kolom 3
auth["Node Auth"]
api["API Inti"]
worker["Mesin Pekerja"]
akhir
Blue Print Dunia Nyata: Infrastruktur Multi-Tier dengan Cache
Blue print komprehensif ini menunjukkan pengaturan infrastruktur tingkat produksi yang bersih. Ini menetapkan tata letak kisi pemrosesan 3 kolom, menggunakan elemen strukturalruangelemen untuk memisahkan lapisan basis data, memetakan arah bawah yang tebalblockArrow, dan mengisolasi kontainer sub-sistem internal terpisah menggunakan nested block:id ... end wrapper komposit.
block
columns 3
%% Baris 1: Layanan Masuk
dnsClient(("Klien Web"))
loadBalancer["Load Balancer Tepi"]
space
%% Baris 2: Alur Koneksi Turun ke Mikroservis
space
downRoute<["Lalu Lintas Forward"]>(down)
space
%% Baris 3: Klaster Lingkungan Aplikasi Komposit
block:appCluster
columns 2
authService["Autentikasi"]
apiEngine["Pekerja API Inti"]
end
space
database[("DB PostgreSQL")]
%% Menetapkan penataan garis struktural matriks-ke-matriks yang jelas
loadBalancer --> appCluster
appCluster --> database
Kesalahan Sintaks Umum & Kendala Sistem
Saat mengompilasi peta matriks kisi yang akurat, pertimbangkan pemeriksaan validasi berikut untuk mencegah kesalahan pemrosesan:
- Penerapan Anggaran Kolom:Catat dengan cermat jumlah kolom Anda. Jika Anda menentukan
kolom 3dan 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. - Urutan Penempatan Bersarang Komposit: Saat membangun kontainer internal dengan
block:id, Anda harus selalu menutup ruang kerja sub-kisi menggunakanendkata kunci pada baris terpisah sebelum menyatakan elemen berikutnya. Gagal menutup blok akan menghentikan pembangunan diagram. - Keterbatasan Target Panah Blok: Properti arah yang dikelilingi tanda kurung setelah panah blok (misalnya,
(up),(down)) harus berupa literal kecil yang cocok sempurna dengan kata kunci sistem. Menggunakan huruf besar pada arah akan menyebabkan kesalahan pemrosesan. - Tabrakan Batas Label: Dekorator bentuk bagan alir standar (seperti tanda kurung
()untuk kotak bulat atau kurung kurawal{}untuk berlian) sepenuhnya didukung. Pastikan semua label teks tampilan di dalam bentuk menggunakan tanda kutip ganda yang bersih untuk menghindari penghapusan karakter.