TryMermaid

Mermaid Packet Diagram Maker

Write packet diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.

Updated · Code editor with live preview

Packet diagram example

Rendering preview…

packet-beta
    0-15: "Source port"
    16-31: "Destination port"
    32-63: "Sequence number"
    64-95: "Acknowledgement number"
    96-99: "Data offset"
    100-105: "Reserved"
    106-111: "Flags"
    112-127: "Window size"
Open this example in the editor Start a blank diagram

What is a packet diagram?

A packet diagram draws the layout of a binary format as a row of labelled bit ranges, the way network protocol specifications show a header. Each field takes the number of bits you give it, so the picture matches the wire format exactly. In Mermaid you write one starting with the packet-beta keyword.

When to use a packet diagram

  • Documenting a network protocol header
  • Explaining a binary file format
  • Embedded and firmware register maps
  • Teaching how TCP, UDP or IP headers are laid out

How to make a packet diagram in Mermaid

  1. Step 1

    Open the editor

    Open TryMermaid with the example on this page, or start a new diagram with packet-beta on the first line.

  2. Step 2

    Add the fields

    Add one line per field as a bit range, a colon and a quoted label, such as 0-15: "Source port".

  3. Step 3

    Account for every bit

    Keep the ranges continuous so every bit is accounted for, using single numbers for one-bit flags.

  4. Step 4

    Export or share

    Check the live preview, then export as PNG or SVG or copy a share link.

Packet diagram syntax cheat sheet

ElementSyntaxWhat it does
Startpacket-betaBegins a packet diagram
Field0-15: "Source port"A labelled range of bits
Single bit96: "Urgent flag"A one-bit flag
Wide field32-63: "Sequence number"Any width, as long as ranges are continuous

Packet diagram FAQ

How do I set the width of a field?

Each line is a bit range and a label, as in 0-15: "Source port". The range is inclusive, so 0-15 is sixteen bits wide, and ranges must follow on from each other without gaps.

How do I show a single-bit flag?

Give it a single number rather than a range, as in 96: "Urgent flag". Mermaid draws a one-bit field.

How does Mermaid decide where each row breaks?

Mermaid wraps rows automatically based on the bit numbers, so a 32-bit-per-row header such as TCP or IPv4 lays itself out correctly once the ranges are right.

Other Mermaid diagram types