diff --git a/package.json b/package.json
index 33348ae0..0bbfb469 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
   },
   "dependencies": {
     "@fontsource-variable/recursive": "^5.2.5",
+    "@mermaid-js/examples": "https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc",
     "@mermaid-js/layout-elk": "^0.1.7",
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "dayjs": "^1.11.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f9b9dbe2..43e87d59 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,12 +11,15 @@ importers:
       '@fontsource-variable/recursive':
         specifier: ^5.2.5
         version: 5.2.5
+      '@mermaid-js/examples':
+        specifier: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc
+        version: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc
       '@mermaid-js/layout-elk':
         specifier: ^0.1.7
-        version: 0.1.7(mermaid@11.6.0)
+        version: 0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)
       '@mermaid-js/mermaid-zenuml':
         specifier: ^0.2.0
-        version: 0.2.0(mermaid@11.6.0)(typescript@5.8.2)
+        version: 0.2.0(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)(typescript@5.8.2)
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -28,7 +31,7 @@ importers:
         version: 4.17.21
       mermaid:
         specifier: ^11.6.0
-        version: 11.6.0
+        version: https://pkg.pr.new/mermaid-js/mermaid@6453
       mode-watcher:
         specifier: ^0.5.1
         version: 0.5.1(svelte@5.25.6)
@@ -559,18 +562,25 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc':
+    resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc}
+    version: 0.0.1
+
   '@mermaid-js/layout-elk@0.1.7':
     resolution: {integrity: sha512-G3AJ2jMaCAqky2CT3z/sf3pK5UuS3tne98GsXDl3PkKByCmPmOYmJPf+6oX5PUlV3HNWWHuSgtZ9NU/CZDSuHQ==}
+    version: 0.1.7
     peerDependencies:
       mermaid: ^11.0.0
 
   '@mermaid-js/mermaid-zenuml@0.2.0':
     resolution: {integrity: sha512-Lv7xNlFT5y2TIlts+yYl1HfeEgjoqw5cfSZsWYejoJvt9K0QfdPBoj5D9Tft1aN0pj1mxjuTZbZQ1Anmem/RMg==}
+    version: 0.2.0
     peerDependencies:
       mermaid: '>=10.0.0'
 
