diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 5e9b065b..7d7a177d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -11,7 +11,15 @@ module.exports = {
     'plugin:svelte/prettier',
     'prettier'
   ],
-  plugins: ['tailwindcss', '@typescript-eslint', 'es', 'vitest', 'no-only-tests', 'unicorn'],
+  plugins: [
+    'tailwindcss',
+    '@typescript-eslint',
+    'es',
+    'vitest',
+    'no-only-tests',
+    'sort-keys',
+    'unicorn'
+  ],
   ignorePatterns: [
     'docs/*',
     '*.cjs',
@@ -54,6 +62,7 @@ module.exports = {
     es2020: true
   },
   rules: {
+    'sort-keys': 'off',
     '@typescript-eslint/ban-ts-comment': [
       'error',
       {
diff --git a/package.json b/package.json
index 8b4ef1bd..511bc4a8 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-postcss-modules": "^2.0.0",
+    "eslint-plugin-sort-keys": "^2.3.5",
     "eslint-plugin-svelte": "^2.45.1",
     "eslint-plugin-tailwindcss": "^3.13.1",
     "eslint-plugin-unicorn": "^50.0.1",
diff --git a/src/lib/components/DiagramDocButton.svelte b/src/lib/components/DiagramDocButton.svelte
new file mode 100644
index 00000000..70cfe670
--- /dev/null
+++ b/src/lib/components/DiagramDocButton.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { Button } from '$/components/ui/button';
+  import type { DocumentationConfig } from '$/types';
+  import { standardizeDiagramType } from '$/util/mermaid';
+  import { stateStore } from '$/util/state';
+  import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
+
+  const docURLBase = 'https://mermaid.js.org';
+  const docMap = {
+    architecture: {
+      code: '/syntax/architecture.html'
+    },
+    block: {
+      code: '/syntax/block.html'
+    },
+    c4: {
+      code: '/syntax/c4.html'
+    },
+    class: {
+      code: '/syntax/classDiagram.html',
+      config: '/syntax/classDiagram.html#configuration'
+    },
+    er: {
+      code: '/syntax/entityRelationshipDiagram.html',
+      config: '/syntax/entityRelationshipDiagram.html#styling'
+    },
+    flowchart: {
+      code: '/syntax/flowchart.html',
+      config: '/syntax/flowchart.html#configuration'
+    },
+    gantt: {
+      code: '/syntax/gantt.html',
+      config: '/syntax/gantt.html#configuration'
+    },
+    gitGraph: {
+      code: '/syntax/gitgraph.html',
+      config: '/syntax/gitgraph.html#gitgraph-specific-configuration-options'
+    },
+    journey: {
+      code: '/syntax/userJourney.html'
+    },
+    kanban: {
+      code: '/syntax/kanban.html',
+      config: '/syntax/kanban.html#configuration-options'
+    },
+    mindmap: {
+      code: '/syntax/mindmap.html'
+    },
+    packet: {
+      code: '/syntax/packet.html',
+      config: '/config/schema-docs/config-defs-packet-diagram-config.html'
+    },
+    pie: {
+      code: '/syntax/pie.html',
+      config: '/syntax/pie.html#configuration'
+    },
+    quadrantChart: {
+      code: '/syntax/quadrantChart.html',
+      config: '/syntax/quadrantChart.html#chart-configurations'
+    },
+    requirement: {
+      code: '/syntax/requirementDiagram.html'
+    },
+    sankey: {
+      code: '/syntax/sankey.html',
+      config: '/syntax/sankey.html#configuration'
+    },
+    sequence: {
+      code: '/syntax/sequenceDiagram.html',
+      config: '/syntax/sequenceDiagram.html#configuration'
+    },
+    stateDiagram: {
+      code: '/syntax/stateDiagram.html'
+    },
+    timeline: {
+      code: '/syntax/timeline.html',
+      config: '/syntax/timeline.html#themes'
+    },
+    xychart: {
+      code: '/syntax/xyChart.html',
+      config: '/syntax/xyChart.html#chart-configurations'
+    },
+    zenuml: {
+      code: '/syntax/zenuml.html'
+    }
+  } as const satisfies DocumentationConfig;
+
+  const doc = $derived.by(() => {
+    const { editorMode, diagramType } = $stateStore;
+    if (!diagramType) {
+      return { key: '', url: docURLBase };
+    }
+    const key = standardizeDiagramType(diagramType);
+    const docConfig = docMap[key] ?? { code: '' };
+    const url = docURLBase + (docConfig[editorMode] ?? docConfig.code ?? '');
+    return { key, url };
+  });
+</script>
+
+<Button
+  variant="ghost"
+  href={doc.url}
+  title="View documentation for {doc.key.replace('Diagram', '')} diagram">
+  <BookIcon />
+  Docs
+</Button>
diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte
index 78925faf..27ccc804 100644
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -95,7 +95,7 @@
       Popularisation
         British popular psychology author Tony Buzan
     Research
-      On effectivness<br/>and features
+      On effectiveness<br/>and features
       On Automatic creation
         Uses
             Creative techniques
@@ -201,8 +201,6 @@ packet-beta
     logEvent('loadSampleDiagram', { diagramType });
   };
 
-  // Adding in this array will add an icon to the preset menu
-  const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block', 'Packet'];
   const diagramOrder: SampleTypes[] = [
     'Flow',
     'Sequence',
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index ae8db03f..b5ef884a 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -38,6 +38,7 @@ export interface State {
 
 export interface ValidatedState extends State {
   editorMode: EditorMode;
+  diagramType?: string;
   error?: Error;
   errorMarkers: MarkerData[];
   serialized: string;
diff --git a/src/lib/util/mermaid.ts b/src/lib/util/mermaid.ts
index c4a5c6c5..12693c10 100644
--- a/src/lib/util/mermaid.ts
+++ b/src/lib/util/mermaid.ts
@@ -18,6 +18,24 @@ export const render = async (
   return await mermaid.render(id, code);
 };
 
-export const parse = async (code: string): Promise<unknown> => {
+export const parse = async (code: string) => {
   return await mermaid.parse(code);
 };
+
+export const standardizeDiagramType = (diagramType: string) => {
+  switch (diagramType) {
+    case 'class':
+    case 'classDiagram': {
+      return 'classDiagram';
+    }
+    case 'graph':
+    case 'flowchart':
+    case 'flowchart-elk':
+    case 'flowchart-v2': {
+      return 'flowchart';
+    }
+    default: {
+      return diagramType;
+    }
+  }
+};
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index e2eff367..677b17e4 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -65,7 +65,8 @@ const processState = async (state: State) => {
   // No changes should be done to fields part of `state`.
   try {
     processed.serialized = serializeState(state);
-    await parse(state.code);
+    const { diagramType } = await parse(state.code);
+    processed.diagramType = diagramType;
     JSON.parse(state.mermaid);
   } catch (error) {
     processed.error = error as Error;
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 955bcc62..1d00313d 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import DiagramDocButton from '$/components/DiagramDocButton.svelte';
   import History from '$/components/History/History.svelte';
   import McTooltip from '$/components/MCTooltip.svelte';
   import PanZoomToolbar from '$/components/PanZoomToolbar.svelte';
@@ -16,96 +17,19 @@
   import Navbar from '$lib/components/Navbar.svelte';
   import Preset from '$lib/components/Preset.svelte';
   import View from '$lib/components/View.svelte';
-  import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
+  import type { EditorMode, Tab, ValidatedState } from '$lib/types';
   import { stateStore, updateCodeStore, urlsStore } from '$lib/util/state';
   import { initHandler } from '$lib/util/util';
   import { onMount } from 'svelte';
-  import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
   import CodeIcon from '~icons/material-symbols/code-blocks-outline';
   import HistoryIcon from '~icons/material-symbols/history';
   import GearIcon from '~icons/material-symbols/settings-outline-rounded';
 
   const panZoomState = new PanZoomState();
-  const docURLBase = 'https://mermaid.js.org';
-  const docMap: DocumentationConfig = {
-    graph: {
-      code: '/syntax/.html',
-      config: '/syntax/.html#configuration'
-    },
-    flowchart: {
-      code: '/syntax/flowchart.html',
-      config: '/syntax/flowchart.html#configuration'
-    },
-    sequenceDiagram: {
-      code: '/syntax/sequenceDiagram.html',
-      config: '/syntax/sequenceDiagram.html#configuration'
-    },
-    classDiagram: {
-      code: '/syntax/classDiagram.html',
-      config: '/syntax/classDiagram.html#configuration'
-    },
-    'stateDiagram-v2': {
-      code: '/syntax/stateDiagram.html'
-    },
-    gantt: {
-      code: '/syntax/gantt.html',
-      config: '/syntax/gantt.html#configuration'
-    },
-    pie: {
-      code: '/syntax/pie.html',
-      config: '/syntax/pie.html#configuration'
-    },
-    erDiagram: {
-      code: '/syntax/entityRelationshipDiagram.html',
-      config: '/syntax/entityRelationshipDiagram.html#styling'
-    },
-    journey: {
-      code: '/syntax/userJourney.html'
-    },
-    gitGraph: {
-      code: '/syntax/gitgraph.html',
-      config: '/syntax/gitgraph.html#gitgraph-specific-configuration-options'
-    },
-    quadrantChart: {
-      code: '/syntax/quadrantChart.html',
-      config: '/syntax/quadrantChart.html#chart-configurations'
-    },
-    requirementDiagram: {
-      code: '/syntax/requirementDiagram.html'
-    },
-    C4Context: {
-      code: '/syntax/c4.html'
-    },
-    mindmap: {
-      code: '/syntax/mindmap.html'
-    },
-    timeline: {
-      code: '/syntax/timeline.html',
-      config: '/syntax/timeline.html#themes'
-    },
-    zenuml: {
-      code: '/syntax/zenuml.html'
-    },
-    'sankey-beta': {
-      code: '/syntax/sankey.html',
-      config: '/syntax/sankey.html#configuration'
-    },
-    'xychart-beta': {
-      code: '/syntax/xyChart.html',
-      config: '/syntax/xyChart.html#chart-configurations'
-    }
-  };
-  let docURL = $state(docURLBase);
+
   let activeTabID = $state('code');
-  let docKey = $state('');
-  stateStore.subscribe(({ code, editorMode }: ValidatedState) => {
+  stateStore.subscribe(({ editorMode }: ValidatedState) => {
     activeTabID = editorMode;
-    const codeTypeMatch = /(\S+)\s/.exec(code);
-    if (codeTypeMatch && codeTypeMatch.length > 1) {
-      docKey = codeTypeMatch[1];
-      const docConfig = docMap[docKey] ?? { code: '' };
-      docURL = docURLBase + (docConfig[editorMode] ?? docConfig.code ?? '');
-    }
   });
 
   const tabSelectHandler = (tab: Tab) => {
@@ -159,17 +83,8 @@
             {activeTabID}
             isClosable={false}>
             {#snippet actions()}
-              <div class="flex flex-row items-center">
-                <Button
-                  variant="ghost"
-                  href={docURL}
-                  title="View documentation for {docKey.replace('Diagram', '')} diagram">
-                  <BookIcon class="mr-1" />
-                  Docs
-                </Button>
-              </div>
+              <DiagramDocButton />
             {/snippet}
-
             <Editor />
           </Card>
 
diff --git a/vite.config.js b/vite.config.js
index 9063df48..76e18536 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,13 +3,26 @@ import { svelteTesting } from '@testing-library/svelte/vite';
 import Icons from 'unplugin-icons/vite';
 import { defineConfig } from 'vitest/config';
 
+/**
+ * HMR creates state inconsistencies, so we always reload the page.
+ * @type {import('vite').PluginOption} PluginOption
+ */
+const alwaysFullReload = {
+  name: 'always-full-reload',
+  handleHotUpdate({ server }) {
+    server.ws.send({ type: 'full-reload' });
+    return [];
+  }
+};
+
 export default defineConfig({
   plugins: [
     sveltekit(),
     svelteTesting(),
     Icons({
       compiler: 'svelte'
-    })
+    }),
+    alwaysFullReload
   ],
   envPrefix: 'MERMAID_',
   optimizeDeps: { include: ['mermaid'] },
diff --git a/yarn.lock b/yarn.lock
index dd6f2cf2..3ce77ac0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3195,6 +3195,13 @@ eslint-plugin-postcss-modules@^2.0.0:
     postcss-modules-scope "^3.0.0"
     postcss-modules-values "^4.0.0"
 
+eslint-plugin-sort-keys@^2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-sort-keys/-/eslint-plugin-sort-keys-2.3.5.tgz#f28d5cd2f5ee0fc5192f5ff879f56f8516aac57b"
+  integrity sha512-2j/XKQ9sNJwK8kIp/U0EvuF6stS6/8aIc53/NskE4C5NRNh4dt3xzbZyOdrVC11cTH6Zo59/pdzA0Kb+2fQGWg==
+  dependencies:
+    natural-compare "1.4.0"
+
 eslint-plugin-svelte@^2.45.1:
   version "2.46.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.1.tgz#22691c8685420cd4eabf0cbaa31a0cfb8395595b"
@@ -4795,7 +4802,7 @@ nanoid@^3.3.7, nanoid@^3.3.8:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
   integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
-natural-compare@^1.4.0:
+natural-compare@1.4.0, natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==