chore: Release mermaid v11

package.json

@@ -77,7 +77,7 @@
     "dompurify": "^3.1.6",
     "js-base64": "3.7.7",
     "lodash-es": "^4.17.21",
-    "mermaid": "10.9.1",
+    "mermaid": "11.0.2",
     "monaco-editor": "0.51.0",
     "pako": "2.1.0",
     "plausible-tracker": "^0.3.8",

src/lib/components/Preset.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { updateCode } from '$lib/util/state';
   import Card from '$lib/components/Card/Card.svelte';
+  import { updateCode } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
 
   const samples = {
@@ -165,7 +165,29 @@
         }
       }
     }
-    `
+    `,
+    Packet: `---
+title: "TCP Packet"
+---
+packet-beta
+  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-255: "Data (variable length)"
+`
   };
 
   type SampleTypes = keyof typeof samples;
@@ -178,7 +200,7 @@
   };
 
   // Adding in this array will add an icon to the preset menu
-  const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block', 'ZenUML'];
+  const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block', 'Packet'];
   const diagramOrder: SampleTypes[] = [
     'Flow',
     'Sequence',
@@ -190,10 +212,11 @@
     'Git',
     'Pie',
     'Mindmap',
+    'ZenUML',
     'QuadrantChart',
     'XYChart',
     'Block',
-    'ZenUML'
+    'Packet'
   ];
 </script>