封包圖表是一種專用的視覺化元件，由網路工程師、安全分析師與系統開發人員使用，以精確地繪製網路協定、記憶體配置或自訂硬體封包標頭的二進位結構。Mermaid.js 原生支援此工具，可自動從清晰的純文字欄位拆解中，產生可響應且完全對齊的位元級網格地圖，取代繁瑣的手動表格繪製。
理解封包網格佈局
與標準的自由形式流程圖不同，封包圖表依賴嚴格的數學網格系統，其設計直接模擬網路 RFC 標準：
- 位元寬度（水平軸）： 布局引擎預設會將每一列自動分割為 32 位元網格系統（涵蓋位元 0 到 31）。
- 自動位元計算： 您只需宣告每個欄位的位元長度。渲染引擎會處理運算——自動將相鄰欄位打包至同一列，或在累計長度超過 32 位元閾值時，乾淨地換到下一列。
基本語法結構
每個封包地圖都以 packet 聲明標頭開始。其後為以連續對形式宣告的欄位區塊，需嚴格符合 "欄位名稱": 位元大小 模式，並於單獨的行中列出。
Mermaid
Edit Mermaid in VPasCode
packet
0-3: "版本"
4-7: "IHL"
8-15: "服務類型"
16-31: "總長度"
語法參考
下表分解了在 Mermaid.js 中建立封包圖表所需的基礎資料參數與格式佈局規則。
| 語法元素 | 類型要求 | 說明與視覺網格行為 |
|---|---|---|
| 宣告 | 關鍵字識別符 | 初始化位元級協定佈局工作區。必須使用精確的 packet 標頭區塊。 |
| 欄位名稱 | 引號括起來的字串 | 顯示在方塊空間內的標籤。必須始終用雙引號包圍。 |
| 位元大小 | 正整數 | 欄位的絕對位元長度（例如，1 單一位元旗標，8 位元組，16 短整數）。設定視覺寬度。 |
| 列斷裂觸發 | 自動追蹤器 | 每次合併總位元大小達到 32 位元的倍數時，會自動觸發。 |
現實世界藍圖：IPv4 封包標頭結構圖
此全面藍圖追蹤標準的網際網路路由封包結構（IPv4）。它展示了多個位元欄位、單一位元旗標以及較大的 16 位元區塊如何在標準的 32 位元水平網格佈局中順序組裝。達到 32 位元標記的欄位會自動乾淨地跳到下一列。
Mermaid
Edit Mermaid in VPasCode
封包
0-3: "版本"
4-7: "IHL"
8-15: "服務類型"
16-31: "總長度"
32-47: "識別碼"
48-50: "旗標"
51-63: "片段偏移"
64-71: "TTL"
72-79: "協定"
80-95: "標頭檢查碼"
語法提示： 如果單一宣告的欄位大於 32 位元（例如 64 位元的加密鹽值或時間戳），渲染引擎會順暢地將該區塊垂直跨多個連續列延伸，並使用清晰的連接指示符以保持可讀性。
常見語法陷阱與系統限制
在設計高度精確的位元級文件地圖時，請記住這些故障排除參數，以避免編譯錯誤：
- 強制引號包覆： 每一個欄位描述的文字字串都必須用雙引號包覆。省略引號會導致立即的語法解析錯誤。
- 無效的字串位元大小： 冒號分隔符後的值厚度指派必須是原始的、未加引號的整數。傳遞小數或字母大小（例如，
"資料": 8位元）將會中止圖表編譯。 - 網格邊緣對齊 確保您的合併欄位總計乾淨地匹配 32 的倍數，如果您希望得到統一的、方塊形的標題圖示。留下一列未分配的位元，可能會導致末端塊看起來不均勻。
- 縮放檢視約束： 雖然引擎會動態計算佈局寬度，但將極長的文本描述塞入極小的 1 位元或 2 位元欄位中，會導致文字排版被截斷或造成視覺擁擠。請保持小位元標籤簡潔。