Packet diagram (Mermaid)

Mermaid can draw a wire format directly, which is handy when the header belongs in the same document as everything else rather than in a separate tool.

#What this example shows

• Bit ranges mapped to named fields.

• A header that reads correctly because the offsets are computed, not drawn.

• A title, which a header diagram always needs.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

packet-beta
  title TCP header
  0-15: "Source port"
  16-31: "Destination port"
  32-63: "Sequence number"
  64-95: "Acknowledgement number"
  96-99: "Data offset"
  100-105: "Reserved"
  106-106: "URG"
  107-107: "ACK"
  108-108: "PSH"
  109-109: "RST"
  110-110: "SYN"
  111-111: "FIN"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent pointer"

#Making it your own

• Ranges are inclusive at both ends, so 0-15 is sixteen bits.

• State the endianness in the surrounding text; the diagram cannot show it.

• For byte-oriented structures with nesting, use Bytefield instead.

#Related

Copy it. Change one line. See what happens.