# Mermaid Packet Diagram Cheat Sheet

The bits of a network packet, field by field.

## Naming the bit ranges

A field is the bits it covers and its name in quotes. The ranges have to run back to back.

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

![A packet drawn as three fields in a row: Source port over bits 0 to 15, Destination port over 16 to 31, and Sequence number over 32 to 63.](/diagrams/packet/fields.svg)

## Counting the bits instead

A plus and a number says how wide the field is, and it starts where the previous one ended.

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

![A packet drawn as three fields in a row, labelled Version, Flags and Payload, with the bit numbers running along the top.](/diagrams/packet/bits.svg)

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.