From fc9d22562ba9a62de770ab50a0c4cf0c591a6421 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 10 Sep 2022 15:53:50 +0200 Subject: [PATCH 1/4] Creating detectors and moving out diagram specific code from the diagramAPI --- cypress/platform/knsv.html | 24 +- docs/Setup.md | 31 +- package.json | 2 +- src/diagram-api/detectType.ts | 37 +-- src/diagram-api/diagram-orchestration.ts | 300 +++++++++++++++++- src/diagram-api/diagramAPI.ts | 212 +------------ src/diagrams/c4/c4Detector.ts | 5 + src/diagrams/class/classDetector-V2.ts | 9 + src/diagrams/class/classDetector.ts | 8 + src/diagrams/er/erDetector.ts | 5 + src/diagrams/flowchart/flowDetector-v2.ts | 8 + src/diagrams/flowchart/flowDetector.ts | 8 + src/diagrams/gantt/ganttDetector.ts | 5 + src/diagrams/info/infoDetector.ts | 5 + src/diagrams/pie/pieDetector.ts | 5 + .../requirement/requirementDetector.ts | 5 + src/diagrams/sequence/sequenceDetector.ts | 5 + src/diagrams/state/stateDetector-V2.ts | 8 + src/diagrams/state/stateDetector.ts | 8 + src/diagrams/user-journey/journeyDetector.ts | 5 + src/docs/Setup.md | 31 +- 21 files changed, 442 insertions(+), 284 deletions(-) create mode 100644 src/diagrams/c4/c4Detector.ts create mode 100644 src/diagrams/class/classDetector-V2.ts create mode 100644 src/diagrams/class/classDetector.ts create mode 100644 src/diagrams/er/erDetector.ts create mode 100644 src/diagrams/flowchart/flowDetector-v2.ts create mode 100644 src/diagrams/flowchart/flowDetector.ts create mode 100644 src/diagrams/gantt/ganttDetector.ts create mode 100644 src/diagrams/info/infoDetector.ts create mode 100644 src/diagrams/pie/pieDetector.ts create mode 100644 src/diagrams/requirement/requirementDetector.ts create mode 100644 src/diagrams/sequence/sequenceDetector.ts create mode 100644 src/diagrams/state/stateDetector-V2.ts create mode 100644 src/diagrams/state/stateDetector.ts create mode 100644 src/diagrams/user-journey/journeyDetector.ts diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index c98ce70c8..6ce545082 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -38,7 +38,7 @@ - 
+    
 flowchart LR
   classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
   classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -99,7 +99,7 @@ flowchart TD
       class A someclass;
       class C someclass;
     

-    
+    
    sequenceDiagram
       title: My Sequence Diagram Title
       accTitle: My Acc Sequence Diagram
@@ -109,14 +109,14 @@ flowchart TD
       John-->>Alice: Great!
       Alice-)John: See you later!
     

-    
+    
 graph TD
     A -->|000| B
     B -->|111| C
 
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
     

-    
+    
   journey
       accTitle: My User Journey Diagram
       accDescr: My User Journey Diagram Description
@@ -130,10 +130,10 @@ graph TD
         Go downstairs: 5: Me
         Sit down: 5: Me
     

-    
+    
         info
     

-    
+    
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -174,7 +174,7 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
     

-    
+    
 gantt
     dateFormat  YYYY-MM-DD
     title       Adding GANTT diagram functionality to mermaid
@@ -206,7 +206,7 @@ gantt
     Add gantt diagram to demo page      :20h
     Add another diagram to demo page    :48h
     

