From 02903be558dcc99cc006a223fc1987e5554b1933 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 14:28:28 +0530
Subject: [PATCH 01/57] feat: Split C4 & Flow

---
 .../mermaid/src/diagram-api/detectType.ts     |  5 ++
 .../src/diagram-api/diagram-orchestration.ts  | 80 ++-----------------
 .../mermaid/src/diagrams/c4/c4Detector.ts     | 19 ++++-
 packages/mermaid/src/diagrams/c4/c4Diagram.ts | 16 ++++
 .../diagrams/flowchart/flowDetector copy.ts   | 24 ++++++
 .../src/diagrams/flowchart/flowDetector-v2.ts | 18 ++++-
 .../src/diagrams/flowchart/flowDetector.ts    | 18 ++++-
 .../src/diagrams/flowchart/flowDiagram-v2.ts  | 25 ++++++
 .../src/diagrams/flowchart/flowDiagram.ts     | 24 ++++++
 9 files changed, 153 insertions(+), 76 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/c4/c4Diagram.ts
 create mode 100644 packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts
 create mode 100644 packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
 create mode 100644 packages/mermaid/src/diagrams/flowchart/flowDiagram.ts

diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 9536fded2..1ea4f2b4d 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,6 +1,7 @@
 import { MermaidConfig } from '../config.type';
 import { log } from '../logger';
 import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
+import { ExternalDiagramDefinition } from '../diagram-api/types';
 
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
@@ -43,6 +44,10 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   throw new Error(`No diagram type detected for text: ${text}`);
 };
 
+export const addDiagram = ({ id, detector, loader }: ExternalDiagramDefinition) => {
+  addDetector(id, detector, loader);
+};
+
 export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
   if (detectors[key]) {
     throw new Error(`Detector with key ${key} already exists`);
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index a26edb303..88dfcffeb 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -1,4 +1,7 @@
 import { registerDiagram } from './diagramAPI';
+import c4 from '../diagrams/c4/c4Detector';
+import flowchart from '../diagrams/flowchart/flowDetector';
+import flowchartV2 from '../diagrams/flowchart/flowDetector-v2';
 
 // @ts-ignore: TODO Fix ts errors
 import gitGraphParser from '../diagrams/git/parser/gitGraph';
@@ -7,13 +10,6 @@ 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';
@@ -30,15 +26,6 @@ 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';
@@ -89,10 +76,10 @@ 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 { addDiagram } from './detectType';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -125,20 +112,7 @@ export const addDiagrams = () => {
     },
     (text) => text.toLowerCase().trim() === 'error'
   );
-
-  registerDiagram(
-    'c4',
-    {
-      parser: c4Parser,
-      db: c4Db,
-      renderer: c4Renderer,
-      styles: c4Styles,
-      init: (cnf) => {
-        c4Renderer.setConf(cnf.c4);
-      },
-    },
-    c4Detector
-  );
+  addDiagram(c4);
   registerDiagram(
     'class',
     {
@@ -295,47 +269,9 @@ export const addDiagrams = () => {
     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
-  );
+  addDiagram(flowchart);
+  addDiagram(flowchartV2);
+
   registerDiagram(
     'gitGraph',
     { parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
diff --git a/packages/mermaid/src/diagrams/c4/c4Detector.ts b/packages/mermaid/src/diagrams/c4/c4Detector.ts
index 49ba95b8e..08b8bbf55 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/c4/c4Diagram.ts b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
new file mode 100644
index 000000000..d51be7160
--- /dev/null
+++ b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
@@ -0,0 +1,16 @@
+// @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';
+
+export const diagram = {
+  parser: c4Parser,
+  db: c4Db,
+  renderer: c4Renderer,
+  styles: c4Styles,
+  init: (cnf: MermaidConfig) => {
+    c4Renderer.setConf(cnf.c4);
+  },
+};
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts
new file mode 100644
index 000000000..3d09f36ae
--- /dev/null
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts	
@@ -0,0 +1,24 @@
+import type { DiagramDetector } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+
+const id = 'flowchart';
+
+const detector: DiagramDetector = (txt, config) => {
+  // If we have confired to only use new flow charts this function shohuld always return false
+  // as in not signalling true for a legacy flowchart
+  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') return false;
+  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;
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
index c2ec736c7..565cd2104 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts
@@ -1,8 +1,24 @@
 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 we have confgured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram
   if (config?.flowchart?.defaultRenderer === 'dagre-wrapper' && txt.match(/^\s*graph/) !== null)
     return true;
   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;
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
index 740d12847..3d09f36ae 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
@@ -1,8 +1,24 @@
 import type { DiagramDetector } from '../../diagram-api/types';
+import type { ExternalDiagramDefinition } from '../../diagram-api/types';
 
-export const flowDetector: DiagramDetector = (txt, config) => {
+const id = 'flowchart';
+
+const detector: DiagramDetector = (txt, config) => {
   // If we have confired to only use new flow charts this function shohuld always return false
   // as in not signalling true for a legacy flowchart
   if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') return false;
   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;
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
new file mode 100644
index 000000000..8cd49de65
--- /dev/null
+++ 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');
+  },
+};
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts b/packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
new file mode 100644
index 000000000..d68a7c01d
--- /dev/null
+++ 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');
+  },
+};

From 5dec9eb2f54dcccd1df96766b6575c8a34080a93 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:09:10 +0530
Subject: [PATCH 02/57] fix: C4 type

---
 packages/mermaid/src/diagrams/c4/c4Diagram.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/c4/c4Diagram.ts b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
index d51be7160..6f8f25db2 100644
--- a/packages/mermaid/src/diagrams/c4/c4Diagram.ts
+++ b/packages/mermaid/src/diagrams/c4/c4Diagram.ts
@@ -4,8 +4,9 @@ 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 = {
+export const diagram: DiagramDefinition = {
   parser: c4Parser,
   db: c4Db,
   renderer: c4Renderer,

From 4492c5ed4e29e3ef05d2f938cbebc7c884f8b4d4 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:09:36 +0530
Subject: [PATCH 03/57] chore(split):  classDiagram

---
 .../src/diagrams/class/classDetector-V2.ts    | 19 ++++++++++++++++--
 .../src/diagrams/class/classDetector.ts       | 19 ++++++++++++++++--
 .../src/diagrams/class/classDiagram-v2.ts     | 20 +++++++++++++++++++
 .../src/diagrams/class/classDiagram.ts        | 20 +++++++++++++++++++
 4 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/class/classDiagram-v2.ts
 create mode 100644 packages/mermaid/src/diagrams/class/classDiagram.ts

diff --git a/packages/mermaid/src/diagrams/class/classDetector-V2.ts b/packages/mermaid/src/diagrams/class/classDetector-V2.ts
index d65caf9a8..51b93fb0d 100644
--- a/packages/mermaid/src/diagrams/class/classDetector-V2.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector-V2.ts
@@ -1,9 +1,24 @@
-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 confgured 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 && config?.class?.defaultRenderer === 'dagre-wrapper')
     return true;
   // 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;
diff --git a/packages/mermaid/src/diagrams/class/classDetector.ts b/packages/mermaid/src/diagrams/class/classDetector.ts
index ef6389a60..dc2f4261f 100644
--- a/packages/mermaid/src/diagrams/class/classDetector.ts
+++ b/packages/mermaid/src/diagrams/class/classDetector.ts
@@ -1,8 +1,23 @@
-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 confgured to use dagre-wrapper then we should never return true in this function
   if (config?.class?.defaultRenderer === 'dagre-wrapper') return false;
   // 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;
diff --git a/packages/mermaid/src/diagrams/class/classDiagram-v2.ts b/packages/mermaid/src/diagrams/class/classDiagram-v2.ts
new file mode 100644
index 000000000..2f0bbf371
--- /dev/null
+++ 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();
+  },
+};
diff --git a/packages/mermaid/src/diagrams/class/classDiagram.ts b/packages/mermaid/src/diagrams/class/classDiagram.ts
new file mode 100644
index 000000000..250d04176
--- /dev/null
+++ 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();
+  },
+};

From 43aa831dd292351176419793bde47a1a2c6de234 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:09:45 +0530
Subject: [PATCH 04/57] chore(split):  ER

---
 .../mermaid/src/diagrams/er/erDetector.ts     | 19 +++++++++++++++++--
 packages/mermaid/src/diagrams/er/erDiagram.ts | 12 ++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/er/erDiagram.ts

diff --git a/packages/mermaid/src/diagrams/er/erDetector.ts b/packages/mermaid/src/diagrams/er/erDetector.ts
index 5a87a949e..f73baa434 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/er/erDiagram.ts b/packages/mermaid/src/diagrams/er/erDiagram.ts
new file mode 100644
index 000000000..a5b0da9c1
--- /dev/null
+++ 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,
+};

From 38e5c3a81ea3c54b365b500f17573b1bea5e18a2 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:09:56 +0530
Subject: [PATCH 05/57] chore(split):  Gantt

---
 .../src/diagrams/gantt/ganttDetector.ts       | 19 +++++++++++++++++--
 .../src/diagrams/gantt/ganttDiagram.ts        | 13 +++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/gantt/ganttDiagram.ts

diff --git a/packages/mermaid/src/diagrams/gantt/ganttDetector.ts b/packages/mermaid/src/diagrams/gantt/ganttDetector.ts
index 5de167010..3fe2bbe7e 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts b/packages/mermaid/src/diagrams/gantt/ganttDiagram.ts
new file mode 100644
index 000000000..b1341052d
--- /dev/null
+++ 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,
+};

From 25bc381361a7d2e616bd7f4b8e535ec27c243e14 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:10:06 +0530
Subject: [PATCH 06/57] chore(split):  gitGraph

---
 .../src/diagrams/git/gitGraphDetector.ts       | 18 +++++++++++++++++-
 .../src/diagrams/git/gitGraphDiagram.ts        | 13 +++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 packages/mermaid/src/diagrams/git/gitGraphDiagram.ts

diff --git a/packages/mermaid/src/diagrams/git/gitGraphDetector.ts b/packages/mermaid/src/diagrams/git/gitGraphDetector.ts
index f890501a5..46d09c6e5 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts b/packages/mermaid/src/diagrams/git/gitGraphDiagram.ts
new file mode 100644
index 000000000..9ef3506a0
--- /dev/null
+++ 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,
+};

From f03364f3287f3a0185eca59bc53069592593d4cb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:10:15 +0530
Subject: [PATCH 07/57] chore(split):  Info

---
 .../mermaid/src/diagrams/info/infoDetector.ts | 19 +++++++++++++++++--
 .../mermaid/src/diagrams/info/infoDiagram.ts  | 13 +++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/info/infoDiagram.ts

diff --git a/packages/mermaid/src/diagrams/info/infoDetector.ts b/packages/mermaid/src/diagrams/info/infoDetector.ts
index 8bccb578f..a022e3ccb 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/info/infoDiagram.ts b/packages/mermaid/src/diagrams/info/infoDiagram.ts
new file mode 100644
index 000000000..a8100a79f
--- /dev/null
+++ 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,
+};

From e0cd76e6fd74491414319cd338756c8c8e9661d0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:10:25 +0530
Subject: [PATCH 08/57] chore(split):  Pie

---
 .../mermaid/src/diagrams/pie/pieDetector.ts   | 19 +++++++++++++++++--
 .../mermaid/src/diagrams/pie/pieDiagram.ts    | 13 +++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/pie/pieDiagram.ts

diff --git a/packages/mermaid/src/diagrams/pie/pieDetector.ts b/packages/mermaid/src/diagrams/pie/pieDetector.ts
index 65a011c7a..dd1224db9 100644
--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,5 +1,20 @@
-import type { DiagramDetector } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
 
-export const pieDetector: DiagramDetector = (txt) => {
+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;
diff --git a/packages/mermaid/src/diagrams/pie/pieDiagram.ts b/packages/mermaid/src/diagrams/pie/pieDiagram.ts
new file mode 100644
index 000000000..3a586f668
--- /dev/null
+++ 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,
+};

From 6d5a6ad0c844fa5a9a4cfac1da5eb315c940d653 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:10:42 +0530
Subject: [PATCH 09/57] chore(split):  Requirement

---
 .../requirement/requirementDetector.ts        | 19 +++++++++++++++++--
 .../requirement/requirementDiagram.ts         | 13 +++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/requirement/requirementDiagram.ts

diff --git a/packages/mermaid/src/diagrams/requirement/requirementDetector.ts b/packages/mermaid/src/diagrams/requirement/requirementDetector.ts
index 164da6c1a..1102fde0c 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts b/packages/mermaid/src/diagrams/requirement/requirementDiagram.ts
new file mode 100644
index 000000000..37f6177b6
--- /dev/null
+++ 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,
+};

From 4fd826ac8c73a659af31fd2acc630b07a2ff1f42 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:10:51 +0530
Subject: [PATCH 10/57] chore(split):  Sequence

---
 .../src/diagrams/sequence/sequenceDetector.ts | 19 +++++++++++++++++--
 .../src/diagrams/sequence/sequenceDiagram.ts  | 13 +++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts b/packages/mermaid/src/diagrams/sequence/sequenceDetector.ts
index 52640b134..c436e65d4 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
new file mode 100644
index 000000000..fdec7f86d
--- /dev/null
+++ 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,
+};

From 616c969a0397a5289e1f64be63b54120a5aafe4a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:11:03 +0530
Subject: [PATCH 11/57] chore(split):  Flow type

---
 packages/mermaid/src/diagrams/flowchart/flowDetector.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