-  '@mermaid-js/parser@0.4.0':
-    resolution: {integrity: sha512-wla8XOWvQAwuqy+gxiZqY+c7FokraOTHRWMsbB4AgRx9Sy7zKslNyejy7E+a77qHfey5GXw/ik3IXv/NHMJgaA==}
+  '@mermaid-js/parser@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c':
+    resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c}
+    version: 0.4.0
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -2377,8 +2387,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  mermaid@11.6.0:
-    resolution: {integrity: sha512-PE8hGUy1LDlWIHWBP05SFdqUHGmRcCcK4IzpOKPE35eOw+G9zZgcnMpyunJVUEOgb//KBORPjysKndw8bFLuRg==}
+  mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453:
+    resolution: {tarball: https://pkg.pr.new/mermaid-js/mermaid@6453}
+    version: 11.6.0
 
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
@@ -4067,22 +4078,24 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@mermaid-js/layout-elk@0.1.7(mermaid@11.6.0)':
+  '@mermaid-js/examples@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/examples@28bdbbc': {}
+
+  '@mermaid-js/layout-elk@0.1.7(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)':
     dependencies:
       d3: 7.9.0
       elkjs: 0.9.3
-      mermaid: 11.6.0
+      mermaid: https://pkg.pr.new/mermaid-js/mermaid@6453
 
-  '@mermaid-js/mermaid-zenuml@0.2.0(mermaid@11.6.0)(typescript@5.8.2)':
+  '@mermaid-js/mermaid-zenuml@0.2.0(mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453)(typescript@5.8.2)':
     dependencies:
       '@zenuml/core': 3.27.12(typescript@5.8.2)
-      mermaid: 11.6.0
+      mermaid: https://pkg.pr.new/mermaid-js/mermaid@6453
     transitivePeerDependencies:
       - '@vue/composition-api'
       - ts-node
       - typescript
 
-  '@mermaid-js/parser@0.4.0':
+  '@mermaid-js/parser@https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c':
     dependencies:
       langium: 3.3.1
 
@@ -6080,11 +6093,11 @@ snapshots:
 
   merge2@1.4.1: {}
 
-  mermaid@11.6.0:
+  mermaid@https://pkg.pr.new/mermaid-js/mermaid@6453:
     dependencies:
       '@braintree/sanitize-url': 7.1.1
       '@iconify/utils': 2.3.0
-      '@mermaid-js/parser': 0.4.0
+      '@mermaid-js/parser': https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@34e6112fea01f771d9da8d310147855b9650d66c
       '@types/d3': 7.4.3
       cytoscape: 3.31.1
       cytoscape-cose-bilkent: 4.1.0(cytoscape@3.31.1)
diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
index 43447ea6..ac77b72f 100644
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -1,171 +1,12 @@
 <script lang="ts">
   import Card from '$/components/Card/Card.svelte';
   import { Button } from '$/components/ui/button';
+  import { getSampleDiagrams } from '$/util/mermaid';
   import { updateCode } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
   import ShapesIcon from '~icons/material-symbols/account-tree-outline-rounded';
 
-  const samples = {
-    Block: `block-beta
-    columns 3
-    doc>"Document"]:3
-    space down1<[" "]>(down) space
-
-  block:e:3
-          l["left"]
-          m("A wide one in the middle")
-          r["right"]
-  end
-    space down2<[" "]>(down) space
-    db[("DB")]:3
-    space:3
-    D space C
-    db --> D
-    C --> db
-    D --> C
-    style m fill:#d6d,stroke:#333,stroke-width:4px
-    `,
-    Class: `classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-    }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-    }
-    class Zebra{
-      +bool is_wild
-      +run()
-    }`,
-    ER: `erDiagram
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-    CUSTOMER ||--o{ ORDER : places
-    CUSTOMER ||--o{ INVOICE : "liable for"
-    DELIVERY-ADDRESS ||--o{ ORDER : receives
-    INVOICE ||--|{ ORDER : covers
-    ORDER ||--|{ ORDER-ITEM : includes
-    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-    PRODUCT ||--o{ ORDER-ITEM : "ordered in"`,
-    Flow: `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]`,
-    Gantt: `gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d`,
-    Git: `gitGraph
-    commit
-    commit
-    branch develop
-    checkout develop
-    commit
-    commit
-    checkout main
-    merge develop
-    commit
-    commit`,
-    Mindmap: `mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid`,
-    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)"
-`,
-    Pie: `pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15`,
-    QuadrantChart: `quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]`,
-    Sequence: `sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!`,
-    State: `stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`,
-    'User Journey': `journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 3: Me`,
-    XYChart: `
-    xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`,
+  const extras = {
     ZenUML: `zenuml
     title Order Service
     @Actor Client #FFEBE6
@@ -192,8 +33,8 @@ packet-beta
     `
   };
 
-  type SampleTypes = keyof typeof samples;
-  const loadSampleDiagram = (diagramType: SampleTypes): void => {
+  const samples = { ...getSampleDiagrams(), ...extras } as const;
+  const loadSampleDiagram = (diagramType: string): void => {
     updateCode(samples[diagramType], {
       resetPanZoom: true,
       updateDiagram: true
@@ -201,22 +42,20 @@ packet-beta
     logEvent('loadSampleDiagram', { diagramType });
   };
 
-  const diagramOrder: SampleTypes[] = [
-    'Flow',
-    'Sequence',
+  const mainDiagrams = [
+    'Flowchart',
     'Class',
+    'Sequence',
+    'Entity Relationship',
     'State',
-    'ER',
-    'Gantt',
-    'User Journey',
-    'Git',
-    'Pie',
-    'Mindmap',
-    'ZenUML',
-    'QuadrantChart',
-    'XYChart',
-    'Block',
-    'Packet'
+    'Mindmap'
+  ];
+
+  const diagramOrder = [
+    ...mainDiagrams,
+    ...Object.keys(samples)
+      .filter((key) => !mainDiagrams.includes(key))
+      .sort()
   ];
 </script>
 
diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts
index 12693c10..82f9f73e 100644
--- a/src/lib/util/mermaid.ts
+++ b/src/lib/util/mermaid.ts
@@ -1,3 +1,4 @@
+import { diagramData } from '@mermaid-js/examples';
 import elkLayouts from '@mermaid-js/layout-elk';
 import zenuml from '@mermaid-js/mermaid-zenuml';
 import type { MermaidConfig, RenderResult } from 'mermaid';
@@ -39,3 +40,23 @@ export const standardizeDiagramType = (diagramType: string) => {
     }
   }
 };
+
+type DiagramDefinition = (typeof diagramData)[number];
+
+const isValidDiagram = (diagram: DiagramDefinition): diagram is Required<DiagramDefinition> => {
+  return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0);
+};
+
+export const getSampleDiagrams = () => {
+  const diagrams = diagramData
+    .filter((d) => isValidDiagram(d))
+    .map(({ examples, ...rest }) => ({
+      ...rest,
+      example: examples?.filter(({ isDefault }) => isDefault)[0]
+    }));
+  const examples: Record<string, string> = {};
+  for (const diagram of diagrams) {
+    examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code;
+  }
+  return examples;
+};