数据包图是一种专门的可视化组件，由网络工程师、安全分析师和系统开发人员使用，用于精确映射网络协议、内存分配或自定义硬件数据包头的二进制结构。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
packet
0-3: "版本"
4-7: "IHL"
8-15: "服务类型"
16-31: "总长度"
32-47: "标识"
48-50: "标志"
51-63: "分段偏移"
64-71: "TTL"
72-79: "协议"
80-95: "头部校验和"
语法提示： 如果某个已声明的字段大于32位（例如64位加密盐或时间戳），渲染引擎将平滑地将该块垂直跨多个连续行展开，并使用清晰的连接指示符以保持可读性。
常见语法陷阱与系统限制
在设计高度精确的字节级文档地图时，请牢记这些故障排查参数，以防止编译错误：
- 强制引号包裹： 每个字段描述文本字符串都必须用双引号包裹。省略引号将导致立即出现语法解析错误。
- 无效的字符串位大小： 冒号分隔符后的值厚度分配必须是原始的、未加引号的整数。传递小数或字母大小（例如，
"Data": 8位）将导致图表编译停止。 - 网格边缘对齐 如果您希望得到统一的、方块状的标题图示，请确保您的组合字段总和能整洁地匹配32的倍数。如果有一行末尾留下未分配的位，可能会导致末端块看起来不均匀。
- 缩放视图约束： 尽管引擎会动态计算布局宽度，但将超长的文本描述强行塞入极小的1位或2位区块中，会导致文字排版被截断或造成视觉拥挤。请保持小位数标签的简洁。