Fix spellings

Merge pull request #4118 from fkohrt/patch-1
Fix typos
2025-10-04 14:49:46 +02:00 · 2023-02-21 13:27:37 +05:30 · 2023-02-21 13:24:54 +05:30 · 2023-02-21 07:00:51 +01:00 · 2023-02-20 22:06:38 +01:00 · 2023-02-20 19:28:31 +05:30
59 changed files with 808 additions and 592 deletions
--- a/.vite/server.ts
+++ b/.vite/server.ts
@@ -8,6 +8,7 @@ async function createServer() {
  // Create Vite server in middleware mode
  const vite = await createViteServer({
    configFile: './vite.config.ts',
+    mode: 'production',
    server: { middlewareMode: true },
    appType: 'custom', // don't include Vite's default HTML handling middlewares
  });
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -188,7 +188,7 @@ describe('Entity Relationship Diagram', () => {
    erDiagram
        CLUSTER {
          varchar(99) name
-          string(255) description 
+          string(255) description
        }
      `,
      { logLevel: 1 }
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -674,10 +674,10 @@ A --> B
      { titleTopMargin: 0 }
    );
  });
-  it('3192: It should be possieble to render flowcharts with invisisble edges', () => {
+  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
    imgSnapshotTest(
      `---
-title: Simple flowchart with invisisble edges
+title: Simple flowchart with invisible edges
 ---
 flowchart TD
 A ~~~ B
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -116,7 +116,11 @@ context('Sequence diagram', () => {
        loop Loopy
            Bob->>Alice: Pasten
        end      `,
-      { wrap: true }
+      {
+        sequence: {
+          wrap: true,
+        },
+      }
    );
  });
  context('font settings', () => {
--- a/cypress/platform/flow2.html
+++ b/cypress/platform/flow2.html
@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'trebuchet ms', verdana, arial;
+      }
+    </style>
+  </head>
+  <body>
+    <pre class="mermaid">
+      graph TB
+      subgraph One
+        a1-->a2-->a3
+      end
+    </pre>
+    <pre class="mermaid">
+      graph TB
+        a_a --> b_b:::apa --> c_c:::apa
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+    </pre>
+    <pre class="mermaid">
+      graph TB
+        a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+        a_a --> c --> d_d --> c_c
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+        click a_a "http://www.aftonbladet.se" "apa"
+    </pre>
+
+    <script type="module">
+      import mermaid from '../../packages/mermaid/src/mermaid';
+
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        flowchart: { curve: 'linear' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
+</html>
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -17,7 +17,7 @@
    <h1>Journey diagram demo</h1>
    <pre class="mermaid">
    ---
-    title: My working day 
+    title: My working day
    ---
     journey
      accTitle: Very simple journey demo
--- a/demos/mindmap.html
+++ b/demos/mindmap.html
@@ -40,7 +40,6 @@

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
-      import mermaidMindmap from './mermaid-mindmap.esm.mjs';

      const ALLOWED_TAGS = [
        'a',
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -8,41 +8,6 @@

 [mermaidAPI](../modules/mermaidAPI.md).RenderResult

-Function that renders an svg with a graph from a chart definition. Usage example below.
-
-```javascript
-mermaidAPI.initialize({
-  startOnLoad: true,
-});
-$(function () {
-  const graphDefinition = 'graph TB\na-->b';
-  const cb = function (svgGraph) {
-    console.log(svgGraph);
-  };
-  mermaidAPI.render('id1', graphDefinition, cb);
-});
-```
-
-**`Param`**
-
-The id for the SVG element (the element to be rendered)
-
-**`Param`**
-
-The text for the graph definition
-
-**`Param`**
-
-Callback which is called after rendering is finished with the svg code as in param.
-
-**`Param`**
-
-HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
-If no svgContainingElement is provided then the SVG element will be appended to the body.
-Selector to element in which a div with the graph temporarily will be
-inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
-element will be removed when rendering is completed.
-
 ## Properties

 ### bindFunctions
@@ -53,6 +18,15 @@ element will be removed when rendering is completed.

 ▸ (`element`): `void`

+Bind function to be called after the svg has been inserted into the DOM.
+This is necessary for adding event listeners to the elements in the svg.
+
+```js
+const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
+div.innerHTML = svg;
+bindFunctions?.(div); // To call bindFunctions only if it's present.
+```
+
 ##### Parameters

 | Name      | Type      |
@@ -65,7 +39,7 @@ element will be removed when rendering is completed.

 #### Defined in

-[mermaidAPI.ts:384](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L384)
+[mermaidAPI.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L91)

 ---

@@ -73,6 +47,8 @@ element will be removed when rendering is completed.

 • **svg**: `string`

+The svg code for the rendered graph.
+
 #### Defined in

-[mermaidAPI.ts:383](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L383)
+[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -95,7 +95,7 @@ mermaid.initialize(config);

 #### Defined in

-[mermaidAPI.ts:668](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L668)
+[mermaidAPI.ts:680](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L680)

 ## Functions

@@ -126,7 +126,7 @@ Return the last node appended

 #### Defined in

-[mermaidAPI.ts:291](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L291)
+[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)

 ---

@@ -152,7 +152,7 @@ the cleaned up svgCode

 #### Defined in

-[mermaidAPI.ts:242](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L242)
+[mermaidAPI.ts:259](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L259)

 ---

@@ -178,7 +178,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L171)
+[mermaidAPI.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L188)

 ---

@@ -201,7 +201,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:219](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L219)
+[mermaidAPI.ts:236](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L236)

 ---

@@ -228,7 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
+[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)

 ---

@@ -248,7 +248,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L135)
+[mermaidAPI.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L152)

 ---

@@ -268,7 +268,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L106)
+[mermaidAPI.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L123)

 ---

@@ -294,7 +294,7 @@ Put the svgCode into an iFrame. Return the iFrame code

 #### Defined in

-[mermaidAPI.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L270)
+[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)

 ---

@@ -319,4 +319,4 @@ Remove any existing elements from the given document

 #### Defined in

-[mermaidAPI.ts:341](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L341)
+[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -391,9 +391,9 @@ flowchart LR
   A == text ==> B
 ```

-### An invisisble link
+### An invisible link

-This can be a usefull tool in some instances where you want to alter the default positining of a node.
+This can be a useful tool in some instances where you want to alter the default positioning of a node.

 ```mermaid-example
 flowchart LR
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -68,8 +68,8 @@ export class Diagram {
  }
 }

-export const getDiagramFromText = async (txt: string): Promise<Diagram> => {
-  const type = detectType(txt, configApi.getConfig());
+export const getDiagramFromText = async (text: string): Promise<Diagram> => {
+  const type = detectType(text, configApi.getConfig());
  try {
    // Trying to find the diagram
    getDiagram(type);
@@ -83,5 +83,5 @@ export const getDiagramFromText = async (txt: string): Promise<Diagram> => {
    const { id, diagram } = await loader();
    registerDiagram(id, diagram);
  }
-  return new Diagram(txt);
+  return new Diagram(text);
 };
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -243,6 +243,7 @@ const checkConfig = (config: MermaidConfig) => {
  if (!config) {
    return;
  }
+  // @ts-expect-error Properties were removed in v10. Warning should exist.
  if (config.lazyLoadedDiagrams || config.loadExternalDiagramsAtStartup) {
    issueWarning('LAZY_LOAD_DEPRECATED');
  }
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -3,10 +3,6 @@
 import DOMPurify from 'dompurify';

 export interface MermaidConfig {
-  /** @deprecated use mermaid.registerLazyDiagrams instead */
-  lazyLoadedDiagrams?: string[];
-  /** @deprecated use mermaid.registerLazyDiagrams instead */
-  loadExternalDiagramsAtStartup?: boolean;
  theme?: string;
  themeVariables?: any;
  themeCSS?: string;
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -7,6 +7,7 @@ import type {
  ExternalDiagramDefinition,
 } from './types';
 import { frontMatterRegex } from './frontmatter';
+import { getDiagram, registerDiagram } from './diagramAPI';
 import { UnknownDiagramError } from '../errors';

 const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
@@ -54,6 +55,39 @@ export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinitio
  }
 };

+export const loadRegisteredDiagrams = async () => {
+  log.debug(`Loading registered diagrams`);
+  // Load all lazy loaded diagrams in parallel
+  const results = await Promise.allSettled(
+    Object.entries(detectors).map(async ([key, { detector, loader }]) => {
+      if (loader) {
+        try {
+          getDiagram(key);
+        } catch (error) {
+          try {
+            // Register diagram if it is not already registered
+            const { diagram, id } = await loader();
+            registerDiagram(id, diagram, detector);
+          } catch (err) {
+            // Remove failed diagram from detectors
+            log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
+            delete detectors[key];
+            throw err;
+          }
+        }
+      }
+    })
+  );
+  const failed = results.filter((result) => result.status === 'rejected');
+  if (failed.length > 0) {
+    log.error(`Failed to load ${failed.length} external diagrams`);
+    for (const res of failed) {
+      log.error(res);
+    }
+    throw new Error(`Failed to load ${failed.length} external diagrams`);
+  }
+};
+
 export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
  if (detectors[key]) {
    log.error(`Detector with key ${key} already exists`);
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -1,104 +1,24 @@
-import { registerDiagram } from './diagramAPI';
-// @ts-ignore: TODO Fix ts errors
-import gitGraphParser from '../diagrams/git/parser/gitGraph';
-import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
-import gitGraphDb from '../diagrams/git/gitGraphAst';
-import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
-import gitGraphStyles from '../diagrams/git/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import c4Parser from '../diagrams/c4/parser/c4Diagram';
-import { c4Detector } from '../diagrams/c4/c4Detector';
-import c4Db from '../diagrams/c4/c4Db';
-import c4Renderer from '../diagrams/c4/c4Renderer';
-import c4Styles from '../diagrams/c4/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import classParser from '../diagrams/class/parser/classDiagram';
-import { classDetector } from '../diagrams/class/classDetector';
-import { classDetectorV2 } from '../diagrams/class/classDetector-V2';
-import classDb from '../diagrams/class/classDb';
-import classRenderer from '../diagrams/class/classRenderer';
-import classRendererV2 from '../diagrams/class/classRenderer-v2';
-import classStyles from '../diagrams/class/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import erParser from '../diagrams/er/parser/erDiagram';
-import { erDetector } from '../diagrams/er/erDetector';
-import erDb from '../diagrams/er/erDb';
-import erRenderer from '../diagrams/er/erRenderer';
-import erStyles from '../diagrams/er/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import flowParser from '../diagrams/flowchart/parser/flow';
-import { flowDetector } from '../diagrams/flowchart/flowDetector';
-import { flowDetectorV2 } from '../diagrams/flowchart/flowDetector-v2';
-import flowDb from '../diagrams/flowchart/flowDb';
-import flowRenderer from '../diagrams/flowchart/flowRenderer';
-import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
-import flowStyles from '../diagrams/flowchart/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import ganttParser from '../diagrams/gantt/parser/gantt';
-import { ganttDetector } from '../diagrams/gantt/ganttDetector';
-import ganttDb from '../diagrams/gantt/ganttDb';
-import ganttRenderer from '../diagrams/gantt/ganttRenderer';
-import ganttStyles from '../diagrams/gantt/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import infoParser from '../diagrams/info/parser/info';
-import infoDb from '../diagrams/info/infoDb';
-import infoRenderer from '../diagrams/info/infoRenderer';
-import { infoDetector } from '../diagrams/info/infoDetector';
-import infoStyles from '../diagrams/info/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import pieParser from '../diagrams/pie/parser/pie';
-import { pieDetector } from '../diagrams/pie/pieDetector';
-import pieDb from '../diagrams/pie/pieDb';
-import pieRenderer from '../diagrams/pie/pieRenderer';
-import pieStyles from '../diagrams/pie/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
-import { requirementDetector } from '../diagrams/requirement/requirementDetector';
-import requirementDb from '../diagrams/requirement/requirementDb';
-import requirementRenderer from '../diagrams/requirement/requirementRenderer';
-import requirementStyles from '../diagrams/requirement/styles';
-
-// @ts-ignore: TODO Fix ts errors
-import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
-import { sequenceDetector } from '../diagrams/sequence/sequenceDetector';
-import sequenceDb from '../diagrams/sequence/sequenceDb';
-import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
-import sequenceStyles from '../diagrams/sequence/styles';
-
-// @ts-ignore: TODO Fix ts errors
-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';
-import { journeyDetector } from '../diagrams/user-journey/journeyDetector';
-import journeyDb from '../diagrams/user-journey/journeyDb';
-import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
-import journeyStyles from '../diagrams/user-journey/styles';
-import { setConfig } from '../config';
-
-import errorRenderer from '../diagrams/error/errorRenderer';
-import errorStyles from '../diagrams/error/styles';
-
+import c4 from '../diagrams/c4/c4Detector';
+import flowchart from '../diagrams/flowchart/flowDetector';
+import flowchartV2 from '../diagrams/flowchart/flowDetector-v2';
+import er from '../diagrams/er/erDetector';
+import git from '../diagrams/git/gitGraphDetector';
+import gantt from '../diagrams/gantt/ganttDetector';
+import info from '../diagrams/info/infoDetector';
+import pie from '../diagrams/pie/pieDetector';
+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';
+import stateV2 from '../diagrams/state/stateDetector-V2';
+import journey from '../diagrams/user-journey/journeyDetector';
+import error from '../diagrams/error/errorDetector';
 import flowchartElk from '../diagrams/flowchart/elk/detector';
+import timeline from '../diagrams/timeline/detector';
+import mindmap from '../diagrams/mindmap/detector';
 import { registerLazyLoadedDiagrams } from './detectType';
-
-// Lazy loaded diagrams
-import timelineDetector from '../diagrams/timeline/detector';
-import mindmapDetector from '../diagrams/mindmap/detector';
+import { registerDiagram } from './diagramAPI';

 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -108,31 +28,6 @@ export const addDiagrams = () => {
  // This is added here to avoid race-conditions.
  // We could optimize the loading logic somehow.
  hasLoadedDiagrams = true;
-  registerLazyLoadedDiagrams(flowchartElk, timelineDetector, mindmapDetector);
-
-  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'
-  );
  registerDiagram(
    '---',
    // --- diagram type may appear if YAML front-matter is not parsed correctly
@@ -142,8 +37,8 @@ export const addDiagrams = () => {
          // Quite ok, clear needs to be there for --- to work as a regular diagram
        },
      },
-      styles: errorStyles, // should never be used
-      renderer: errorRenderer, // should never be used
+      styles: {}, // should never be used
+      renderer: {}, // should never be used
      parser: {
        parser: { yy: {} },
        parse: () => {
@@ -160,220 +55,25 @@ export const addDiagrams = () => {
      return text.toLowerCase().trimStart().startsWith('---');
    }
  );
-
-  registerDiagram(
-    'c4',
-    {
-      parser: c4Parser,
-      db: c4Db,
-      renderer: c4Renderer,
-      styles: c4Styles,
-      init: (cnf) => {
-        c4Renderer.setConf(cnf.c4);
-      },
-    },
-    c4Detector
-  );
-  registerDiagram(
-    'class',
-    {
-      parser: classParser,
-      db: classDb,
-      renderer: classRenderer,
-      styles: classStyles,
-      init: (cnf) => {
-        if (!cnf.class) {
-          cnf.class = {};
-        }
-        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        classDb.clear();
-      },
-    },
-    classDetector
-  );
-  registerDiagram(
-    'classDiagram',
-    {
-      parser: classParser,
-      db: classDb,
-      renderer: classRendererV2,
-      styles: classStyles,
-      init: (cnf) => {
-        if (!cnf.class) {
-          cnf.class = {};
-        }
-        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        classDb.clear();
-      },
-    },
-    classDetectorV2
-  );
-  registerDiagram(
-    'er',
-    {
-      parser: erParser,
-      db: erDb,
-      renderer: erRenderer,
-      styles: erStyles,
-    },
-    erDetector
-  );
-  registerDiagram(
-    'gantt',
-    {
-      parser: ganttParser,
-      db: ganttDb,
-      renderer: ganttRenderer,
-      styles: ganttStyles,
-    },
-    ganttDetector
-  );
-  registerDiagram(
-    'info',
-    {
-      parser: infoParser,
-      db: infoDb,
-      renderer: infoRenderer,
-      styles: infoStyles,
-    },
-    infoDetector
-  );
-  registerDiagram(
-    'pie',
-    {
-      parser: pieParser,
-      db: pieDb,
-      renderer: pieRenderer,
-      styles: pieStyles,
-    },
-    pieDetector
-  );
-  registerDiagram(
-    'requirement',
-    {
-      parser: requirementParser,
-      db: requirementDb,
-      renderer: requirementRenderer,
-      styles: requirementStyles,
-    },
-    requirementDetector
-  );
-  registerDiagram(
-    'sequence',
-    {
-      parser: sequenceParser,
-      db: sequenceDb,
-      renderer: sequenceRenderer,
-      styles: sequenceStyles,
-      init: (cnf) => {
-        if (!cnf.sequence) {
-          cnf.sequence = {};
-        }
-        cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        if ('sequenceDiagram' in cnf) {
-          throw new Error(
-            '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
-          );
-        }
-        sequenceDb.setWrap(cnf.wrap);
-        sequenceRenderer.setConf(cnf.sequence);
-      },
-    },
-    sequenceDetector
-  );
-  registerDiagram(
-    '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',
-    {
-      parser: journeyParser,
-      db: journeyDb,
-      renderer: journeyRenderer,
-      styles: journeyStyles,
-      init: (cnf) => {
-        journeyRenderer.setConf(cnf.journey);
-        journeyDb.clear();
-      },
-    },
-    journeyDetector
-  );
-
-  registerDiagram(
-    'flowchart',
-    {
-      parser: flowParser,
-      db: flowDb,
-      renderer: flowRendererV2,
-      styles: flowStyles,
-      init: (cnf) => {
-        if (!cnf.flowchart) {
-          cnf.flowchart = {};
-        }
-        // TODO, broken as of 2022-09-14 (13809b50251845475e6dca65cc395761be38fbd2)
-        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        flowRenderer.setConf(cnf.flowchart);
-        flowDb.clear();
-        flowDb.setGen('gen-1');
-      },
-    },
-    flowDetector
-  );
-  registerDiagram(
-    'flowchart-v2',
-    {
-      parser: flowParser,
-      db: flowDb,
-      renderer: flowRendererV2,
-      styles: flowStyles,
-      init: (cnf) => {
-        if (!cnf.flowchart) {
-          cnf.flowchart = {};
-        }
-        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        // flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
-        setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
-        flowRendererV2.setConf(cnf.flowchart);
-        flowDb.clear();
-        flowDb.setGen('gen-2');
-      },
-    },
-    flowDetectorV2
-  );
-  registerDiagram(
-    'gitGraph',
-    { parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
-    gitGraphDetector
+  registerLazyLoadedDiagrams(
+    error,
+    c4,
+    classDiagram,
+    classDiagramV2,
+    er,
+    gantt,
+    info,
+    pie,
+    requirement,
+    sequence,
+    flowchart,
+    flowchartV2,
+    flowchartElk,
+    mindmap,
+    timeline,
+    git,
+    state,
+    stateV2,
+    journey
  );
 };
--- a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
@@ -2,8 +2,12 @@ import { detectType } from './detectType';
 import { getDiagram, registerDiagram } from './diagramAPI';
 import { addDiagrams } from './diagram-orchestration';
 import { DiagramDetector } from './types';
+import { getDiagramFromText } from '../Diagram';

 addDiagrams();
+beforeAll(async () => {
+  await getDiagramFromText('sequenceDiagram');
+});

 describe('DiagramAPI', () => {
  it('should return default diagrams', () => {
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -71,3 +71,9 @@ export const getDiagram = (name: string): DiagramDefinition => {
  }
  throw new Error(`Diagram ${name} not found.`);
 };
+
+export class DiagramNotFoundError extends Error {
+  constructor(message: string) {
+    super(`Diagram ${message} not found.`);
+  }
+}
--- a/packages/mermaid/src/diagrams/c4/c4Detector.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Detector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';

-export const c4Detector: DiagramDetector = (txt) => {
+const id = 'c4';
+
+const detector = (txt: string) => {
  return txt.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./c4Diagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/c4/c4Diagram.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
@@ -0,0 +1,17 @@
+// @ts-ignore: TODO Fix ts errors
+import c4Parser from './parser/c4Diagram';
+import c4Db from './c4Db';
+import c4Renderer from './c4Renderer';
+import c4Styles from './styles';
+import { MermaidConfig } from '../../config.type';
+import { DiagramDefinition } from '../../diagram-api/types';
+
+export const diagram: DiagramDefinition = {
+  parser: c4Parser,
+  db: c4Db,
+  renderer: c4Renderer,
+  styles: c4Styles,
+  init: (cnf: MermaidConfig) => {
+    c4Renderer.setConf(cnf.c4);
+  },
+};
--- a/packages/mermaid/src/diagrams/class/classDetector-V2.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector-V2.ts
@@ -1,6 +1,8 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const classDetectorV2: DiagramDetector = (txt, config) => {
+const id = 'classDiagram';
+
+const detector: DiagramDetector = (txt, config) => {
  // If we have configured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram
  if (
    txt.match(/^\s*classDiagram/) !== null &&
@@ -11,3 +13,16 @@ export const classDetectorV2: DiagramDetector = (txt, config) => {
  // We have not opted to use the new renderer so we should return true if we detect a class diagram
  return txt.match(/^\s*classDiagram-v2/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./classDiagram-v2');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/class/classDetector.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector.ts
@@ -1,6 +1,8 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const classDetector: DiagramDetector = (txt, config) => {
+const id = 'class';
+
+const detector: DiagramDetector = (txt, config) => {
  // If we have configured to use dagre-wrapper then we should never return true in this function
  if (config?.class?.defaultRenderer === 'dagre-wrapper') {
    return false;
@@ -8,3 +10,16 @@ export const classDetector: DiagramDetector = (txt, config) => {
  // We have not opted to use the new renderer so we should return true if we detect a class diagram
  return txt.match(/^\s*classDiagram/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./classDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
@@ -0,0 +1,20 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/classDiagram';
+import db from './classDb';
+import styles from './styles';
+import renderer from './classRenderer-v2';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+  init: (cnf) => {
+    if (!cnf.class) {
+      cnf.class = {};
+    }
+    cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    db.clear();
+  },
+};
--- a/packages/mermaid/src/diagrams/class/classDiagram.ts
+++ b/packages/mermaid/src/diagrams/class/classDiagram.ts
@@ -0,0 +1,20 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/classDiagram';
+import db from './classDb';
+import styles from './styles';
+import renderer from './classRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+  init: (cnf) => {
+    if (!cnf.class) {
+      cnf.class = {};
+    }
+    cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    db.clear();
+  },
+};
--- a/packages/mermaid/src/diagrams/er/erDetector.ts
+++ b/packages/mermaid/src/diagrams/er/erDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const erDetector: DiagramDetector = (txt) => {
+const id = 'er';
+
+const detector: DiagramDetector = (txt) => {
  return txt.match(/^\s*erDiagram/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./erDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/er/erDiagram.ts
+++ b/packages/mermaid/src/diagrams/er/erDiagram.ts
@@ -0,0 +1,12 @@
+// @ts-ignore: TODO Fix ts errors
+import erParser from './parser/erDiagram';
+import erDb from './erDb';
+import erRenderer from './erRenderer';
+import erStyles from './styles';
+
+export const diagram = {
+  parser: erParser,
+  db: erDb,
+  renderer: erRenderer,
+  styles: erStyles,
+};
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.jison
@@ -81,7 +81,7 @@ start

 document
 	: /* empty */ { $$ = [] }
-	| document line {$1.push($2);$$ = $1} 
+	| document line {$1.push($2);$$ = $1}
 	;

 line
--- a/packages/mermaid/src/diagrams/error/errorDetector.ts
+++ 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;
--- a/packages/mermaid/src/diagrams/error/errorDiagram.ts
+++ 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
+  },
+};
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
@@ -1,6 +1,9 @@
 import type { DiagramDetector } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';

-export const flowDetectorV2: DiagramDetector = (txt, config) => {
+const id = 'flowchart-v2';
+
+const detector: DiagramDetector = (txt, config) => {
  if (config?.flowchart?.defaultRenderer === 'dagre-d3') {
    return false;
  }
@@ -14,3 +17,16 @@ export const flowDetectorV2: DiagramDetector = (txt, config) => {
  }
  return txt.match(/^\s*flowchart/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./flowDiagram-v2');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
@@ -1,6 +1,8 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const flowDetector: DiagramDetector = (txt, config) => {
+const id = 'flowchart';
+
+const detector: DiagramDetector = (txt, config) => {
  // If we have conferred to only use new flow charts this function should always return false
  // as in not signalling true for a legacy flowchart
  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
@@ -11,3 +13,16 @@ export const flowDetector: DiagramDetector = (txt, config) => {
  }
  return txt.match(/^\s*graph/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./flowDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
@@ -0,0 +1,25 @@
+// @ts-ignore: TODO Fix ts errors
+import flowParser from './parser/flow';
+import flowDb from './flowDb';
+import flowRendererV2 from './flowRenderer-v2';
+import flowStyles from './styles';
+import { MermaidConfig } from '../../config.type';
+import { setConfig } from '../../config';
+
+export const diagram = {
+  parser: flowParser,
+  db: flowDb,
+  renderer: flowRendererV2,
+  styles: flowStyles,
+  init: (cnf: MermaidConfig) => {
+    if (!cnf.flowchart) {
+      cnf.flowchart = {};
+    }
+    cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    // flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
+    setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
+    flowRendererV2.setConf(cnf.flowchart);
+    flowDb.clear();
+    flowDb.setGen('gen-2');
+  },
+};
--- a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
@@ -0,0 +1,24 @@
+// @ts-ignore: TODO Fix ts errors
+import flowParser from './parser/flow';
+import flowDb from './flowDb';
+import flowRenderer from './flowRenderer';
+import flowRendererV2 from './flowRenderer-v2';
+import flowStyles from './styles';
+import { MermaidConfig } from '../../config.type';
+
+export const diagram = {
+  parser: flowParser,
+  db: flowDb,
+  renderer: flowRendererV2,
+  styles: flowStyles,
+  init: (cnf: MermaidConfig) => {
+    if (!cnf.flowchart) {
+      cnf.flowchart = {};
+    }
+    // TODO, broken as of 2022-09-14 (13809b50251845475e6dca65cc395761be38fbd2)
+    cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+    flowRenderer.setConf(cnf.flowchart);
+    flowDb.clear();
+    flowDb.setGen('gen-1');
+  },
+};
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
@@ -1,21 +1,24 @@
 import flowDb from './flowDb';
-import flowParser from './parser/flow';
+import { parser } from './parser/flow';
 import flowRenderer from './flowRenderer';
-import { Diagram } from '../../Diagram';
 import { addDiagrams } from '../../diagram-api/diagram-orchestration';
+
+const diag = {
+  db: flowDb,
+};
 addDiagrams();

 describe('when using mermaid and ', function () {
  describe('when calling addEdges ', function () {
    beforeEach(function () {
-      flowParser.parser.yy = flowDb;
+      parser.yy = flowDb;
      flowDb.clear();
      flowDb.setGen('gen-2');
    });
-    it('should handle edges with text', function () {
-      const diag = new Diagram('graph TD;A-->|text ex|B;');
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should handle edges with text', () => {
+      parser.parse('graph TD;A-->|text ex|B;');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();

      const mockG = {
        setEdge: function (start, end, options) {
@@ -29,10 +32,10 @@ describe('when using mermaid and ', function () {
      flowRenderer.addEdges(edges, mockG, diag);
    });

-    it('should handle edges without text', function () {
-      const diag = new Diagram('graph TD;A-->B;');
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should handle edges without text', async function () {
+      parser.parse('graph TD;A-->B;');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();

      const mockG = {
        setEdge: function (start, end, options) {
@@ -45,10 +48,10 @@ describe('when using mermaid and ', function () {
      flowRenderer.addEdges(edges, mockG, diag);
    });

-    it('should handle open-ended edges', function () {
-      const diag = new Diagram('graph TD;A---B;');
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should handle open-ended edges', () => {
+      parser.parse('graph TD;A---B;');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();

      const mockG = {
        setEdge: function (start, end, options) {
@@ -61,10 +64,10 @@ describe('when using mermaid and ', function () {
      flowRenderer.addEdges(edges, mockG, diag);
    });

-    it('should handle edges with styles defined', function () {
-      const diag = new Diagram('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should handle edges with styles defined', () => {
+      parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();

      const mockG = {
        setEdge: function (start, end, options) {
@@ -77,10 +80,10 @@ describe('when using mermaid and ', function () {

      flowRenderer.addEdges(edges, mockG, diag);
    });
-    it('should handle edges with interpolation defined', function () {
-      const diag = new Diagram('graph TD;A---B; linkStyle 0 interpolate basis');
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should handle edges with interpolation defined', () => {
+      parser.parse('graph TD;A---B; linkStyle 0 interpolate basis');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();

      const mockG = {
        setEdge: function (start, end, options) {
@@ -93,12 +96,10 @@ describe('when using mermaid and ', function () {

      flowRenderer.addEdges(edges, mockG, diag);
    });
-    it('should handle edges with text and styles defined', function () {
-      const diag = new Diagram(
-        'graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;'
-      );
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should handle edges with text and styles defined', () => {
+      parser.parse('graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();

      const mockG = {
        setEdge: function (start, end, options) {
@@ -113,10 +114,10 @@ describe('when using mermaid and ', function () {
      flowRenderer.addEdges(edges, mockG, diag);
    });

-    it('should set fill to "none" by default when handling edges', function () {
-      const diag = new Diagram('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should set fill to "none" by default when handling edges', () => {
+      parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();

      const mockG = {
        setEdge: function (start, end, options) {
@@ -130,12 +131,10 @@ describe('when using mermaid and ', function () {
      flowRenderer.addEdges(edges, mockG, diag);
    });

-    it('should not set fill to none if fill is set in linkStyle', function () {
-      const diag = new Diagram(
-        'graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2,fill:blue;'
-      );
-      diag.db.getVertices();
-      const edges = diag.db.getEdges();
+    it('should not set fill to none if fill is set in linkStyle', () => {
+      parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2,fill:blue;');
+      flowDb.getVertices();
+      const edges = flowDb.getEdges();
      const mockG = {
        setEdge: function (start, end, options) {
          expect(start).toContain('flowchart-A-');
--- a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const ganttDetector: DiagramDetector = (txt) => {
+const id = 'gantt';
+
+const detector: DiagramDetector = (txt) => {
  return txt.match(/^\s*gantt/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./ganttDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
+++ b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
@@ -0,0 +1,13 @@
+// @ts-ignore: TODO Fix ts errors
+import ganttParser from './parser/gantt';
+import ganttDb from './ganttDb';
+import ganttRenderer from './ganttRenderer';
+import ganttStyles from './styles';
+import { DiagramDefinition } from '../../diagram-api/types';
+
+export const diagram: DiagramDefinition = {
+  parser: ganttParser,
+  db: ganttDb,
+  renderer: ganttRenderer,
+  styles: ganttStyles,
+};
--- a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
@@ -1,5 +1,21 @@
 import type { DiagramDetector } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';

-export const gitGraphDetector: DiagramDetector = (txt) => {
+const id = 'gitGraph';
+
+const detector: DiagramDetector = (txt) => {
  return txt.match(/^\s*gitGraph/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./gitGraphDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
+++ b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
@@ -0,0 +1,13 @@
+// @ts-ignore: TODO Fix ts errors
+import gitGraphParser from './parser/gitGraph';
+import gitGraphDb from './gitGraphAst';
+import gitGraphRenderer from './gitGraphRenderer';
+import gitGraphStyles from './styles';
+import { DiagramDefinition } from '../../diagram-api/types';
+
+export const diagram: DiagramDefinition = {
+  parser: gitGraphParser,
+  db: gitGraphDb,
+  renderer: gitGraphRenderer,
+  styles: gitGraphStyles,
+};
--- a/packages/mermaid/src/diagrams/info/infoDetector.ts
+++ b/packages/mermaid/src/diagrams/info/infoDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const infoDetector: DiagramDetector = (txt) => {
+const id = 'info';
+
+const detector: DiagramDetector = (txt) => {
  return txt.match(/^\s*info/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./infoDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/info/infoDiagram.ts
+++ b/packages/mermaid/src/diagrams/info/infoDiagram.ts
@@ -0,0 +1,13 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/info';
+import db from './infoDb';
+import styles from './styles';
+import renderer from './infoRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+};
--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,6 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const pieDetector: DiagramDetector = (txt) => {
-  const logOutput = txt.match(/^\s*pie/) !== null || txt.match(/^\s*bar/) !== null;
-  return logOutput;
+const id = 'pie';
+
+const detector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*pie/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./pieDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/pie/pieDiagram.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
@@ -0,0 +1,13 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/pie';
+import db from './pieDb';
+import styles from './styles';
+import renderer from './pieRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+};
--- a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const requirementDetector: DiagramDetector = (txt) => {
+const id = 'requirement';
+
+const detector: DiagramDetector = (txt) => {
  return txt.match(/^\s*requirement(Diagram)?/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./requirementDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
@@ -0,0 +1,13 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/requirementDiagram';
+import db from './requirementDb';
+import styles from './styles';
+import renderer from './requirementRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+};
--- a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const sequenceDetector: DiagramDetector = (txt) => {
+const id = 'sequence';
+
+const detector: DiagramDetector = (txt) => {
  return txt.match(/^\s*sequenceDiagram/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./sequenceDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -2,9 +2,14 @@ import { vi } from 'vitest';

 import * as configApi from '../../config';
 import mermaidAPI from '../../mermaidAPI';
-import { Diagram } from '../../Diagram';
+import { Diagram, getDiagramFromText } from '../../Diagram';
 import { addDiagrams } from '../../diagram-api/diagram-orchestration';

+beforeAll(async () => {
+  // Is required to load the sequence diagram
+  await getDiagramFromText('sequenceDiagram');
+});
+
 /**
 * Sequence diagrams require their own very special version of a mocked d3 module
 * diagrams/sequence/svgDraw uses statements like this with d3 nodes: (note the [0][0])
@@ -183,7 +188,7 @@ Alice->Bob:Hello Bob, how are you?
 Note right of Bob: Bob thinks
 Bob-->Alice: I am good thanks!`;

-    await mermaidAPI.parse(str, diagram);
+    await mermaidAPI.parse(str);
    const actors = diagram.db.getActors();
    expect(actors.Alice.description).toBe('Alice');
    actors.Bob.description = 'Bob';
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
@@ -0,0 +1,13 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/sequenceDiagram';
+import db from './sequenceDb';
+import styles from './styles';
+import renderer from './sequenceRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+};
--- a/packages/mermaid/src/diagrams/state/parser/state-parser.spec.js
+++ b/packages/mermaid/src/diagrams/state/parser/state-parser.spec.js
@@ -117,7 +117,7 @@ describe('state parser can parse...', () => {
        state "Big State 1" as bigState1 {
            state "inner state 1" as inner1
            inner2: inner state 2
-            inner1 --> inner2 
+            inner1 --> inner2
        }`;
      stateDiagram.parser.parse(diagramText);
      stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
--- a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
+++ b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
@@ -1,11 +1,29 @@
-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;
  }
+  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;
--- a/packages/mermaid/src/diagrams/state/stateDetector.ts
+++ b/packages/mermaid/src/diagrams/state/stateDetector.ts
@@ -1,6 +1,8 @@
-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 confirmed 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') {
@@ -8,3 +10,16 @@ export const stateDetector: DiagramDetector = (txt, config) => {
  }
  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;
--- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
+++ b/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();
+  },
+};
--- a/packages/mermaid/src/diagrams/state/stateDiagram.ts
+++ b/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();
+  },
+};
--- a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';

-export const journeyDetector: DiagramDetector = (txt) => {
+const id = 'journey';
+
+const detector: DiagramDetector = (txt) => {
  return txt.match(/^\s*journey/) !== null;
 };
+
+const loader = async () => {
+  const { diagram } = await import('./journeyDiagram');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
--- a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
@@ -0,0 +1,17 @@
+import { DiagramDefinition } from '../../diagram-api/types';
+// @ts-ignore: TODO Fix ts errors
+import parser from './parser/journey';
+import db from './journeyDb';
+import styles from './styles';
+import renderer from './journeyRenderer';
+
+export const diagram: DiagramDefinition = {
+  parser,
+  db,
+  renderer,
+  styles,
+  init: (cnf) => {
+    renderer.setConf(cnf.journey);
+    db.clear();
+  },
+};
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -245,9 +245,9 @@ flowchart LR
   A == text ==> B
 ```

-### An invisisble link
+### An invisible link

-This can be a usefull tool in some instances where you want to alter the default positining of a node.
+This can be a useful tool in some instances where you want to alter the default positioning of a node.

 ```mermaid-example
 flowchart LR
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -1,6 +1,11 @@
 import mermaid from './mermaid';
 import { mermaidAPI } from './mermaidAPI';
 import './diagram-api/diagram-orchestration';
+import { addDiagrams } from './diagram-api/diagram-orchestration';
+
+beforeAll(async () => {
+  addDiagrams();
+});
 const spyOn = vi.spyOn;

 vi.mock('./mermaidAPI');
@@ -66,9 +71,9 @@ describe('when using mermaid and ', () => {
        mermaid.registerExternalDiagrams(
          [
            {
-              id: 'dummy',
-              detector: (text) => /dummy/.test(text),
-              loader: () => Promise.reject('error'),
+              id: 'dummyError',
+              detector: (text) => /dummyError/.test(text),
+              loader: () => Promise.reject('dummyError'),
            },
          ],
          { lazyLoad: false }
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -7,11 +7,10 @@ import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI, ParseOptions, RenderResult } from './mermaidAPI';
-import { registerLazyLoadedDiagrams } from './diagram-api/detectType';
+import { registerLazyLoadedDiagrams, loadRegisteredDiagrams } from './diagram-api/detectType';
 import type { ParseErrorFunction } from './Diagram';
 import { isDetailedError } from './utils';
 import type { DetailedError } from './utils';
-import { registerDiagram } from './diagram-api/diagramAPI';
 import { ExternalDiagramDefinition } from './diagram-api/types';

 export type {
@@ -67,30 +66,6 @@ const handleError = (error: unknown, errors: DetailedError[], parseError?: Parse
  }
 };

-/**
- * This is an internal function and should not be made public, as it will likely change.
- * @internal
- * @param diagrams - Array of {@link ExternalDiagramDefinition}.
- */
-const loadExternalDiagrams = async (...diagrams: ExternalDiagramDefinition[]) => {
-  log.debug(`Loading ${diagrams.length} external diagrams`);
-  // Load all lazy loaded diagrams in parallel
-  const results = await Promise.allSettled(
-    diagrams.map(async ({ id, detector, loader }) => {
-      const { diagram } = await loader();
-      registerDiagram(id, diagram, detector);
-    })
-  );
-  const failed = results.filter((result) => result.status === 'rejected');
-  if (failed.length > 0) {
-    log.error(`Failed to load ${failed.length} external diagrams`);
-    for (const res of failed) {
-      log.error(res);
-    }
-    throw new Error(`Failed to load ${failed.length} external diagrams`);
-  }
-};
-
 /**
 * ## run
 *
@@ -254,7 +229,7 @@ const init = async function (
 /**
 * Used to register external diagram types.
 * @param diagrams - Array of {@link ExternalDiagramDefinition}.
- * @param opts - If opts.lazyLoad is true, the diagram will be loaded on demand.
+ * @param opts - If opts.lazyLoad is false, the diagrams will be loaded immediately.
 */
 const registerExternalDiagrams = async (
  diagrams: ExternalDiagramDefinition[],
@@ -264,10 +239,9 @@ const registerExternalDiagrams = async (
    lazyLoad?: boolean;
  } = {}
 ) => {
-  if (lazyLoad) {
-    registerLazyLoadedDiagrams(...diagrams);
-  } else {
-    await loadExternalDiagrams(...diagrams);
+  registerLazyLoadedDiagrams(...diagrams);
+  if (lazyLoad === false) {
+    await loadRegisteredDiagrams();
  }
 };

--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -74,6 +74,23 @@ export interface ParseOptions {
 // @ts-ignore Could replicate the type definition in d3. This also makes it possible to use the untyped info from the js diagram files.
 export type D3Element = any;

+export interface RenderResult {
+  /**
+   * The svg code for the rendered graph.
+   */
+  svg: string;
+  /**
+   * Bind function to be called after the svg has been inserted into the DOM.
+   * This is necessary for adding event listeners to the elements in the svg.
+   * ```js
+   * const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
+   * div.innerHTML = svg;
+   * bindFunctions?.(div); // To call bindFunctions only if it's present.
+   * ```
+   */
+  bindFunctions?: (element: Element) => void;
+}
+
 /**
 * Parse the text and validate the syntax.
 * @param text - The mermaid diagram definition.
@@ -379,11 +396,6 @@ export const removeExistingElements = (
 * @returns Returns the rendered element as a string containing the SVG definition.
 */

-export interface RenderResult {
-  svg: string;
-  bindFunctions?: (element: Element) => void;
-}
-
 const render = async function (
  id: string,
  text: string,
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -1,39 +1,7 @@
-import classDiagram from './diagrams/class/styles';
-import er from './diagrams/er/styles';
-import error from './diagrams/error/styles';
-import flowchart from './diagrams/flowchart/styles';
-import gantt from './diagrams/gantt/styles';
-// import gitGraph from './diagrams/git/styles';
-import info from './diagrams/info/styles';
-import pie from './diagrams/pie/styles';
-import requirement from './diagrams/requirement/styles';
-import sequence from './diagrams/sequence/styles';
-import stateDiagram from './diagrams/state/styles';
-import journey from './diagrams/user-journey/styles';
-import c4 from './diagrams/c4/styles';
-import { FlowChartStyleOptions } from './diagrams/flowchart/styles';
+import type { FlowChartStyleOptions } from './diagrams/flowchart/styles';
 import { log } from './logger';

-// TODO @knut: Inject from registerDiagram.
-const themes: Record<string, any> = {
-  flowchart,
-  'flowchart-v2': flowchart,
-  sequence,
-  gantt,
-  classDiagram,
-  'classDiagram-v2': classDiagram,
-  class: classDiagram,
-  stateDiagram,
-  state: stateDiagram,
-  // gitGraph,
-  info,
-  pie,
-  er,
-  error,
-  journey,
-  requirement,
-  c4,
-};
+const themes: Record<string, any> = {};

 const getStyles = (
  type: string,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1172,7 +1172,6 @@ packages:

  /@braintree/sanitize-url/6.0.0:
    resolution: {integrity: sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==}
-    dev: false

  /@colors/colors/1.5.0:
    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
@@ -2989,6 +2988,10 @@ packages:
    resolution: {integrity: sha512-zmEmF5OIM3rb7SbLCFYoQhO4dGt2FRM9AMkxvA3LaADOF1n8in/zGJlWji9fmafLoNyz+FoL6FE0SLtGIArD7w==}
    dev: true

+  /@types/lodash/4.14.189:
+    resolution: {integrity: sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA==}
+    dev: true
+
  /@types/markdown-it/12.2.3:
    resolution: {integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==}
    dependencies:
@@ -5437,12 +5440,10 @@ packages:
    engines: {node: '>=12'}
    dependencies:
      internmap: 2.0.3
-    dev: false

  /d3-axis/3.0.0:
    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
    engines: {node: '>=12'}
-    dev: false

  /d3-brush/3.0.0:
    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
@@ -5453,38 +5454,32 @@ packages:
      d3-interpolate: 3.0.1
      d3-selection: 3.0.0
      d3-transition: 3.0.1_d3-selection@3.0.0
-    dev: false

  /d3-chord/3.0.1:
    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
    engines: {node: '>=12'}
    dependencies:
      d3-path: 3.0.1
-    dev: false

  /d3-color/3.1.0:
    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
    engines: {node: '>=12'}
-    dev: false

  /d3-contour/4.0.0:
    resolution: {integrity: sha512-7aQo0QHUTu/Ko3cP9YK9yUTxtoDEiDGwnBHyLxG5M4vqlBkO/uixMRele3nfsfj6UXOcuReVpVXzAboGraYIJw==}
    engines: {node: '>=12'}
    dependencies:
      d3-array: 3.2.0
-    dev: false

  /d3-delaunay/6.0.2:
    resolution: {integrity: sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==}
    engines: {node: '>=12'}
    dependencies:
      delaunator: 5.0.0
-    dev: false

  /d3-dispatch/3.0.1:
    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
    engines: {node: '>=12'}
-    dev: false

  /d3-drag/3.0.0:
    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
@@ -5492,7 +5487,6 @@ packages:
    dependencies:
      d3-dispatch: 3.0.1
      d3-selection: 3.0.0
-    dev: false

  /d3-dsv/3.0.1:
    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
@@ -5502,19 +5496,16 @@ packages:
      commander: 7.2.0
      iconv-lite: 0.6.3
      rw: 1.3.3
-    dev: false

  /d3-ease/3.0.1:
    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
    engines: {node: '>=12'}
-    dev: false

  /d3-fetch/3.0.1:
    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
    engines: {node: '>=12'}
    dependencies:
      d3-dsv: 3.0.1
-    dev: false

  /d3-force/3.0.0:
    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
@@ -5523,51 +5514,42 @@ packages:
      d3-dispatch: 3.0.1
      d3-quadtree: 3.0.1
      d3-timer: 3.0.1
-    dev: false

  /d3-format/3.1.0:
    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
    engines: {node: '>=12'}
-    dev: false

  /d3-geo/3.0.1:
    resolution: {integrity: sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==}
    engines: {node: '>=12'}
    dependencies:
      d3-array: 3.2.0
-    dev: false

  /d3-hierarchy/3.1.2:
    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
    engines: {node: '>=12'}
-    dev: false

  /d3-interpolate/3.0.1:
    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
    engines: {node: '>=12'}
    dependencies:
      d3-color: 3.1.0
-    dev: false

  /d3-path/3.0.1:
    resolution: {integrity: sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==}
    engines: {node: '>=12'}
-    dev: false

  /d3-polygon/3.0.1:
    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
    engines: {node: '>=12'}
-    dev: false

  /d3-quadtree/3.0.1:
    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
    engines: {node: '>=12'}
-    dev: false

  /d3-random/3.0.1:
    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
    engines: {node: '>=12'}
-    dev: false

  /d3-scale-chromatic/3.0.0:
    resolution: {integrity: sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==}
@@ -5575,7 +5557,6 @@ packages:
    dependencies:
      d3-color: 3.1.0
      d3-interpolate: 3.0.1
-    dev: false

  /d3-scale/4.0.2:
    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
@@ -5586,38 +5567,32 @@ packages:
      d3-interpolate: 3.0.1
      d3-time: 3.0.0
      d3-time-format: 4.1.0
-    dev: false

  /d3-selection/3.0.0:
    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
    engines: {node: '>=12'}
-    dev: false

  /d3-shape/3.1.0:
    resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==}
    engines: {node: '>=12'}
    dependencies:
      d3-path: 3.0.1
-    dev: false

  /d3-time-format/4.1.0:
    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
    engines: {node: '>=12'}
    dependencies:
      d3-time: 3.0.0
-    dev: false

  /d3-time/3.0.0:
    resolution: {integrity: sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==}
    engines: {node: '>=12'}
    dependencies:
      d3-array: 3.2.0
-    dev: false

  /d3-timer/3.0.1:
    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
    engines: {node: '>=12'}
-    dev: false

  /d3-transition/3.0.1_d3-selection@3.0.0:
    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
@@ -5631,7 +5606,6 @@ packages:
      d3-interpolate: 3.0.1
      d3-selection: 3.0.0
      d3-timer: 3.0.1
-    dev: false

  /d3-zoom/3.0.0:
    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
@@ -5642,7 +5616,6 @@ packages:
      d3-interpolate: 3.0.1
      d3-selection: 3.0.0
      d3-transition: 3.0.1_d3-selection@3.0.0
-    dev: false

  /d3/7.8.2:
    resolution: {integrity: sha512-WXty7qOGSHb7HR7CfOzwN1Gw04MUOzN8qh9ZUsvwycIMb4DYMpY9xczZ6jUorGtO6bR9BPMPaueIKwiDxu9uiQ==}
@@ -5678,7 +5651,6 @@ packages:
      d3-timer: 3.0.1
      d3-transition: 3.0.1_d3-selection@3.0.0
      d3-zoom: 3.0.0
-    dev: false

  /dagre-d3-es/7.0.8:
    resolution: {integrity: sha512-eykdoYQ4FwCJinEYS0gPL2f2w+BPbSLvnQSJ3Ye1vAoPjdkq6xIMKBv+UkICd3qZE26wBKIn3p+6n0QC7R1LyA==}
@@ -5872,7 +5844,6 @@ packages:
    resolution: {integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==}
    dependencies:
      robust-predicates: 3.0.1
-    dev: false

  /delayed-stream/1.0.0:
    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -7521,7 +7492,6 @@ packages:
  /internmap/2.0.3:
    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
    engines: {node: '>=12'}
-    dev: false

  /interpret/2.2.0:
    resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==}
@@ -8478,7 +8448,6 @@ packages:

  /khroma/2.0.0:
    resolution: {integrity: sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==}
-    dev: false

  /kind-of/6.0.3:
    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
@@ -9352,7 +9321,6 @@ packages:

  /moment-mini/2.29.4:
    resolution: {integrity: sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==}
-    dev: false

  /mri/1.2.0:
    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
@@ -9455,7 +9423,6 @@ packages:

  /non-layered-tidy-tree-layout/2.0.2:
    resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==}
-    dev: false

  /normalize-package-data/2.5.0:
    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
@@ -10464,7 +10431,6 @@ packages:

  /robust-predicates/3.0.1:
    resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==}
-    dev: false

  /rollup-plugin-visualizer/5.8.3:
    resolution: {integrity: sha512-QGJk4Bqe4AOat5AjipOh8esZH1nck5X2KFpf4VytUdSUuuuSwvIQZjMGgjcxe/zXexltqaXp5Vx1V3LmnQH15Q==}
@@ -10505,7 +10471,6 @@ packages:

  /rw/1.3.3:
    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
-    dev: false

  /rxjs/7.5.6:
    resolution: {integrity: sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==}
@@ -11139,7 +11104,6 @@ packages:

  /stylis/4.1.2:
    resolution: {integrity: sha512-Nn2CCrG2ZaFziDxaZPN43CXqn+j7tcdjPFCkRBkFue8QYXC2HdEwnw5TCBo4yQZ2WxKYeSi0fdoOrtEqgDrXbA==}
-    dev: false

  /supports-color/2.0.0:
    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
@@ -11708,7 +11672,6 @@ packages:
  /uuid/9.0.0:
    resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
    hasBin: true
-    dev: false

  /uvu/0.5.6:
    resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
Author	SHA1	Message	Date
Sidharth Vinod	555d4f2cdc	Fix spellings	2023-02-21 13:27:37 +05:30
Sidharth Vinod	75633ba125	Merge pull request #4118 from fkohrt/patch-1 Fix typos	2023-02-21 13:24:54 +05:30
Per Brolin	ec5fa31a11	Wrap option working in test case	2023-02-21 07:00:51 +01:00
Florian Kohrt	bfb8a75fca	Fix typos	2023-02-20 22:06:38 +01:00
Sidharth Vinod	14c15b221a	Minor cleanup Co-authored-by: Per Brolin <per@mermaidchart.com>	2023-02-20 19:28:31 +05:30
Per Brolin	8743e9e30e	Removed the deprecated use of mindmap in Demo	2023-02-20 14:50:04 +01:00
pbrolin47	22b18a4320	Merge pull request #4113 from mermaid-js/3192_invisible_edges Adding the ability to use invisible edges	2023-02-20 14:40:43 +01:00
pbrolin47	786023ffa6	Merge pull request #4110 from mermaid-js/sidv/splitDiagrams splitDiagrams	2023-02-20 13:54:27 +01:00
Sidharth Vinod	68cdc759a7	Minor cleanup Co-authored-by: Per Brolin <per@mermaidchart.com>	2023-02-20 17:53:07 +05:30
Sidharth Vinod	2272af38b9	Merge branch 'release/10.0.0' into sidv/splitDiagrams * release/10.0.0: Cleanup	2023-02-20 01:32:12 +05:30
Sidharth Vinod	3e480612c7	Merge branch 'release/10.0.0' into sidv/splitDiagrams * release/10.0.0: Skip elk	2023-02-20 00:36:33 +05:30
Sidharth Vinod	f66b524585	Merge branch 'release/10.0.0' into sidv/splitDiagrams * release/10.0.0: Skip all elk tests as it's flaky	2023-02-20 00:31:13 +05:30
Sidharth Vinod	c9c4320f89	fix unit tests	2023-02-20 00:14:39 +05:30
Sidharth Vinod	543e4de0c8	chore: Remove lazyLoadedDiagrams from config	2023-02-19 23:55:22 +05:30
Sidharth Vinod	8174c7ca16	Cleanup	2023-02-19 22:42:26 +05:30
Sidharth Vinod	014ab85420	Cleanup	2023-02-19 22:41:44 +05:30
Sidharth Vinod	638362baea	Merge branch 'release/10.0.0' into sidv/splitDiagrams * release/10.0.0: (333 commits) 10.0.0-rc.3 Export more types no side effects 10.0.0-rc.2 skip failing elk test Cleanup Update docs fix(#3406, #3394): Remove init & initThrowsErrors chore: Rename lazy loaded diagram definitions Skip flowchart-elk failing test Fix docs fix Server Fix lint Remove Readme Fix E2E Tests Fix tests feat: Break render and parse types chore: Remove all non async render/parse/init Remove CJS builds from docs chore: Remove cjs from build ...	2023-02-19 20:18:26 +05:30
Sidharth Vinod	15cfa5d40d	Merge branch 'develop' into sidv/splitDiagrams * develop: (79 commits) Minor change feat: Add @include support to docs feat: Add @include example to docs feat: Add @include support to docs cleanup fix lines fix Async rendering Revert "sync" chore(deps): update pnpm to v7.17.1 chore(deps): remove dependency on `graphlib` test(e2e): make gitgraph snapshots consistent chore: Fix lint test: Update vitest Add official vim plugin to list in integrations chore: Cleanup package.json chore: Cleanup package.json chore: Cleanup package.json fix lock Docs Fix: array concat ...	2022-11-30 19:15:21 +05:30
Sidharth Vinod	bf53a03c9d	fix: Use `lodash` instead of `lodash-es` lodash with specific imports use lesser space than lodash-es	2022-11-20 18:30:01 +05:30
Sidharth Vinod	3b32f44a60	Merge branch 'sidv/viz' into sidv/splitDiagrams * sidv/viz: feat: Add package visualization Ignore stats.html feat: Add bundle visualization	2022-11-20 14:25:40 +05:30
Sidharth Vinod	a8cd5e675d	Ignore stats.html	2022-11-20 12:10:05 +05:30
Sidharth Vinod	bc269a966d	Merge branch 'sidv/sizeCheck' into sidv/splitDiagrams * sidv/sizeCheck: feat: Add size inspection plugin	2022-11-20 12:09:42 +05:30
Sidharth Vinod	d39606cb47	fix: Mindmap link	2022-11-20 12:04:28 +05:30
Sidharth Vinod	b04517b146	chore: Cleanup	2022-11-20 12:00:34 +05:30
Sidharth Vinod	024ee4213f	Merge branch 'develop' into sidv/splitDiagrams * develop: (233 commits) style(docs): use `github-dark` hightlight theme refactor(docs): use default vitepress highlighter fix: Move redirection to router ci(renovate): disable pinning dependencies Revert "chore(deps): pin dependencies" change shiki getHighlighter import create separate spec for stateRenderer-v2 diagramStates should not be global; pass it into functions; minor comment fixes diagramClasses no longer needs to be cached; mermaidAPI no longer calls it repeatedly (minor) import expectTypeOf in spec (minor) fix JSdoc tag + spec stateRenderer-v2.js getClasses() to verify it returns a {} (minor) fix JSdoc types in comments (minor) add comments, remove duplicated line chore: Add master to link checker chore: Add docs to redirect.ts stateDB classes must be a {} not [] feat: Redirect old documentation links. add stateDiagram-v2 to list of graphs with classDefs fix(docs): ClassDiagram table ...	2022-11-20 11:58:55 +05:30
Sidharth Vinod	e861fbb517	feat: unbundle styles	2022-11-20 11:09:08 +05:30
Sidharth Vinod	2e028ce36d	chore: Unify `registerLazyLoadedDiagrams`	2022-11-20 00:38:35 +05:30
Sidharth Vinod	7306b5ac45	feat: Add size inspection plugin	2022-11-18 17:52:55 +05:30
Sidharth Vinod	0854bab124	fix: Remove diagram dependency from mermaidAPI	2022-11-18 16:51:50 +05:30
Sidharth Vinod	fa51121f29	chore(split): Error	2022-11-18 16:30:54 +05:30
Sidharth Vinod	0b4c6f6477	chore(split): Journey	2022-11-18 16:22:38 +05:30
Sidharth Vinod	e5768454f1	chore(split): State Diagram	2022-11-18 16:19:38 +05:30
Sidharth Vinod	89b5eb56f2	chore(split): Orchestration	2022-11-18 16:11:19 +05:30
Sidharth Vinod	616c969a03	chore(split): Flow type	2022-11-18 16:11:03 +05:30
Sidharth Vinod	4fd826ac8c	chore(split): Sequence	2022-11-18 16:10:51 +05:30
Sidharth Vinod	6d5a6ad0c8	chore(split): Requirement	2022-11-18 16:10:42 +05:30
Sidharth Vinod	e0cd76e6fd	chore(split): Pie	2022-11-18 16:10:25 +05:30
Sidharth Vinod	f03364f328	chore(split): Info	2022-11-18 16:10:15 +05:30
Sidharth Vinod	25bc381361	chore(split): gitGraph	2022-11-18 16:10:06 +05:30
Sidharth Vinod	38e5c3a81e	chore(split): Gantt	2022-11-18 16:09:56 +05:30
Sidharth Vinod	43aa831dd2	chore(split): ER	2022-11-18 16:09:45 +05:30
Sidharth Vinod	4492c5ed4e	chore(split): classDiagram	2022-11-18 16:09:36 +05:30
Sidharth Vinod	5dec9eb2f5	fix: C4 type	2022-11-18 16:09:10 +05:30
Sidharth Vinod	02903be558	feat: Split C4 & Flow	2022-11-18 14:28:28 +05:30