# Mermaid 数据包图速查表

一个网络包的比特，一段一段看。

## 给比特区间命名

字段是它覆盖的比特和用引号包住的名字。这些区间必须首尾相接。

```mermaid
packet-beta
  0-15: "Source port"
  16-31: "Destination port"
  32-63: "Sequence number"
```

![一个数据包，画成并排的三个字段：Source port 占 0 到 15 位，Destination port 占 16 到 31 位，Sequence number 占 32 到 63 位。](/diagrams/packet/fields.svg)

## 换成数比特

一个加号加一个数字说明这个字段有多宽，它从前一个字段结束的地方接着开始。

```mermaid
packet-beta
  +8: "Version"
  +8: "Flags"
  +16: "Payload"
```

![一个数据包，画成并排的三个字段，标着 Version、Flags 和 Payload，比特编号沿着上边排开。](/diagrams/packet/bits.svg)

## 在 Mernyx 里画出来

打开一个 .mmd 文件，在画布上挪一个节点，源码跟着走。macOS 原生，不经过浏览器。