A packet diagram visualises the structure of a data packet — the envelope of information that travels across a network. Each field in the diagram represents a section of the packet, with its bit position shown on the horizontal axis. Wider blocks represent fields that occupy more bits.

Packet diagrams are a technical diagram type used in networking and protocol documentation. They make it easy to see exactly how a message is structured and how much space each piece of information occupies within it.

This diagram type is experimental and requires Mermaid v11 or later.

packet-beta
    0-3: "Version"
    4-7: "Header Length"
    8-15: "Type of Service"
    16-31: "Total Length"
    32-47: "Identification"
    48-50: "Flags"
    51-63: "Fragment Offset"
    64-71: "Time to Live"
    72-79: "Protocol"
    80-95: "Header Checksum"
    96-127: "Source Address"
    128-159: "Destination Address"
    160-191: "Options (if any)"

This example shows the structure of an IPv4 packet header. Each entry in the source defines a field name and the bit range it occupies — the diagram renders those ranges as proportionally sized blocks.

```mermaid
packet-beta
    0-3: "Version"
    4-7: "Header Length"
    8-15: "Type of Service"
    16-31: "Total Length"
    32-47: "Identification"
    48-50: "Flags"
    51-63: "Fragment Offset"
    64-71: "Time to Live"
    72-79: "Protocol"
    80-95: "Header Checksum"
    96-127: "Source Address"
    128-159: "Destination Address"
    160-191: "Options (if any)"
```

For more packet diagram syntax see the packet diagram documentation at mermaid.js.org