-    
+    
 stateDiagram
   state Active {
     Idle
@@ -234,7 +234,7 @@ stateDiagram
           end
           B ->> A: Return
     

-    
+    
 classDiagram
 accTitle: My class diagram
 accDescr: My class diagram Description
@@ -259,7 +259,7 @@ class Class10 {
         A->>Bob: Hola
         Bob-->A: Pasten !
     

-    
+    
       gitGraph
        commit id: "ZERO"
        branch develop
@@ -288,7 +288,7 @@ flowchart TD
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
     

-    
+    
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -311,7 +311,7 @@ flowchart TD
             +run()
           }
     

-    
+    
         erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {
diff --git a/docs/Setup.md b/docs/Setup.md
index 1f948ee01..2ef56e1d8 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1407,6 +1407,15 @@ This sets the auto-wrap padding for the diagram (sides only)
 
 **Notes:** Default value: 0.
 
+## parse
+
+### Parameters
+
+- `text` **[string][5]**
+- `parseError` **[Function][6]?**
+
+Returns **[boolean][7]**
+
 ## setSiteConfig
 
 ## setSiteConfig
@@ -1424,7 +1433,7 @@ function _Default value: At default, will mirror Global Config_
 
 - `conf` **MermaidConfig** The base currentConfig to use as siteConfig
 
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
 
 ## getSiteConfig
 
@@ -1436,7 +1445,7 @@ Returns **[object][5]** The siteConfig
 
 **Notes**: Returns **any** values in siteConfig.
 
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
 
 ## setConfig
 
@@ -1475,10 +1484,10 @@ $(function () {
 
 ### Parameters
 
-- `id` **[string][6]** The id of the element to be rendered
-- `text` **[string][6]** The graph definition
-- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
-- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+- `id` **[string][5]** The id of the element to be rendered
+- `text` **[string][5]** The graph definition
+- `cb` **function (svgCode: [string][5], bindFunctions: function (element: [Element][9]): void): void**
+- `container` **[Element][9]** 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.
 
@@ -1517,7 +1526,7 @@ Pushes in a directive to the configuration
 
 ### Parameters
 
-- `directive` **[object][5]** The directive to push in
+- `directive` **[object][8]** The directive to push in
 
 ## reset
 
@@ -1615,6 +1624,8 @@ Returns **void**
 [2]: Setup.md?id=render
 [3]: 8.6.0_docs.md
 [4]: #mermaidapi-configuration-defaults
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[7]: https://developer.mozilla.org/docs/Web/API/Element
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[9]: https://developer.mozilla.org/docs/Web/API/Element
diff --git a/package.json b/package.json
index a791f0574..fa3b69dda 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.1.6",
+  "version": "9.2.0-rc1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.min.js",
   "module": "dist/mermaid.esm.min.mjs",
diff --git a/src/diagram-api/detectType.ts b/src/diagram-api/detectType.ts
index 87b681767..817de5149 100644
--- a/src/diagram-api/detectType.ts
+++ b/src/diagram-api/detectType.ts
@@ -1,26 +1,12 @@
 import { MermaidConfig } from '../config.type';
 
-export type DiagramDetector = (text: string) => boolean;
+export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
 
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
 
 const detectors: Record = {};
-const diagramMatchers: Record = {
-  c4: /^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/,
-  sequence: /^\s*sequenceDiagram/,
-  gantt: /^\s*gantt/,
-  classDiagram: /^\s*classDiagram-v2/,
-  stateDiagram: /^\s*stateDiagram-v2/,
-  'flowchart-v2': /^\s*flowchart/, // Might need to add |graph to fix #3391
-  info: /^\s*info/,
-  pie: /^\s*pie/,
-  er: /^\s*erDiagram/,
-  journey: /^\s*journey/,
-  // gitGraph: /^\s*gitGraph/,
-  requirement: /^\s*requirement(Diagram)?/,
-};
 
 /**
  * @function detectType Detects the type of the graph text. Takes into consideration the possible
@@ -47,28 +33,9 @@ const diagramMatchers: Record = {
  */
 export const detectType = function (text: string, config?: MermaidConfig): string {
   text = text.replace(directive, '').replace(anyComment, '\n');
-  for (const [diagram, matcher] of Object.entries(diagramMatchers)) {
-    if (text.match(matcher)) {
-      return diagram;
-    }
-  }
-
-  if (text.match(/^\s*classDiagram/)) {
-    if (config?.class?.defaultRenderer === 'dagre-wrapper') return 'classDiagram';
-    return 'class';
-  }
-
-  if (text.match(/^\s*stateDiagram/)) {
-    if (config?.state?.defaultRenderer === 'dagre-wrapper') return 'stateDiagram';
-    return 'state';
-  }
-
-  if (config?.flowchart?.defaultRenderer === 'dagre-wrapper') {
-    return 'flowchart-v2';
-  }
 
   for (const [key, detector] of Object.entries(detectors)) {
-    if (detector(text)) {
+    if (detector(text, config)) {
       return key;
     }
   }
diff --git a/src/diagram-api/diagram-orchestration.ts b/src/diagram-api/diagram-orchestration.ts
index ea0c76ffa..b9b0520c9 100644
--- a/src/diagram-api/diagram-orchestration.ts
+++ b/src/diagram-api/diagram-orchestration.ts
@@ -1,20 +1,310 @@
 import { registerDiagram } from './diagramAPI';
-import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
-import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
+
 // @ts-ignore: TODO Fix ts errors
 import mindmapParser from '../diagrams/mindmap/parser/mindmap';
+import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
 import { mindmapDetector } from '../diagrams/mindmap/mindmapDetector';
+import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
 import mindmapStyles from '../diagrams/mindmap/styles';
 
-import gitGraphDb from '../diagrams/git/gitGraphAst';
-import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
 // @ts-ignore: TODO Fix ts errors
 import gitGraphParser from '../diagrams/git/parser/gitGraph';
 import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
+import gitGraphDb from '../diagrams/git/gitGraphAst';
+import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
 import gitGraphStyles from '../diagrams/git/styles';
 
+// @ts-ignore: TODO Fix ts errors
+import c4Parser from '../diagrams/c4/parser/c4Diagram';
+import { c4Detector } from '../diagrams/c4/c4Detector';
+import c4Db from '../diagrams/c4/c4Db';
+import c4Renderer from '../diagrams/c4/c4Renderer';
+import c4Styles from '../diagrams/c4/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import classParser from '../diagrams/class/parser/classDiagram';
+import { classDetector } from '../diagrams/class/classDetector';
+import { classDetectorV2 } from '../diagrams/class/classDetector-V2';
+import classDb from '../diagrams/class/classDb';
+import classRenderer from '../diagrams/class/classRenderer';
+import classRendererV2 from '../diagrams/class/classRenderer-v2';
+import classStyles from '../diagrams/class/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import erParser from '../diagrams/er/parser/erDiagram';
+import { erDetector } from '../diagrams/er/erDetector';
+import erDb from '../diagrams/er/erDb';
+import erRenderer from '../diagrams/er/erRenderer';
+import erStyles from '../diagrams/er/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import flowParser from '../diagrams/flowchart/parser/flow';
+import { flowDetector } from '../diagrams/flowchart/flowDetector';
+import { flowDetectorV2 } from '../diagrams/flowchart/flowDetector-v2';
+import flowDb from '../diagrams/flowchart/flowDb';
+import flowRenderer from '../diagrams/flowchart/flowRenderer';
+import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
+import flowStyles from '../diagrams/flowchart/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import ganttParser from '../diagrams/gantt/parser/gantt';
+import { ganttDetector } from '../diagrams/gantt/ganttDetector';
+import ganttDb from '../diagrams/gantt/ganttDb';
+import ganttRenderer from '../diagrams/gantt/ganttRenderer';
+import ganttStyles from '../diagrams/gantt/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import infoParser from '../diagrams/info/parser/info';
+import infoDb from '../diagrams/info/infoDb';
+import infoRenderer from '../diagrams/info/infoRenderer';
+import { infoDetector } from '../diagrams/info/infoDetector';
+import infoStyles from '../diagrams/info/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import pieParser from '../diagrams/pie/parser/pie';
+import { pieDetector } from '../diagrams/pie/pieDetector';
+import pieDb from '../diagrams/pie/pieDb';
+import pieRenderer from '../diagrams/pie/pieRenderer';
+import pieStyles from '../diagrams/pie/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
+import { requirementDetector } from '../diagrams/requirement/requirementDetector';
+import requirementDb from '../diagrams/requirement/requirementDb';
+import requirementRenderer from '../diagrams/requirement/requirementRenderer';
+import requirementStyles from '../diagrams/requirement/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
+import { sequenceDetector } from '../diagrams/sequence/sequenceDetector';
+import sequenceDb from '../diagrams/sequence/sequenceDb';
+import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
+import sequenceStyles from '../diagrams/sequence/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import stateParser from '../diagrams/state/parser/stateDiagram';
+import { stateDetector } from '../diagrams/state/stateDetector';
+import { stateDetectorV2 } from '../diagrams/state/stateDetector-V2';
+import stateDb from '../diagrams/state/stateDb';
+import stateRenderer from '../diagrams/state/stateRenderer';
+import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
+import stateStyles from '../diagrams/state/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import journeyParser from '../diagrams/user-journey/parser/journey';
+import { journeyDetector } from '../diagrams/user-journey/journeyDetector';
+import journeyDb from '../diagrams/user-journey/journeyDb';
+import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
+import journeyStyles from '../diagrams/user-journey/styles';
+
 export const addDiagrams = () => {
-  // Register mindmap and other built-in diagrams
+  registerDiagram(
+    'c4',
+    {
+      parser: c4Parser,
+      db: c4Db,
+      renderer: c4Renderer,
+      styles: c4Styles,
+      init: (cnf) => {
+        c4Renderer.setConf(cnf.c4);
+      },
+    },
+    c4Detector
+  );
+  registerDiagram(
+    'class',
+    {
+      parser: classParser,
+      db: classDb,
+      renderer: classRenderer,
+      styles: classStyles,
+      init: (cnf) => {
+        if (!cnf.class) {
+          cnf.class = {};
+        }
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        classDb.clear();
+      },
+    },
+    classDetector
+  );
+  registerDiagram(
+    'classDiagram',
+    {
+      parser: classParser,
+      db: classDb,
+      renderer: classRendererV2,
+      styles: classStyles,
+      init: (cnf) => {
+        if (!cnf.class) {
+          cnf.class = {};
+        }
+        cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        classDb.clear();
+      },
+    },
+    classDetectorV2
+  );
+  registerDiagram(
+    'er',
+    {
+      parser: erParser,
+      db: erDb,
+      renderer: erRenderer,
+      styles: erStyles,
+    },
+    erDetector
+  );
+  registerDiagram(
+    'gantt',
+    {
+      parser: ganttParser,
+      db: ganttDb,
+      renderer: ganttRenderer,
+      styles: ganttStyles,
+    },
+    ganttDetector
+  );
+  registerDiagram(
+    'info',
+    {
+      parser: infoParser,
+      db: infoDb,
+      renderer: infoRenderer,
+      styles: infoStyles,
+    },
+    infoDetector
+  );
+  registerDiagram(
+    'pie',
+    {
+      parser: pieParser,
+      db: pieDb,
+      renderer: pieRenderer,
+      styles: pieStyles,
+    },
+    pieDetector
+  );
+  registerDiagram(
+    'requirement',
+    {
+      parser: requirementParser,
+      db: requirementDb,
+      renderer: requirementRenderer,
+      styles: requirementStyles,
+    },
+    requirementDetector
+  );
+  registerDiagram(
+    'sequence',
+    {
+      parser: sequenceParser,
+      db: sequenceDb,
+      renderer: sequenceRenderer,
+      styles: sequenceStyles,
+      init: (cnf) => {
+        if (!cnf.sequence) {
+          cnf.sequence = {};
+        }
+        cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        if ('sequenceDiagram' in cnf) {
+          throw new Error(
+            '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
+          );
+        }
+        sequenceDb.setWrap(cnf.wrap);
+        sequenceRenderer.setConf(cnf.sequence);
+      },
+    },
+    sequenceDetector
+  );
+  registerDiagram(
+    'state',
+    {
+      parser: stateParser,
+      db: stateDb,
+      renderer: stateRenderer,
+      styles: stateStyles,
+      init: (cnf) => {
+        if (!cnf.state) {
+          cnf.state = {};
+        }
+        cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        stateDb.clear();
+      },
+    },
+    stateDetector
+  );
+  registerDiagram(
+    'stateDiagram',
+    {
+      parser: stateParser,
+      db: stateDb,
+      renderer: stateRendererV2,
+      styles: stateStyles,
+      init: (cnf) => {
+        if (!cnf.state) {
+          cnf.state = {};
+        }
+        cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        stateDb.clear();
+      },
+    },
+    stateDetectorV2
+  );
+  registerDiagram(
+    'journey',
+    {
+      parser: journeyParser,
+      db: journeyDb,
+      renderer: journeyRenderer,
+      styles: journeyStyles,
+      init: (cnf) => {
+        journeyRenderer.setConf(cnf.journey);
+        journeyDb.clear();
+      },
+    },
+    journeyDetector
+  );
+
+  registerDiagram(
+    'flowchart',
+    {
+      parser: flowParser,
+      db: flowDb,
+      renderer: flowRendererV2,
+      styles: flowStyles,
+      init: (cnf) => {
+        flowRenderer.setConf(cnf.flowchart);
+        if (!cnf.flowchart) {
+          cnf.flowchart = {};
+        }
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        flowDb.clear();
+        flowDb.setGen('gen-1');
+      },
+    },
+    flowDetector
+  );
+  registerDiagram(
+    'flowchart-v2',
+    {
+      parser: flowParser,
+      db: flowDb,
+      renderer: flowRendererV2,
+      styles: flowStyles,
+      init: (cnf) => {
+        flowRendererV2.setConf(cnf.flowchart);
+        if (!cnf.flowchart) {
+          cnf.flowchart = {};
+        }
+        cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
+        flowDb.clear();
+        flowDb.setGen('gen-2');
+      },
+    },
+    flowDetectorV2
+  );
   registerDiagram(
     'gitGraph',
     { parser: gitGraphParser, db: gitGraphDb, renderer: gitGraphRenderer, styles: gitGraphStyles },
diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 652e66465..eab74a022 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -1,62 +1,3 @@
-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 c4Parser from '../diagrams/c4/parser/c4Diagram';
-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 classParser from '../diagrams/class/parser/classDiagram';
-import erDb from '../diagrams/er/erDb';
-import erRenderer from '../diagrams/er/erRenderer';
-// @ts-ignore: TODO Fix ts errors
-import erParser from '../diagrams/er/parser/erDiagram';
-import erStyles from '../diagrams/er/styles';
-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 flowParser from '../diagrams/flowchart/parser/flow';
-import ganttDb from '../diagrams/gantt/ganttDb';
-import ganttRenderer from '../diagrams/gantt/ganttRenderer';
-// @ts-ignore: TODO Fix ts errors
-import ganttParser from '../diagrams/gantt/parser/gantt';
-import ganttStyles from '../diagrams/gantt/styles';
-
-import infoDb from '../diagrams/info/infoDb';
-import infoRenderer from '../diagrams/info/infoRenderer';
-// @ts-ignore: TODO Fix ts errors
-import infoParser from '../diagrams/info/parser/info';
-import infoStyles from '../diagrams/info/styles';
-// @ts-ignore: TODO Fix ts errors
-import pieParser from '../diagrams/pie/parser/pie';
-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 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 sequenceDb from '../diagrams/sequence/sequenceDb';
-import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
-import sequenceStyles from '../diagrams/sequence/styles';
-// @ts-ignore: TODO Fix ts errors
-import stateParser from '../diagrams/state/parser/stateDiagram';
-import 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 journeyDb from '../diagrams/user-journey/journeyDb';
-import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
-import journeyStyles from '../diagrams/user-journey/styles';
-// @ts-ignore: TODO Fix ts errors
-import journeyParser from '../diagrams/user-journey/parser/journey';
 import { addDetector, DiagramDetector } from './detectType';
 import { log as _log } from '../logger';
 import { getConfig as _getConfig } from '../config';
@@ -73,158 +14,7 @@ export interface DiagramDefinition {
   init?: (config: MermaidConfig) => void;
 }
 
-const diagrams: Record = {
-  c4: {
-    db: c4Db,
-    renderer: c4Renderer,
-    parser: c4Parser,
-    init: (cnf) => {
-      c4Renderer.setConf(cnf.c4);
-    },
-    styles: c4Styles,
-  },
-  class: {
-    db: classDb,
-    renderer: classRenderer,
-    parser: classParser,
-    init: (cnf) => {
-      if (!cnf.class) {
-        cnf.class = {};
-      }
-      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-      classDb.clear();
-    },
-    styles: classStyles,
-  },
-  classDiagram: {
-    db: classDb,
-    renderer: classRendererV2,
-    parser: classParser,
-    init: (cnf) => {
-      if (!cnf.class) {
-        cnf.class = {};
-      }
-      cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-      classDb.clear();
-    },
-    styles: classStyles,
-  },
-  er: {
-    db: erDb,
-    renderer: erRenderer,
-    parser: erParser,
-    styles: erStyles,
-  },
-  flowchart: {
-    db: flowDb,
-    renderer: flowRenderer,
-    parser: flowParser,
-    init: (cnf) => {
-      flowRenderer.setConf(cnf.flowchart);
-      if (!cnf.flowchart) {
-        cnf.flowchart = {};
-      }
-      cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-      flowDb.clear();
-      flowDb.setGen('gen-1');
-    },
-    styles: flowStyles,
-  },
-  'flowchart-v2': {
-    db: flowDb,
-    renderer: flowRendererV2,
-    parser: flowParser,
-    init: (cnf) => {
-      flowRendererV2.setConf(cnf.flowchart);
-      if (!cnf.flowchart) {
-        cnf.flowchart = {};
-      }
-      cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-      flowDb.clear();
-      flowDb.setGen('gen-2');
-    },
-    styles: flowStyles,
-  },
-  gantt: {
-    db: ganttDb,
-    renderer: ganttRenderer,
-    parser: ganttParser,
-    styles: ganttStyles,
-  },
-  info: {
-    db: infoDb,
-    renderer: infoRenderer,
-    parser: infoParser,
-    styles: infoStyles,
-  },
-  pie: {
-    db: pieDb,
-    renderer: pieRenderer,
-    parser: pieParser,
-    styles: pieStyles,
-  },
-  requirement: {
-    db: requirementDb,
-    renderer: requirementRenderer,
-    parser: requirementParser,
-    styles: requirementStyles,
-  },
-  sequence: {
-    db: sequenceDb,
-    renderer: sequenceRenderer,
-    parser: sequenceParser,
-    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);
-    },
-    styles: sequenceStyles,
-  },
-  state: {
-    db: stateDb,
-    renderer: stateRenderer,
-    parser: stateParser,
-    init: (cnf) => {
-      if (!cnf.state) {
-        cnf.state = {};
-      }
-      cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-      stateDb.clear();
-    },
-    styles: stateStyles,
-  },
-  stateDiagram: {
-    db: stateDb,
-    renderer: stateRendererV2,
-    parser: stateParser,
-    init: (cnf) => {
-      if (!cnf.state) {
-        cnf.state = {};
-      }
-      cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-      stateDb.clear();
-    },
-    styles: stateStyles,
-  },
-  journey: {
-    db: journeyDb,
-    renderer: journeyRenderer,
-    parser: journeyParser,
-    init: (cnf) => {
-      journeyRenderer.setConf(cnf.journey);
-      journeyDb.clear();
-    },
-    styles: journeyStyles,
-  },
-};
+const diagrams: Record = {};
 
 export const registerDiagram = (
   id: string,
diff --git a/src/diagrams/c4/c4Detector.ts b/src/diagrams/c4/c4Detector.ts
new file mode 100644
index 000000000..2be62bff1
--- /dev/null
+++ b/src/diagrams/c4/c4Detector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const c4Detector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/) !== null;
+};
diff --git a/src/diagrams/class/classDetector-V2.ts b/src/diagrams/class/classDetector-V2.ts
new file mode 100644
index 000000000..a0e270100
--- /dev/null
+++ b/src/diagrams/class/classDetector-V2.ts
@@ -0,0 +1,9 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const classDetectorV2: 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;
+};
diff --git a/src/diagrams/class/classDetector.ts b/src/diagrams/class/classDetector.ts
new file mode 100644
index 000000000..19d8bd2f5
--- /dev/null
+++ b/src/diagrams/class/classDetector.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const classDetector: 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;
+};
diff --git a/src/diagrams/er/erDetector.ts b/src/diagrams/er/erDetector.ts
new file mode 100644
index 000000000..a17eafb81
--- /dev/null
+++ b/src/diagrams/er/erDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const erDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*erDiagram/) !== null;
+};
diff --git a/src/diagrams/flowchart/flowDetector-v2.ts b/src/diagrams/flowchart/flowDetector-v2.ts
new file mode 100644
index 000000000..f73748c79
--- /dev/null
+++ b/src/diagrams/flowchart/flowDetector-v2.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const flowDetectorV2: 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;
+};
diff --git a/src/diagrams/flowchart/flowDetector.ts b/src/diagrams/flowchart/flowDetector.ts
new file mode 100644
index 000000000..edc9096c0
--- /dev/null
+++ b/src/diagrams/flowchart/flowDetector.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const flowDetector: 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;
+};
diff --git a/src/diagrams/gantt/ganttDetector.ts b/src/diagrams/gantt/ganttDetector.ts
new file mode 100644
index 000000000..926792dcf
--- /dev/null
+++ b/src/diagrams/gantt/ganttDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const ganttDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*gantt/) !== null;
+};
diff --git a/src/diagrams/info/infoDetector.ts b/src/diagrams/info/infoDetector.ts
new file mode 100644
index 000000000..68f2ac794
--- /dev/null
+++ b/src/diagrams/info/infoDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const infoDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*info/) !== null;
+};
diff --git a/src/diagrams/pie/pieDetector.ts b/src/diagrams/pie/pieDetector.ts
new file mode 100644
index 000000000..1e122b0e0
--- /dev/null
+++ b/src/diagrams/pie/pieDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const pieDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*pie/) !== null;
+};
diff --git a/src/diagrams/requirement/requirementDetector.ts b/src/diagrams/requirement/requirementDetector.ts
new file mode 100644
index 000000000..2e1aa93ae
--- /dev/null
+++ b/src/diagrams/requirement/requirementDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const requirementDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*requirement(Diagram)?/) !== null;
+};
diff --git a/src/diagrams/sequence/sequenceDetector.ts b/src/diagrams/sequence/sequenceDetector.ts
new file mode 100644
index 000000000..e68433255
--- /dev/null
+++ b/src/diagrams/sequence/sequenceDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const sequenceDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*sequenceDiagram/) !== null;
+};
diff --git a/src/diagrams/state/stateDetector-V2.ts b/src/diagrams/state/stateDetector-V2.ts
new file mode 100644
index 000000000..8082a47bd
--- /dev/null
+++ b/src/diagrams/state/stateDetector-V2.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const stateDetectorV2: 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;
+};
diff --git a/src/diagrams/state/stateDetector.ts b/src/diagrams/state/stateDetector.ts
new file mode 100644
index 000000000..79dd6586b
--- /dev/null
+++ b/src/diagrams/state/stateDetector.ts
@@ -0,0 +1,8 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const stateDetector: 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;
+};
diff --git a/src/diagrams/user-journey/journeyDetector.ts b/src/diagrams/user-journey/journeyDetector.ts
new file mode 100644
index 000000000..77c8688ae
--- /dev/null
+++ b/src/diagrams/user-journey/journeyDetector.ts
@@ -0,0 +1,5 @@
+import type { DiagramDetector } from '../../diagram-api/detectType';
+
+export const journeyDetector: DiagramDetector = (txt) => {
+  return txt.match(/^\s*journey/) !== null;
+};
diff --git a/src/docs/Setup.md b/src/docs/Setup.md
index a9d8e87e2..41e706825 100644
--- a/src/docs/Setup.md
+++ b/src/docs/Setup.md
@@ -1405,6 +1405,15 @@ This sets the auto-wrap padding for the diagram (sides only)
 
 **Notes:** Default value: 0.
 
