Panduan Sintaks dan Tata Letak Diagram Paket Mermaid.js

Diagram Paket adalah komponen visualisasi khusus yang digunakan oleh insinyur jaringan, analis keamanan, dan pengembang sistem untuk memetakan struktur biner yang tepat dari protokol jaringan, alokasi memori, atau header paket perangkat keras khusus. Diperkenalkan secara bawaan di Mermaid.js, alat ini menggantikan penggambaran tabel manual yang melelahkan dengan merender peta kisi tingkat bit yang responsif dan rapi secara otomatis dari pemecahan bidang berbasis teks yang bersih.

Memahami Tata Letak Kisi Paket

Berbeda dengan bagan alir bebas standar, diagram paket bergantung pada sistem kisi matematis yang ketat yang dimodelkan langsung berdasarkan RFC jaringan:

  • Lebar Bit (Sumbu Horizontal): Mesin tata letak secara otomatis membagi setiap baris menjadi sistem kisi 32-bit (meliputi bit 0 hingga 31) secara bawaan.
  • Perhitungan Bit Otomatis: Anda cukup menyatakan ukuran panjang bit untuk setiap bidang. Mesin rendering menangani perhitungannya—secara otomatis menempatkan bidang yang bersebelahan ke dalam baris yang sama atau melingkarkannya secara bersih ke baris berikutnya ketika ukuran kumulatif melebihi ambang batas 32-bit.

Struktur Sintaks Dasar

Setiap peta paket dimulai dengan packet header deklarasi. Diikuti oleh bidang blok yang dideklarasikan sebagai pasangan berurutan yang sesuai dengan pola ketat "Nama Bidang": UkuranBit pola pada baris-baris individu.

packet
  0-3: "Versi"
  4-7: "IHL"
  8-15: "Jenis Layanan"
  16-31: "Panjang Total"

Referensi Sintaks

Tabel di bawah ini menjelaskan parameter data dasar dan aturan tata letak format yang diperlukan untuk membuat diagram paket di Mermaid.js.

Elemen Sintaks Persyaratan Tipe Deskripsi & Perilaku Kisi Visual
Deklarasi Identifikasi Kata Kunci header blok packet header blok.
Nama Bidang String yang Diberi Tanda Kutip Label yang ditampilkan di dalam ruang blok. Harus selalu dikelilingi tanda petik ganda.
Ukuran Bit Bilangan Bulat Positif Panjang bit absolut dari bidang (misalnya, 1 untuk bendera bit tunggal, 8 untuk byte, 16 untuk short). Menentukan lebar visual.
Pemicu Pemutusan Baris Pelacak Otomatis Terjadi secara otomatis setiap kali jumlah total ukuran bit mencapai kelipatan 32 bit.

Rencana Dunia Nyata: Peta Struktur Header Paket IPv4

Rencana komprehensif ini melacak struktur paket routing internet standar (IPv4). Ini menunjukkan bagaimana bidang multi-bit, bendera bit tunggal, dan blok 16-bit yang lebih besar dirangkai secara berurutan di dalam tata letak grid horizontal standar 32-bit. Bidang yang mencapai batas 32-bit secara otomatis turun ke baris berikutnya dengan rapi.

packet
  0-3: "Versi"
  4-7: "IHL"
  8-15: "Jenis Layanan"
  16-31: "Panjang Total"
  32-47: "Identifikasi"
  48-50: "Bendera"
  51-63: "Offset Fragmen"
  64-71: "TTL"
  72-79: "Protokol"
  80-95: "Checksum Header"


Kiat Sintaks: Jika satu bidang yang dideklarasikan lebih besar dari 32 bit (seperti garam kriptografi 64-bit atau timestamp), mesin rendering akan dengan mulus membungkus dan memanjangkan blok tersebut secara vertikal melintasi beberapa baris berurutan, menggunakan indikator koneksi yang bersih untuk menjaga keterbacaan.


Kesalahan Sintaks Umum & Kendala Sistem

Saat merancang peta dokumentasi tingkat byte yang sangat presisi, pertimbangkan parameter pemecahan masalah ini untuk mencegah kesalahan kompilasi:

  • Pelindung Tanda Petik Wajib: Setiap string teks deskriptor bidang harus dikelilingi tanda petik ganda. Menghilangkan tanda petik akan menyebabkan kesalahan pemrosesan sintaks secara langsung.
  • Ukuran Bit String Tidak Valid: Penugasan ketebalan nilai yang mengikuti pemisah titik dua harus berupa bilangan bulat mentah tanpa tanda petik. Mengirimkan desimal atau ukuran alfabetik (misalnya, "Data": 8bit) akan menghentikan kompilasi diagram.
  • Penyelarasan Tepi GridPastikan total bidang gabungan Anda berjumlah bersih sesuai kelipatan 32 jika Anda menginginkan diagram header berbentuk kotak yang seragam. Meninggalkan baris terakhir dengan bit yang tidak ditetapkan dapat menyebabkan blok akhir terlihat tidak rata.
  • Kendala Tampilan Skala:Meskipun mesin menghitung lebar tata letak secara dinamis, memaksa deskripsi teks yang sangat panjang ke dalam blok kecil 1-bit atau 2-bit akan memotong tipografi atau menyebabkan kerumitan visual. Buat label dengan bit kecil tetap ringkas.
Scroll to Top