diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index eed4269f6..64a7e5ad8 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -1,4 +1,3 @@
-import { registerDiagram } from './diagramAPI';
 import c4 from '../diagrams/c4/c4Detector';
 import flowchart from '../diagrams/flowchart/flowDetector';
 import flowchartV2 from '../diagrams/flowchart/flowDetector-v2';
@@ -14,9 +13,7 @@ import classDiagramV2 from '../diagrams/class/classDetector-V2';
 import state from '../diagrams/state/stateDetector';
 import stateV2 from '../diagrams/state/stateDetector-V2';
 import journey from '../diagrams/user-journey/journeyDetector';
-
-import errorRenderer from '../diagrams/error/errorRenderer';
-import errorStyles from '../diagrams/error/styles';
+import error from '../diagrams/error/errorDetector';
 import { addDiagram } from './detectType';
 
 let hasLoadedDiagrams = false;
@@ -27,29 +24,7 @@ export const addDiagrams = () => {
   // This is added here to avoid race-conditions.
   // We could optimize the loading logic somehow.
   hasLoadedDiagrams = true;
-  registerDiagram(
-    'error',
-    // Special diagram with error messages but setup as a regular diagram
-    {
-      db: {
-        clear: () => {
-          // Quite ok, clear needs to be there for error to work as a regular diagram
-        },
-      },
-      styles: errorStyles,
-      renderer: errorRenderer,
-      parser: {
-        parser: { yy: {} },
-        parse: () => {
-          // no op
-        },
-      },
-      init: () => {
-        // no op
-      },
-    },
-    (text) => text.toLowerCase().trim() === 'error'
-  );
+  addDiagram(error);
   addDiagram(c4);
   addDiagram(classDiagram);
   addDiagram(classDiagramV2);
diff --git a/packages/mermaid/src/diagrams/error/errorDetector.ts b/packages/mermaid/src/diagrams/error/errorDetector.ts
new file mode 100644
index 000000000..2bdcd7028
--- /dev/null
+++ b/packages/mermaid/src/diagrams/error/errorDetector.ts
@@ -0,0 +1,20 @@
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
+
+const id = 'error';
+
+const detector: DiagramDetector = (text) => {
+  return text.toLowerCase().trim() === 'error';
+};
+
+const loader = async () => {
+  const { diagram } = await import('./errorDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid/src/diagrams/error/errorDiagram.ts b/packages/mermaid/src/diagrams/error/errorDiagram.ts
new file mode 100644
index 000000000..d081e1028
--- /dev/null
+++ b/packages/mermaid/src/diagrams/error/errorDiagram.ts
@@ -0,0 +1,21 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+import styles from './styles';
+import renderer from './errorRenderer';
+export const diagram: DiagramDefinition = {
+  db: {
+    clear: () => {
+      // Quite ok, clear needs to be there for error to work as a regular diagram
+    },
+  },
+  styles,
+  renderer,
+  parser: {
+    parser: { yy: {} },
+    parse: () => {
+      // no op
+    },
+  },
+  init: () => {
+    // no op
+  },
+};