+## parse
+
+### Parameters
+
+- `text` **[string][5]**
+- `parseError` **[Function][6]?**
+
+Returns **[boolean][7]**
+
 ## setSiteConfig
 
 ## setSiteConfig
@@ -1422,7 +1431,7 @@ function _Default value: At default, will mirror Global Config_
 
 - `conf` **MermaidConfig** The base currentConfig to use as siteConfig
 
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
 
 ## getSiteConfig
 
@@ -1434,7 +1443,7 @@ Returns **[object][5]** The siteConfig
 
 **Notes**: Returns **any** values in siteConfig.
 
-Returns **[object][5]** The siteConfig
+Returns **[object][8]** The siteConfig
 
 ## setConfig
 
@@ -1473,10 +1482,10 @@ $(function () {
 
 ### Parameters
 
-- `id` **[string][6]** The id of the element to be rendered
-- `text` **[string][6]** The graph definition
-- `cb` **function (svgCode: [string][6], bindFunctions: function (element: [Element][7]): void): void**
-- `container` **[Element][7]** Selector to element in which a div with the graph temporarily will be
+- `id` **[string][5]** The id of the element to be rendered
+- `text` **[string][5]** The graph definition
+- `cb` **function (svgCode: [string][5], bindFunctions: function (element: [Element][9]): void): void**
+- `container` **[Element][9]** 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.
 
@@ -1515,7 +1524,7 @@ Pushes in a directive to the configuration
 
 ### Parameters
 
-- `directive` **[object][5]** The directive to push in
+- `directive` **[object][8]** The directive to push in
 
 ## reset
 
@@ -1613,6 +1622,8 @@ Returns **void**
 [2]: Setup.md?id=render
 [3]: 8.6.0_docs.md
 [4]: #mermaidapi-configuration-defaults
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[7]: https://developer.mozilla.org/docs/Web/API/Element
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[9]: https://developer.mozilla.org/docs/Web/API/Element

From 213309f5e238c458a9560b355d218c95a69197ca Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 12 Sep 2022 07:41:56 +0200
Subject: [PATCH 2/4] Fix for broken tests

---
 src/diagram-api/diagramAPI.spec.ts            | 3 +++
 src/diagrams/sequence/sequenceDiagram.spec.js | 8 ++------
 src/mermaid.spec.js                           | 3 +++
 test.js                                       | 8 --------
 4 files changed, 8 insertions(+), 14 deletions(-)
 delete mode 100644 test.js

diff --git a/src/diagram-api/diagramAPI.spec.ts b/src/diagram-api/diagramAPI.spec.ts
index f72384c11..e0c7a283d 100644
--- a/src/diagram-api/diagramAPI.spec.ts
+++ b/src/diagram-api/diagramAPI.spec.ts
@@ -1,5 +1,8 @@
 import { detectType } from './detectType';
 import { getDiagram, registerDiagram } from './diagramAPI';
+import { addDiagrams } from './diagram-orchestration';
+
+addDiagrams();
 
 describe('DiagramAPI', () => {
   it('should return default diagrams', () => {
diff --git a/src/diagrams/sequence/sequenceDiagram.spec.js b/src/diagrams/sequence/sequenceDiagram.spec.js
index 808eb567e..5479e49e4 100644
--- a/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -1,12 +1,8 @@
-// import sequence from './parser/sequenceDiagram';
-// import sequenceDb from './sequenceDb';
 import * as configApi from '../../config';
-// import renderer from './sequenceRenderer';
 import mermaidAPI from '../../mermaidAPI';
-// import '../../diagram-api/diagramAPI';
 import Diagram from '../../Diagram';
-
-// console.log('sequenceDiagram', sequenceDb);
+import { addDiagrams } from '../../diagram-api/diagram-orchestration';
+addDiagrams();
 /**
  * @param conf
  * @param key
diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js
index c6014dfff..ef870072e 100644
--- a/src/mermaid.spec.js
+++ b/src/mermaid.spec.js
@@ -4,6 +4,9 @@ import flowDb from './diagrams/flowchart/flowDb';
 import flowParser from './diagrams/flowchart/parser/flow';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
 import Diagram from './Diagram';
+import { addDiagrams } from './diagram-api/diagram-orchestration';
+
+addDiagrams();
 
 const spyOn = jest.spyOn;
 
diff --git a/test.js b/test.js
deleted file mode 100644
index fa728c6ed..000000000
--- a/test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- *
- */
-function apa() {
-  // comment's
-  const a = 1;
-  return 'apa' + a;
-}

From 9e5e7b31e948a99b0b781fc43e1946764ffa4579 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 12 Sep 2022 08:51:52 +0200
Subject: [PATCH 3/4] Limiting the interaction between the mermaid diagram and
 Mermaid to the diagramAPI

---
 src/diagram-api/diagramAPI.ts        | 21 ++++++++++++++-------
 src/diagrams/mindmap/mindmap.spec.js |  2 +-
 src/diagrams/mindmap/mindmapDb.js    |  3 +--
 src/diagrams/mindmap/svgDraw.js      |  2 --
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index eab74a022..232933e0d 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -1,11 +1,23 @@
-import { addDetector, DiagramDetector } from './detectType';
-import { log as _log } from '../logger';
+import { addDetector, DiagramDetector as _DiagramDetector } from './detectType';
+import { log as _log, setLogLevel as _setLogLevel } from '../logger';
 import { getConfig as _getConfig } from '../config';
 import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
 import { MermaidConfig } from '../config.type';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
 
+/* 
+  Packaging and exposing resources for externa diagrams so that they can import 
+  diagramAPI and have access to selct parts of mermaid common code reqiored to
+  create diagrams worling like the internal diagrams.
+*/
+export const log = _log;
+export const setLogLevel = _setLogLevel;
+export type DiagramDetector = _DiagramDetector;
+export const getConfig = _getConfig;
+export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
+export const setupGraphViewbox = _setupGraphViewbox;
+
 export interface DiagramDefinition {
   db: any;
   renderer: any;
@@ -35,8 +47,3 @@ export const getDiagram = (name: string): DiagramDefinition => {
   }
   throw new Error(`Diagram ${name} not found.`);
 };
-
-export const log = _log;
-export const getConfig = _getConfig;
-export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
-export const setupGraphViewbox = _setupGraphViewbox;
diff --git a/src/diagrams/mindmap/mindmap.spec.js b/src/diagrams/mindmap/mindmap.spec.js
index 155b566fb..e7909ef50 100644
--- a/src/diagrams/mindmap/mindmap.spec.js
+++ b/src/diagrams/mindmap/mindmap.spec.js
@@ -1,6 +1,6 @@
 import { parser as mindmap } from './parser/mindmap';
 import * as mindmapDB from './mindmapDb';
-import { setLogLevel } from '../../logger';
+import { setLogLevel } from '../../diagram-api/diagramAPI';
 
 describe('when parsing a mindmap ', function () {
   beforeEach(function () {
diff --git a/src/diagrams/mindmap/mindmapDb.js b/src/diagrams/mindmap/mindmapDb.js
index 48b242c9e..68906c5fb 100644
--- a/src/diagrams/mindmap/mindmapDb.js
+++ b/src/diagrams/mindmap/mindmapDb.js
@@ -1,6 +1,5 @@
 /** Created by knut on 15-01-14. */
-import { sanitizeText, getConfig } from '../../diagram-api/diagramAPI';
-import { log as _log } from '../../logger';
+import { sanitizeText, getConfig, log as _log } from '../../diagram-api/diagramAPI';
 
 let nodes = [];
 let cnt = 0;
diff --git a/src/diagrams/mindmap/svgDraw.js b/src/diagrams/mindmap/svgDraw.js
index 511c46e20..0b5c5e264 100644
--- a/src/diagrams/mindmap/svgDraw.js
+++ b/src/diagrams/mindmap/svgDraw.js
@@ -1,4 +1,3 @@
-const lineBreakRegex = //gi;
 import { select } from 'd3';
 import * as db from './mindmapDb';
 
@@ -15,7 +14,6 @@ function wrap(text, width) {
         .reverse(),
       word,
       line = [],
-      lineNumber = 0,
       lineHeight = 1.1, // ems
       y = text.attr('y'),
       dy = parseFloat(text.attr('dy')),

From 06365faef32af6a266125e8e36aef51589877822 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 12 Sep 2022 11:24:58 +0200
Subject: [PATCH 4/4] Moving out tests from mermaid.spec.js

---
 src/diagram-api/diagramAPI.ts                 |   4 +-
 .../flowchart/flowRenderer.addEdges.spec.js   | 154 ++++++++++++++++++
 src/mermaid.spec.js                           | 148 -----------------
 3 files changed, 156 insertions(+), 150 deletions(-)
 create mode 100644 src/diagrams/flowchart/flowRenderer.addEdges.spec.js

diff --git a/src/diagram-api/diagramAPI.ts b/src/diagram-api/diagramAPI.ts
index 232933e0d..9a86c5b51 100644
--- a/src/diagram-api/diagramAPI.ts
+++ b/src/diagram-api/diagramAPI.ts
@@ -6,8 +6,8 @@ import { MermaidConfig } from '../config.type';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
 
-/* 
-  Packaging and exposing resources for externa diagrams so that they can import 
+/*
+  Packaging and exposing resources for externa diagrams so that they can import
   diagramAPI and have access to selct parts of mermaid common code reqiored to
   create diagrams worling like the internal diagrams.
 */
diff --git a/src/diagrams/flowchart/flowRenderer.addEdges.spec.js b/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
new file mode 100644
index 000000000..1bcb076f1
--- /dev/null
+++ b/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
@@ -0,0 +1,154 @@
+import flowDb from './flowDb';
+import flowParser from './parser/flow';
+import flowRenderer from './flowRenderer';
+import Diagram from '../../Diagram';
+import { addDiagrams } from '../../diagram-api/diagram-orchestration';
+addDiagrams();
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('when using mermaid and ', function () {
+  describe('when calling addEdges ', function () {
+    beforeEach(function () {
+      flowParser.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();
+
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B-');
+          expect(options.arrowhead).toBe('normal');
+          expect(options.label.match('text ex')).toBeTruthy();
+        },
+      };
+
+      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();
+
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B-');
+          expect(options.arrowhead).toBe('normal');
+        },
+      };
+
+      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();
+
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B-');
+          expect(options.arrowhead).toBe('none');
+        },
+      };
+
+      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();
+
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B-');
+          expect(options.arrowhead).toBe('none');
+          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
+        },
+      };
+
+      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();
+
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B-');
+          expect(options.arrowhead).toBe('none');
+          expect(options.curve).toBe('basis'); // mocked as string
+        },
+      };
+
+      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();
+
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B-');
+          expect(options.arrowhead).toBe('none');
+          expect(options.label.match('the text')).toBeTruthy();
+          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
+        },
+      };
+
+      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();
+
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B');
+          expect(options.arrowhead).toBe('none');
+          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
+        },
+      };
+
+      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();
+      const mockG = {
+        setEdge: function (start, end, options) {
+          expect(start).toContain('flowchart-A-');
+          expect(end).toContain('flowchart-B-');
+          expect(options.arrowhead).toBe('none');
+          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:blue;');
+        },
+      };
+
+      flowRenderer.addEdges(edges, mockG, diag);
+    });
+  });
+});
diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js
index ef870072e..fcd83a61b 100644
--- a/src/mermaid.spec.js
+++ b/src/mermaid.spec.js
@@ -2,11 +2,6 @@ import mermaid from './mermaid';
 import { mermaidAPI } from './mermaidAPI';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowParser from './diagrams/flowchart/parser/flow';
