Mermaid Packet Diagram Cheat Sheet

The bits of a network packet, field by field.

Every picture on this page was drawn byMernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

Naming the bit ranges

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

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.

Counting the bits instead

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

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.

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.

Buy Mernyx Pro — $19 Download free