Markdown packet diagram maker

Map the bits of a network packet or binary format. Give each field a bit range and a label in a Mermaid block to show the layout inline in your document.

Mermaid packet diagram syntax

A packet diagram is an ordered list of fields. Each field covers a range of bits and has a label. Mermaid lays the bits out left to right and wraps to a new row every 32 bits. The bits must run without gaps and start from 0.

Basic packet

Start with the word packet-beta, then list each field as a bit range, a colon and a quoted label.

You write

packet-beta
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"

You get

Title

Add a title line to name the packet.

You write

packet-beta
  title UDP Header
  0-15: "Source Port"
  16-31: "Destination Port"
  32-47: "Length"
  48-63: "Checksum"

You get

Single bits

For a one-bit field give a single number instead of a range. This is handy for flags.

You write

packet-beta
  0-11: "Data Offset"
  12: "URG"
  13: "ACK"
  14: "PSH"
  15: "RST"

You get

Cheat sheet

Write this	You get
`packet-beta`	Start a packet diagram
`title Text`	Name the packet
`0-15: "Label"`	A field spanning bits 0 to 15
`8: "Flag"`	A single-bit field