index 3d09f36ae..71e409331 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDetector.ts
@@ -1,10 +1,9 @@
-import type { DiagramDetector } from '../../diagram-api/types';
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
+import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-api/types';
 
 const id = 'flowchart';
 
 const detector: DiagramDetector = (txt, config) => {
-  // If we have confired to only use new flow charts this function shohuld always return false
+  // If we have confirmed 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') return false;
   return txt.match(/^\s*graph/) !== null;

From 89b5eb56f24fbcd90052679abe3c80fb4a4aa5bd Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:11:19 +0530
Subject: [PATCH 12/57] chore(split):  Orchestration

---
 .../src/diagram-api/diagram-orchestration.ts  | 195 ++----------------
 1 file changed, 21 insertions(+), 174 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 88dfcffeb..69a01821a 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -2,64 +2,15 @@ import { registerDiagram } from './diagramAPI';
 import c4 from '../diagrams/c4/c4Detector';
 import flowchart from '../diagrams/flowchart/flowDetector';
 import flowchartV2 from '../diagrams/flowchart/flowDetector-v2';
-
-// @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 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 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';
+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';
 
 // @ts-ignore: TODO Fix ts errors
 import stateParser from '../diagrams/state/parser/stateDiagram';
@@ -113,113 +64,18 @@ export const addDiagrams = () => {
     (text) => text.toLowerCase().trim() === 'error'
   );
   addDiagram(c4);
-  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
-  );
+  addDiagram(classDiagram);
+  addDiagram(classDiagramV2);
+  addDiagram(er);
+  addDiagram(gantt);
+  addDiagram(info);
+  addDiagram(pie);
+  addDiagram(requirement);
+  addDiagram(sequence);
+  addDiagram(flowchart);
+  addDiagram(flowchartV2);
+  addDiagram(git);
+
   registerDiagram(
     'state',
     {
@@ -268,13 +124,4 @@ export const addDiagrams = () => {
     },
     journeyDetector
   );
-
-  addDiagram(flowchart);
-  addDiagram(flowchartV2);
-
-  registerDiagram(
-    'gitGraph',
-    { parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
-    gitGraphDetector
-  );
 };

From e5768454f1c3f5284ba3066e9df32ff9820f2373 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:19:38 +0530
Subject: [PATCH 13/57] chore(split):  State Diagram

---
 .../src/diagram-api/diagram-orchestration.ts  | 48 ++-----------------
 .../src/diagrams/state/stateDetector-V2.ts    | 19 +++++++-
 .../src/diagrams/state/stateDetector.ts       | 19 +++++++-
 .../src/diagrams/state/stateDiagram-v2.ts     | 20 ++++++++
 .../src/diagrams/state/stateDiagram.ts        | 20 ++++++++
 5 files changed, 78 insertions(+), 48 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
 create mode 100644 packages/mermaid/src/diagrams/state/stateDiagram.ts

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 69a01821a..0f12a7ee7 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/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';
-
-// @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';
+import state from '../diagrams/state/stateDetector';
+import stateV2 from '../diagrams/state/stateDetector-V2';
 
 // @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);
-
-  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
-  );
+  addDiagram(state);
+  addDiagram(stateV2);
   registerDiagram(
     'journey',
     {
diff --git a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts b/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
index 7fd9633c6..afc2e59fb 100644
--- a/packages/mermaid/src/diagrams/state/stateDetector-V2.ts
+++ b/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;
diff --git a/packages/mermaid/src/diagrams/state/stateDetector.ts b/packages/mermaid/src/diagrams/state/stateDetector.ts
index 614f327c2..89d6e45bf 100644
--- a/packages/mermaid/src/diagrams/state/stateDetector.ts
+++ b/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;
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts b/packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
new file mode 100644
index 000000000..f7ee4f052
--- /dev/null
+++ 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();
+  },
+};
diff --git a/packages/mermaid/src/diagrams/state/stateDiagram.ts b/packages/mermaid/src/diagrams/state/stateDiagram.ts
new file mode 100644
index 000000000..570d599de
--- /dev/null
+++ 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();
+  },
+};

From 0b4c6f647755ff681fdc04d626bfb91ca544ceef Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:22:38 +0530
Subject: [PATCH 14/57] chore(split):  Journey

---
 .../src/diagram-api/diagram-orchestration.ts  | 23 ++-----------------
 .../diagrams/user-journey/journeyDetector.ts  | 19 +++++++++++++--
 .../diagrams/user-journey/journeyDiagram.ts   | 17 ++++++++++++++
 3 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 0f12a7ee7..eed4269f6 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -13,13 +13,7 @@ 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';
-
-// @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 journey from '../diagrams/user-journey/journeyDetector';
 
 import errorRenderer from '../diagrams/error/errorRenderer';
 import errorStyles from '../diagrams/error/styles';
@@ -70,18 +64,5 @@ export const addDiagrams = () => {
   addDiagram(git);
   addDiagram(state);
   addDiagram(stateV2);
-  registerDiagram(
-    'journey',
-    {
-      parser: journeyParser,
-      db: journeyDb,
-      renderer: journeyRenderer,
-      styles: journeyStyles,
-      init: (cnf) => {
-        journeyRenderer.setConf(cnf.journey);
-        journeyDb.clear();
-      },
-    },
-    journeyDetector
-  );
+  addDiagram(journey);
 };
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts b/packages/mermaid/src/diagrams/user-journey/journeyDetector.ts
index 535e7be9d..90b2fd6e1 100644
--- 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;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts b/packages/mermaid/src/diagrams/user-journey/journeyDiagram.ts
new file mode 100644
index 000000000..c3a2a3c6b
--- /dev/null
+++ 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();
+  },
+};

From fa51121f29e0dbcb41744b454429cbe6d1f1bfe1 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:30:54 +0530
Subject: [PATCH 15/57] chore(split):  Error

---
 .../src/diagram-api/diagram-orchestration.ts  | 29 ++-----------------
 .../src/diagrams/error/errorDetector.ts       | 20 +++++++++++++
 .../src/diagrams/error/errorDiagram.ts        | 21 ++++++++++++++
 3 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 packages/mermaid/src/diagrams/error/errorDetector.ts
 create mode 100644 packages/mermaid/src/diagrams/error/errorDiagram.ts

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
+  },
+};

From 0854bab12415d5842b7c5b5a950a43c3202407e8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 16:51:50 +0530
Subject: [PATCH 16/57] fix: Remove diagram dependency from mermaidAPI

---
 packages/mermaid/src/mermaid.ts    |  9 +--------
 packages/mermaid/src/mermaidAPI.ts | 22 +++++-----------------
 2 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index ac8872ef6..3a8da77ad 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -13,7 +13,6 @@ import { ExternalDiagramDefinition } from './diagram-api/types';
 
 export type { MermaidConfig, DetailedError, ExternalDiagramDefinition };
 
