# Mermaid packet diagram in Markdown to PDF

A binary layout is drawn as rows of bit ranges with the ruler across the top.

Bit-range rows for a binary layout with the bit ruler across the top: the TCP header, as in a networking textbook.

- PDF: https://legivel.com/examples/mermaid-diagrams/packet-diagram.pdf
- Page: https://legivel.com/examples/mermaid-diagrams/packet-diagram
- Open in the editor: https://legivel.com/markdown-to-pdf?sample=mermaid-packet
- More mermaid diagrams in Markdown to PDF: https://legivel.com/examples/mermaid-diagrams

## Markdown source

````markdown
# Packet diagrams

The header of a TCP segment, 20 bytes without options:

```mermaid
packet
title TCP header
0-15: "Source port"
16-31: "Destination port"
32-63: "Sequence number"
64-95: "Acknowledgment number"
96-99: "Data offset"
100-103: "Reserved"
104: "CWR"
105: "ECE"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window size"
128-143: "Checksum"
144-159: "Urgent pointer"
160-191: "Options and padding (if data offset > 5)"
192-255: "Data (variable length)"
```
````