Packet diagrams: fields and bits

简介 / Introduction

Packet diagrams are used to describe protocol header structures, byte layouts, and field semantics. This article compares PlantUML and Mermaid for drawing Packet diagrams.

PlantUML 版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@startuml
packet "IPv4 Header" as ip {
  [Version    ]  4 bits
  [IHL        ]  4 bits
  [DSCP/ECN   ]  8 bits
  [Total Length] 16 bits
  ---
  [Identification] 16 bits
  [Flags/Fragment] 16 bits
  ---
  [TTL        ]  8 bits
  [Protocol   ]  8 bits
  [Checksum   ] 16 bits
  ---
  [Source IP  ] 32 bits
  [Dest IP   ] 32 bits
}
@enduml

PlantUML uses the packet keyword to define a block, --- to separate field rows, and square brackets with a bit count for each field.

Mermaid 版

1
2
3
4
5
6
7
8
9
10
11

packet-beta
    title IPv4 Header
    0-3: Version | IHL
    4-11: DSCP/ECN
    12-27: Total Length
    28-43: Identification
    44-59: Flags | Fragment Offset
    60-67: TTL | Protocol
    68-83: Header Checksum
    84-115: Source IP
    116-147: Dest IP

Mermaid uses packet-beta diagram type, defining fields by byte offset ranges (start-end), with a title keyword for the diagram title.

对比 / Side-by-side

小结 / Wrap-up

PlantUML’s Packet diagrams suit abstract-level descriptions and semantic grouping; Mermaid’s packet-beta is better for precise byte-offset layouts. Both can be embedded in docs or blogs — choose based on whether you need “coarse-grained description” or “exact bit layout”.