diff --git a/package.json b/package.json
index fdc9c79e..d696f4eb 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "@fontsource-variable/recursive": "^5.2.5",
     "@fsegurai/codemirror-theme-vscode-dark": "^6.1.4",
     "@fsegurai/codemirror-theme-vscode-light": "^6.1.4",
+    "@mermaid-js/examples": "^1.0.0",
     "@mermaid-js/layout-elk": "^0.1.8",
     "@mermaid-js/mermaid-zenuml": "^0.2.1",
     "codemirror": "^6.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ccaae8e5..a907b54f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@fsegurai/codemirror-theme-vscode-light':
         specifier: ^6.1.4
         version: 6.1.4(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.7)(@lezer/highlight@1.2.1)
+      '@mermaid-js/examples':
+        specifier: ^1.0.0
+        version: 1.0.0(mermaid@11.9.0)
       '@mermaid-js/layout-elk':
         specifier: ^0.1.8
         version: 0.1.8(mermaid@11.9.0)
@@ -696,6 +699,11 @@ packages:
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
+  '@mermaid-js/examples@1.0.0':
+    resolution: {integrity: sha512-OfTlpPJweRhGS/3+Wvk3WFY5kkqu/KP4PR2ZSZKxk4kuoqGsxWmsu3eDTHh6zfMIVMExILrFdacVkrtYO8QE3g==}
+    peerDependencies:
+      mermaid: ~11.9.0
+
   '@mermaid-js/layout-elk@0.1.8':
     resolution: {integrity: sha512-uU+Glm1tQZScphrFuzf6dzPpYTrET3sz6Q2SqpLj/nr+FpO6cfgJmYdJ+vWA8oGoeNQZLVey480qbKAFk8DBuQ==}
     peerDependencies:
@@ -4409,6 +4417,10 @@ snapshots:
 
   '@marijn/find-cluster-break@1.0.2': {}
 
+  '@mermaid-js/examples@1.0.0(mermaid@11.9.0)':
+    dependencies:
+      mermaid: 11.9.0
+
   '@mermaid-js/layout-elk@0.1.8(mermaid@11.9.0)':
     dependencies:
       d3: 7.9.0
diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
index 6401ab31..ac77b72f 100644
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -1,179 +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 --> [*]`,
-    Treemap: `treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2"
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20
-    "Leaf 2.2": 25`,
-    '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
@@ -200,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
@@ -209,23 +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',
-    'Treemap'
+    '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;
+};
diff --git a/tests/actions.spec.ts b/tests/actions.spec.ts
index 95335481..2618be5b 100644
--- a/tests/actions.spec.ts
+++ b/tests/actions.spec.ts
@@ -26,10 +26,10 @@ test.describe('Check actions', () => {
 
     // Verify downloaded file is different for different diagrams
     await editPage.toggleSampleDiagrams();
-    await editPage.loadSampleDiagram('ER');
+    await editPage.loadSampleDiagram('Entity Relationship');
 
     const secondPngSize = await editPage.checkAndDownloadPNG(81_000);
-    const secondSvgSize = await editPage.downloadSVG(11_000);
+    const secondSvgSize = await editPage.downloadSVG(40_000);
 
     // Verify files are actually different
     expect(firstPngSize).not.toBe(secondPngSize);
diff --git a/tests/docMap.spec.ts b/tests/docMap.spec.ts
index 649ac56a..e579a668 100644
--- a/tests/docMap.spec.ts
+++ b/tests/docMap.spec.ts
@@ -12,7 +12,7 @@ test.describe('Editor docs tests', () => {
   test('Test to see if the correct URL loads when changing from one diagram to other', async ({
     editPage
   }) => {
-    await editPage.loadSampleDiagram('Flow');
+    await editPage.loadSampleDiagram('Flowchart');
     await editPage.checkDocURL(/syntax\/flowchart\.html/);
     await editPage.setEditorMode('Config');
     await editPage.checkDocURL(/syntax\/flowchart\.html#configuration/);