-let externalDiagramsRegistered = false;
 /**
  * ## init
  *
@@ -50,12 +49,7 @@ const init = async function (
   callback?: Function
 ) {
   try {
-    // Not really sure if we need to check this, or simply call initThrowsErrorsAsync directly.
-    if (externalDiagramsRegistered) {
-      await initThrowsErrorsAsync(config, nodes, callback);
-    } else {
-      initThrowsErrors(config, nodes, callback);
-    }
+    await initThrowsErrorsAsync(config, nodes, callback);
   } catch (e) {
     log.warn('Syntax Error rendering');
     if (isDetailedError(e)) {
@@ -343,7 +337,6 @@ const registerExternalDiagrams = async (
   } else {
     await loadExternalDiagrams(diagrams);
   }
-  externalDiagramsRegistered = true;
 };
 
 /**
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index faba5fef8..986d0b157 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,12 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
 import pkg from '../package.json';
 import * as configApi from './config';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
-import classDb from './diagrams/class/classDb';
-import flowDb from './diagrams/flowchart/flowDb';
-import flowRenderer from './diagrams/flowchart/flowRenderer';
-import ganttDb from './diagrams/gantt/ganttDb';
 import Diagram, { getDiagramFromText } from './Diagram';
-import errorRenderer from './diagrams/error/errorRenderer';
 import { attachFunctions } from './interactionDb';
 import { log, setLogLevel } from './logger';
 import getStyles from './styles';
@@ -32,6 +27,7 @@ import utils, { directiveSanitizer } from './utils';
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from './config.type';
 import { evaluate } from './diagrams/common/common';
+import errorRenderer from './diagrams/error/errorRenderer';
 
 /**
  * @param text
@@ -271,7 +267,7 @@ const render = function (
 
   // classDef
   if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
-    const classes: any = flowRenderer.getClasses(text, diag);
+    const classes: any = diag.renderer.getClasses(text, diag);
     const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels;
     for (const className in classes) {
       if (htmlLabels) {
@@ -364,14 +360,10 @@ const render = function (
     switch (graphType) {
       case 'flowchart':
       case 'flowchart-v2':
-        cb(svgCode, flowDb.bindFunctions);
-        break;
       case 'gantt':
-        cb(svgCode, ganttDb.bindFunctions);
-        break;
       case 'class':
       case 'classDiagram':
-        cb(svgCode, classDb.bindFunctions);
+        cb(svgCode, diag.db.bindFunctions);
         break;
       default:
         cb(svgCode);
@@ -544,7 +536,7 @@ const renderAsync = async function (
 
   // classDef
   if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
-    const classes: any = flowRenderer.getClasses(text, diag);
+    const classes: any = diag.renderer.getClasses(text, diag);
     const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels;
     for (const className in classes) {
       if (htmlLabels) {
@@ -637,14 +629,10 @@ const renderAsync = async function (
     switch (graphType) {
       case 'flowchart':
       case 'flowchart-v2':
-        cb(svgCode, flowDb.bindFunctions);
-        break;
       case 'gantt':
-        cb(svgCode, ganttDb.bindFunctions);
-        break;
       case 'class':
       case 'classDiagram':
-        cb(svgCode, classDb.bindFunctions);
+        cb(svgCode, diag.db.bindFunctions);
         break;
       default:
         cb(svgCode);

From 7306b5ac4587197daa88a9c11634cb97d498fbd6 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 17:52:55 +0530
Subject: [PATCH 17/57] feat: Add size inspection plugin

---
 .vite/build.ts                                |   5 +-
 package.json                                  |   1 +
 packages/mermaid/package.json                 |   4 +-
 .../flowchart/parser/flow-direction.spec.js   |   2 +-
 .../flowchart/parser/subgraph.spec.js         |   2 +-
 packages/mermaid/src/utils.spec.js            |   2 +-
 packages/mermaid/src/utils.ts                 |   2 +-
 pnpm-lock.yaml                                | 130 ++++++++++--------
 vdocs/.vitepress/config.ts                    |   1 -
 9 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/.vite/build.ts b/.vite/build.ts
index 2b686b765..d9c8ffe30 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -1,8 +1,9 @@
-import { build, InlineConfig } from 'vite';
+import { build, InlineConfig, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
@@ -95,7 +96,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     resolve: {
       extensions: ['.jison', '.js', '.ts', '.json'],
     },
-    plugins: [jisonPlugin()],
+    plugins: [jisonPlugin(), visualizer({ template: 'network' }) as PluginOption],
   };
 
   if (watch && config.build) {
diff --git a/package.json b/package.json
index ce5b12ce4..c30973985 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
     "rimraf": "^3.0.2",
+    "rollup-plugin-visualizer": "^5.8.3",
     "start-server-and-test": "^1.14.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index f8ff46325..a8f8ed371 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -55,7 +55,7 @@
     "fast-clone": "^1.5.13",
     "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
     "stylis": "^4.1.2",
@@ -70,7 +70,7 @@
     "@types/eslint": "^8.4.6",
     "@types/express": "^4.17.13",
     "@types/jsdom": "^20.0.0",
-    "@types/lodash": "^4.14.185",
+    "@types/lodash-es": "^4.17.6",
     "@types/prettier": "^2.7.0",
     "@types/stylis": "^4.0.2",
     "@types/uuid": "^8.3.4",
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
index a56184f11..d6a41d15f 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash/filter';
+import filter from 'lodash-es/filter';
 import { setConfig } from '../../../config';
 // import DOMPurify from 'dompurify';
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
index aa8e9217f..6fec233e7 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash/filter';
+import filter from 'lodash-es/filter';
 import { setConfig } from '../../../config';
 
 setConfig({
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 4a511b3c0..ca2dfeab9 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -3,7 +3,7 @@ import utils from './utils';
 import assignWithDepth from './assignWithDepth';
 import { detectType } from './diagram-api/detectType';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
-import memoize from 'lodash/memoize';
+import memoize from 'lodash-es/memoize';
 addDiagrams();
 
 describe('when assignWithDepth: should merge objects within objects', function () {
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index f969ecc62..a6a9c2577 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -20,7 +20,7 @@ import { log } from './logger';
 import { detectType } from './diagram-api/detectType';
 import assignWithDepth from './assignWithDepth';
 import { MermaidConfig } from './config.type';
-import memoize from 'lodash/memoize';
+import memoize from 'lodash-es/memoize';
 
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de2066b8d..1142c0722 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,6 +145,9 @@ importers:
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
+      rollup-plugin-visualizer:
+        specifier: ^5.8.3
+        version: 5.8.3_rollup@2.79.1
       start-server-and-test:
         specifier: ^1.14.0
         version: 1.14.0
@@ -165,7 +168,7 @@ importers:
         version: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
       vitepress-plugin-mermaid:
         specifier: ^2.0.8
-        version: 2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe
+        version: 2.0.8_qntmym4r3eiuu4ikfhr4jvwbjq
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.11
         version: 1.0.4-alpha.15_pb3anlaclwt5smse4ujf447uy4
@@ -199,7 +202,7 @@ importers:
       khroma:
         specifier: ^2.0.0
         version: 2.0.0
-      lodash:
+      lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
       moment-mini:
@@ -239,9 +242,9 @@ importers:
       '@types/jsdom':
         specifier: ^20.0.0
         version: 20.0.0
-      '@types/lodash':
-        specifier: ^4.14.185
-        version: 4.14.185
+      '@types/lodash-es':
+        specifier: ^4.17.6
+        version: 4.17.6
       '@types/prettier':
         specifier: ^2.7.0
         version: 2.7.0
@@ -2675,7 +2678,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==}
@@ -3930,8 +3932,10 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
-  /@types/lodash/4.14.185:
-    resolution: {integrity: sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==}
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.188
     dev: true
 
   /@types/lodash/4.14.188:
@@ -5176,7 +5180,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -5184,7 +5188,7 @@ packages:
   /axios/0.26.0:
     resolution: {integrity: sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -6519,12 +6523,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==}
@@ -6535,38 +6537,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==}
@@ -6574,7 +6570,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==}
@@ -6584,19 +6579,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==}
@@ -6605,51 +6597,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==}
@@ -6657,7 +6640,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==}
@@ -6668,38 +6650,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==}
@@ -6713,7 +6689,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==}
@@ -6724,7 +6699,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.6.1:
     resolution: {integrity: sha512-txMTdIHFbcpLx+8a0IFhZsbp+PfBBPt8yfbmukZTQFroKuFqIwqswF0qE5JXWefylaAVpSXFoKm3yP+jpNLFLw==}
@@ -6760,7 +6734,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/0.6.4:
     resolution: {integrity: sha512-e/6jXeCP7/ptlAM48clmX4xTZc5Ek6T6kagS7Oz2HrYSdqcLZFLqpAfh7ldbZRFfxCZVyh61NEPR08UQRVxJzQ==}
@@ -6769,14 +6742,12 @@ packages:
       dagre: 0.8.5
       graphlib: 2.1.8
       lodash: 4.17.21
-    dev: false
 
   /dagre/0.8.5:
     resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
     dependencies:
       graphlib: 2.1.8
       lodash: 4.17.21
-    dev: false
 
   /dargs/7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
@@ -7016,7 +6987,6 @@ packages:
     resolution: {integrity: sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==}
     dependencies:
       robust-predicates: 3.0.1
-    dev: false
 
   /delayed-stream/1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -7223,7 +7193,6 @@ packages:
 
   /dompurify/2.4.0:
     resolution: {integrity: sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA==}
-    dev: false
 
   /domutils/3.0.1:
     resolution: {integrity: sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==}
@@ -8231,7 +8200,6 @@ packages:
 
   /fast-clone/1.5.13:
     resolution: {integrity: sha512-0ez7coyFBQFjZtId+RJqJ+EQs61w9xARfqjqK0AD9vIUkSxWD4HvPt80+5evebZ1tTnv1GYKrPTipx7kOW5ipA==}
-    dev: false
 
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -8412,6 +8380,18 @@ packages:
         optional: true
     dev: true
 
+  /follow-redirects/1.15.2_debug@4.3.2:
+    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dependencies:
+      debug: 4.3.2
+    dev: true
+
   /for-in/1.0.2:
     resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==}
     engines: {node: '>=0.10.0'}
@@ -8862,7 +8842,6 @@ packages:
     resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
     dependencies:
       lodash: 4.17.21
-    dev: false
 
   /gray-matter/4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
@@ -9375,7 +9354,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==}
@@ -10493,7 +10471,6 @@ packages:
 
   /khroma/2.0.0:
     resolution: {integrity: sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==}
-    dev: false
 
   /kind-of/3.2.2:
     resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
@@ -10731,6 +10708,10 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.debounce/4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: true
@@ -11030,6 +11011,24 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /mermaid/9.2.2:
+    resolution: {integrity: sha512-6s7eKMqFJGS+0MYjmx8f6ZigqKBJVoSx5ql2gw6a4Aa+WJ49QiEJg7gPwywaBg3DZMs79UP7trESp4+jmaQccw==}
+    dependencies:
+      '@braintree/sanitize-url': 6.0.0
+      d3: 7.6.1
+      dagre: 0.8.5
+      dagre-d3: 0.6.4
+      dompurify: 2.4.0
+      fast-clone: 1.5.13
+      graphlib: 2.1.8
+      khroma: 2.0.0
+      lodash: 4.17.21
+      moment-mini: 2.29.4
+      non-layered-tidy-tree-layout: 2.0.2
+      stylis: 4.1.2
+      uuid: 9.0.0
+    dev: true
+
   /methods/1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
     engines: {node: '>= 0.6'}
@@ -11372,7 +11371,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==}
@@ -11510,7 +11508,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==}
@@ -12831,7 +12828,22 @@ packages:
 
   /robust-predicates/3.0.1:
     resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==}
-    dev: false
+
+  /rollup-plugin-visualizer/5.8.3_rollup@2.79.1:
+    resolution: {integrity: sha512-QGJk4Bqe4AOat5AjipOh8esZH1nck5X2KFpf4VytUdSUuuuSwvIQZjMGgjcxe/zXexltqaXp5Vx1V3LmnQH15Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+    peerDependencies:
+      rollup: 2.x || 3.x
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      open: 8.4.0
+      rollup: 2.79.1
+      source-map: 0.7.4
+      yargs: 17.6.2
+    dev: true
 
   /rollup/2.79.1:
     resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
@@ -12849,7 +12861,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==}
@@ -13271,6 +13282,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /source-map/0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /sourcemap-codec/1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     dev: true
@@ -13621,7 +13637,6 @@ packages:
 
   /stylis/4.1.2:
     resolution: {integrity: sha512-Nn2CCrG2ZaFziDxaZPN43CXqn+j7tcdjPFCkRBkFue8QYXC2HdEwnw5TCBo4yQZ2WxKYeSi0fdoOrtEqgDrXbA==}
-    dev: false
 
   /subarg/1.0.0:
     resolution: {integrity: sha512-RIrIdRY0X1xojthNcVtgT9sjpOGagEUKpZdgBUi054OEPFo282yg+zE+t1Rj3+RqKq2xStL7uUHhY+AjbC4BXg==}
@@ -14086,7 +14101,7 @@ packages:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.3
       '@types/node': 14.18.33
-      acorn: 8.8.0
+      acorn: 8.8.1
       acorn-walk: 8.2.0
       arg: 4.1.3
       create-require: 1.1.1
@@ -14477,7 +14492,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==}
@@ -14711,14 +14725,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress-plugin-mermaid/2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe:
+  /vitepress-plugin-mermaid/2.0.8_qntmym4r3eiuu4ikfhr4jvwbjq:
     resolution: {integrity: sha512-ywWxTeg9kMv7ZPf/igCBF4ZHhWZAyRtbPnA12ICQuNK2AMp7r5IHOfnuX1EJQf8gNdsh8bcvvSvm8Ll92fdOTw==}
     peerDependencies:
       mermaid: ^8.0.0 || ^9.0.0
       vite-plugin-md: ^0.20.4
       vitepress: ^0.21.6 || ^1.0.0 || ^1.0.0-alpha
     dependencies:
-      mermaid: link:packages/mermaid
+      mermaid: 9.2.2
       vite-plugin-md: 0.20.4_2vrekto2ma5pf5j2eoe6xabo24
       vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
     dev: true
diff --git a/vdocs/.vitepress/config.ts b/vdocs/.vitepress/config.ts
index d3cdccc9a..48bb382c0 100644
--- a/vdocs/.vitepress/config.ts
+++ b/vdocs/.vitepress/config.ts
@@ -1,7 +1,6 @@
 import { version } from '../../package.json';
 import ExampleMarkdown from './mermaid-markdown-all';
 import { defineConfig } from 'vitepress';
-import { update } from 'lodash';
 
 export default defineConfig({
   lang: 'en-US',

From 2e028ce36d78c857693becedb2cac2549308a3ca Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 20 Nov 2022 00:38:35 +0530
Subject: [PATCH 18/57] chore: Unify `registerLazyLoadedDiagrams`

---
 cypress/platform/flow2.html                   | 46 +++++++++++++++++++
 .../mermaid/src/diagram-api/detectType.ts     |  6 ++-
 .../src/diagram-api/diagram-orchestration.ts  | 36 ++++++++-------
 packages/mermaid/src/mermaid.ts               | 15 +-----
 4 files changed, 71 insertions(+), 32 deletions(-)
 create mode 100644 cypress/platform/flow2.html

diff --git a/cypress/platform/flow2.html b/cypress/platform/flow2.html
new file mode 100644
index 000000000..b23f00be6
--- /dev/null
+++ 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>
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 1ea4f2b4d..c27f79b6c 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -44,8 +44,10 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   throw new Error(`No diagram type detected for text: ${text}`);
 };
 
-export const addDiagram = ({ id, detector, loader }: ExternalDiagramDefinition) => {
-  addDetector(id, detector, loader);
+export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinition[]) => {
+  for (const { id, detector, loader } of diagrams) {
+    addDetector(id, detector, loader);
+  }
 };
 
 export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 64a7e5ad8..c6b8b579a 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -14,7 +14,7 @@ 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 { addDiagram } from './detectType';
+import { registerLazyLoadedDiagrams } from './detectType';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -24,20 +24,22 @@ export const addDiagrams = () => {
   // This is added here to avoid race-conditions.
   // We could optimize the loading logic somehow.
   hasLoadedDiagrams = true;
-  addDiagram(error);
-  addDiagram(c4);
-  addDiagram(classDiagram);
-  addDiagram(classDiagramV2);
-  addDiagram(er);
-  addDiagram(gantt);
-  addDiagram(info);
-  addDiagram(pie);
-  addDiagram(requirement);
-  addDiagram(sequence);
-  addDiagram(flowchart);
-  addDiagram(flowchartV2);
-  addDiagram(git);
-  addDiagram(state);
-  addDiagram(stateV2);
-  addDiagram(journey);
+  registerLazyLoadedDiagrams(
+    error,
+    c4,
+    classDiagram,
+    classDiagramV2,
+    er,
+    gantt,
+    info,
+    pie,
+    requirement,
+    sequence,
+    flowchart,
+    flowchartV2,
+    git,
+    state,
+    stateV2,
+    journey
+  );
 };
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 3a8da77ad..268a830ec 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -6,7 +6,7 @@ import type { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
-import { addDetector } from './diagram-api/detectType';
+import { registerLazyLoadedDiagrams } from './diagram-api/detectType';
 import { isDetailedError, type DetailedError } from './utils';
 import { registerDiagram } from './diagram-api/diagramAPI';
 import { ExternalDiagramDefinition } from './diagram-api/types';
@@ -175,17 +175,6 @@ const initThrowsErrors = function (
   }
 };
 
-/**
- * This is an internal function and should not be made public, as it will likely change.
- * @internal
- * @param diagrams - Array of {@link ExternalDiagramDefinition}.
- */
-const registerLazyLoadedDiagrams = (diagrams: ExternalDiagramDefinition[]) => {
-  for (const { id, detector, loader } of diagrams) {
-    addDetector(id, detector, loader);
-  }
-};
-
 /**
  * This is an internal function and should not be made public, as it will likely change.
  * @internal
@@ -333,7 +322,7 @@ const registerExternalDiagrams = async (
   } = {}
 ) => {
   if (lazyLoad) {
-    registerLazyLoadedDiagrams(diagrams);
+    registerLazyLoadedDiagrams(...diagrams);
   } else {
     await loadExternalDiagrams(diagrams);
   }

From e861fbb5170a5ade38db52320f55dd580547e522 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 20 Nov 2022 11:09:08 +0530
Subject: [PATCH 19/57] feat: unbundle styles

---
 .vite/server.ts                               |  1 +
 .../mermaid/src/diagram-api/diagramAPI.ts     | 26 +++++++++++++-
 packages/mermaid/src/mermaid.ts               | 28 ++-------------
 packages/mermaid/src/styles.ts                | 36 ++-----------------
 4 files changed, 30 insertions(+), 61 deletions(-)

diff --git a/.vite/server.ts b/.vite/server.ts
index 334398dd8..ddd6afdd6 100644
--- a/.vite/server.ts
+++ b/.vite/server.ts
@@ -16,6 +16,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
   });
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 2727ae4ef..cacf02fe1 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -4,7 +4,7 @@ import { getConfig as _getConfig } from '../config';
 import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
-import { DiagramDefinition, DiagramDetector } from './types';
+import { DiagramDefinition, DiagramDetector, ExternalDiagramDefinition } from './types';
 
 /*
   Packaging and exposing resources for externa diagrams so that they can import
@@ -70,3 +70,27 @@ export class DiagramNotFoundError extends Error {
     super(`Diagram ${message} not found.`);
   }
 }
+
+/**
+ * This is an internal function and should not be made public, as it will likely change.
+ * @internal
+ * @param diagrams - Array of {@link ExternalDiagramDefinition}.
+ */
+export 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`);
+  }
+};
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 268a830ec..da13d2d01 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -8,7 +8,7 @@ import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
 import { registerLazyLoadedDiagrams } from './diagram-api/detectType';
 import { isDetailedError, type DetailedError } from './utils';
-import { registerDiagram } from './diagram-api/diagramAPI';
+import { loadExternalDiagrams } from './diagram-api/diagramAPI';
 import { ExternalDiagramDefinition } from './diagram-api/types';
 
 export type { MermaidConfig, DetailedError, ExternalDiagramDefinition };
@@ -175,30 +175,6 @@ const initThrowsErrors = function (
   }
 };
 
-/**
- * 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`);
-  }
-};
-
 /**
  * Equivalent to {@link init()}, except an error will be thrown on error.
  *
@@ -324,7 +300,7 @@ const registerExternalDiagrams = async (
   if (lazyLoad) {
     registerLazyLoadedDiagrams(...diagrams);
   } else {
-    await loadExternalDiagrams(diagrams);
+    await loadExternalDiagrams(...diagrams);
   }
 };
 
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 0c4a7e1a5..5e7907a80 100644
--- 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,

From b04517b146c63057262d576a0b8e0df7c9847dbd Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 20 Nov 2022 12:00:34 +0530
Subject: [PATCH 20/57] chore: Cleanup

---
 .../rendering/stateDiagram-v2.spec.js         |  6 ++--
 docs/community/newDiagram.md                  |  4 +--
 docs/config/setup/modules/mermaidAPI.md       | 20 +++++------
 docs/intro/n00b-gettingStarted.md             | 30 ++++++++--------
 .../mermaid/src/diagram-api/diagramAPI.ts     |  2 +-
 packages/mermaid/src/docs.mts                 |  2 +-
 .../src/docs/intro/n00b-gettingStarted.md     | 34 +++++++++++--------
 7 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 3800a1bf5..5b43c890c 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -530,7 +530,7 @@ stateDiagram-v2
           [*] --> A
           A --> B: test({ foo#colon; 'far' })
           B --> [*]
-            classDef badBadEvent fill:#f00,color:white,font-weight:bold
+            classDef badBadEvent fill:#f00,color:white,font-weight:bold 
             class B badBadEvent
            `,
         { logLevel: 0, fontFamily: 'courier' }
@@ -543,14 +543,14 @@ stateDiagram-v2
           classDef notMoving fill:white
           classDef movement font-style:italic;
           classDef badBadEvent fill:#f00,color:white,font-weight:bold
-
+    
           [*] --> Still
           Still --> [*]
           Still --> Moving
           Moving --> Still
           Moving --> Crash
           Crash --> [*]
-
+    
           class Still notMoving
           class Moving, Crash movement
           class Crash badBadEvent
diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index 7f08e0d95..da86f9838 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -174,8 +174,8 @@ The syntax for adding title and description looks like this:
     accDescr: The description
 
     accDescr {
-	Syntax for a description text
-	written on multiple lines.
+    	Syntax for a description text
+    	written on multiple lines.
     }
 
 In a similar way to the directives the jison syntax are quite similar between the diagrams.
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 0acfe4f97..b1387eb0e 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -80,7 +80,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
+[mermaidAPI.ts:938](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L938)
 
 ## Functions
 
@@ -111,7 +111,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L292)
+[mermaidAPI.ts:289](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L289)
 
 ---
 
@@ -137,7 +137,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:243](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L243)
+[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
 
 ---
 
@@ -163,7 +163,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
+[mermaidAPI.ts:167](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L167)
 
 ---
 
@@ -186,7 +186,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L220)
+[mermaidAPI.ts:217](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L217)
 
 ---
 
@@ -213,7 +213,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
+[mermaidAPI.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L151)
 
 ---
 
@@ -233,7 +233,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L128)
+[mermaidAPI.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L125)
 
 ---
 
@@ -253,7 +253,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L99)
+[mermaidAPI.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L96)
 
 ---
 
@@ -279,7 +279,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:271](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L271)
+[mermaidAPI.ts:268](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L268)
 
 ---
 
@@ -305,4 +305,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L343)
+[mermaidAPI.ts:340](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L340)
diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md
index 5ee34972e..2f422758e 100644
--- a/docs/intro/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@@ -111,9 +111,9 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 <body>
   Here is a mermaid diagram:
   <pre class="mermaid">
-        graph TD
-        A[Client] --> B[Load Balancer]
-        B --> C[Server01]
+        graph TD 
+        A[Client] --> B[Load Balancer] 
+        B --> C[Server01] 
         B --> D[Server02]
   </pre>
 </body>
@@ -156,18 +156,18 @@ Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsi
   <body>
     Here is one mermaid diagram:
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
 
     And here is another:
     <pre class="mermaid">
-            graph TD
+            graph TD 
             A[Client] -->|tcp_123| B
-            B(Load Balancer)
-            B -->|tcp_456| C[Server1]
+            B(Load Balancer) 
+            B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
     </pre>
 
@@ -189,15 +189,15 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
   </head>
   <body>
     <pre class="mermaid">
-            graph LR
-            A --- B
-            B-->C[fa:fa-ban forbidden]
+            graph LR 
+            A --- B 
+            B-->C[fa:fa-ban forbidden] 
             B-->D(fa:fa-spinner);
     </pre>
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
     <script type="module">
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index fe54c06d6..c6f901726 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -68,7 +68,7 @@ export class DiagramNotFoundError extends Error {
  * @internal
  * @param diagrams - Array of {@link ExternalDiagramDefinition}.
  */
