← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid packet diagram online editor

Document the fields and bit layout of a network packet. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Packet editor See an example

WHAT IT IS FOR

Make the important relationships clear

Document the fields, widths, and order of a network packet or binary protocol layout in a form engineers can review as code.

  • Explain a network protocol
  • Review binary message layouts
  • Document packet fields for implementation
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

packet
  +4: "Version"
  +4: "IHL"
  +8: "Service"
  +16: "Total Length"
  +32: "Payload"

HOW TO START

Create your diagram in four steps

  1. 1List fields in wire order.
  2. 2Annotate widths and important constraints.
  3. 3Group fields by header or payload responsibility.
  4. 4Compare the diagram with the protocol specification.

WRITING TIPS

Keep the diagram useful

Annotate field widths and units.

Keep field order aligned with the wire format.

FAQ

Frequently asked questions

What does a packet diagram show?+

It shows the layout of fields and bit ranges within a network packet or binary message.

Who uses packet diagrams?+

Network, embedded, infrastructure, and systems engineers use them to align implementation with a wire format.

TEMPLATES

Start from a related template

HTTP packet layout

Document the fields and bit widths in an HTTP-like packet.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a Packet?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio