MermanDraw
Open Editor

Mermaid guide

Mermaid Packet Diagram: Bit Ranges, Field Labels, and Protocol Headers

The packet diagram draws a byte layout as rows of 32 bits, the same picture RFCs use for protocol headers. Each line names a bit range and the field that occupies it; Mermaid wraps rows automatically and shows bit offsets along the top.

It replaces the ASCII-art header tables that are painful to keep aligned, and it diffs cleanly in version control.

  • network protocol docs
  • binary format specs
  • wire-format references
  • reverse-engineering notes

Example

Mermaid Packet exampleVersion (4)07IHL (5)815Total Length1631Identification | Flags | Fragment Offset3263TTL6471Protocol (TCP=6)7279Header Checksum8095Source IP Address96127Destination IP Address128159Options (if IHL > 5)160191HTTP Request Packet
packet-beta
    title HTTP Request Packet
    0-7: "Version (4)"
    8-15: "IHL (5)"
    16-31: "Total Length"
    32-63: "Identification | Flags | Fragment Offset"
    64-71: "TTL"
    72-79: "Protocol (TCP=6)"
    80-95: "Header Checksum"
    96-127: "Source IP Address"
    128-159: "Destination IP Address"
    160-191: "Options (if IHL > 5)"
Open in editor → Cheatsheet →

Syntax

Fields

packet-beta
    title TCP header
    0-15: "Source port"
    16-31: "Destination port"
    32-63: "Sequence number"
    64-95: "Acknowledgment number"
    96-99: "Data offset"
    100-105: "Reserved"
    106-111: "Flags"
    112-127: "Window"
Fields — Mermaid packetSource port015Destination port1631Sequence number3263Acknowledgment number6495Data offset9699Reserved100105Flags106111Window112127TCP header

Ranges are inclusive and must be contiguous from 0. A single bit is written as 96: "Flag". The -beta suffix is still required in Mermaid 11.

Try this snippet →

Common mistakes

These are the parse errors that come up most, including in code written by ChatGPT and Claude. Paste any failing diagram into the editor and it marks the offending line.

  • A gap or overlap between ranges (0-7, then 9-15).

    Fix: Every bit must be covered exactly once in ascending order. Add a "Reserved" field to fill gaps.

  • Field label without quotes.

    Fix: Labels are quoted strings: 0-7: "Version".

FAQ

Can a field span more than one 32-bit row?

Yes. A range such as 96-159 renders as a two-row block, which is how 64-bit fields are drawn.

Can I change the row width from 32 bits?

Not in the diagram text as of Mermaid 11. The packet diagram is fixed at 32 bits per row, matching RFC convention.