-export const loadExternalDiagrams = async (diagrams: ExternalDiagramDefinition[]) => {
+export const loadExternalDiagrams = async (...diagrams: ExternalDiagramDefinition[]) => {
   log.debug(`Loading ${diagrams.length} external diagrams`);
   // Load all lazy loaded diagrams in parallel
   const results = await Promise.allSettled(
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index f9c48c167..aa57a3c01 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -76,7 +76,7 @@ const generateHeader = (file: string): string => {
   const sourcePathRelativeToGenerated = posix.join(relativePath, filePathFromRoot);
   return `
 > **Warning**
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. 
 > ## Please edit the corresponding file in [${filePathFromRoot}](${sourcePathRelativeToGenerated}).`;
 };
 
diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
index ac53e5344..e17bbffb9 100644
--- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
@@ -94,9 +94,9 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 <body>
   Here is a mermaid diagram:
   <pre class="mermaid">
-        graph TD
-        A[Client] --> B[Load Balancer]
-        B --> C[Server01]
+        graph TD 
+        A[Client] --> B[Load Balancer] 
+        B --> C[Server01] 
         B --> D[Server02]
   </pre>
 </body>
@@ -126,6 +126,10 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
+### Adding external diagrams to mermaid
+
+Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**
@@ -135,18 +139,18 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
   <body>
     Here is one mermaid diagram:
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
 
     And here is another:
     <pre class="mermaid">
-            graph TD
+            graph TD 
             A[Client] -->|tcp_123| B
-            B(Load Balancer)
-            B -->|tcp_456| C[Server1]
+            B(Load Balancer) 
+            B -->|tcp_456| C[Server1] 
             B -->|tcp_456| D[Server2]
     </pre>
 
@@ -168,15 +172,15 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
   </head>
   <body>
     <pre class="mermaid">
-            graph LR
-            A --- B
-            B-->C[fa:fa-ban forbidden]
+            graph LR 
+            A --- B 
+            B-->C[fa:fa-ban forbidden] 
             B-->D(fa:fa-spinner);
     </pre>
     <pre class="mermaid">
-            graph TD
-            A[Client] --> B[Load Balancer]
-            B --> C[Server1]
+            graph TD 
+            A[Client] --> B[Load Balancer] 
+            B --> C[Server1] 
             B --> D[Server2]
     </pre>
     <script type="module">

From d39606cb47e10e90593adea86e85ea444388dbc5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 20 Nov 2022 12:04:28 +0530
Subject: [PATCH 21/57] fix: Mindmap link

---
 docs/intro/n00b-gettingStarted.md                      | 2 +-
 packages/mermaid/src/docs/intro/n00b-gettingStarted.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md
index 2f422758e..69bb80e54 100644
--- a/docs/intro/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@@ -145,7 +145,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 
 ### Adding external diagrams to mermaid
 
-Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
 
 ### Working Examples
 
diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
index e17bbffb9..a4dd7662f 100644
--- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
@@ -128,7 +128,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 
 ### Adding external diagrams to mermaid
 
-Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
 
 ### Working Examples
 

From a8cd5e675dd21fb01274d6d381f687f25a7461d7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 20 Nov 2022 12:10:05 +0530
Subject: [PATCH 22/57] Ignore stats.html

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 8cc09354b..6813b82b4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,4 @@ tsconfig.tsbuildinfo
 
 knsv*.html
 local*.html
+stats.html

From bf53a03c9d494dcb464e637df664f55430ff1533 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 20 Nov 2022 18:30:01 +0530
Subject: [PATCH 23/57] fix: Use `lodash` instead of `lodash-es`

lodash with specific imports use lesser space than lodash-es
---
 packages/mermaid/package.json                 |  4 +-
 .../flowchart/parser/flow-direction.spec.js   |  2 +-
 .../flowchart/parser/subgraph.spec.js         |  2 +-
 packages/mermaid/src/utils.spec.js            |  2 +-
 packages/mermaid/src/utils.ts                 |  2 +-
 pnpm-lock.yaml                                | 52 ++++---------------
 6 files changed, 15 insertions(+), 49 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 526f3d91c..81af84568 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -59,7 +59,7 @@
     "fast-clone": "^1.5.13",
     "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
-    "lodash-es": "^4.17.21",
+    "lodash": "^4.14.189",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
     "stylis": "^4.1.2",
@@ -71,7 +71,7 @@
     "@types/jsdom": "^20.0.1",
     "@types/micromatch": "^4.0.2",
     "@types/prettier": "^2.7.1",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash": "^4.14.189",
     "@types/stylis": "^4.0.2",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
index 6cba33f88..6b741fc12 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash-es/filter';
+import filter from 'lodash/filter';
 import { setConfig } from '../../../config';
 
 setConfig({
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
index 6fec233e7..aa8e9217f 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash-es/filter';
+import filter from 'lodash/filter';
 import { setConfig } from '../../../config';
 
 setConfig({
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index ca2dfeab9..4a511b3c0 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -3,7 +3,7 @@ import utils from './utils';
 import assignWithDepth from './assignWithDepth';
 import { detectType } from './diagram-api/detectType';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
-import memoize from 'lodash-es/memoize';
+import memoize from 'lodash/memoize';
 addDiagrams();
 
 describe('when assignWithDepth: should merge objects within objects', function () {
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index f8b56a596..3eecd5f4f 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -21,7 +21,7 @@ import { log } from './logger';
 import { detectType } from './diagram-api/detectType';
 import assignWithDepth from './assignWithDepth';
 import { MermaidConfig } from './config.type';
-import memoize from 'lodash-es/memoize';
+import memoize from 'lodash/memoize';
 
 // Effectively an enum of the supported curve types, accessible by name
 const d3CurveTypes = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d7786fba..72e20dddc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,8 +193,8 @@ importers:
       khroma:
         specifier: ^2.0.0
         version: 2.0.0
-      lodash-es:
-        specifier: ^4.17.21
+      lodash:
+        specifier: ^4.14.189
         version: 4.17.21
       moment-mini:
         specifier: ^2.24.0
@@ -218,9 +218,9 @@ importers:
       '@types/jsdom':
         specifier: ^20.0.1
         version: 20.0.1
-      '@types/lodash-es':
-        specifier: ^4.17.6
-        version: 4.17.6
+      '@types/lodash':
+        specifier: ^4.14.189
+        version: 4.14.189
       '@types/micromatch':
         specifier: ^4.0.2
         version: 4.0.2
@@ -2493,16 +2493,14 @@ packages:
     resolution: {integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==}
     dev: true
 
-  /@types/lodash-es/4.17.6:
-    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
-    dependencies:
-      '@types/lodash': 4.14.188
-    dev: true
-
   /@types/lodash/4.14.188:
     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:
@@ -6043,18 +6041,6 @@ packages:
       debug: 4.3.2
     dev: true
 
-  /follow-redirects/1.15.2_debug@4.3.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dependencies:
-      debug: 4.3.2
-    dev: true
-
   /foreground-child/2.0.0:
     resolution: {integrity: sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==}
     engines: {node: '>=8.0.0'}
@@ -7900,10 +7886,6 @@ packages:
       p-locate: 5.0.0
     dev: true
 
-  /lodash-es/4.17.21:
-    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
-    dev: false
-
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -9445,22 +9427,6 @@ packages:
       yargs: 17.5.1
     dev: true
 
-  /rollup-plugin-visualizer/5.8.3_rollup@2.79.1:
-    resolution: {integrity: sha512-QGJk4Bqe4AOat5AjipOh8esZH1nck5X2KFpf4VytUdSUuuuSwvIQZjMGgjcxe/zXexltqaXp5Vx1V3LmnQH15Q==}
-    engines: {node: '>=14'}
-    hasBin: true
-    peerDependencies:
-      rollup: 2.x || 3.x
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      open: 8.4.0
-      rollup: 2.79.1
-      source-map: 0.7.4
-      yargs: 17.5.1
-    dev: true
-
   /rollup/2.79.1:
     resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
     engines: {node: '>=10.0.0'}

From 0c18c0309bfdf40eab4e0cbfef9cbaacf8466a61 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 19 Feb 2023 00:37:41 +0530
Subject: [PATCH 24/57] Enable blank issues

---
 .github/ISSUE_TEMPLATE/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 8710d49aa..44b16532c 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
   - name: GitHub Discussions
     url: https://github.com/mermaid-js/mermaid/discussions

From ae36586b5816af259a78a8b1c69b07daf48031e1 Mon Sep 17 00:00:00 2001
From: Oliver THEBAULT <Oliboy50@users.noreply.github.com>
Date: Sat, 18 Feb 2023 22:29:35 +0100
Subject: [PATCH 25/57] docs(flowchart): duplicated hexagon node example

---
 docs/syntax/flowchart.md | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index fd0408c45..bee5d3120 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -183,20 +183,6 @@ flowchart LR
 
 ### A hexagon node
 
-Code:
-
-```mermaid-example
-flowchart LR
-    id1{{This is the text in the box}}
-```
-
-```mermaid
-flowchart LR
-    id1{{This is the text in the box}}
-```
-
-Render:
-
 ```mermaid-example
 flowchart LR
     id1{{This is the text in the box}}

From 941b959da3e45192f719a76d8e260615ec121595 Mon Sep 17 00:00:00 2001
From: Rodja Trappe <rodja@zauberzeug.com>
Date: Sun, 19 Feb 2023 05:40:45 +0100
Subject: [PATCH 26/57] add links to NiceGUI integration

---
 packages/mermaid/src/docs/ecosystem/integrations.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index cf4ccc9f8..87593d649 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -182,3 +182,6 @@ They also serve as proof of concept, for the variety of things that can be built
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
+- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
+  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
+  - [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/reference#markdown_element)

From e6b4e2c08403651b557db2a78118c73791346a59 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 19 Feb 2023 14:13:57 +0530
Subject: [PATCH 27/57] Remove Readme

---
 packages/mermaid/README.md       | 346 -------------------------------
 packages/mermaid/README.zh-CN.md | 334 -----------------------------
 2 files changed, 680 deletions(-)
 delete mode 100644 packages/mermaid/README.md
 delete mode 100644 packages/mermaid/README.zh-CN.md

diff --git a/packages/mermaid/README.md b/packages/mermaid/README.md
deleted file mode 100644
index d453d2ec0..000000000
--- a/packages/mermaid/README.md
+++ /dev/null
@@ -1,346 +0,0 @@
-# mermaid
-
-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
-
-English | [简体中文](./README.zh-CN.md)
-
-<img src="./img/header.png" alt="" />
-
-:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
-
-**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
-
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
-
-## About
-
-<!-- <Main description>   -->
-
-Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
-
-> Doc-Rot is a Catch-22 that Mermaid helps to solve.
-
-Diagramming and documentation costs precious developer time and gets outdated quickly.
-But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
-Mermaid addresses this problem by enabling users to create easily modifiable diagrams. It can also be made part of production scripts (and other pieces of code).<br/>
-<br/>
-
-Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[Tutorials](./docs/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
-
-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
-
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).
-
-🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
-
-In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
-
-<a href="https://applitools.com/">
-<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
-</a>
-
-<!-- </Main description> -->
-
-## Examples
-
-**The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).**
-
-<!-- <Flowchart> -->
-
-### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE">live editor</a>]
-
-```
-flowchart LR
-
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-```mermaid
-flowchart LR
-
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-### Sequence diagram [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z">live editor</a>]
-
-```
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
-    John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-```
-
-```mermaid
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
-    John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-```
-
-### Gantt chart [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNp90cGOgyAQBuBXIZxtFbG29bbZ3fsmvXKZylhJEAyOTZrGd1_sto3xsHMBhu-HBO689hp5xS_giJQbsCbjHTv9jcp9-q63SKhZpb3DhMXSOIiE5ZkoNpnYZGXynh6U-4jBK7JnVfBYJo9QvgjtEya1cj8QwFq0TMz4lZqxTBg0hOF5m1jifI2Lf7Bc490CyxUu1rhc4GLGPOEdhg6Mjq92V44xxanFDhWv4lRjA6MlxZWbIh17DYTf2pAPvGrADphwGMmfbq7mFYURX-jLwCVA91bWg8YYunO69Y8vMgPFI2vvGnOZ-2Owsd0S9UOVpvP29mKoHc_b2nfpYHQLgdrrsUzLvDxALrHcS9hJqeuzOB6avBCN3mciBz5N0y_wxZ0J">live editor</a>]
-
-```
-gantt
-    section Section
-    Completed :done,    des1, 2014-01-06,2014-01-08
-    Active        :active,  des2, 2014-01-07, 3d
-    Parallel 1   :         des3, after des1, 1d
-    Parallel 2   :         des4, after des1, 1d
-    Parallel 3   :         des5, after des3, 1d
-    Parallel 4   :         des6, after des4, 1d
-```
-
-```mermaid
-gantt
-    section Section
-    Completed :done,    des1, 2014-01-06,2014-01-08
-    Active        :active,  des2, 2014-01-07, 3d
-    Parallel 1   :         des3, after des1, 1d
-    Parallel 2   :         des4, after des1, 1d
-    Parallel 3   :         des5, after des3, 1d
-    Parallel 4   :         des6, after des4, 1d
-```
-
-### Class diagram [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkTFPwzAQhf-K5QlQ2zQJJG1UBaGWDYmBgYEwXO1LYuTEwXYqlZL_jt02asXm--690zvfgTLFkWaUSTBmI6DS0BTt2lfzkKx-p1PytEO9f1FtdaQkI2ulZNGuVqK1qEtgmOfk7BitSzKdOhg59XuNGgk0RDxed-_IOr6uf8cZ6UhTZ8bvHqS5ub1mr9svZPbjk6DEBlu7AQuXyBkx4gcvDk9cUMJq0XT_YaW0kNK5j-ufAoRzcihaQvLcoN4Jv50vvVxw_xrnD3RCG9QNCO4-8OgpqK1dpoJm7smxhF7agp6kfcfB4jMXVmmalW4tnFDorXrbt4xmVvc4is53GKFUwNF5DtTuO3-sShjrJjLVlqLyvNfS4drazmRB4NuzSti6386YagIjeA3a1rtlEiRRsoAoxiSN4SGOOduGy0UZ3YclT-dhBHQYhj8dc6_I">live editor</a>]
-
-```
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<Interface>> Class01
-Class09 --> C2 : Where am I?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  <<service>>
-  int id
-  size()
-}
-```
-
-```mermaid
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<Interface>> Class01
-Class09 --> C2 : Where am I?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  <<service>>
-  int id
-  size()
-}
-```
-
-### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
-
-```
-stateDiagram-v2
-[*] --> Still
-Still --> [*]
-Still --> Moving
-Moving --> Still
-Moving --> Crash
-Crash --> [*]
-```
-
-```mermaid
-stateDiagram-v2
-[*] --> Still
-Still --> [*]
-Still --> Moving
-Moving --> Still
-Moving --> Crash
-Crash --> [*]
-```
-
-### Pie chart [<a href="https://mermaid-js.github.io/mermaid/#/pie">docs</a> - <a href="https://mermaid.live/edit#pako:eNo9jsFugzAMhl8F-VzBgEEh13Uv0F1zcYkTIpEEBadShXj3BU3dzf_n77e8wxQUgYDVkvQSbsFsEgpRtEN_5i_kvzx05XiC-xvUHVzAUXRoVe7v0heFBJ7JkQSRR0Ua08ISpD-ymlaFTN_KcoggNC4bXQATh5-Xn0BwTPSWbhZNRPdvLQEV5dIO_FrPZ43dOJ-cgtfWnDzFJeOZed1EVZ3r0lie06Ocgqs2q2aMPD_HvuqbfsCmpf7aYte2anrU46Cbz1qr60fdIBzH8QvW9lkl">live editor</a>]
-
-```
-pie
-"Dogs" : 386
-"Cats" : 85.9
-"Rats" : 15
-```
-
-```mermaid
-pie
-"Dogs" : 386
-"Cats" : 85.9
-"Rats" : 15
-```
-
-### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
-
-### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]
-
-```
-  journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 3: Me
-```
-
-```mermaid
-  journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 3: Me
-```
-
-### C4 diagram [<a href="https://mermaid-js.github.io/mermaid/#/c4c">docs</a>]
-
-```
-C4Context
-title System Context diagram for Internet Banking System
-
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-Person(customerB, "Banking Customer B")
-Person_Ext(customerC, "Banking Customer C")
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-Enterprise_Boundary(b1, "BankBoundary") {
-
-  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-  System_Boundary(b2, "BankBoundary2") {
-    System(SystemA, "Banking System A")
-    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
-  }
-
-  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-  Boundary(b3, "BankBoundary3", "boundary") {
-    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
-    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-  }
-}
-
-BiRel(customerA, SystemAA, "Uses")
-BiRel(SystemAA, SystemE, "Uses")
-Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-Rel(SystemC, customerA, "Sends e-mails to")
-```
-
-```mermaid
-C4Context
-title System Context diagram for Internet Banking System
-
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-Person(customerB, "Banking Customer B")
-Person_Ext(customerC, "Banking Customer C")
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-Enterprise_Boundary(b1, "BankBoundary") {
-
-  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-  System_Boundary(b2, "BankBoundary2") {
-    System(SystemA, "Banking System A")
-    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
-  }
-
-  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-  Boundary(b3, "BankBoundary3", "boundary") {
-    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
-    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-  }
-}
-
-BiRel(customerA, SystemAA, "Uses")
-BiRel(SystemAA, SystemE, "Uses")
-Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-Rel(SystemC, customerA, "Sends e-mails to")
-```
-
-## Release
-
-For those who have the permission to do so:
-
-Update version number in `package.json`.
-
-```sh
-npm publish
-```
-
-The above command generates files into the `dist` folder and publishes them to npmjs.org.
-
-## Related projects
-
-- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
-- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
-- [HTTP Server](https://github.com/TomWright/mermaid-server)
-
-## Contributors [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
-
-Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.
-
-Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
-
-## Security and safe diagrams
-
-For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitise the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
-
-As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
-
-_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
-
-## Reporting vulnerabilities
-
-To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
-
-## Appreciation
-
-A quick note from Knut Sveidqvist:
-
-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
->
-> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
-
----
-
-_Mermaid was created by Knut Sveidqvist for easier documentation._
diff --git a/packages/mermaid/README.zh-CN.md b/packages/mermaid/README.zh-CN.md
deleted file mode 100644
index 3612ba0a9..000000000
--- a/packages/mermaid/README.zh-CN.md
+++ /dev/null
@@ -1,334 +0,0 @@
-# mermaid
-
-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
-
-[English](./README.md) | 简体中文
-
-<img src="./img/header.png" alt="" />
-
-:trophy: **Mermaid 被提名并获得了 [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) 的 "The most exciting use of technology" 奖项!!!**
-
-**感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
-
-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
-
-## 关于 Mermaid
-
-<!-- <Main description>   -->
-
-Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
-
-> Doc-Rot 是 Mermaid 致力于解决的一个难题。
-
-绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。 <br/>
-Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
-<br/>
-Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
-
-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
-
-🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
-
-<!-- </Main description> -->
-
-## 示例
-
-**下面是一些可以使用 Mermaid 创建的图表示例。点击 [语法](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference) 查看详情。**
-
-<table>
-<!-- <Flowchart> -->
-
-### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
-
-```
-flowchart LR
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-```mermaid
-flowchart LR
-A[Hard] -->|Text| B(Round)
-B --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-
-```
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
-    John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-```
-
-```mermaid
-sequenceDiagram
-Alice->>John: Hello John, how are you?
-loop Healthcheck
-    John->>John: Fight against hypochondria
-end
-Note right of John: Rational thoughts!
-John-->>Alice: Great!
-John->>Bob: How about you?
-Bob-->>John: Jolly good!
-```
-
-### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-
-```
-gantt
-    section Section
-    Completed :done,    des1, 2014-01-06,2014-01-08
-    Active        :active,  des2, 2014-01-07, 3d
-    Parallel 1   :         des3, after des1, 1d
-    Parallel 2   :         des4, after des1, 1d
-    Parallel 3   :         des5, after des3, 1d
-    Parallel 4   :         des6, after des4, 1d
-```
-
-```mermaid
-gantt
-    section Section
-    Completed :done,    des1, 2014-01-06,2014-01-08
-    Active        :active,  des2, 2014-01-07, 3d
-    Parallel 1   :         des3, after des1, 1d
-    Parallel 2   :         des4, after des1, 1d
-    Parallel 3   :         des5, after des3, 1d
-    Parallel 4   :         des6, after des4, 1d
-```
-
-### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
-
-```
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<Interface>> Class01
-Class09 --> C2 : Where am I?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  <<service>>
-  int id
-  size()
-}
-```
-
-```mermaid
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-<<Interface>> Class01
-Class09 --> C2 : Where am I?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  <<service>>
-  int id
-  size()
-}
-```
-
-### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
-
-```
-stateDiagram-v2
-[*] --> Still
-Still --> [*]
-Still --> Moving
-Moving --> Still
-Moving --> Crash
-Crash --> [*]
-```
-
-```mermaid
-stateDiagram-v2
-[*] --> Still
-Still --> [*]
-Still --> Moving
-Moving --> Still
-Moving --> Crash
-Crash --> [*]
-```
-
-### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-
-```
-pie
-"Dogs" : 386
-"Cats" : 85
-"Rats" : 15
-```
-
-```mermaid
-pie
-"Dogs" : 386
-"Cats" : 85
-"Rats" : 15
-```
-
-### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
-
-### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
-
-```
-  journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 3: Me
-```
-
-```mermaid
-  journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 3: Me
-```
-
-### C4 图 [<a href="https://mermaid-js.github.io/mermaid/#/c4c">文档</a>]
-
-```
-C4Context
-title System Context diagram for Internet Banking System
-
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-Person(customerB, "Banking Customer B")
-Person_Ext(customerC, "Banking Customer C")
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-Enterprise_Boundary(b1, "BankBoundary") {
-
-  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-  System_Boundary(b2, "BankBoundary2") {
-    System(SystemA, "Banking System A")
-    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
-  }
-
-  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-  Boundary(b3, "BankBoundary3", "boundary") {
-    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
-    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-  }
-}
-
-BiRel(customerA, SystemAA, "Uses")
-BiRel(SystemAA, SystemE, "Uses")
-Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-Rel(SystemC, customerA, "Sends e-mails to")
-```
-
-```mermaid
-C4Context
-title System Context diagram for Internet Banking System
-
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-Person(customerB, "Banking Customer B")
-Person_Ext(customerC, "Banking Customer C")
-System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-Enterprise_Boundary(b1, "BankBoundary") {
-
-  SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-  System_Boundary(b2, "BankBoundary2") {
-    System(SystemA, "Banking System A")
-    System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
-  }
-
-  System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-  SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-  Boundary(b3, "BankBoundary3", "boundary") {
-    SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
-    SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-  }
-}
-
-BiRel(customerA, SystemAA, "Uses")
-BiRel(SystemAA, SystemE, "Uses")
-Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-Rel(SystemC, customerA, "Sends e-mails to")
-```
-
-## 发布
-
-对于有权限的同学来说，你可以通过以下步骤来完成发布操作：
-
-更新 `package.json` 中的版本号，然后执行如下命令：
-
-```sh
-npm publish
-```
-
-以上的命令会将文件打包到 `dist` 目录并发布至 npmjs.org.
-
-## 相关项目
-
-- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
-- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
-- [HTTP Server](https://github.com/TomWright/mermaid-server)
-
-## 贡献者 [![Good first issue](https://img.shields.io/github/labels/mermaid-js/mermaid/Good%20first%20issue%21)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
-
-Mermaid 是一个不断发展中的社区，并且还在接收新的贡献者。有很多不同的方式可以参与进来，而且我们还在寻找额外的帮助。如果你想知道如何开始贡献，请查看 [这个 issue](https://github.com/mermaid-js/mermaid/issues/866)。
-
-关于如何贡献的详细信息可以在 [贡献指南](CONTRIBUTING.md) 中找到。
-
-## 安全
-
-对于公开网站来说，从互联网上的用户处检索文本、存储供后续在浏览器中展示的内容可能是不安全的，理由是用户的内容可能嵌入一些数据加载完成之后就会运行的恶意脚本，这些对于 Mermaid 来说毫无疑问是一个风险，尤其是 mermaid 图表还包含了许多在 html 中使用的字符，这意味着我们难以使用常规的手段来过滤不安全代码，因为这些常规手段会造成图表损坏。我们仍然在努力对获取到的代码进行安全过滤并不断完善我们的程序，但很难保证没有漏洞。
-
-作为拥有外部用户的网站的额外安全级别，我们很高兴推出一个新的安全级别，其中的图表在沙盒 iframe 中渲染，防止代码中的 javascript 被执行，这是在安全性方面迈出的一大步。
-
-_很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在可能的恶意代码被阻止时，也会损失部分交互能力_。
-
-## 报告漏洞
-
-如果想要报告漏洞，请发送邮件到 security@mermaid.live, 并附上问题的描述、复现问题的步骤、受影响的版本，以及解决问题的方案（如果有的话）。
-
-## 鸣谢
-
-来自 Knut Sveidqvist:
-
-> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
->
-> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
-
----
-
-_Mermaid 是由 Knut Sveidqvist 创建，它为了更简单的文档编写而生。_

From 92cd5ed133dbd8f62878a5629562a3a689e6d700 Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Sun, 19 Feb 2023 15:06:09 +0000
Subject: [PATCH 28/57] Update docs

---
 docs/syntax/flowchart.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index bee5d3120..fd0408c45 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -183,6 +183,20 @@ flowchart LR
 
 ### A hexagon node
 
+Code:
+
+```mermaid-example
+flowchart LR
+    id1{{This is the text in the box}}
+```
+
+```mermaid
+flowchart LR
+    id1{{This is the text in the box}}
+```
+
+Render:
+
 ```mermaid-example
 flowchart LR
     id1{{This is the text in the box}}

From e51817b735208440b2fcb7c2a09acfdfa9f919d9 Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Sun, 19 Feb 2023 16:46:20 +0000
Subject: [PATCH 29/57] Update docs

---
 docs/ecosystem/integrations.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index 33b6b966e..7ed989f7a 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -188,3 +188,6 @@ They also serve as proof of concept, for the variety of things that can be built
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
+- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
+  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
+  - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element)

From 014ab85420eceee6de01ec1d7fd864d104664dbb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 19 Feb 2023 22:41:44 +0530
Subject: [PATCH 30/57] Cleanup

---
 .../diagrams/flowchart/flowDetector copy.ts   | 24 -------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts b/packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts
deleted file mode 100644
index 3d09f36ae..000000000
--- a/packages/mermaid/src/diagrams/flowchart/flowDetector copy.ts	
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { DiagramDetector } from '../../diagram-api/types';
-import type { ExternalDiagramDefinition } from '../../diagram-api/types';
-
-const id = 'flowchart';
-
-const detector: DiagramDetector = (txt, config) => {
-  // If we have confired to only use new flow charts this function shohuld always return false
-  // as in not signalling true for a legacy flowchart
-  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') return false;
-  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;

From 8174c7ca1609e50e10a13dc0f5cc770e4ed6ac29 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 19 Feb 2023 22:42:26 +0530
Subject: [PATCH 31/57] Cleanup

---
 packages/mermaid/src/diagram-api/diagram-orchestration.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 6b37addf4..76b20ce5a 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -19,7 +19,6 @@ import timeline from '../diagrams/timeline/detector';
 import mindmap from '../diagrams/mindmap/detector';
 import { registerLazyLoadedDiagrams } from './detectType';
 
-
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
   if (hasLoadedDiagrams) {

From 543e4de0c8c121d5cce9b70d34cd2756f378a80f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sun, 19 Feb 2023 23:55:22 +0530
Subject: [PATCH 32/57] chore: Remove lazyLoadedDiagrams from config

---
 packages/mermaid/src/config.ts      | 1 +
 packages/mermaid/src/config.type.ts | 4 ----
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index 8750c8fa5..bc0066cec 100644
--- 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');
   }
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 474075824..c835ee440 100644
--- 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;

From c9c4320f896ca6fb45086ed7bc6a70da6cf64893 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 20 Feb 2023 00:14:39 +0530
Subject: [PATCH 33/57] fix unit tests

---
 .../mermaid/src/diagram-api/detectType.ts     | 34 ++++++++
 .../src/diagram-api/diagram-orchestration.ts  | 28 +++++++
 .../src/diagram-api/diagramAPI.spec.ts        |  4 +
 .../mermaid/src/diagram-api/diagramAPI.ts     | 26 +------
 .../flowchart/flowRenderer.addEdges.spec.js   | 77 +++++++++----------
 .../diagrams/sequence/sequenceDiagram.spec.js |  9 ++-
 packages/mermaid/src/mermaid.spec.ts          | 11 ++-
 packages/mermaid/src/mermaid.ts               | 36 ++-------
 8 files changed, 125 insertions(+), 100 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 3c9237e5b..3cf61af39 100644
--- 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}. Remozing 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`);
diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
index 76b20ce5a..d06ce846a 100644
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -18,6 +18,7 @@ import flowchartElk from '../diagrams/flowchart/elk/detector';
 import timeline from '../diagrams/timeline/detector';
 import mindmap from '../diagrams/mindmap/detector';
 import { registerLazyLoadedDiagrams } from './detectType';
+import { registerDiagram } from './diagramAPI';
 
 let hasLoadedDiagrams = false;
 export const addDiagrams = () => {
@@ -27,6 +28,33 @@ export const addDiagrams = () => {
   // This is added here to avoid race-conditions.
   // We could optimize the loading logic somehow.
   hasLoadedDiagrams = true;
+  registerDiagram(
+    '---',
+    // --- diagram type may appear if YAML front-matter is not parsed correctly
+    {
+      db: {
+        clear: () => {
+          // Quite ok, clear needs to be there for --- to work as a regular diagram
+        },
+      },
+      styles: {}, // should never be used
+      renderer: {}, // should never be used
+      parser: {
+        parser: { yy: {} },
+        parse: () => {
+          throw new Error(
+            'Diagrams beginning with --- are not valid. ' +
+              'If you were trying to use a YAML front-matter, please ensure that ' +
+              "you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
+          );
+        },
+      },
+      init: () => null, // no op
+    },
+    (text) => {
+      return text.toLowerCase().trimStart().startsWith('---');
+    }
+  );
   registerLazyLoadedDiagrams(
     error,
     c4,
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.spec.ts b/packages/mermaid/src/diagram-api/diagramAPI.spec.ts
index ea546fbb6..9e04c861f 100644
--- 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', () => {
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 105c60e60..c5841b96b 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -4,7 +4,7 @@ import { getConfig as _getConfig } from '../config';
 import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
-import { DiagramDefinition, DiagramDetector, ExternalDiagramDefinition } from './types';
+import { DiagramDefinition, DiagramDetector } from './types';
 import * as _commonDb from '../commonDb';
 import { parseDirective as _parseDirective } from '../directiveUtils';
 
@@ -77,27 +77,3 @@ export class DiagramNotFoundError extends Error {
     super(`Diagram ${message} not found.`);
   }
 }
-
-/**
- * This is an internal function and should not be made public, as it will likely change.
- * @internal
- * @param diagrams - Array of {@link ExternalDiagramDefinition}.
- */
-export 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`);
-  }
-};
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
index 01b6163cb..7744053f0 100644
--- 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-');
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 72daca932..08f6abee1 100644
--- 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';
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 75cafcdf3..58d39c348 100644
--- 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 }
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 29d25c016..7238fcb43 100644
--- 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 {
@@ -64,30 +63,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
  *
@@ -251,7 +226,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[],
@@ -261,10 +236,9 @@ const registerExternalDiagrams = async (
     lazyLoad?: boolean;
   } = {}
 ) => {
-  if (lazyLoad) {
-    registerLazyLoadedDiagrams(...diagrams);
-  } else {
-    await loadExternalDiagrams(...diagrams);
+  registerLazyLoadedDiagrams(...diagrams);
+  if (lazyLoad === false) {
+    await loadRegisteredDiagrams();
   }
 };
 

From 38b2cbc3d195c14d0df780881022c05c184d4531 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 20 Feb 2023 13:10:54 +0530
Subject: [PATCH 34/57] chore: Update RunOptions docs

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 packages/mermaid/src/mermaid.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 29d25c016..28029df31 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -23,19 +23,22 @@ export type {
   ParseOptions,
 };
 
-/**
- * The options used when running mermaid.
- *
- * @param querySelector - The query selector to use when finding elements to render. Default: .mermaid
- * @param nodes - The nodes to render. If this is set, querySelector will be ignored.
- * @param postRenderCallback - A callback to call after each diagram is rendered.
- * @param suppressErrors - If true, errors will be logged to the console, but not thrown. Default: false
- */
 export interface RunOptions {
-  // Default: .mermaid
+  /**
+   * The query selector to use when finding elements to render. Default: `".mermaid"`.
+   */
   querySelector?: string;
+  /**
+   * The nodes to render. If this is set, `querySelector` will be ignored.
+   */
   nodes?: ArrayLike<HTMLElement>;
+  /**
+   * A callback to call after each diagram is rendered.
+   */
   postRenderCallback?: (id: string) => unknown;
+  /**
+   * If `true`, errors will be logged to the console, but not thrown. Default: `false`
+   */
   suppressErrors?: boolean;
 }
 

From 3a71618a49375c0e1674be8b23e5db2a49dbe35d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 12 Oct 2022 11:48:51 +0200
Subject: [PATCH 35/57] #3192 Adding the ability to create invisible links in
 flowcharts(v2)

---
 packages/mermaid/src/dagre-wrapper/edges.js                | 3 +++
 packages/mermaid/src/diagrams/flowchart/flowDb.js          | 4 ++++
 packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js | 5 +++++
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison  | 1 +
 4 files changed, 13 insertions(+)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 71183eab5..f8c113694 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -453,6 +453,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     case 'thick':
       strokeClasses = 'edge-thickness-thick';
       break;
+    case 'invisible':
+      strokeClasses = 'edge-thickness-thick';
+      break;
     default:
       strokeClasses = '';
   }
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 2e6b840b5..31196ba96 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -677,6 +677,10 @@ const destructEndLink = (_str) => {
     stroke = 'thick';
   }
 
