Skip to content
Mermaid Studio Logo Mermaid Studio

    Packet Diagrams

    Packet diagrams display the structure of network packets or binary data formats, showing bit ranges and field labels.

    Example

    Section titled “Example”
    packet-beta
        0-15: "Source Port"
        16-31: "Destination Port"
        32-63: "Sequence Number"
        64-95: "Acknowledgment Number"

    IDE Support

    Section titled “IDE Support”

    Mermaid Studio provides basic support for packet diagrams:

    • Syntax highlighting for bit ranges and field names
    • Live preview with packet structure visualization
    • Error detection for invalid syntax

    Learn More

    Section titled “Learn More”

    For complete syntax documentation including row configuration and styling, see the Mermaid.js Packet documentation.