mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
5807d521b7
* develop: (99 commits) Fix spelling Fix community integrations Fix docs docs: Fix config Update all minor dependencies Amend docs to document gitgraph parallel commits Fix lint Use Yarn Add COREPACK_ENABLE_STRICT Added link to Blazorade Mermaid to the community integrations page. Bump node version Add lcov to cspell Correcting path to docker-entrypoint.sh Update recommended Vitest extension Replace mermaid-js.github.io links Replace links to docs with links to webhelp Link to contributing page on webhelp Changes to timeline.md 1. Added colons to all 'NOTES' for consistency. Changes to timeline.md 1. Updates the Wikipedia citation to include a link. 2. Removed periods from documentation sections to be consistent (some had periods, some didn't) 3. Added a space to a coding example for spacing consistency. Replace version number placeholder Fix link to Contributors section in README ...
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 (v\<MERMAID_RELEASE_VERSION>+)
|
|
|
|
## 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 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"
|
|
```
|
|
|
|
-->
|