Mermaid Packet Diagrams

calendarDec 13, 2024 · 2 min read · mermaid packet network protocol diagram diagrams  ·
Share on: linkedincopy

Packet diagrams visualize network packet structures and protocol layers. Perfect for documenting network protocols, packet formats, and communication protocols.

Use Case

Use packet diagrams when you need to:

  • Document network protocols
  • Show packet structures
  • Visualize protocol layers
  • Explain packet formats
  • Design communication protocols

Code

1```mermaid
2packet
3    0-15: "Source Port"
4    16-31: "Destination Port"
5    32-63: "Sequence Number"
6    64-95: "Acknowledgment Number"
7```

Result:

Explanation

  • packet - Start packet diagram
  • Format: start-end: "Field Name" for bit ranges
  • Format: position: "Field Name" for single bits
  • Field labels must be in quotes
  • Fields listed in order from top to bottom

Examples

Example 1: TCP Header

 1```mermaid
 2packet
 3    0-15: "Source Port"
 4    16-31: "Destination Port"
 5    32-63: "Sequence Number"
 6    64-95: "Acknowledgment Number"
 7    96-99: "Data Offset"
 8    100-105: "Reserved"
 9    106: "URG"
10    107: "ACK"
11    108: "PSH"
12    109: "RST"
13    110: "SYN"
14    111: "FIN"
15    112-127: "Window"
16    128-143: "Checksum"
17    144-159: "Urgent Pointer"
18    160-191: "(Options and Padding)"
19    192-255: "Data (variable length)"
20```

Result:

Example 2: IP Header

 1```mermaid
 2packet
 3    0-3: "Version"
 4    4-7: "IHL"
 5    8-15: "Type of Service"
 6    16-31: "Total Length"
 7    32-47: "Identification"
 8    48-50: "Flags"
 9    51-63: "Fragment Offset"
10    64-71: "TTL"
11    72-79: "Protocol"
12    80-95: "Header Checksum"
13    96-127: "Source Address"
14    128-159: "Destination Address"
15```

Result:

Example 3: With Title

 1```mermaid
 2---
 3title: "TCP Packet"
 4---
 5packet
 6    0-15: "Source Port"
 7    16-31: "Destination Port"
 8    32-63: "Sequence Number"
 9    64-95: "Acknowledgment Number"
10    96-99: "Data Offset"
11    100-105: "Reserved"
12    106: "URG"
13    107: "ACK"
14    108: "PSH"
15    109: "RST"
16    110: "SYN"
17    111: "FIN"
18    112-127: "Window"
19    128-143: "Checksum"
20    144-159: "Urgent Pointer"
21```

Result:

Notes

  • Use packet keyword (not packet-beta)
  • Format: start-end: "Field Name" for bit ranges
  • Format: position: "Field Name" for single bits
  • Field labels must be in double quotes
  • Fields listed in order from top to bottom
  • Can include title using frontmatter syntax ---\ntitle: "Title"\n---

Gotchas/Warnings

  • ⚠️ Syntax: Use packet (not packet-beta)
  • ⚠️ Quotes: Field labels must be in double quotes
  • ⚠️ Format: Use start-end: "name" for ranges, position: "name" for single bits
  • ⚠️ Order: Fields should be listed sequentially from top to bottom

Related Snippets