+  if (line[0] === '~') {
+    stroke = 'invisible';
+  }
+
   let dots = countChar('.', line);
 
   if (dots) {
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 03bda7611..2d3e21a44 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -280,6 +280,11 @@ export const addEdges = function (edges, g, diagObj) {
         edgeData.pattern = 'solid';
         edgeData.style = 'stroke-width: 3.5px;fill:none;';
         break;
+      case 'invisible':
+        edgeData.thickness = 'invisible';
+        edgeData.pattern = 'solid';
+        edgeData.style = 'stroke-width: 0;fill:none;';
+        break;
     }
     if (edge.style !== undefined) {
       const styles = getStylesFromArray(edge.style);
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 05473b4a0..e2dad5881 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -121,6 +121,7 @@ that id.
 \s*[xo<]?\-\-+[-xo>]\s*     return 'LINK';
 \s*[xo<]?\=\=+[=xo>]\s*     return 'LINK';
 \s*[xo<]?\-?\.+\-[xo>]?\s*  return 'LINK';
+\s*\~\~[\~]+\s*  return 'LINK';
 \s*[xo<]?\-\-\s*            return 'START_LINK';
 \s*[xo<]?\=\=\s*            return 'START_LINK';
 \s*[xo<]?\-\.\s*            return 'START_LINK';

From b6cac3a4317feee6369f1f3c78e395accecfe32d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 20 Feb 2023 11:19:23 +0100
Subject: [PATCH 36/57] #3192 Adding docs and visual test

---
 cypress/integration/rendering/flowchart-v2.spec.js | 11 +++++++++++
 packages/mermaid/src/docs/syntax/flowchart.md      |  9 +++++++++
 2 files changed, 20 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 30ae4f0d2..8debde1b9 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -670,6 +670,17 @@ title: Simple flowchart
 ---
 flowchart TD
 A --> B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
+  it('3192: It should be possieble to render flowcharts with invisisble edges', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart with invisisble edges
+---
+flowchart TD
+A ~~~ B
 `,
       { titleTopMargin: 0 }
     );
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 5896e0518..6f80d9982 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -245,6 +245,15 @@ flowchart LR
    A == text ==> B
 ```
 
+### An invisisble link
+
+This can be a usefull tool in some instances where you want to alter the default positining of a node.
+
+```mermaid-example
+flowchart LR
+    A ~~~ B
+```
+
 ### Chaining of links
 
 It is possible declare many links in the same line as per below:

From eb04d80df01c73a8e74b09e10d728725254976ef Mon Sep 17 00:00:00 2001
From: knsv <knsv@users.noreply.github.com>
Date: Mon, 20 Feb 2023 10:23:13 +0000
Subject: [PATCH 37/57] Update docs

---
 docs/syntax/flowchart.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index fd0408c45..4a2f6cca5 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -391,6 +391,20 @@ flowchart LR
    A == text ==> B
 ```
 
+### An invisisble link
+
+This can be a usefull tool in some instances where you want to alter the default positining of a node.
+
+```mermaid-example
+flowchart LR
+    A ~~~ B
+```
+
+```mermaid
+flowchart LR
+    A ~~~ B
+```
+
 ### Chaining of links
 
 It is possible declare many links in the same line as per below:

From 68cdc759a736f8b11a87ce3bce799e184353b954 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 20 Feb 2023 17:53:07 +0530
Subject: [PATCH 38/57] Minor cleanup

Co-authored-by: Per Brolin <per@mermaidchart.com>
---
 .../interfaces/mermaidAPI.RenderResult.md     | 50 +++++--------------
 docs/config/setup/modules/mermaidAPI.md       | 20 ++++----
 packages/mermaid/src/Diagram.ts               |  6 +--
 packages/mermaid/src/mermaidAPI.ts            | 22 ++++++--
 4 files changed, 43 insertions(+), 55 deletions(-)

diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
index de4f763a0..ec59f8796 100644
--- 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)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index aa0885707..0406baa81 100644
--- 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)
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index fc1f7e8f0..1e7539aeb 100644
--- 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);
 };
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 999db5088..64e0bbce2 100644
--- 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,

From 8743e9e30eba80e879498ee76464ef4ec4152c80 Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Mon, 20 Feb 2023 14:50:04 +0100
Subject: [PATCH 39/57] Removed the deprecated use of mindmap in Demo

---
 demos/mindmap.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/demos/mindmap.html b/demos/mindmap.html
index a5b554a1a..5335e4762 100644
--- 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',

From 14c15b221ad11bb53edd1689f2aedd6f6df6c483 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 20 Feb 2023 19:28:31 +0530
Subject: [PATCH 40/57] Minor cleanup

Co-authored-by: Per Brolin <per@mermaidchart.com>
---
 packages/mermaid/src/diagram-api/detectType.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 3cf61af39..6ffe5df85 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -70,7 +70,7 @@ export const loadRegisteredDiagrams = async () => {
             registerDiagram(id, diagram, detector);
           } catch (err) {
             // Remove failed diagram from detectors
-            log.error(`Failed to load external diagram with key ${key}. Remozing from detectors.`);
+            log.error(`Failed to load external diagram with key ${key}. Removing from detectors.`);
             delete detectors[key];
             throw err;
           }

From bfb8a75fcabd8c065126a8134a9118a7dceda9b1 Mon Sep 17 00:00:00 2001
From: Florian Kohrt <fkohrt@anche.no>
Date: Mon, 20 Feb 2023 22:06:38 +0100
Subject: [PATCH 41/57] Fix typos

---
 packages/mermaid/src/docs/syntax/flowchart.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 6f80d9982..a48e19133 100644
--- 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 positining of a node.
 
 ```mermaid-example
 flowchart LR

From ec5fa31a111723cfe659776f1fb78b4feeb61f94 Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Tue, 21 Feb 2023 07:00:51 +0100
Subject: [PATCH 42/57] Wrap option working in test case

---
 cypress/integration/rendering/sequencediagram.spec.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 1f063c13e..f8948240a 100644
--- 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', () => {

From 555d4f2cdc83ebeaf0b41f57a05722ffb6d921af Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 21 Feb 2023 13:27:37 +0530
Subject: [PATCH 43/57] Fix spellings

---
 cypress/integration/rendering/flowchart-v2.spec.js | 4 ++--
 docs/syntax/flowchart.md                           | 4 ++--
 packages/mermaid/src/docs/syntax/flowchart.md      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 8debde1b9..abdb22265 100644
--- 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
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 4a2f6cca5..547847f54 100644
--- 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
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index a48e19133..6997ca088 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -247,7 +247,7 @@ flowchart LR
 
 ### An invisible link
 
-This can be a useful 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

From 4bc997cb8faa3d9f317b6f9752e3366d133b4851 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 21 Feb 2023 13:29:43 +0530
Subject: [PATCH 44/57] Minor cleanup to trigger build.

---
 .percy.yml | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 .percy.yml

diff --git a/.percy.yml b/.percy.yml
deleted file mode 100644
index f56df3d5e..000000000
--- a/.percy.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-version: 2
-snapshot:
-  widths:
-    - 1280
-discovery:
-  disable-cache: true

From 3b25cd3238e07406b9502aa58c54ffce8aa916e0 Mon Sep 17 00:00:00 2001
From: Per Brolin <per@mermaidchart.com>
Date: Tue, 21 Feb 2023 10:25:02 +0100
Subject: [PATCH 45/57] Updated version

---
 packages/mermaid/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index c069672b5..3fd41cb88 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.0.0-rc.3",
+  "version": "10.0.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

From ac21fe2d5c79b59db637514cbc6537dffd87070c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 21 Feb 2023 16:25:18 +0530
Subject: [PATCH 46/57] fix docs diagram

---
 packages/mermaid/src/docs/.vitepress/theme/mermaid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index c5b57f886..4752a1c01 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -2,6 +2,6 @@ import mermaid, { type MermaidConfig } from 'mermaid';
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
   mermaid.initialize(config);
-  const svg = await mermaid.render(id, code);
+  const { svg } = await mermaid.render(id, code);
   return svg;
 };

From fe2ef5e0c69f399d6e50cf657e88acc2dd565be2 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 21 Feb 2023 16:33:42 +0530
Subject: [PATCH 47/57] Remove `null` from diagrams before render

---
 packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index 85c13393c..5012d3067 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -17,7 +17,7 @@ const props = defineProps({
   },
 });
 
-const svg = ref(null);
+const svg = ref('');
 let mut = null;
 
 onMounted(async () => {

From b868777184dd68e70dac17347c755af6ec6cc354 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 21 Feb 2023 21:35:54 +0530
Subject: [PATCH 48/57] docs: v10 breaking changes

---
 CHANGELOG.md                                  |  85 ++++++++++-
 V10-BreakingChanges.md                        |  58 --------
 cypress/platform/viewer.js                    |   2 +-
 docs/config/usage.md                          | 139 ++++++++++-------
 docs/intro/n00b-gettingStarted.md             |   8 +-
 packages/mermaid/src/docs/config/usage.md     | 140 +++++++++++-------
 .../src/docs/intro/n00b-gettingStarted.md     |   8 +-
 7 files changed, 261 insertions(+), 179 deletions(-)
 delete mode 100644 V10-BreakingChanges.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c5903cd91..ee6ce1a2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,87 @@
-# Change Log
+# Changelog
 
-// TODO: Populate changelog
+## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
+
+### mermaid.render is async and doesn't accept callbacks
+
+```js
+// < v10
+mermaid.render('id', 'graph TD;\nA-->B', (svg, bindFunctions) => {
+  element.innerHTML = svg;
+  if (bindFunctions) {
+    bindFunctions(element);
+  }
+});
+
+// Shorter syntax
+if (bindFunctions) {
+  bindFunctions(element);
+}
+// can be replaced with the `?.` shorthand
+bindFunctions?.(element);
+
+// >= v10 with async/await
+const { svg, bindFunctions } = await mermaid.render('id', 'graph TD;\nA-->B');
+element.innerHTML = svg;
+bindFunctions?.(element);
+
+// >= v10 with promise.then
+mermaid.render('graph TD;A-->B').then(({ svg, bindFunctions }) => {
+  element.innerHTML = svg;
+  bindFunctions?.(element);
+});
+```
+
+### mermaid.parse is async and ParseError is removed
+
+```js
+// < v10
+mermaid.parse(text, parseError);
+
+//>= v10
+await mermaid.parse(text).catch(parseError);
+// or
+try {
+  await mermaid.parse(text);
+} catch (err) {
+  parseError(err);
+}
+```
+
+### Init deprecated and InitThrowsErrors removed
+
+The config passed to `init` was not being used eariler.
+It will now be used.
+The `init` function is deprecated and will be removed in the next major release.
+init currently works as a wrapper to `initialize` and `run`.
+
+```js
+// < v10
+mermaid.init(config, selector, cb);
+
+//>= v10
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: true,
+});
+```
+
+```js
+// < v10
+mermaid.initThrowsErrors(config, selector, cb);
+
+//>= v10
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: false,
+});
+```
+
+// TODO: Populate changelog pre v10
 
 - Config has a lot of changes
 - globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.
diff --git a/V10-BreakingChanges.md b/V10-BreakingChanges.md
deleted file mode 100644
index 121fdd596..000000000
--- a/V10-BreakingChanges.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# A collection of updates that change the behavior
-
-## Async
-
-`parse`, `render` are now async.
-
-## Lazy loading and asynchronisity
-
-- Invalid dates are rendered as syntax error instead of returning best guess or the current date
-
-## ParseError is removed
-
-```js
-//< v10.0.0
-mermaid.parse(text, parseError);
-
-//>= v10.0.0
-await mermaid.parse(text).catch(parseError);
-// or
-try {
-  await mermaid.parse(text);
-} catch (err) {
-  parseError(err);
-}
-```
-
-## Init deprecated and InitThrowsErrors removed
-
-The config passed to `init` was not being used eariler.
-It will now be used.
-The `init` function is deprecated and will be removed in the next major release.
-init currently works as a wrapper to `initialize` and `run`.
-
-```js
-//< v10.0.0
-mermaid.init(config, selector, cb);
-
-//>= v10.0.0
-mermaid.initialize(config);
-mermaid.run({
-  querySelector: selector,
-  postRenderCallback: cb,
-  suppressErrors: true,
-});
-```
-
-```js
-//< v10.0.0
-mermaid.initThrowsErrors(config, selector, cb);
-
-//>= v10.0.0
-mermaid.initialize(config);
-mermaid.run({
-  querySelector: selector,
-  postRenderCallback: cb,
-  suppressErrors: false,
-});
-```
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index e51ea2b8a..2e1093519 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -46,7 +46,7 @@ const contentLoaded = async function () {
 
     await mermaid2.registerExternalDiagrams([externalExample]);
     mermaid2.initialize(graphObj.mermaid);
-    await mermaid2.init();
+    await mermaid2.run();
     markRendered();
   }
 };
diff --git a/docs/config/usage.md b/docs/config/usage.md
index 866dd6be7..190ef2197 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -20,21 +20,24 @@ Please note that you can switch versions through the dropdown box at the top rig
 
 For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md).
 
-We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
+We have compiled some Video [Tutorials](./Tutorials.md) on how to use the Mermaid Live Editor.
 
 ### Installing and Hosting Mermaid on a Webpage
 
 **Using the npm package:**
 
-1.  You will need to install `node v16`, which would have npm.
+Requirements:
 
-2.  Download `yarn` using npm.
+- Node >= 16
 
-3.  Enter the following command: `yarn add mermaid`.
-
-4.  At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`.
-
-5.  Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions as is shown in the example below.
+```bash
+# NPM
+npm install mermaid
+# Yarn
+yarn add mermaid
+# PNPM
+pnpm add mermaid
+```
 
 **Hosting mermaid on a web page:**
 
@@ -42,7 +45,9 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 
 The easiest way to integrate mermaid on a web page requires two elements:
 
-- A graph definition, inside `<pre>` tags labeled `class=mermaid`. Example:
+- A graph definition, inside `<pre>` tags labeled `class=mermaid`.
+
+Example:
 
 ```html
 <pre class="mermaid">
@@ -53,14 +58,13 @@ The easiest way to integrate mermaid on a web page requires two elements:
 </pre>
 ```
 
-- Inclusion of the mermaid address in the html page body using a `script` tag as an ESM import, and the `mermaidAPI` call.
+- The mermaid js script. Added using a `script` tag as an ESM import.
 
 Example:
 
 ```html
 <script type="module">
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
 </script>
 ```
 
@@ -71,9 +75,6 @@ Example:
 ```html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-  </head>
   <body>
     <pre class="mermaid">
   graph LR
@@ -83,7 +84,6 @@ Example:
     </pre>
     <script type="module">
       import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-      mermaid.initialize({ startOnLoad: true });
     </script>
   </body>
 </html>
@@ -95,11 +95,12 @@ An id attribute is also added to mermaid tags without one.
 
 Mermaid can load multiple diagrams, in the same page.
 
-> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
+> Try it out, save this code as HTML and load it using any browser.
+> (Except Internet Explorer, please don't use Internet Explorer.)
 
 ## Enabling Click Event and Tags in Nodes
 
-A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
+A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
 
 **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
 
@@ -107,7 +108,7 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th
 
 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | String | Optional | 'sandbox', 'strict', 'loose', 'antiscript' |
 
 Values:
 
@@ -122,26 +123,17 @@ Values:
 
 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
 
-**To change `securityLevel`, you have to call `mermaidAPI.initialize`:**
+**To change `securityLevel`, you have to call `mermaid.initialize`:**
 
 ```javascript
-mermaidAPI.initialize({
+mermaid.initialize({
   securityLevel: 'loose',
 });
 ```
 
 ### Labels out of bounds
 
-If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
-whole page to load (dom + assets, particularly the fonts file).
-
-```javascript
-$(document).load(function () {
-  mermaid.initialize();
-});
-```
-
-or
+If you use dynamically loaded fonts that are loaded through CSS, such as fonts, mermaid should wait for the whole page to load (dom + assets, particularly the fonts file).
 
 ```javascript
 $(document).ready(function () {
@@ -154,12 +146,54 @@ Not doing so will most likely result in mermaid rendering graphs that have label
 If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
 
 ```css
-div.mermaid {
+pre.mermaid {
   font-family: 'trebuchet ms', verdana, arial;
 }
 ```
 
-### Calling `mermaid.init`
+### Using `mermaid.run`
+
+mermaid.run was added in v10 and is the preferred way of handling more complex integration.
+By default, `mermaid.run` will be called when the document is ready, rendering all elements with `class="mermaid"`.
+
+You can customize that behavior by calling `await mermaid.run(<config>)`.
+
+`mermaid.initialize({startOnLoad: false})` will prevent `mermaid.run` from being called automatically after load.
+
+Render all elements with querySelector ".someOtherClass"
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  querySelector: '.someOtherClass',
+});
+```
+
+Render all elements passed as an array
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  nodes: [document.getElementById('someId'), document.getElementById('anotherId')],
+});
+await mermaid.run({
+  nodes: document.querySelectorAll('.yetAnotherClass'),
+});
+```
+
+Render all `.mermaid` elements while suppressing any error
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  suppressErrors: true,
+});
+```
+
+### Calling `mermaid.init` - Deprecated
+
+> **Warning**
+> mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
 
 By default, `mermaid.init` will be called when the document is ready, finding all elements with
 `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
@@ -192,25 +226,24 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 ## API usage
 
-The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
-will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to
-fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
+The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
 The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">
-  import mermaid from './mermaid.mjs';
-  mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(async function () {
-    // Example of using the API var
+  import mermaid from './mermaid.esm.mjs';
+  mermaid.initialize({ startOnLoad: false });
+
+  // Example of using the render function
+  const drawDiagram = async function () {
     element = document.querySelector('#graphDiv');
-    const insertSvg = function (svgCode, bindFunctions) {
-      element.innerHTML = svgCode;
-    };
     const graphDefinition = 'graph TB\na-->b';
-    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-  });
+    const { svg } = await mermaid.render('graphDiv', graphDefinition);
+    element.innerHTML = svg;
+  };
+
+  await drawDiagram();
 </script>
 ```
 
@@ -223,17 +256,17 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.
 
 ```javascript
-const insertSvg = function (svgCode, bindFunctions) {
-  element.innerHTML = svgCode;
-  if (typeof callback !== 'undefined') {
-    callback(id);
+// Example of using the bindFunctions
+const drawDiagram = async function () {
+  element = document.querySelector('#graphDiv');
+  const graphDefinition = 'graph TB\na-->b';
+  const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);
+  element.innerHTML = svg;
+  // This can also be written as `bindFunctions?.(element);` using the `?` shorthand.
+  if (bindFunctions) {
+    bindFunctions(element);
   }
-  bindFunctions(element);
 };
-
-const id = 'theGraph';
-
-mermaidAPI.render(id, txt, insertSvg, element);
 ```
 
 1.  The graph is generated using the render call.
diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md
index 87592ba27..f4fb69b90 100644
--- a/docs/intro/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@@ -103,7 +103,7 @@ When writing the .html file, we give two instructions inside the html code to th
 
 a. The mermaid code for the diagram we want to create.
 
-b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
+b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
 
 **a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
 
@@ -135,7 +135,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```
 
 **Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.esm.min.mjs` for brevity. However, doing the opposite lets you control when it starts looking for `<div>`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<div>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
+Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
 
 `startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
 
@@ -143,10 +143,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
-### Adding external diagrams to mermaid
-
-Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
-
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**
diff --git a/packages/mermaid/src/docs/config/usage.md b/packages/mermaid/src/docs/config/usage.md
index dd989069f..c74023952 100644
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -14,21 +14,24 @@ Please note that you can switch versions through the dropdown box at the top rig
 
 For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md).
 
-We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.
+We have compiled some Video [Tutorials](./Tutorials.md) on how to use the Mermaid Live Editor.
 
 ### Installing and Hosting Mermaid on a Webpage
 
 **Using the npm package:**
 
-1. You will need to install `node v16`, which would have npm.
+Requirements:
 
-2. Download `yarn` using npm.
+- Node >= 16
 
-3. Enter the following command: `yarn add mermaid`.
-
-4. At this point, you can add mermaid as a dev dependency using this command: `yarn add --dev mermaid`.
-
-5. Alternatively, you can also deploy mermaid using the script tag in an HTML file with mermaid diagram descriptions as is shown in the example below.
+```bash
+# NPM
+npm install mermaid
+# Yarn
+yarn add mermaid
+# PNPM
+pnpm add mermaid
+```
 
 **Hosting mermaid on a web page:**
 
@@ -36,7 +39,9 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai
 
 The easiest way to integrate mermaid on a web page requires two elements:
 
-- A graph definition, inside `<pre>` tags labeled `class=mermaid`. Example:
+- A graph definition, inside `<pre>` tags labeled `class=mermaid`.
+
+Example:
 
 ```html
 <pre class="mermaid">
@@ -47,14 +52,13 @@ The easiest way to integrate mermaid on a web page requires two elements:
 </pre>
 ```
 
-- Inclusion of the mermaid address in the html page body using a `script` tag as an ESM import, and the `mermaidAPI` call.
+- The mermaid js script. Added using a `script` tag as an ESM import.
 
 Example:
 
 ```html
 <script type="module">
   import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
 </script>
 ```
 
@@ -65,9 +69,6 @@ Example:
 ```html
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-  </head>
   <body>
     <pre class="mermaid">
   graph LR
@@ -77,7 +78,6 @@ Example:
     </pre>
     <script type="module">
       import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
-      mermaid.initialize({ startOnLoad: true });
     </script>
   </body>
 </html>
@@ -89,11 +89,12 @@ An id attribute is also added to mermaid tags without one.
 
 Mermaid can load multiple diagrams, in the same page.
 
-> Try it out, save this code as HTML and load it using any browser.(Except Internet Explorer, please don't use Internet Explorer.)
+> Try it out, save this code as HTML and load it using any browser.
+> (Except Internet Explorer, please don't use Internet Explorer.)
 
 ## Enabling Click Event and Tags in Nodes
 
-A `securityLevel` configuration has to first be cleared, `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
+A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduce in version 8.2 as a security improvement, aimed at preventing malicious use.
 
 **It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
 
@@ -101,7 +102,7 @@ A `securityLevel` configuration has to first be cleared, `securityLevel` sets th
 
 | Parameter     | Description                       | Type   | Required | Values                                     |
 | ------------- | --------------------------------- | ------ | -------- | ------------------------------------------ |
-| securityLevel | Level of trust for parsed diagram | String | Required | 'sandbox', 'strict', 'loose', 'antiscript' |
+| securityLevel | Level of trust for parsed diagram | String | Optional | 'sandbox', 'strict', 'loose', 'antiscript' |
 
 Values:
 
@@ -117,26 +118,17 @@ This changes the default behaviour of mermaid so that after upgrade to 8.2, unle
 
 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**
 
-**To change `securityLevel`, you have to call `mermaidAPI.initialize`:**
+**To change `securityLevel`, you have to call `mermaid.initialize`:**
 
 ```javascript
-mermaidAPI.initialize({
+mermaid.initialize({
   securityLevel: 'loose',
 });
 ```
 
 ### Labels out of bounds
 
-If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the
-whole page to load (dom + assets, particularly the fonts file).
-
-```javascript
-$(document).load(function () {
-  mermaid.initialize();
-});
-```
-
-or
+If you use dynamically loaded fonts that are loaded through CSS, such as fonts, mermaid should wait for the whole page to load (dom + assets, particularly the fonts file).
 
 ```javascript
 $(document).ready(function () {
@@ -149,12 +141,55 @@ Not doing so will most likely result in mermaid rendering graphs that have label
 If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
 
 ```css
-div.mermaid {
+pre.mermaid {
   font-family: 'trebuchet ms', verdana, arial;
 }
 ```
 
-### Calling `mermaid.init`
+### Using `mermaid.run`
+
+mermaid.run was added in v10 and is the preferred way of handling more complex integration.
+By default, `mermaid.run` will be called when the document is ready, rendering all elements with `class="mermaid"`.
+
+You can customize that behavior by calling `await mermaid.run(<config>)`.
+
+`mermaid.initialize({startOnLoad: false})` will prevent `mermaid.run` from being called automatically after load.
+
+Render all elements with querySelector ".someOtherClass"
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  querySelector: '.someOtherClass',
+});
+```
+
+Render all elements passed as an array
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  nodes: [document.getElementById('someId'), document.getElementById('anotherId')],
+});
+await mermaid.run({
+  nodes: document.querySelectorAll('.yetAnotherClass'),
+});
+```
+
+Render all `.mermaid` elements while suppressing any error
+
+```js
+mermaid.initialize({ startOnLoad: false });
+await mermaid.run({
+  suppressErrors: true,
+});
+```
+
+### Calling `mermaid.init` - Deprecated
+
+```warning
+mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
+```
 
 By default, `mermaid.init` will be called when the document is ready, finding all elements with
 `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
@@ -188,25 +223,24 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
 
 ## API usage
 
-The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
-will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to
-fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
+The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
 The example below show an outline of how this could be used. The example just logs the resulting SVG to the JavaScript console.
 
 ```html
 <script type="module">
-  import mermaid from './mermaid.mjs';
-  mermaid.mermaidAPI.initialize({ startOnLoad: false });
-  $(async function () {
-    // Example of using the API var
+  import mermaid from './mermaid.esm.mjs';
+  mermaid.initialize({ startOnLoad: false });
+
+  // Example of using the render function
+  const drawDiagram = async function () {
     element = document.querySelector('#graphDiv');
-    const insertSvg = function (svgCode, bindFunctions) {
-      element.innerHTML = svgCode;
-    };
     const graphDefinition = 'graph TB\na-->b';
-    const graph = await mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
-  });
+    const { svg } = await mermaid.render('graphDiv', graphDefinition);
+    element.innerHTML = svg;
+  };
+
+  await drawDiagram();
 </script>
 ```
 
@@ -219,17 +253,17 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.
 
 ```javascript
-const insertSvg = function (svgCode, bindFunctions) {
-  element.innerHTML = svgCode;
-  if (typeof callback !== 'undefined') {
-    callback(id);
+// Example of using the bindFunctions
+const drawDiagram = async function () {
+  element = document.querySelector('#graphDiv');
+  const graphDefinition = 'graph TB\na-->b';
+  const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);
+  element.innerHTML = svg;
+  // This can also be written as `bindFunctions?.(element);` using the `?` shorthand.
+  if (bindFunctions) {
+    bindFunctions(element);
   }
-  bindFunctions(element);
 };
-
-const id = 'theGraph';
-
-mermaidAPI.render(id, txt, insertSvg, element);
 ```
 
 1. The graph is generated using the render call.
diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
index cfc16e707..fcb3f31ee 100644
--- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
@@ -86,7 +86,7 @@ When writing the .html file, we give two instructions inside the html code to th
 
 a. The mermaid code for the diagram we want to create.
 
-b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
+b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process .
 
 **a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
 
@@ -118,7 +118,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```
 
 **Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.esm.min.mjs` for brevity. However, doing the opposite lets you control when it starts looking for `<div>`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<div>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
+Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
 
 `startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
 
@@ -126,10 +126,6 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
-### Adding external diagrams to mermaid
-
-Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
-
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**

From bdf26673893bd2e5b4bdc75eb3694a5d02202aa0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 21 Feb 2023 21:40:06 +0530
Subject: [PATCH 49/57] docs: Fix changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee6ce1a2f..67672f2d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,7 +26,7 @@ element.innerHTML = svg;
 bindFunctions?.(element);
 
 // >= v10 with promise.then
-mermaid.render('graph TD;A-->B').then(({ svg, bindFunctions }) => {
+mermaid.render('id', 'graph TD;A-->B').then(({ svg, bindFunctions }) => {
   element.innerHTML = svg;
   bindFunctions?.(element);
 });

From fd6ce89933429ff26d0190dd868f9bc2db0621f6 Mon Sep 17 00:00:00 2001
From: Billiam <Billiam@users.noreply.github.com>
Date: Tue, 21 Feb 2023 20:56:26 -0600
Subject: [PATCH 50/57] Add Deepdwn to native integrations list

---
 packages/mermaid/src/docs/ecosystem/integrations.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md
index 87593d649..727580664 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations.md
@@ -14,6 +14,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)

From 7d4692f7b2b160f3bf64749e918f21bcf9414411 Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Tue, 21 Feb 2023 21:24:39 -0600
Subject: [PATCH 51/57] Add deepdwn to cspell

---
 cSpell.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cSpell.json b/cSpell.json
index 6f93af103..1d3eec1b2 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -27,6 +27,7 @@
     "cuzon",
     "cytoscape",
     "dagre",
+    "deepdwn",
     "descr",
     "docsify",
     "docsy",

From 15231924cd6da1d2210dbff51df8e37fb069becb Mon Sep 17 00:00:00 2001
From: Billiam <billiamthesecond@gmail.com>
Date: Tue, 21 Feb 2023 21:50:02 -0600
Subject: [PATCH 52/57] Regenerate mermaid docs

---
 docs/ecosystem/integrations.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md
index 7ed989f7a..3db4a17bc 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations.md
@@ -20,6 +20,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Gitea](https://gitea.io) (**Native support**)
 - [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
+- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
 - [Joplin](https://joplinapp.org) (**Native support**)
 - [Swimm](https://swimm.io) (**Native support**)
 - [Notion](https://notion.so) (**Native support**)

From 8f830a1698d4380514ab2c8289b796f630ba10c1 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 22 Feb 2023 12:33:50 +0530
Subject: [PATCH 53/57] Fix readme link

---
 README.md       | 2 +-
 README.zh-CN.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f4cf8e105..d42e2f7e1 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Mermaid
 Generate diagrams from markdown-like text.
 <p>
 <p align="center">
-  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
 <p>
 
 <p align="center">
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 65cf38645..2653ac72b 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -8,7 +8,7 @@ Mermaid
 通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
 <p>
 <p align="center">
-  <a href="https://www.npmjs.com/package/vitest"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
 <p>
 
 <p align="center">

From f8abc9c6d52ada97482048b1cf5863e604fd08a8 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Thu, 23 Feb 2023 15:20:17 +0800
Subject: [PATCH 54/57] fix: fix exports

"types" import should always be first
---
 packages/mermaid/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 3fd41cb88..9fdef30b4 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -7,8 +7,8 @@
   "types": "./dist/mermaid.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/mermaid.core.mjs",
-      "types": "./dist/mermaid.d.ts"
+      "types": "./dist/mermaid.d.ts",
+      "import": "./dist/mermaid.core.mjs"
     },
     "./*": "./*"
   },

From ca97210d67873c95763e116ec74db9136da2d8ab Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 23 Feb 2023 13:13:36 +0530
Subject: [PATCH 55/57] Update CHANGELOG.md

---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67672f2d0..6292d9680 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 ## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
 
+### Mermaid is ESM only!
+
+We've dropped the CJS support. So you will have to update your import scripts as follows.
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true });
+</script>
+```
+
 ### mermaid.render is async and doesn't accept callbacks
 
 ```js

From 8910ecb463dd2361541d99706ea00d127ed38a39 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 23 Feb 2023 13:18:49 +0530
Subject: [PATCH 56/57] Update CHANGELOG.md

---
 CHANGELOG.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6292d9680..ecd70d732 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,10 @@
 
 ## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
 
+
 ### Mermaid is ESM only!
 
-We've dropped the CJS support. So you will have to update your import scripts as follows.
+We've dropped CJS support. So, you will have to update your import scripts as follows.
 
 ```html
 <script type="module">
@@ -13,6 +14,12 @@ We've dropped the CJS support. So you will have to update your import scripts as
 </script>
 ```
 
+You can keep using v9 by adding the `@9` in the CDN URL.
+```diff
+- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
++ <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>
+```
+
 ### mermaid.render is async and doesn't accept callbacks
 
 ```js

From 7372d7d6c53a40562c7e050de392472e9094100b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 24 Feb 2023 12:31:29 +0530
Subject: [PATCH 57/57] fix Lint

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecd70d732..7552efa3b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,6 @@
 
 ## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
 
-
 ### Mermaid is ESM only!
 
 We've dropped CJS support. So, you will have to update your import scripts as follows.
@@ -15,6 +14,7 @@ We've dropped CJS support. So, you will have to update your import scripts as fo
 ```
 
 You can keep using v9 by adding the `@9` in the CDN URL.
+
 ```diff
 - <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
 + <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>