-import flowRenderer from './diagrams/flowchart/flowRenderer';
-import Diagram from './Diagram';
-import { addDiagrams } from './diagram-api/diagram-orchestration';
-
-addDiagrams();
 
 const spyOn = jest.spyOn;
 
@@ -61,149 +56,6 @@ describe('when using mermaid and ', function () {
     });
   });
 
-  describe('when calling addEdges ', function () {
-    beforeEach(function () {
-      flowParser.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();
-
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B-');
-          expect(options.arrowhead).toBe('normal');
-          expect(options.label.match('text ex')).toBeTruthy();
-        },
-      };
-
-      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();
-
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B-');
-          expect(options.arrowhead).toBe('normal');
-        },
-      };
-
-      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();
-
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B-');
-          expect(options.arrowhead).toBe('none');
-        },
-      };
-
-      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();
-
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B-');
-          expect(options.arrowhead).toBe('none');
-          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
-        },
-      };
-
-      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();
-
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B-');
-          expect(options.arrowhead).toBe('none');
-          expect(options.curve).toBe('basis'); // mocked as string
-        },
-      };
-
-      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();
-
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B-');
-          expect(options.arrowhead).toBe('none');
-          expect(options.label.match('the text')).toBeTruthy();
-          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
-        },
-      };
-
-      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();
-
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B');
-          expect(options.arrowhead).toBe('none');
-          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
-        },
-      };
-
-      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();
-      const mockG = {
-        setEdge: function (start, end, options) {
-          expect(start).toContain('flowchart-A-');
-          expect(end).toContain('flowchart-B-');
-          expect(options.arrowhead).toBe('none');
-          expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:blue;');
-        },
-      };
-
-      flowRenderer.addEdges(edges, mockG, diag);
-    });
-  });
-
   describe('checking validity of input ', function () {
     beforeEach(function () {
       flowParser.parser.yy = flowDb;