marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-27 03:09:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add theming to packet

Browse Source
This commit is contained in:
Sidharth Vinod
2023-11-15 12:20:28 +05:30
parent 088fc392ab
commit 784a853ec7
9 changed files with 419 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
demos/packet.html
View File

@@ -14,7 +14,9 @@
<body>
<h1>Packet diagram demo</h1>
<pre class="mermaid">
<div class="diagrams">
<pre class="mermaid">
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
@@ -33,9 +35,10 @@
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-223: "data"
</pre>
</pre
>
<pre class="mermaid">
<pre class="mermaid">
---
config:
packet:
@@ -59,15 +62,80 @@
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-223: "data"
</pre>
</pre
>
<pre class="mermaid">
---
config:
theme: forest
---
packet-beta
title Forest theme
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"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-223: "data"
</pre
>
<pre class="mermaid" style="background-color: black">
---
config:
theme: dark
---
packet-beta
title Dark theme
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"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-223: "data"
</pre
>
</div>
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
});
</script>
<style>
.diagrams {
display: flex;
flex-wrap: wrap;
}
pre {
width: 45vw;
padding: 2em;
}
</style>
</body>
</html>