mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.18k stars 6.24k forks source link

Packet structure diagrams #948

Open PFigs opened 4 years ago

PFigs commented 4 years ago

Is your feature request related to a problem? Please describe. No, this is an idea for a new diagram type.

Describe the solution you'd like Ideally the diagram definition would consist of a box identifier where the text and bit numbering would visible, eg:

PacketDiagram M[0:32]: Address

Additional context https://www.thegeekstuff.com/2012/03/ip-protocol-header/

barakplasma commented 4 years ago

I checked the link provided, but I'm not sure which diagram you are referring to replicating. Can you provide a wireframe or mock up of your idea?

PFigs commented 4 years ago

Hi!

Thanks for taking a look!

I would be useful to build diagrams to depict memory and packet structures. This are basically identified by a box, length in bits and a label with the field name.

Here's an example:

packetDiagram

sesm commented 4 years ago

@PFigs very good idea! Are you aware of any tool that generates this diagrams already? Or any commonly used textual representation of packet structure? That would be a good starting point for implementing this feature.

PFigs commented 4 years ago

Hi!

I am not aware of any proper tool. I see a lot of people using word, visio, powerpoint or plain ascii tables for this purpose. Not ideal!

barakplasma commented 4 years ago

@sesm @PFigs I was able to finda tool which generates an ASCII diagram for custom packet structures at https://github.com/luismartingarcia/protocol

Here's some example usage: $ protocol "Field4:4,Field4:4,Field8:8,Field16:16,Field32:32,Field64:64?\ bits=16,numbers=y,startchar=*,endchar=*,evenchar=-,oddchar=-,sepchar=|"

     0                   1
     0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5
    *-------------------------------*
    | Field4| Field4|     Field8    |
    *-------------------------------*
    |            Field16            |
    *-------------------------------*
    |                               |
    *            Field32            *
    |                               |
    *-------------------------------*
    |                               |
    *                               *
    |                               |
    *            Field64            *
    |                               |
    *                               *
    |                               |
    *-------------------------------*

Another example: $ protocol "Source Port:16,Destination Port:16,Sequence Number:32,\ Acknowledgment Number:32,Offset:4,Res.:4,Flags:8,Window:16,Checksum:16,\ Urgent Pointer:16,Options:24,Padding:8"

     0                   1                   2                   3
     0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
    |          Source Port          |        Destination Port       |
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
    |                        Sequence Number                        |
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
    |                     Acknowledgment Number                     |
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
    | Offset|  Res. |     Flags     |             Window            |
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
    |            Checksum           |         Urgent Pointer        |
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
    |                    Options                    |    Padding    |
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
PFigs commented 4 years ago

Wow quite cool 😎 thanks!

knsv commented 4 years ago

Cool idea. How would you imagine the syntax?

justyn commented 3 years ago

For hints on syntax, see also the extremely basic tool packetdiag

{
  colwidth = 32
  node_height = 72

  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 [rotate = 270]
  107: ACK [rotate = 270]
  108: PSH [rotate = 270]
  109: RST [rotate = 270]
  110: SYN [rotate = 270]
  111: FIN [rotate = 270]
  112-127: Window
  128-143: Checksum
  144-159: Urgent Pointer
  160-191: (Options and Padding)
  192-223: data [colheight = 3]
}

image

frehberg commented 1 year ago

yes, I am missing this diagram type in mermaid as well, for example if I need to document protocol headers in communication protocols, or memory layout of operating systems

harvester-software commented 1 year ago

I'd like to pick this up - any objections?

jgreywolf commented 1 year ago

@harvester-software None at all - If you are still interested lets get this assigned to you!

GilDev commented 10 months ago

I see this is being added in #4839. Just for information, there’s also Bytefield that does this.

jparrish88 commented 5 months ago

Hi, I was testing the #4839 , This is great work! I had a couple questions, that are thinly veiled features requests: