feat: Add theming to packet

2025-09-09 02:27:05 +02:00 · 2023-11-15 12:20:28 +05:30
parent 088fc392ab
commit 784a853ec7
9 changed files with 419 additions and 293 deletions
--- a/docs/syntax/packet.md
+++ b/docs/syntax/packet.md
@@ -0,0 +1,139 @@
+> **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
+
+    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 propogated 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"
+```
+
+-->