chore(split): State Diagram

packages/mermaid/src/diagram-api/diagram-orchestration.ts

@@ -11,15 +11,8 @@ import requirement from '../diagrams/requirement/requirementDetector';
 import sequence from '../diagrams/sequence/sequenceDetector';
 import classDiagram from '../diagrams/class/classDetector';
 import classDiagramV2 from '../diagrams/class/classDetector-V2';
-
+import state from '../diagrams/state/stateDetector';
-// @ts-ignore: TODO Fix ts errors
+import stateV2 from '../diagrams/state/stateDetector-V2';
-import stateParser from '../diagrams/state/parser/stateDiagram';
-import { stateDetector } from '../diagrams/state/stateDetector';
-import { stateDetectorV2 } from '../diagrams/state/stateDetector-V2';
-import stateDb from '../diagrams/state/stateDb';
-import stateRenderer from '../diagrams/state/stateRenderer';
-import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
-import stateStyles from '../diagrams/state/styles';
 
 // @ts-ignore: TODO Fix ts errors
 import journeyParser from '../diagrams/user-journey/parser/journey';
@@ -75,41 +68,8 @@ export const addDiagrams = () => {
   addDiagram(flowchart);
   addDiagram(flowchartV2);
   addDiagram(git);
-
+  addDiagram(state);
-  registerDiagram(
+  addDiagram(stateV2);
-    'state',
-    {
-      parser: stateParser,
-      db: stateDb,
-      renderer: stateRenderer,
-      styles: stateStyles,
-      init: (cnf) => {
-        if (!cnf.state) {
-          cnf.state = {};
-        }
-        cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        stateDb.clear();
-      },
-    },
-    stateDetector
-  );
-  registerDiagram(
-    'stateDiagram',
-    {
-      parser: stateParser,
-      db: stateDb,
-      renderer: stateRendererV2,
-      styles: stateStyles,
-      init: (cnf) => {
-        if (!cnf.state) {
-          cnf.state = {};
-        }
-        cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        stateDb.clear();
-      },
-    },
-    stateDetectorV2
-  );
   registerDiagram(
     'journey',
     {

packages/mermaid/src/diagrams/state/stateDetector-V2.ts

@@ -1,8 +1,23 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
 
-export const stateDetectorV2: DiagramDetector = (text, config) => {
+const id = 'stateDiagram';
+
+const detector: DiagramDetector = (text, config) => {
   if (text.match(/^\s*stateDiagram-v2/) !== null) return true;
   if (text.match(/^\s*stateDiagram/) && config?.state?.defaultRenderer === 'dagre-wrapper')
     return true;
   return false;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./stateDiagram-v2');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;

packages/mermaid/src/diagrams/state/stateDetector.ts

@@ -1,8 +1,23 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
 
-export const stateDetector: DiagramDetector = (txt, config) => {
+const id = 'state';
+
+const detector: DiagramDetector = (txt, config) => {
   // If we have confired to only use new state diagrams this function should always return false
   // as in not signalling true for a legacy state diagram
   if (config?.state?.defaultRenderer === 'dagre-wrapper') return false;
   return txt.match(/^\s*stateDiagram/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./stateDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;

packages/mermaid/src/diagrams/state/stateDiagram-v2.ts

@@ -0,0 +1,20 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/stateDiagram';
+import db from './stateDb';
+import styles from './styles';
+import renderer from './stateRenderer-v2';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+  init: (cnf) => {
+    if (!cnf.state) {
+      cnf.state = {};
+    }
+    cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    db.clear();
+  },
+};

packages/mermaid/src/diagrams/state/stateDiagram.ts

@@ -0,0 +1,20 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/stateDiagram';
+import db from './stateDb';
+import styles from './styles';
+import renderer from './stateRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+  init: (cnf) => {
+    if (!cnf.state) {
+      cnf.state = {};
+    }
+    cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    db.clear();
+  },
+};