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

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

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

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

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

![3 つのフィールドが横に並ぶパケット。0 から 15 ビットが Source port、16 から 31 が Destination port、32 から 63 が Sequence number です。](/diagrams/packet/fields.svg)

## ビットを数える書き方

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

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

![3 つのフィールドが横に並ぶパケット。Version、Flags、Payload とラベルされ、ビット番号が上に並んであります。](/diagrams/packet/bits.svg)

## Mernyx で描いてみる

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