Mermaid パケット図のチートシート

ネットワークパケットのビットを、項目ごとに見たもの。

このページのすべての図はMernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

ビット区間に名前をつける

フィールドは、覆うビットと引用符つきの名前です。区間は隙間なく並びます。

packet-beta
  0-15: "Source port"
  16-31: "Destination port"
  32-63: "Sequence number"

プラスと数でフィールドの幅を指定し、直前のフィールドが終わった場所から始まります。

packet-beta
  +8: "Version"
  +8: "Flags"
  +16: "Payload"

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。