mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-25 00:44:10 +02:00
142 lines
3.4 KiB
Markdown
142 lines
3.4 KiB
Markdown
> **Warning**
|
|
>
|
|
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
|
>
|
|
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
|
|
|
|
# Packet Diagram (v11.0.0+)
|
|
|
|
## Introduction
|
|
|
|
A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network.
|
|
|
|
## Usage
|
|
|
|
This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
|
|
|
|
## Syntax
|
|
|
|
```md
|
|
packet-beta
|
|
start: "Block name" %% Single-bit block
|
|
start-end: "Block name" %% Multi-bit blocks
|
|
... More Fields ...
|
|
```
|
|
|
|
## Examples
|
|
|
|
```mermaid-example
|
|
---
|
|
title: "TCP Packet"
|
|
---
|
|
packet-beta
|
|
0-15: "Source Port"
|
|
16-31: "Destination Port"
|
|
32-63: "Sequence Number"
|
|
64-95: "Acknowledgment Number"
|
|
96-99: "Data Offset"
|
|
100-105: "Reserved"
|
|
106: "URG"
|
|
107: "ACK"
|
|
108: "PSH"
|
|
109: "RST"
|
|
110: "SYN"
|
|
111: "FIN"
|
|
112-127: "Window"
|
|
128-143: "Checksum"
|
|
144-159: "Urgent Pointer"
|
|
160-191: "(Options and Padding)"
|
|
192-255: "Data (variable length)"
|
|
```
|
|
|
|
```mermaid
|
|
---
|
|
title: "TCP Packet"
|
|
---
|
|
packet-beta
|
|
0-15: "Source Port"
|
|
16-31: "Destination Port"
|
|
32-63: "Sequence Number"
|
|
64-95: "Acknowledgment Number"
|
|
96-99: "Data Offset"
|
|
100-105: "Reserved"
|
|
106: "URG"
|
|
107: "ACK"
|
|
108: "PSH"
|
|
109: "RST"
|
|
110: "SYN"
|
|
111: "FIN"
|
|
112-127: "Window"
|
|
128-143: "Checksum"
|
|
144-159: "Urgent Pointer"
|
|
160-191: "(Options and Padding)"
|
|
192-255: "Data (variable length)"
|
|
```
|
|
|
|
```mermaid-example
|
|
packet-beta
|
|
title UDP Packet
|
|
0-15: "Source Port"
|
|
16-31: "Destination Port"
|
|
32-47: "Length"
|
|
48-63: "Checksum"
|
|
64-95: "Data (variable length)"
|
|
```
|
|
|
|
```mermaid
|
|
packet-beta
|
|
title UDP Packet
|
|
0-15: "Source Port"
|
|
16-31: "Destination Port"
|
|
32-47: "Length"
|
|
48-63: "Checksum"
|
|
64-95: "Data (variable length)"
|
|
```
|
|
|
|
## Details of Syntax
|
|
|
|
- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet.
|
|
- **Field Description**: A brief description of what the field represents, enclosed in quotes.
|
|
|
|
## Configuration
|
|
|
|
Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details.
|
|
|
|
<!--
|
|
|
|
Theme variables are not currently working due to a mermaid bug. The passed values are not being propagated into styles function.
|
|
|
|
## Theme Variables
|
|
|
|
| Property | Description | Default Value |
|
|
| ---------------- | -------------------------- | ------------- |
|
|
| byteFontSize | Font size of the bytes | '10px' |
|
|
| startByteColor | Color of the starting byte | 'black' |
|
|
| endByteColor | Color of the ending byte | 'black' |
|
|
| labelColor | Color of the labels | 'black' |
|
|
| labelFontSize | Font size of the labels | '12px' |
|
|
| titleColor | Color of the title | 'black' |
|
|
| titleFontSize | Font size of the title | '14px' |
|
|
| blockStrokeColor | Color of the block stroke | 'black' |
|
|
| blockStrokeWidth | Width of the block stroke | '1' |
|
|
| blockFillColor | Fill color of the block | '#efefef' |
|
|
|
|
## Example on config and theme
|
|
|
|
```mermaid-example
|
|
---
|
|
config:
|
|
packet:
|
|
showBits: true
|
|
themeVariables:
|
|
packet:
|
|
startByteColor: red
|
|
---
|
|
packet-beta
|
|
0-15: "Source Port"
|
|
16-31: "Destination Port"
|
|
32-63: "Sequence Number"
|
|
```
|
|
|
|
-->
|