| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Packet Diagram (v11.0.0+) |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | ## Introduction |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | 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. |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | ## Usage |
| 6dd74de | | | 14 | |
| 6dd74de | | | 15 | 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. |
| 6dd74de | | | 16 | |
| 6dd74de | | | 17 | ## Syntax |
| 6dd74de | | | 18 | |
| 6dd74de | | | 19 | ``` |
| 6dd74de | | | 20 | packet |
| 6dd74de | | | 21 | start: "Block name" %% Single-bit block |
| 6dd74de | | | 22 | start-end: "Block name" %% Multi-bit blocks |
| 6dd74de | | | 23 | ... More Fields ... |
| 6dd74de | | | 24 | ``` |
| 6dd74de | | | 25 | |
| 6dd74de | | | 26 | ### Bits Syntax (v11.7.0+) |
| 6dd74de | | | 27 | |
| 6dd74de | | | 28 | Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus: |
| 6dd74de | | | 29 | |
| 6dd74de | | | 30 | ``` |
| 6dd74de | | | 31 | packet |
| 6dd74de | | | 32 | +1: "Block name" %% Single-bit block |
| 6dd74de | | | 33 | +8: "Block name" %% 8-bit block |
| 6dd74de | | | 34 | 9-15: "Manually set start and end, it's fine to mix and match" |
| 6dd74de | | | 35 | ... More Fields ... |
| 6dd74de | | | 36 | ``` |
| 6dd74de | | | 37 | |
| 6dd74de | | | 38 | ## Examples |
| 6dd74de | | | 39 | |
| 6dd74de | | | 40 | ```mermaid-example |
| 6dd74de | | | 41 | --- |
| 6dd74de | | | 42 | title: "TCP Packet" |
| 6dd74de | | | 43 | --- |
| 6dd74de | | | 44 | packet |
| 6dd74de | | | 45 | 0-15: "Source Port" |
| 6dd74de | | | 46 | 16-31: "Destination Port" |
| 6dd74de | | | 47 | 32-63: "Sequence Number" |
| 6dd74de | | | 48 | 64-95: "Acknowledgment Number" |
| 6dd74de | | | 49 | 96-99: "Data Offset" |
| 6dd74de | | | 50 | 100-105: "Reserved" |
| 6dd74de | | | 51 | 106: "URG" |
| 6dd74de | | | 52 | 107: "ACK" |
| 6dd74de | | | 53 | 108: "PSH" |
| 6dd74de | | | 54 | 109: "RST" |
| 6dd74de | | | 55 | 110: "SYN" |
| 6dd74de | | | 56 | 111: "FIN" |
| 6dd74de | | | 57 | 112-127: "Window" |
| 6dd74de | | | 58 | 128-143: "Checksum" |
| 6dd74de | | | 59 | 144-159: "Urgent Pointer" |
| 6dd74de | | | 60 | 160-191: "(Options and Padding)" |
| 6dd74de | | | 61 | 192-255: "Data (variable length)" |
| 6dd74de | | | 62 | ``` |
| 6dd74de | | | 63 | |
| 6dd74de | | | 64 | ```mermaid |
| 6dd74de | | | 65 | --- |
| 6dd74de | | | 66 | title: "TCP Packet" |
| 6dd74de | | | 67 | --- |
| 6dd74de | | | 68 | packet |
| 6dd74de | | | 69 | 0-15: "Source Port" |
| 6dd74de | | | 70 | 16-31: "Destination Port" |
| 6dd74de | | | 71 | 32-63: "Sequence Number" |
| 6dd74de | | | 72 | 64-95: "Acknowledgment Number" |
| 6dd74de | | | 73 | 96-99: "Data Offset" |
| 6dd74de | | | 74 | 100-105: "Reserved" |
| 6dd74de | | | 75 | 106: "URG" |
| 6dd74de | | | 76 | 107: "ACK" |
| 6dd74de | | | 77 | 108: "PSH" |
| 6dd74de | | | 78 | 109: "RST" |
| 6dd74de | | | 79 | 110: "SYN" |
| 6dd74de | | | 80 | 111: "FIN" |
| 6dd74de | | | 81 | 112-127: "Window" |
| 6dd74de | | | 82 | 128-143: "Checksum" |
| 6dd74de | | | 83 | 144-159: "Urgent Pointer" |
| 6dd74de | | | 84 | 160-191: "(Options and Padding)" |
| 6dd74de | | | 85 | 192-255: "Data (variable length)" |
| 6dd74de | | | 86 | ``` |
| 6dd74de | | | 87 | |
| 6dd74de | | | 88 | ```mermaid-example |
| 6dd74de | | | 89 | packet |
| 6dd74de | | | 90 | title UDP Packet |
| 6dd74de | | | 91 | +16: "Source Port" |
| 6dd74de | | | 92 | +16: "Destination Port" |
| 6dd74de | | | 93 | 32-47: "Length" |
| 6dd74de | | | 94 | 48-63: "Checksum" |
| 6dd74de | | | 95 | 64-95: "Data (variable length)" |
| 6dd74de | | | 96 | ``` |
| 6dd74de | | | 97 | |
| 6dd74de | | | 98 | ```mermaid |
| 6dd74de | | | 99 | packet |
| 6dd74de | | | 100 | title UDP Packet |
| 6dd74de | | | 101 | +16: "Source Port" |
| 6dd74de | | | 102 | +16: "Destination Port" |
| 6dd74de | | | 103 | 32-47: "Length" |
| 6dd74de | | | 104 | 48-63: "Checksum" |
| 6dd74de | | | 105 | 64-95: "Data (variable length)" |
| 6dd74de | | | 106 | ``` |
| 6dd74de | | | 107 | |
| 6dd74de | | | 108 | ## Details of Syntax |
| 6dd74de | | | 109 | |
| 6dd74de | | | 110 | - **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. |
| 6dd74de | | | 111 | - **Field Description**: A brief description of what the field represents, enclosed in quotes. |
| 6dd74de | | | 112 | |
| 6dd74de | | | 113 | ## Configuration |
| 6dd74de | | | 114 | |
| 6dd74de | | | 115 | Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details. |
| 6dd74de | | | 116 | |
| 6dd74de | | | 117 | <!-- |
| 6dd74de | | | 118 | |
| 6dd74de | | | 119 | Theme variables are not currently working due to a mermaid bug. The passed values are not being propagated into styles function. |
| 6dd74de | | | 120 | |
| 6dd74de | | | 121 | ## Theme Variables |
| 6dd74de | | | 122 | |
| 6dd74de | | | 123 | | Property | Description | Default Value | |
| 6dd74de | | | 124 | | ---------------- | -------------------------- | ------------- | |
| 6dd74de | | | 125 | | byteFontSize | Font size of the bytes | '10px' | |
| 6dd74de | | | 126 | | startByteColor | Color of the starting byte | 'black' | |
| 6dd74de | | | 127 | | endByteColor | Color of the ending byte | 'black' | |
| 6dd74de | | | 128 | | labelColor | Color of the labels | 'black' | |
| 6dd74de | | | 129 | | labelFontSize | Font size of the labels | '12px' | |
| 6dd74de | | | 130 | | titleColor | Color of the title | 'black' | |
| 6dd74de | | | 131 | | titleFontSize | Font size of the title | '14px' | |
| 6dd74de | | | 132 | | blockStrokeColor | Color of the block stroke | 'black' | |
| 6dd74de | | | 133 | | blockStrokeWidth | Width of the block stroke | '1' | |
| 6dd74de | | | 134 | | blockFillColor | Fill color of the block | '#efefef' | |
| 6dd74de | | | 135 | |
| 6dd74de | | | 136 | ## Example on config and theme |
| 6dd74de | | | 137 | |
| 6dd74de | | | 138 | ```mermaid-example |
| 6dd74de | | | 139 | --- |
| 6dd74de | | | 140 | config: |
| 6dd74de | | | 141 | packet: |
| 6dd74de | | | 142 | showBits: true |
| 6dd74de | | | 143 | themeVariables: |
| 6dd74de | | | 144 | packet: |
| 6dd74de | | | 145 | startByteColor: red |
| 6dd74de | | | 146 | --- |
| 6dd74de | | | 147 | packet |
| 6dd74de | | | 148 | 0-15: "Source Port" |
| 6dd74de | | | 149 | 16-31: "Destination Port" |
| 6dd74de | | | 150 | 32-63: "Sequence Number" |
| 6dd74de | | | 151 | ``` |
| 6dd74de | | | 152 | |
| 6dd74de | | | 153 | --> |