| 6dd74de | | | 1 | <!doctype html> |
| 6dd74de | | | 2 | <html lang="en"> |
| 6dd74de | | | 3 | <head> |
| 6dd74de | | | 4 | <meta charset="utf-8" /> |
| 6dd74de | | | 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6dd74de | | | 6 | <title>Mermaid Quick Test Page</title> |
| 6dd74de | | | 7 | <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> |
| 6dd74de | | | 8 | <style> |
| 6dd74de | | | 9 | div.mermaid { |
| 6dd74de | | | 10 | font-family: 'Courier New', Courier, monospace !important; |
| 6dd74de | | | 11 | } |
| 6dd74de | | | 12 | </style> |
| 6dd74de | | | 13 | </head> |
| 6dd74de | | | 14 | |
| 6dd74de | | | 15 | <body> |
| 6dd74de | | | 16 | <h1>Packet diagram demo</h1> |
| 6dd74de | | | 17 | |
| 6dd74de | | | 18 | <div class="diagrams"> |
| 6dd74de | | | 19 | <pre class="mermaid"> |
| 6dd74de | | | 20 | packet |
| 6dd74de | | | 21 | 0-15: "Source Port" |
| 6dd74de | | | 22 | 16-31: "Destination Port" |
| 6dd74de | | | 23 | 32-63: "Sequence Number" |
| 6dd74de | | | 24 | 64-95: "Acknowledgment Number" |
| 6dd74de | | | 25 | 96-99: "Data Offset" |
| 6dd74de | | | 26 | 100-105: "Reserved" |
| 6dd74de | | | 27 | 106: "URG" |
| 6dd74de | | | 28 | 107: "ACK" |
| 6dd74de | | | 29 | 108: "PSH" |
| 6dd74de | | | 30 | 109: "RST" |
| 6dd74de | | | 31 | 110: "SYN" |
| 6dd74de | | | 32 | 111: "FIN" |
| 6dd74de | | | 33 | 112-127: "Window" |
| 6dd74de | | | 34 | 128-143: "Checksum" |
| 6dd74de | | | 35 | 144-159: "Urgent Pointer" |
| 6dd74de | | | 36 | 160-191: "(Options and Padding)" |
| 6dd74de | | | 37 | 192-223: "data" |
| 6dd74de | | | 38 | </pre |
| 6dd74de | | | 39 | > |
| 6dd74de | | | 40 | |
| 6dd74de | | | 41 | <pre class="mermaid"> |
| 6dd74de | | | 42 | --- |
| 6dd74de | | | 43 | config: |
| 6dd74de | | | 44 | packet: |
| 6dd74de | | | 45 | showBits: false |
| 6dd74de | | | 46 | --- |
| 6dd74de | | | 47 | packet |
| 6dd74de | | | 48 | 0-15: "Source Port" |
| 6dd74de | | | 49 | 16-31: "Destination Port" |
| 6dd74de | | | 50 | 32-63: "Sequence Number" |
| 6dd74de | | | 51 | 64-95: "Acknowledgment Number" |
| 6dd74de | | | 52 | 96-99: "Data Offset" |
| 6dd74de | | | 53 | 100-105: "Reserved" |
| 6dd74de | | | 54 | 106: "URG" |
| 6dd74de | | | 55 | 107: "ACK" |
| 6dd74de | | | 56 | 108: "PSH" |
| 6dd74de | | | 57 | 109: "RST" |
| 6dd74de | | | 58 | 110: "SYN" |
| 6dd74de | | | 59 | 111: "FIN" |
| 6dd74de | | | 60 | 112-127: "Window" |
| 6dd74de | | | 61 | 128-143: "Checksum" |
| 6dd74de | | | 62 | 144-159: "Urgent Pointer" |
| 6dd74de | | | 63 | 160-191: "(Options and Padding)" |
| 6dd74de | | | 64 | 192-223: "data" |
| 6dd74de | | | 65 | </pre |
| 6dd74de | | | 66 | > |
| 6dd74de | | | 67 | |
| 6dd74de | | | 68 | <pre class="mermaid"> |
| 6dd74de | | | 69 | --- |
| 6dd74de | | | 70 | config: |
| 6dd74de | | | 71 | theme: forest |
| 6dd74de | | | 72 | --- |
| 6dd74de | | | 73 | packet |
| 6dd74de | | | 74 | title Forest theme |
| 6dd74de | | | 75 | 0-15: "Source Port" |
| 6dd74de | | | 76 | 16-31: "Destination Port" |
| 6dd74de | | | 77 | 32-63: "Sequence Number" |
| 6dd74de | | | 78 | 64-95: "Acknowledgment Number" |
| 6dd74de | | | 79 | 96-99: "Data Offset" |
| 6dd74de | | | 80 | 100-105: "Reserved" |
| 6dd74de | | | 81 | 106: "URG" |
| 6dd74de | | | 82 | 107: "ACK" |
| 6dd74de | | | 83 | 108: "PSH" |
| 6dd74de | | | 84 | 109: "RST" |
| 6dd74de | | | 85 | 110: "SYN" |
| 6dd74de | | | 86 | 111: "FIN" |
| 6dd74de | | | 87 | 112-127: "Window" |
| 6dd74de | | | 88 | 128-143: "Checksum" |
| 6dd74de | | | 89 | 144-159: "Urgent Pointer" |
| 6dd74de | | | 90 | 160-191: "(Options and Padding)" |
| 6dd74de | | | 91 | 192-223: "data" |
| 6dd74de | | | 92 | </pre |
| 6dd74de | | | 93 | > |
| 6dd74de | | | 94 | |
| 6dd74de | | | 95 | <pre class="mermaid" style="background-color: black"> |
| 6dd74de | | | 96 | --- |
| 6dd74de | | | 97 | config: |
| 6dd74de | | | 98 | theme: dark |
| 6dd74de | | | 99 | --- |
| 6dd74de | | | 100 | packet |
| 6dd74de | | | 101 | title Dark theme |
| 6dd74de | | | 102 | 0-15: "Source Port" |
| 6dd74de | | | 103 | 16-31: "Destination Port" |
| 6dd74de | | | 104 | 32-63: "Sequence Number" |
| 6dd74de | | | 105 | 64-95: "Acknowledgment Number" |
| 6dd74de | | | 106 | 96-99: "Data Offset" |
| 6dd74de | | | 107 | 100-105: "Reserved" |
| 6dd74de | | | 108 | 106: "URG" |
| 6dd74de | | | 109 | 107: "ACK" |
| 6dd74de | | | 110 | 108: "PSH" |
| 6dd74de | | | 111 | 109: "RST" |
| 6dd74de | | | 112 | 110: "SYN" |
| 6dd74de | | | 113 | 111: "FIN" |
| 6dd74de | | | 114 | 112-127: "Window" |
| 6dd74de | | | 115 | 128-143: "Checksum" |
| 6dd74de | | | 116 | 144-159: "Urgent Pointer" |
| 6dd74de | | | 117 | 160-191: "(Options and Padding)" |
| 6dd74de | | | 118 | 192-223: "data" |
| 6dd74de | | | 119 | </pre |
| 6dd74de | | | 120 | > |
| 6dd74de | | | 121 | </div> |
| 6dd74de | | | 122 | <script type="module"> |
| 6dd74de | | | 123 | import mermaid from '/mermaid.esm.mjs'; |
| 6dd74de | | | 124 | mermaid.initialize({ |
| 6dd74de | | | 125 | logLevel: 3, |
| 6dd74de | | | 126 | securityLevel: 'loose', |
| 6dd74de | | | 127 | }); |
| 6dd74de | | | 128 | </script> |
| 6dd74de | | | 129 | |
| 6dd74de | | | 130 | <style> |
| 6dd74de | | | 131 | .diagrams { |
| 6dd74de | | | 132 | display: flex; |
| 6dd74de | | | 133 | flex-wrap: wrap; |
| 6dd74de | | | 134 | } |
| 6dd74de | | | 135 | pre { |
| 6dd74de | | | 136 | width: 45vw; |
| 6dd74de | | | 137 | padding: 2em; |
| 6dd74de | | | 138 | } |
| 6dd74de | | | 139 | </style> |
| 6dd74de | | | 140 | </body> |
| 6dd74de | | | 141 | </html> |