diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts
index 2bda6517..b54c5f24 100644
--- a/cypress/e2e/actions.spec.ts
+++ b/cypress/e2e/actions.spec.ts
@@ -35,7 +35,7 @@ describe('Check actions', () => {
 
 		// Verify downloaded file is different for different diagrams
 		cy.contains('Sample Diagrams').click();
-		cy.contains('ER Diagram').click();
+		cy.contains('ER').click();
 
 		cy.get(`#downloadPNG`).click();
 		verifyFileSize('diagram', 'png', 46_000);
diff --git a/cypress/e2e/docMap.spec.ts b/cypress/e2e/docMap.spec.ts
index 904e165d..0d0dfc0d 100755
--- a/cypress/e2e/docMap.spec.ts
+++ b/cypress/e2e/docMap.spec.ts
@@ -13,13 +13,13 @@ describe('Editor docs tests', () => {
 	});
 
 	it('Test to see if the correct URL loads when changing from one diagram to other', () => {
-		cy.contains('Flow Chart').click();
+		cy.contains('Flow').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
 
 		cy.contains('Config').click();
 		cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
 
-		cy.contains('Sequence Diagram').click();
+		cy.contains('Sequence').click();
 		cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
 
 		cy.contains('Code').click();
@@ -27,7 +27,7 @@ describe('Editor docs tests', () => {
 	});
 
 	it("Test to check URLs for a case where config URL doesn't exist", () => {
-		cy.contains('State Diagram').click();
+		cy.contains('State').click();
 		cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
 
 		cy.contains('Config').click();
diff --git a/cypress/e2e/loadSite.spec.ts b/cypress/e2e/loadSite.spec.ts
index 841b4024..485c6bf1 100644
--- a/cypress/e2e/loadSite.spec.ts
+++ b/cypress/e2e/loadSite.spec.ts
@@ -20,9 +20,9 @@ describe('Site Loads', () => {
 
 	it('should load sample diagrams when clicked', () => {
 		cy.contains('Sample Diagrams').click();
-		cy.contains('Pie Chart').click();
+		cy.contains('Pie').click();
 		cy.contains('pie title Pets adopted by volunteers');
-		cy.contains('Class Diagram').click();
+		cy.contains('Class').click();
 		cy.contains('classDiagram');
 	});
 
diff --git a/cypress/snapshots.js b/cypress/snapshots.js
index a54958c7..8f216dc0 100644
--- a/cypress/snapshots.js
+++ b/cypress/snapshots.js
@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "10.6.0",
+  "__version": "10.7.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"
diff --git a/src/lib/components/preset.svelte b/src/lib/components/preset.svelte
index 16b909cb..9922a214 100644
--- a/src/lib/components/preset.svelte
+++ b/src/lib/components/preset.svelte
@@ -4,19 +4,19 @@
 	import { logEvent } from '$lib/util/stats';
 
 	const samples = {
-		'Flow Chart': `graph TD
+		Flow: `graph 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]`,
-		'Sequence Diagram': `sequenceDiagram
+		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!
             `,
-		'Class Diagram': `classDiagram
+		Class: `classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
     Animal <|-- Zebra
@@ -38,7 +38,7 @@
       +run()
     }
             `,
-		'State Diagram': `stateDiagram-v2
+		State: `stateDiagram-v2
     [*] --> Still
     Still --> [*]
     Still --> Moving
@@ -46,7 +46,7 @@
     Moving --> Crash
     Crash --> [*]
             `,
-		'Gantt Chart': `gantt
+		Gantt: `gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
     section Section
@@ -56,22 +56,22 @@
     Task in sec      :2014-01-12  , 12d
     another task      : 24d
             `,
-		'Pie Chart': `pie title Pets adopted by volunteers
+		Pie: `pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
     "Rats" : 15
             `,
-		'ER Diagram': `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"
+		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"
             `,
-		'User Journey': `  journey
+		'User Journey': `journey
     title My working day
     section Go to work
       Make tea: 5: Me
@@ -81,18 +81,35 @@
       Go downstairs: 5: Me
       Sit down: 3: Me
       `,
-		'Git Graph': `    gitGraph
-      commit
-      commit
-      branch develop
-      checkout develop
-      commit
-      commit
-      checkout main
-      merge develop
-      commit
-      commit
-`
+		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 effectivness<br/>and eatures
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid`
 	};
 
 	const loadSampleDiagram = (diagramType: string): void => {
@@ -102,13 +119,27 @@
 		});
 		void logEvent('loadSampleDiagram', { diagramType });
 	};
+
+	const diagramOrder: (keyof typeof samples)[] = [
+		'Sequence',
+		'Flow',
+		'State',
+		'Class',
+		'Gantt',
+		'Pie',
+		'ER',
+		'User Journey',
+		'Git',
+		'Mindmap'
+	];
 </script>
 
 <Card title="Sample Diagrams" isOpen={false}>
 	<div class="flex gap-2 flex-wrap p-2">
-		{#each Object.keys(samples) as sample}
-			<button class="btn btn-primary normal-case btn-sm" on:click={() => loadSampleDiagram(sample)}
-				>{sample}</button>
+		{#each diagramOrder as sample}
+			<button
+				class="btn btn-primary normal-case btn-sm flex-grow"
+				on:click={() => loadSampleDiagram(sample)}>{sample}</button>
 		{/each}
 	</div>
 </Card>