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