Fix for issues in errorhandling and class diagrams after refactoring

Merge release 9.1.7

.eslintignore

@@ -1,3 +1,5 @@
 dist/**
 .github/**
 docs/Setup.md
+cypress.config.js
+cypress/plugins/index.js

.eslintrc.json

@@ -15,6 +15,7 @@
   },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:jsdoc/recommended",
     "plugin:json/recommended",
     "plugin:markdown/recommended",
@@ -22,6 +23,7 @@
   ],
   "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
   "rules": {
+    "no-console": "error",
     "no-prototype-builtins": "off",
     "no-unused-vars": "off",
     "jsdoc/check-indentation": "off",
@@ -35,6 +37,16 @@
     "jsdoc/require-returns": "off",
     "jsdoc/require-returns-description": "off",
     "cypress/no-async-tests": "off",
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-expect-error": "allow-with-description",
+        "ts-ignore": "allow-with-description",
+        "ts-nocheck": "allow-with-description",
+        "ts-check": "allow-with-description",
+        "minimumDescriptionLength": 10
+      }
+    ],
     "json/*": ["error", "allowComments"],
     "no-empty": ["error", { "allowEmptyCatch": true }]
   },
@@ -45,6 +57,19 @@
         "no-undef": "off",
         "jsdoc/require-jsdoc": "off"
       }
+    },
+    {
+      "files": ["./cypress/**", "./demos/**"],
+      "rules": {
+        "no-console": "off"
+      }
+    },
+    {
+      "files": ["./**/*.spec.{ts,js}", "./cypress/**", "./demos/**", "./**/docs/**"],
+      "rules": {
+        "jsdoc/require-jsdoc": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
     }
   ]
 }

.github/workflows/checks.yml

@@ -14,7 +14,7 @@ jobs:
     name: check tests
     if: github.repository_owner == 'mermaid-js'
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - uses: testomatio/check-tests@stable

.github/workflows/e2e

@@ -36,3 +36,9 @@ jobs:
       run: yarn e2e
       env:
         CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+    - name: Upload Coverage to Coveralls
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          flag-name: e2e

.github/workflows/lint.yml

@@ -40,3 +40,18 @@ jobs:
 
       - name: Verify Docs
         run: yarn docs:verify
+
+      - name: Check no `console.log()` in .jison files
+        # ESLint can't parse .jison files directly
+        # In the future, it might be worth making a `eslint-plugin-jison`, so
+        # that this will be built into the `yarn lint` command.
+        run: |
+          shopt -s globstar
+          mkdir -p tmp/
+          for jison_file in src/**/*.jison; do
+            outfile="tmp/$(basename -- "$jison_file" .jison)-jison.js"
+            echo "Converting $jison_file to $outfile"
+            # default module-type (CJS) always adds a console.log()
+            yarn jison "$jison_file" --outfile "$outfile" --module-type "amd"
+          done
+          yarn eslint --no-eslintrc --rule no-console:error --parser "@babel/eslint-parser" "./tmp/*-jison.js"

.github/workflows/test.yml

@@ -32,3 +32,12 @@ jobs:
       - name: Run Unit Tests
         run: |
           yarn ci --coverage
+
+      - name: Upload Coverage to Coveralls
+        # it feels a bit weird to use @master, but that's what the docs use
+        # (coveralls also doesn't publish a @v1 we can use)
+        # https://github.com/marketplace/actions/coveralls-github-action
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          flag-name: unit

.lintstagedrc.json

@@ -1,4 +1,5 @@
 {
   "src/docs/**": ["yarn docs:build --git"],
-  "*.{ts,js,json,html,md}": ["eslint --fix", "prettier --write"]
+  "src/docs.mts": ["yarn docs:build --git"],
+  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"]
 }

cypress.config.js

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
 const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 require('@applitools/eyes-cypress')(module);

cypress/platform/knsv.html

@@ -39,6 +39,14 @@
   </head>
   <body>
     <pre class="mermaid2" style="width: 50%">
+flowchart LR
+  a ---
+    </pre>
+    <pre class="mermaid" style="width: 50%">
+flowchart LR
+  a2 ---
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
 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;
@@ -73,7 +81,31 @@ flowchart TD
     </pre>
     <pre class="mermaid" style="width: 50%">
 flowchart TD
-id
+
+  release-branch[Create Release Branch]:::relClass
+  develop-branch[Update Develop Branch]:::relClass
+  github-release-draft[GitHub Release Draft]:::relClass
+  trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
+  github-release[GitHub Release]:::postClass
+
+  build-ready --> release-branch
+  build-ready --> develop-branch
+  release-branch --> jenkins-release-build
+  jenkins-release-build --> github-release-draft
+  jenkins-release-build --> install-release
+  install-release --> verify-release
+  jenkins-release-build --> announce
+  github-release-draft --> github-release
+  verify-release --> verify-check
+  verify-check -- Yes --> github-release
+  verify-check -- No --> release-fix
+  release-fix --> release-branch-pr
+  verify-check -- No --> delete-artifacts
+  release-branch-pr --> trigger-pipeline
+  delete-artifacts --> trigger-pipeline
+  trigger-pipeline --> jenkins-release-build
+
+
     </pre>
     <pre class="mermaid2" style="width: 50%">
 flowchart LR
@@ -99,7 +131,7 @@ flowchart TD
       class A someclass;
       class C someclass;
     </pre>
-    <pre class="mermaid2" style="width: 50%">
+    <pre class="mermaid" style="width: 50%">
    sequenceDiagram
       title: My Sequence Diagram Title
       accTitle: My Acc Sequence Diagram
@@ -109,14 +141,14 @@ flowchart TD
       John-->>Alice: Great!
       Alice-)John: See you later!
     </pre>
-    <pre class="mermaid2" style="width: 50%">
+    <pre class="mermaid" style="width: 50%">
 graph TD
     A -->|000| B
     B -->|111| C
 
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
   journey
       accTitle: My User Journey Diagram
       accDescr: My User Journey Diagram Description
@@ -130,10 +162,10 @@ graph TD
         Go downstairs: 5: Me
         Sit down: 5: Me
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
         info
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
 requirementDiagram
       accTitle: My req Diagram
       accDescr: My req Diagram Description
@@ -174,7 +206,7 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
 gantt
     dateFormat  YYYY-MM-DD
     title       Adding GANTT diagram functionality to mermaid
@@ -206,7 +238,7 @@ gantt
     Add gantt diagram to demo page      :20h
     Add another diagram to demo page    :48h
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
 stateDiagram
   state Active {
     Idle
@@ -234,7 +266,7 @@ stateDiagram
           end
           B ->> A: Return
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
 classDiagram
 accTitle: My class diagram
 accDescr: My class diagram Description
@@ -259,7 +291,7 @@ class Class10 {
         A->>Bob: Hola
         Bob-->A: Pasten !
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
       gitGraph
        commit id: "ZERO"
        branch develop
@@ -288,7 +320,7 @@ flowchart TD
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -311,7 +343,7 @@ flowchart TD
             +run()
           }
     </pre>
-    <pre class="mermaid2" style="width: 100%">
+    <pre class="mermaid" style="width: 100%">
         erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {
@@ -357,6 +389,11 @@ flowchart TD
 
         document.getElementsByTagName('body')[0].appendChild(div);
       }
+
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
     </script>
   </body>
 </html>

cypress/platform/knsv2.html

@@ -47,9 +47,17 @@
     <div>Security check</div>
     <div class="flex">
       <pre id="diagram" class="mermaid">
-sequenceDiagram
-  Nothing:Valid;
-      </pre>
+    flowchart TD
+    A[myClass1] --> B[default] & C[default]
+    B[default] & C[default] --> D[myClass2]
+    classDef default stroke-width:2px,fill:none,stroke:silver
+    classDef node color:red
+    classDef myClass1 color:#0000ff
+    classDef myClass2 stroke:#0000ff,fill:#ccccff
+    class A myClass1
+    class D myClass2
+  </pre
+      >
       <div id="res" class=""></div>
     </div>
     <script src="./mermaid.js"></script>
@@ -59,6 +67,7 @@ sequenceDiagram
       };
       mermaid.initialize({
         startOnLoad: false,
+        logLevel: 0,
         // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {

cypress/plugins/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //

demos/index.html

@@ -1083,7 +1083,9 @@ Enterprise_Boundary(b0, "BankBoundary0") {
     <script>
       const testLineEndings = (test, input) => {
         try {
-          mermaid.render(test, input, () => {});
+          mermaid.render(test, input, () => {
+            //no-op
+          });
         } catch (err) {
           console.error('Error in %s:\n\n%s', test, err);
         }

docs/8.6.0_docs.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Version 8.6.0 Changes
 

docs/CHANGELOG.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Change Log
 

docs/Configuration.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Configuration
 

docs/README.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # About Mermaid
 

docs/SUMMARY.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Summary
 

docs/Setup.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
@@ -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

docs/Tutorials.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Tutorials
 

docs/_navbar.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 - Getting started
 

docs/_sidebar.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 - 📔 Introduction
 

docs/accessibility.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Accessibility Options
 

docs/breakingChanges.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Breaking changes
 

docs/c4c.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # C4 Diagrams
 

docs/classDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Class diagrams
 

docs/developer-docs/configuration.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Configuration
 

docs/development.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Development and Contribution 🙌
 

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 ---
 

docs/directives.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Directives
 

docs/entityRelationshipDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Entity Relationship Diagrams
 

docs/examples.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Examples
 

docs/faq.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Frequently Asked Questions
 

docs/flowchart.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Flowcharts - Basic Syntax
 

docs/gantt.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Gantt diagrams
 

docs/gitgraph.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Gitgraph Diagrams
 

docs/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.--><head>
     <meta charset="UTF-8" />
     <title>
       mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
@@ -21,22 +21,13 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
     />
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
-    <script>
-      // prettier-ignore
-      (function (i, s, o, g, r, a, m) {
-      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
-        (i[r].q = i[r].q || []).push(arguments)
-      }, i[r].l = 1 * new Date(); a = s.createElement(o),
-        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
-    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-
-      ga('create', 'UA-153180559-1', 'auto');
-      if (location) {
-        ga('send', 'pageview', location.hash);
-      }
-    </script>
+    <script
+      defer
+      data-domain="mermaid-js.github.io"
+      src="https://plausible.io/js/plausible.js"
+    ></script>
     <script>
       var require = {
         paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },

docs/integrations.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Integrations
 

docs/introduction.md

@@ -1 +1 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.

docs/landing/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.--><head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
@@ -64,7 +64,7 @@
                 using Mermaid.js.
               </p>
               <a
-                href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
+                href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
               >
                 <button
                   style="background: #ffa41c; border: 1px solid #ff8f00"
@@ -322,7 +322,7 @@
         </p>
       </h3>
       <a
-        href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&me=&qid=1628153965"
+        href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
       >
         <button
           style="background: #ffa41c; border: 1px solid #ff8f00"

docs/mermaidCLI.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # mermaid CLI
 

docs/mindmap.md

@@ -1,9 +1,7 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Mindmap
 
-**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/src/docs/mindmap.md)
-
 > Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
 
 "A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia

docs/n00b-advanced.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Advanced n00b mermaid (Coming soon..)
 

docs/n00b-gettingStarted.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # A Mermaid User-Guide for Beginners
 

docs/n00b-overview.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Overview for Beginners
 

docs/n00b-syntaxReference.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Diagram Syntax
 

docs/newDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Adding a New Diagram/Chart 📊
 

docs/pie.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Pie chart diagrams
 

docs/requirementDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Requirement Diagram
 

docs/security.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Security
 

docs/sequenceDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Sequence diagrams
 

docs/stateDiagram.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # State diagrams
 

docs/theming.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Theme Configuration
 

docs/upgrading.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Upgrading
 

docs/usage.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # Usage
 

docs/user-journey.md

@@ -1,4 +1,4 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in src/docs.
 
 # User Journey Diagram
 

jest.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
@@ -11,6 +12,10 @@ module.exports = {
       { 'token-stack': true },
     ],
   },
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '^.+\\.jison$', // might be able to fix in future if .jison adds source-map support
+  ],
   transformIgnorePatterns: ['/node_modules/(?!dagre-d3-renderer/lib|khroma).*\\.js'],
   testPathIgnorePatterns: ['/node_modules/', '.cache', './cypress'],
   moduleNameMapper: {

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",
@@ -67,19 +67,19 @@
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
-    "dompurify": "2.3.10",
+    "dompurify": "2.4.0",
     "fast-clone": "^1.5.13",
     "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.0.10"
+    "stylis": "^4.1.2"
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.19.0",
     "@babel/eslint-parser": "^7.14.7",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-env": "^7.19.0",
     "@babel/register": "^7.14.5",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.0.0",
@@ -87,21 +87,20 @@
     "@types/dompurify": "^2.3.4",
     "@types/jest": "^28.1.7",
     "@types/stylis": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
-    "babel-jest": "^29.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "babel-jest": "^29.0.3",
     "babel-loader": "^8.2.2",
-    "concurrently": "^7.0.0",
-    "coveralls": "^3.0.2",
+    "concurrently": "^7.4.0",
     "css-to-string-loader": "^0.1.3",
     "cypress": "9.7.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-jest": "^27.0.1",
+    "eslint-plugin-jest": "^27.0.4",
     "eslint-plugin-jsdoc": "^39.3.6",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-markdown": "^3.0.0",
@@ -109,7 +108,7 @@
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.0.3",
-    "jest-environment-jsdom": "^29.0.2",
+    "jest-environment-jsdom": "^29.0.3",
     "jison": "^0.4.18",
     "js-base64": "3.7.2",
     "lint-staged": "^13.0.0",
@@ -123,11 +122,11 @@
     "ts-jest": "^28.0.8",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.2",
+    "typescript": "^4.8.3",
     "unist-util-flatmap": "^1.0.0",
     "webpack": "^5.53.0",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.10.1",
+    "webpack-dev-server": "^4.11.0",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0"
   },

src/Diagram.ts

@@ -8,6 +8,7 @@ export class Diagram {
   parser;
   renderer;
   db;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   constructor(public txt: string, parseError?: Function) {
     const cnf = configApi.getConfig();
     this.txt = txt;
@@ -33,6 +34,7 @@ export class Diagram {
     this.parse(this.txt, parseError);
   }
 
+  // eslint-disable-next-line @typescript-eslint/ban-types
   parse(text: string, parseError?: Function): boolean {
     try {
       text = text + '\n';

src/__mocks__/mermaidAPI.ts

@@ -19,6 +19,7 @@ let hasLoadedDiagrams = false;
  * @param text
  * @param parseError
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 function parse(text: string, parseError?: Function): boolean {
   if (!hasLoadedDiagrams) {
     addDiagrams();

src/config.ts

@@ -62,9 +62,9 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
-  // @ts-ignore
+  // @ts-ignore: TODO Fix ts errors
   if (conf.theme && theme[conf.theme]) {
-    // @ts-ignore
+    // @ts-ignore: TODO Fix ts errors
     siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
   }
 
@@ -216,6 +216,8 @@ export const addDirective = (directive: any) => {
  * | conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
  *
  * **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
+ *
+ * @param config
  */
 export const reset = (config = siteConfig): void => {
   // Replace current config with siteConfig

src/config.type.ts

@@ -1,350 +1,356 @@
 // TODO: This was auto generated from defaultConfig. Needs to be verified.
 
-import type DOMPurify from 'dompurify';
+import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  altFontFamily?: string;
-  arrowMarkerAbsolute?: boolean;
-  c4?: C4DiagramConfig;
-  class?: ClassDiagramConfig;
-  darkMode?: boolean;
-  deterministicIDSeed?: string;
-  deterministicIds?: boolean;
-  dompurifyConfig?: DOMPurify.Config;
-  er?: ErDiagramConfig;
-  flowchart?: FlowchartDiagramConfig;
-  fontFamily?: string;
-  fontSize?: number;
-  gantt?: GanttDiagramConfig;
-  gitGraph?: GitGraphDiagramConfig;
-  htmlLabels?: boolean;
-  journey?: JourneyDiagramConfig;
-  logLevel?: number;
+  theme?: string;
+  themeVariables?: any;
+  themeCSS?: string;
   maxTextSize?: number;
-  mindmap?: MindmapDiagramConfig;
+  darkMode?: boolean;
+  htmlLabels?: boolean;
+  fontFamily?: string;
+  altFontFamily?: string;
+  logLevel?: number;
+  securityLevel?: string;
+  startOnLoad?: boolean;
+  arrowMarkerAbsolute?: boolean;
+  secure?: string[];
+  deterministicIds?: boolean;
+  deterministicIDSeed?: string;
+  flowchart?: FlowchartDiagramConfig;
+  sequence?: SequenceDiagramConfig;
+  gantt?: GanttDiagramConfig;
+  journey?: JourneyDiagramConfig;
+  class?: ClassDiagramConfig;
+  state?: StateDiagramConfig;
+  er?: ErDiagramConfig;
   pie?: PieDiagramConfig;
   requirement?: RequirementDiagramConfig;
-  secure?: string[];
-  securityLevel?: string;
-  sequence?: SequenceDiagramConfig;
-  startOnLoad?: boolean;
-  state?: StateDiagramConfig;
-  theme?: string;
-  themeCSS?: string;
-  themeVariables?: any;
+  mindmap?: MindmapDiagramConfig;
+  gitGraph?: GitGraphDiagramConfig;
+  c4?: C4DiagramConfig;
+  dompurifyConfig?: DOMPurify.Config;
   wrap?: boolean;
+  fontSize?: number;
 }
 
 // TODO: More configs needs to be moved in here
 export interface BaseDiagramConfig {
-  width?: number;
-  height?: number;
   useWidth?: number;
   useMaxWidth?: boolean;
 }
 
 export interface C4DiagramConfig extends BaseDiagramConfig {
-  boundaryFont?: FontCalculator;
-  boundaryFontFamily?: string;
-  boundaryFontSize?: string | number;
-  boundaryFontWeight?: string | number;
-  boxMargin?: number;
-  c4BoundaryInRow?: number;
-  c4ShapeInRow?: number;
-  c4ShapeMargin?: number;
-  c4ShapePadding?: number;
-  componentFont?: FontCalculator;
-  componentFontFamily?: string;
-  componentFontSize?: string | number;
-  componentFontWeight?: string | number;
-  component_bg_color?: string;
-  component_border_color?: string;
-  component_dbFont?: FontCalculator;
-  component_dbFontFamily?: string;
-  component_dbFontSize?: string | number;
-  component_dbFontWeight?: string | number;
-  component_db_bg_color?: string;
-  component_db_border_color?: string;
-  component_queueFont?: FontCalculator;
-  component_queueFontFamily?: string;
-  component_queueFontSize?: string | number;
-  component_queueFontWeight?: string | number;
-  component_queue_bg_color?: string;
-  component_queue_border_color?: string;
-  containerFont?: FontCalculator;
-  containerFontFamily?: string;
-  containerFontSize?: string | number;
-  containerFontWeight?: string | number;
-  container_bg_color?: string;
-  container_border_color?: string;
-  container_dbFont?: FontCalculator;
-  container_dbFontFamily?: string;
-  container_dbFontSize?: string | number;
-  container_dbFontWeight?: string | number;
-  container_db_bg_color?: string;
-  container_db_border_color?: string;
-  container_queueFont?: FontCalculator;
-  container_queueFontFamily?: string;
-  container_queueFontSize?: string | number;
-  container_queueFontWeight?: string | number;
-  container_queue_bg_color?: string;
-  container_queue_border_color?: string;
   diagramMarginX?: number;
   diagramMarginY?: number;
-  external_componentFont?: FontCalculator;
-  external_componentFontFamily?: string;
-  external_componentFontSize?: string | number;
-  external_componentFontWeight?: string | number;
-  external_component_bg_color?: string;
-  external_component_border_color?: string;
-  external_component_dbFont?: FontCalculator;
-  external_component_dbFontFamily?: string;
-  external_component_dbFontSize?: string | number;
-  external_component_dbFontWeight?: string | number;
-  external_component_db_bg_color?: string;
-  external_component_db_border_color?: string;
-  external_component_queueFont?: FontCalculator;
-  external_component_queueFontFamily?: string;
-  external_component_queueFontSize?: string | number;
-  external_component_queueFontWeight?: string | number;
-  external_component_queue_bg_color?: string;
-  external_component_queue_border_color?: string;
-  external_containerFont?: FontCalculator;
-  external_containerFontFamily?: string;
-  external_containerFontSize?: string | number;
-  external_containerFontWeight?: string | number;
-  external_container_bg_color?: string;
-  external_container_border_color?: string;
-  external_container_dbFont?: FontCalculator;
-  external_container_dbFontFamily?: string;
-  external_container_dbFontSize?: string | number;
-  external_container_dbFontWeight?: string | number;
-  external_container_db_bg_color?: string;
-  external_container_db_border_color?: string;
-  external_container_queueFont?: FontCalculator;
-  external_container_queueFontFamily?: string;
-  external_container_queueFontSize?: string | number;
-  external_container_queueFontWeight?: string | number;
-  external_container_queue_bg_color?: string;
-  external_container_queue_border_color?: string;
-  external_personFont?: FontCalculator;
-  external_personFontFamily?: string;
-  external_personFontSize?: string | number;
-  external_personFontWeight?: string | number;
-  external_person_bg_color?: string;
-  external_person_border_color?: string;
-  external_systemFont?: FontCalculator;
-  external_systemFontFamily?: string;
-  external_systemFontSize?: string | number;
-  external_systemFontWeight?: string | number;
-  external_system_bg_color?: string;
-  external_system_border_color?: string;
-  external_system_dbFont?: FontCalculator;
-  external_system_dbFontFamily?: string;
-  external_system_dbFontSize?: string | number;
-  external_system_dbFontWeight?: string | number;
-  external_system_db_bg_color?: string;
-  external_system_db_border_color?: string;
-  external_system_queueFont?: FontCalculator;
-  external_system_queueFontFamily?: string;
-  external_system_queueFontSize?: string | number;
-  external_system_queueFontWeight?: string | number;
-  external_system_queue_bg_color?: string;
-  external_system_queue_border_color?: string;
-  messageFont?: FontCalculator;
-  messageFontFamily?: string;
-  messageFontSize?: string | number;
-  messageFontWeight?: string | number;
+  c4ShapeMargin?: number;
+  c4ShapePadding?: number;
+  width?: number;
+  height?: number;
+  boxMargin?: number;
+  c4ShapeInRow?: number;
   nextLinePaddingX?: number;
-  personFont?: FontCalculator;
-  personFontFamily?: string;
+  c4BoundaryInRow?: number;
   personFontSize?: string | number;
+  personFontFamily?: string;
   personFontWeight?: string | number;
-  person_bg_color?: string;
-  person_border_color?: string;
-  systemFont?: FontCalculator;
-  systemFontFamily?: string;
+  external_personFontSize?: string | number;
+  external_personFontFamily?: string;
+  external_personFontWeight?: string | number;
   systemFontSize?: string | number;
+  systemFontFamily?: string;
   systemFontWeight?: string | number;
-  system_bg_color?: string;
-  system_border_color?: string;
-  system_dbFont?: FontCalculator;
-  system_dbFontFamily?: string;
+  external_systemFontSize?: string | number;
+  external_systemFontFamily?: string;
+  external_systemFontWeight?: string | number;
   system_dbFontSize?: string | number;
+  system_dbFontFamily?: string;
   system_dbFontWeight?: string | number;
-  system_db_bg_color?: string;
-  system_db_border_color?: string;
-  system_queueFont?: FontCalculator;
-  system_queueFontFamily?: string;
+  external_system_dbFontSize?: string | number;
+  external_system_dbFontFamily?: string;
+  external_system_dbFontWeight?: string | number;
   system_queueFontSize?: string | number;
+  system_queueFontFamily?: string;
   system_queueFontWeight?: string | number;
-  system_queue_bg_color?: string;
-  system_queue_border_color?: string;
+  external_system_queueFontSize?: string | number;
+  external_system_queueFontFamily?: string;
+  external_system_queueFontWeight?: string | number;
+  boundaryFontSize?: string | number;
+  boundaryFontFamily?: string;
+  boundaryFontWeight?: string | number;
+  messageFontSize?: string | number;
+  messageFontFamily?: string;
+  messageFontWeight?: string | number;
+  containerFontSize?: string | number;
+  containerFontFamily?: string;
+  containerFontWeight?: string | number;
+  external_containerFontSize?: string | number;
+  external_containerFontFamily?: string;
+  external_containerFontWeight?: string | number;
+  container_dbFontSize?: string | number;
+  container_dbFontFamily?: string;
+  container_dbFontWeight?: string | number;
+  external_container_dbFontSize?: string | number;
+  external_container_dbFontFamily?: string;
+  external_container_dbFontWeight?: string | number;
+  container_queueFontSize?: string | number;
+  container_queueFontFamily?: string;
+  container_queueFontWeight?: string | number;
+  external_container_queueFontSize?: string | number;
+  external_container_queueFontFamily?: string;
+  external_container_queueFontWeight?: string | number;
+  componentFontSize?: string | number;
+  componentFontFamily?: string;
+  componentFontWeight?: string | number;
+  external_componentFontSize?: string | number;
+  external_componentFontFamily?: string;
+  external_componentFontWeight?: string | number;
+  component_dbFontSize?: string | number;
+  component_dbFontFamily?: string;
+  component_dbFontWeight?: string | number;
+  external_component_dbFontSize?: string | number;
+  external_component_dbFontFamily?: string;
+  external_component_dbFontWeight?: string | number;
+  component_queueFontSize?: string | number;
+  component_queueFontFamily?: string;
+  component_queueFontWeight?: string | number;
+  external_component_queueFontSize?: string | number;
+  external_component_queueFontFamily?: string;
+  external_component_queueFontWeight?: string | number;
   wrap?: boolean;
   wrapPadding?: number;
+  person_bg_color?: string;
+  person_border_color?: string;
+  external_person_bg_color?: string;
+  external_person_border_color?: string;
+  system_bg_color?: string;
+  system_border_color?: string;
+  system_db_bg_color?: string;
+  system_db_border_color?: string;
+  system_queue_bg_color?: string;
+  system_queue_border_color?: string;
+  external_system_bg_color?: string;
+  external_system_border_color?: string;
+  external_system_db_bg_color?: string;
+  external_system_db_border_color?: string;
+  external_system_queue_bg_color?: string;
+  external_system_queue_border_color?: string;
+  container_bg_color?: string;
+  container_border_color?: string;
+  container_db_bg_color?: string;
+  container_db_border_color?: string;
+  container_queue_bg_color?: string;
+  container_queue_border_color?: string;
+  external_container_bg_color?: string;
+  external_container_border_color?: string;
+  external_container_db_bg_color?: string;
+  external_container_db_border_color?: string;
+  external_container_queue_bg_color?: string;
+  external_container_queue_border_color?: string;
+  component_bg_color?: string;
+  component_border_color?: string;
+  component_db_bg_color?: string;
+  component_db_border_color?: string;
+  component_queue_bg_color?: string;
+  component_queue_border_color?: string;
+  external_component_bg_color?: string;
+  external_component_border_color?: string;
+  external_component_db_bg_color?: string;
+  external_component_db_border_color?: string;
+  external_component_queue_bg_color?: string;
+  external_component_queue_border_color?: string;
+  personFont?: FontCalculator;
+  external_personFont?: FontCalculator;
+  systemFont?: FontCalculator;
+  external_systemFont?: FontCalculator;
+  system_dbFont?: FontCalculator;
+  external_system_dbFont?: FontCalculator;
+  system_queueFont?: FontCalculator;
+  external_system_queueFont?: FontCalculator;
+  containerFont?: FontCalculator;
+  external_containerFont?: FontCalculator;
+  container_dbFont?: FontCalculator;
+  external_container_dbFont?: FontCalculator;
+  container_queueFont?: FontCalculator;
+  external_container_queueFont?: FontCalculator;
+  componentFont?: FontCalculator;
+  external_componentFont?: FontCalculator;
+  component_dbFont?: FontCalculator;
+  external_component_dbFont?: FontCalculator;
+  component_queueFont?: FontCalculator;
+  external_component_queueFont?: FontCalculator;
+  boundaryFont?: FontCalculator;
+  messageFont?: FontCalculator;
 }
 
 export interface GitGraphDiagramConfig extends BaseDiagramConfig {
-  arrowMarkerAbsolute?: boolean;
   diagramPadding?: number;
+  nodeLabel?: NodeLabel;
   mainBranchName?: string;
   mainBranchOrder?: number;
-  nodeLabel?: NodeLabel;
-  rotateCommitLabel?: boolean;
-  showBranches?: boolean;
   showCommitLabel?: boolean;
+  showBranches?: boolean;
+  rotateCommitLabel?: boolean;
+  arrowMarkerAbsolute?: boolean;
 }
 
 export interface NodeLabel {
-  height?: number;
   width?: number;
+  height?: number;
   x?: number;
   y?: number;
 }
 
 export interface RequirementDiagramConfig extends BaseDiagramConfig {
-  fontSize?: number;
-  line_height?: number;
-  rect_border_color?: string;
-  rect_border_size?: string;
   rect_fill?: string;
-  rect_min_height?: number;
-  rect_min_width?: number;
-  rect_padding?: number;
   text_color?: string;
+  rect_border_size?: string;
+  rect_border_color?: string;
+  rect_min_width?: number;
+  rect_min_height?: number;
+  fontSize?: number;
+  rect_padding?: number;
+  line_height?: number;
 }
 
 export interface MindmapDiagramConfig extends BaseDiagramConfig {
-  padding?: number;
-  maxNodeWidth?: number;
+  useMaxWidth: boolean;
+  padding: number;
+  maxNodeWidth: number;
 }
-export interface PieDiagramConfig extends BaseDiagramConfig {}
+
+export type PieDiagramConfig = BaseDiagramConfig;
 
 export interface ErDiagramConfig extends BaseDiagramConfig {
   diagramPadding?: number;
+  layoutDirection?: string;
+  minEntityWidth?: number;
+  minEntityHeight?: number;
   entityPadding?: number;
+  stroke?: string;
   fill?: string;
   fontSize?: number;
-  layoutDirection?: string;
-  minEntityHeight?: number;
-  minEntityWidth?: number;
-  stroke?: string;
 }
 
 export interface StateDiagramConfig extends BaseDiagramConfig {
   arrowMarkerAbsolute?: boolean;
-  compositTitleSize?: number;
-  defaultRenderer?: string;
   dividerMargin?: number;
-  edgeLengthFactor?: string;
-  fontSize?: number;
-  fontSizeFactor?: number;
-  forkHeight?: number;
-  forkWidth?: number;
-  labelHeight?: number;
-  miniPadding?: number;
-  noteMargin?: number;
-  padding?: number;
-  radius?: number;
   sizeUnit?: number;
+  padding?: number;
   textHeight?: number;
   titleShift?: number;
+  noteMargin?: number;
+  forkWidth?: number;
+  forkHeight?: number;
+  miniPadding?: number;
+  fontSizeFactor?: number;
+  fontSize?: number;
+  labelHeight?: number;
+  edgeLengthFactor?: string;
+  compositTitleSize?: number;
+  radius?: number;
+  defaultRenderer?: string;
 }
 
 export interface ClassDiagramConfig extends BaseDiagramConfig {
   arrowMarkerAbsolute?: boolean;
-  defaultRenderer?: string;
   dividerMargin?: number;
   padding?: number;
   textHeight?: number;
+  defaultRenderer?: string;
 }
 
 export interface JourneyDiagramConfig extends BaseDiagramConfig {
-  activationWidth?: number;
-  actorColours?: string[];
-  bottomMarginAdj?: number;
-  boxMargin?: number;
-  boxTextMargin?: number;
   diagramMarginX?: number;
   diagramMarginY?: number;
   leftMargin?: number;
-  messageAlign?: string;
-  messageMargin?: number;
+  width?: number;
+  height?: number;
+  boxMargin?: number;
+  boxTextMargin?: number;
   noteMargin?: number;
+  messageMargin?: number;
+  messageAlign?: string;
+  bottomMarginAdj?: number;
   rightAngles?: boolean;
-  sectionColours?: string[];
-  sectionFills?: string[];
-  taskFontFamily?: string;
   taskFontSize?: string | number;
+  taskFontFamily?: string;
   taskMargin?: number;
+  activationWidth?: number;
   textPlacement?: string;
+  actorColours?: string[];
+  sectionFills?: string[];
+  sectionColours?: string[];
 }
 
 export interface GanttDiagramConfig extends BaseDiagramConfig {
-  axisFormat?: string;
-  barGap?: number;
-  barHeight?: number;
-  fontSize?: number;
-  gridLineStartPadding?: number;
-  leftPadding?: number;
-  numberSectionStyles?: number;
-  rightPadding?: number;
-  sectionFontSize?: string | number;
   titleTopMargin?: number;
-  topAxis?: boolean;
+  barHeight?: number;
+  barGap?: number;
   topPadding?: number;
+  rightPadding?: number;
+  leftPadding?: number;
+  gridLineStartPadding?: number;
+  fontSize?: number;
+  sectionFontSize?: string | number;
+  numberSectionStyles?: number;
+  axisFormat?: string;
+  topAxis?: boolean;
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {
-  activationWidth?: number;
-  actorFont?: FontCalculator;
-  actorFontFamily?: string;
-  actorFontSize?: string | number;
-  actorFontWeight?: string | number;
-  actorMargin?: number;
   arrowMarkerAbsolute?: boolean;
-  bottomMarginAdj?: number;
-  boxMargin?: number;
-  boxTextMargin?: number;
+  hideUnusedParticipants?: boolean;
+  activationWidth?: number;
   diagramMarginX?: number;
   diagramMarginY?: number;
-  forceMenus?: boolean;
-  hideUnusedParticipants?: boolean;
-  labelBoxHeight?: number;
-  labelBoxWidth?: number;
-  messageAlign?: string;
-  messageFont?: FontCalculator;
-  messageFontFamily?: string;
-  messageFontSize?: string | number;
-  messageFontWeight?: string | number;
-  messageMargin?: number;
-  mirrorActors?: boolean;
-  noteAlign?: string;
-  noteFont?: FontCalculator;
-  noteFontFamily?: string;
-  noteFontSize?: string | number;
-  noteFontWeight?: string | number;
+  actorMargin?: number;
+  width?: number;
+  height?: number;
+  boxMargin?: number;
+  boxTextMargin?: number;
   noteMargin?: number;
+  messageMargin?: number;
+  messageAlign?: string;
+  mirrorActors?: boolean;
+  forceMenus?: boolean;
+  bottomMarginAdj?: number;
   rightAngles?: boolean;
   showSequenceNumbers?: boolean;
+  actorFontSize?: string | number;
+  actorFontFamily?: string;
+  actorFontWeight?: string | number;
+  noteFontSize?: string | number;
+  noteFontFamily?: string;
+  noteFontWeight?: string | number;
+  noteAlign?: string;
+  messageFontSize?: string | number;
+  messageFontFamily?: string;
+  messageFontWeight?: string | number;
   wrap?: boolean;
   wrapPadding?: number;
+  labelBoxWidth?: number;
+  labelBoxHeight?: number;
+  messageFont?: FontCalculator;
+  noteFont?: FontCalculator;
+  actorFont?: FontCalculator;
 }
 
 export interface FlowchartDiagramConfig extends BaseDiagramConfig {
   arrowMarkerAbsolute?: boolean;
-  curve?: string;
-  defaultRenderer?: string;
   diagramPadding?: number;
   htmlLabels?: boolean;
   nodeSpacing?: number;
-  padding?: number;
   rankSpacing?: number;
+  curve?: string;
+  padding?: number;
+  defaultRenderer?: string;
 }
 
 export interface FontConfig {
-  fontFamily?: string;
   fontSize?: string | number;
+  fontFamily?: string;
   fontWeight?: string | number;
 }
 

src/dagre-wrapper/createLabel.js

@@ -1,11 +1,9 @@
 import { select } from 'd3';
 import { log } from '../logger';
 import { getConfig } from '../config';
-import { sanitizeText, evaluate } from '../diagrams/common/common';
+import { evaluate } from '../diagrams/common/common';
 import { decodeEntities } from '../mermaidAPI';
 
-const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());
-
 /**
  * @param dom
  * @param styleFn

src/dagre-wrapper/markers.js

@@ -119,7 +119,7 @@ const dependency = (elem, type) => {
     .append('path')
     .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
 };
-const lollipop = (elem, type, id) => {
+const lollipop = (elem, type) => {
   elem
     .append('defs')
     .append('marker')

src/dagre-wrapper/nodes.js

@@ -6,9 +6,7 @@ import intersect from './intersect/index.js';
 import createLabel from './createLabel';
 import note from './shapes/note';
 import { parseMember } from '../diagrams/class/svgDraw';
-import { evaluate, sanitizeText as sanitize } from '../diagrams/common/common';
-
-const sanitizeText = (txt) => sanitize(txt, getConfig());
+import { evaluate } from '../diagrams/common/common';
 
 const question = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
@@ -348,7 +346,7 @@ const rect = (parent, node) => {
 };
 
 const labelRect = (parent, node) => {
-  const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'label', true);
+  const { shapeSvg } = labelHelper(parent, node, 'label', true);
 
   log.trace('Classes = ', node.classes);
   // add the rect

src/defaultConfig.ts

@@ -228,9 +228,9 @@ const config: Partial<MermaidConfig> = {
      * Decides which rendering engine that is to be used for the rendering. Legal values are:
      * dagre-d3 dagre-wrapper - wrapper for dagre implemented in mermaid
      *
-     * Default value: 'dagre-d3'
+     * Default value: 'dagre-wrapper'
      */
-    defaultRenderer: 'dagre-d3',
+    defaultRenderer: 'dagre-wrapper',
   },
 
   /** The object containing configurations specific for sequence diagrams */
@@ -387,7 +387,8 @@ const config: Partial<MermaidConfig> = {
      *
      * **Notes:**
      *
-     * This will display arrows that start and begin at the same node as right angles, rather than a curve
+     * This will display arrows that start and begin at the same node as right angles, rather than a
+     * curve
      *
      * Default value: false
      */
@@ -802,7 +803,8 @@ const config: Partial<MermaidConfig> = {
      *
      * **Notes:**
      *
-     * This will display arrows that start and begin at the same node as right angles, rather than a curves
+     * This will display arrows that start and begin at the same node as right angles, rather than a
+     * curves
      *
      * Default value: false
      */

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<string, DiagramDetector> = {};
-const diagramMatchers: Record<string, RegExp> = {
-  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<string, RegExp> = {
  */
 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;
     }
   }

src/diagram-api/diagram-orchestration.ts

@@ -1,20 +1,336 @@
 import { registerDiagram } from './diagramAPI';
-import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
-import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
-// @ts-ignore
+
+// @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
+// @ts-ignore: TODO Fix ts errors
 import gitGraphParser from '../diagrams/git/parser/gitGraph';
 import { gitGraphDetector } from '../diagrams/git/gitGraphDetector';
+import gitGraphDb from '../diagrams/git/gitGraphAst';
+import gitGraphRenderer from '../diagrams/git/gitGraphRenderer';
 import gitGraphStyles from '../diagrams/git/styles';
 
+// @ts-ignore: TODO Fix ts errors
+import c4Parser from '../diagrams/c4/parser/c4Diagram';
+import { c4Detector } from '../diagrams/c4/c4Detector';
+import c4Db from '../diagrams/c4/c4Db';
+import c4Renderer from '../diagrams/c4/c4Renderer';
+import c4Styles from '../diagrams/c4/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import classParser from '../diagrams/class/parser/classDiagram';
+import { classDetector } from '../diagrams/class/classDetector';
+import { classDetectorV2 } from '../diagrams/class/classDetector-V2';
+import classDb from '../diagrams/class/classDb';
+import classRenderer from '../diagrams/class/classRenderer';
+import classRendererV2 from '../diagrams/class/classRenderer-v2';
+import classStyles from '../diagrams/class/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import erParser from '../diagrams/er/parser/erDiagram';
+import { erDetector } from '../diagrams/er/erDetector';
+import erDb from '../diagrams/er/erDb';
+import erRenderer from '../diagrams/er/erRenderer';
+import erStyles from '../diagrams/er/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import flowParser from '../diagrams/flowchart/parser/flow';
+import { flowDetector } from '../diagrams/flowchart/flowDetector';
+import { flowDetectorV2 } from '../diagrams/flowchart/flowDetector-v2';
+import flowDb from '../diagrams/flowchart/flowDb';
+import flowRenderer from '../diagrams/flowchart/flowRenderer';
+import flowRendererV2 from '../diagrams/flowchart/flowRenderer-v2';
+import flowStyles from '../diagrams/flowchart/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import ganttParser from '../diagrams/gantt/parser/gantt';
+import { ganttDetector } from '../diagrams/gantt/ganttDetector';
+import ganttDb from '../diagrams/gantt/ganttDb';
+import ganttRenderer from '../diagrams/gantt/ganttRenderer';
+import ganttStyles from '../diagrams/gantt/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import infoParser from '../diagrams/info/parser/info';
+import infoDb from '../diagrams/info/infoDb';
+import infoRenderer from '../diagrams/info/infoRenderer';
+import { infoDetector } from '../diagrams/info/infoDetector';
+import infoStyles from '../diagrams/info/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import pieParser from '../diagrams/pie/parser/pie';
+import { pieDetector } from '../diagrams/pie/pieDetector';
+import pieDb from '../diagrams/pie/pieDb';
+import pieRenderer from '../diagrams/pie/pieRenderer';
+import pieStyles from '../diagrams/pie/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import requirementParser from '../diagrams/requirement/parser/requirementDiagram';
+import { requirementDetector } from '../diagrams/requirement/requirementDetector';
+import requirementDb from '../diagrams/requirement/requirementDb';
+import requirementRenderer from '../diagrams/requirement/requirementRenderer';
+import requirementStyles from '../diagrams/requirement/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import sequenceParser from '../diagrams/sequence/parser/sequenceDiagram';
+import { sequenceDetector } from '../diagrams/sequence/sequenceDetector';
+import sequenceDb from '../diagrams/sequence/sequenceDb';
+import sequenceRenderer from '../diagrams/sequence/sequenceRenderer';
+import sequenceStyles from '../diagrams/sequence/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import stateParser from '../diagrams/state/parser/stateDiagram';
+import { stateDetector } from '../diagrams/state/stateDetector';
+import { stateDetectorV2 } from '../diagrams/state/stateDetector-V2';
+import stateDb from '../diagrams/state/stateDb';
+import stateRenderer from '../diagrams/state/stateRenderer';
+import stateRendererV2 from '../diagrams/state/stateRenderer-v2';
+import stateStyles from '../diagrams/state/styles';
+
+// @ts-ignore: TODO Fix ts errors
+import journeyParser from '../diagrams/user-journey/parser/journey';
+import { journeyDetector } from '../diagrams/user-journey/journeyDetector';
+import journeyDb from '../diagrams/user-journey/journeyDb';
+import journeyRenderer from '../diagrams/user-journey/journeyRenderer';
+import journeyStyles from '../diagrams/user-journey/styles';
+
+import errorRenderer from '../diagrams/error/errorRenderer';
+import errorStyles from '../diagrams/error/styles';
+
 export const addDiagrams = () => {
-  // Register mindmap and other built-in diagrams
+  registerDiagram(
+    'error',
+    // Special diagram with error messages but setup as a regular diagram
+    {
+      db: {
+        clear: () => {
+          // Quite ok, clear needs to be there for error to work as a regular diagram
+        },
+      },
+      styles: errorStyles,
+      renderer: errorRenderer,
+      parser: {
+        parser: { yy: {} },
+        parse: () => {
+          // no op
+        },
+      },
+      init: () => {
+        // no op
+      },
+    },
+    (text) => text.toLowerCase().trim() === 'error'
+  );
+  registerDiagram(
+    '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 },

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', () => {

src/diagram-api/diagramAPI.ts

@@ -1,70 +1,23 @@
-import c4Db from '../diagrams/c4/c4Db';
-import c4Renderer from '../diagrams/c4/c4Renderer';
-import c4Styles from '../diagrams/c4/styles';
-// @ts-ignore
-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
-import classParser from '../diagrams/class/parser/classDiagram';
-import erDb from '../diagrams/er/erDb';
-import erRenderer from '../diagrams/er/erRenderer';
-// @ts-ignore
-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
-import flowParser from '../diagrams/flowchart/parser/flow';
-import ganttDb from '../diagrams/gantt/ganttDb';
-import ganttRenderer from '../diagrams/gantt/ganttRenderer';
-// @ts-ignore
-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
-import infoParser from '../diagrams/info/parser/info';
-import infoStyles from '../diagrams/info/styles';
-// @ts-ignore
-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
-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
-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
-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
-import journeyParser from '../diagrams/user-journey/parser/journey';
-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;
@@ -73,158 +26,7 @@ export interface DiagramDefinition {
   init?: (config: MermaidConfig) => void;
 }
 
-const diagrams: Record<string, DiagramDefinition> = {
-  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<string, DiagramDefinition> = {};
 
 export const registerDiagram = (
   id: string,
@@ -245,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;

src/diagrams/c4/c4Db.js

@@ -1,6 +1,5 @@
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
-import { log } from '../../logger';
 import { sanitizeText } from '../common/common';
 import { setAccTitle, getAccTitle, getAccDescription, setAccDescription } from '../../commonDb';
 
@@ -21,7 +20,6 @@ let boundarys = [
 let rels = [];
 let title = '';
 let wrapEnabled = false;
-let description = '';
 let c4ShapeInRow = 4;
 let c4BoundaryInRow = 2;
 var c4Type;
@@ -636,13 +634,13 @@ export const updateLayoutConfig = function (typeC4Shape, c4ShapeInRowParam, c4Bo
   let c4BoundaryInRowValue = c4BoundaryInRow;
 
   if (typeof c4ShapeInRowParam === 'object') {
-    let [key, value] = Object.entries(c4ShapeInRowParam)[0];
+    const value = Object.values(c4ShapeInRowParam)[0];
     c4ShapeInRowValue = parseInt(value);
   } else {
     c4ShapeInRowValue = parseInt(c4ShapeInRowParam);
   }
   if (typeof c4BoundaryInRowParam === 'object') {
-    let [key, value] = Object.entries(c4BoundaryInRowParam)[0];
+    const value = Object.values(c4BoundaryInRowParam)[0];
     c4BoundaryInRowValue = parseInt(value);
   } else {
     c4BoundaryInRowValue = parseInt(c4BoundaryInRowParam);
@@ -721,7 +719,6 @@ export const clear = function () {
   boundaryParseStack = [''];
   title = '';
   wrapEnabled = false;
-  description = '';
   c4ShapeInRow = 4;
   c4BoundaryInRow = 2;
 };

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

src/diagrams/c4/c4Renderer.js

@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
+import svgDraw from './svgDraw';
 import { log } from '../../logger';
 import { parser } from './parser/c4Diagram';
 import common from '../common/common';
@@ -298,7 +298,7 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray,
 
     currentBounds.insert(c4Shape);
 
-    const height = svgDraw.drawC4Shape(diagram, c4Shape, conf);
+    svgDraw.drawC4Shape(diagram, c4Shape, conf);
   }
 
   currentBounds.bumpLastMargin(conf.c4ShapeMargin);
@@ -616,7 +616,6 @@ export const draw = function (_text, id, _version, diagObj) {
   globalBoundaryMaxY = conf.diagramMarginY;
 
   const title = diagObj.db.getTitle();
-  const c4type = diagObj.db.getC4Type();
   let currentBoundarys = diagObj.db.getBoundarys('');
   // switch (c4type) {
   //   case 'C4Context':

src/diagrams/c4/parser/c4Boundary.spec.js

@@ -0,0 +1,110 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each(['Boundary'])('parsing a C4 %s', function (macroName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Boundary correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    const yy = c4.parser.yy;
+
+    const boundaries = yy.getBoundarys();
+    expect(boundaries.length).toBe(2);
+    const boundary = boundaries[1];
+
+    expect(boundary).toEqual({
+      alias: 'b1',
+      label: {
+        text: 'BankBoundary',
+      },
+      // TODO: Why are link, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
+      link: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      type: {
+        // TODO: Why is this `system` instead of `boundary`?
+        text: 'system',
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      alias: 'b1',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "BankBoundary") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: 'BankBoundary',
+      },
+    });
+  });
+
+  it('should parse the type', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, "", "company") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      type: { text: 'company' },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, $link="https://github.com/mermaidjs") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+${macroName}(b1, $tags="tag1,tag2") {
+System(SystemAA, "Internet Banking System")
+}`);
+
+    expect(c4.parser.yy.getBoundarys()[1]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});

src/diagrams/c4/parser/c4Diagram.jison

@@ -115,80 +115,80 @@ accDescr\s*"{"\s*                         { this.begin("acc_descr_multiline");}
 "C4Dynamic"                               return 'C4_DYNAMIC';
 "C4Deployment"                            return 'C4_DEPLOYMENT';
 
-"Person_Ext"                              { this.begin("person_ext"); console.log('begin person_ext'); return 'PERSON_EXT';}
-"Person"                                  { this.begin("person"); console.log('begin person'); return 'PERSON';}
-"SystemQueue_Ext"                         { this.begin("system_ext_queue"); console.log('begin system_ext_queue'); return 'SYSTEM_EXT_QUEUE';}
-"SystemDb_Ext"                            { this.begin("system_ext_db"); console.log('begin system_ext_db'); return 'SYSTEM_EXT_DB';}
-"System_Ext"                              { this.begin("system_ext"); console.log('begin system_ext'); return 'SYSTEM_EXT';}
-"SystemQueue"                             { this.begin("system_queue"); console.log('begin system_queue'); return 'SYSTEM_QUEUE';}
-"SystemDb"                                { this.begin("system_db"); console.log('begin system_db'); return 'SYSTEM_DB';}
-"System"                                  { this.begin("system"); console.log('begin system'); return 'SYSTEM';}
+"Person_Ext"                              { this.begin("person_ext"); return 'PERSON_EXT';}
+"Person"                                  { this.begin("person"); return 'PERSON';}
+"SystemQueue_Ext"                         { this.begin("system_ext_queue"); return 'SYSTEM_EXT_QUEUE';}
+"SystemDb_Ext"                            { this.begin("system_ext_db"); return 'SYSTEM_EXT_DB';}
+"System_Ext"                              { this.begin("system_ext"); return 'SYSTEM_EXT';}
+"SystemQueue"                             { this.begin("system_queue"); return 'SYSTEM_QUEUE';}
+"SystemDb"                                { this.begin("system_db"); return 'SYSTEM_DB';}
+"System"                                  { this.begin("system"); return 'SYSTEM';}
 
-"Boundary"                                { this.begin("boundary"); console.log('begin boundary'); return 'BOUNDARY';}
-"Enterprise_Boundary"                     { this.begin("enterprise_boundary"); console.log('begin enterprise_boundary'); return 'ENTERPRISE_BOUNDARY';}
-"System_Boundary"                         { this.begin("system_boundary"); console.log('begin system_boundary'); return 'SYSTEM_BOUNDARY';}
+"Boundary"                                { this.begin("boundary"); return 'BOUNDARY';}
+"Enterprise_Boundary"                     { this.begin("enterprise_boundary"); return 'ENTERPRISE_BOUNDARY';}
+"System_Boundary"                         { this.begin("system_boundary"); return 'SYSTEM_BOUNDARY';}
 
-"ContainerQueue_Ext"                         { this.begin("container_ext_queue"); console.log('begin container_ext_queue'); return 'CONTAINER_EXT_QUEUE';}
-"ContainerDb_Ext"                            { this.begin("container_ext_db"); console.log('begin container_ext_db'); return 'CONTAINER_EXT_DB';}
-"Container_Ext"                              { this.begin("container_ext"); console.log('begin container_ext'); return 'CONTAINER_EXT';}
-"ContainerQueue"                             { this.begin("container_queue"); console.log('begin container_queue'); return 'CONTAINER_QUEUE';}
-"ContainerDb"                                { this.begin("container_db"); console.log('begin container_db'); return 'CONTAINER_DB';}
-"Container"                                  { this.begin("container"); console.log('begin container'); return 'CONTAINER';}
+"ContainerQueue_Ext"                         { this.begin("container_ext_queue"); return 'CONTAINER_EXT_QUEUE';}
+"ContainerDb_Ext"                            { this.begin("container_ext_db"); return 'CONTAINER_EXT_DB';}
+"Container_Ext"                              { this.begin("container_ext"); return 'CONTAINER_EXT';}
+"ContainerQueue"                             { this.begin("container_queue"); return 'CONTAINER_QUEUE';}
+"ContainerDb"                                { this.begin("container_db"); return 'CONTAINER_DB';}
+"Container"                                  { this.begin("container"); return 'CONTAINER';}
 
-"Container_Boundary"                         { this.begin("container_boundary"); console.log('begin container_boundary'); return 'CONTAINER_BOUNDARY';}
+"Container_Boundary"                         { this.begin("container_boundary"); return 'CONTAINER_BOUNDARY';}
 
-"ComponentQueue_Ext"                         { this.begin("component_ext_queue"); console.log('begin component_ext_queue'); return 'COMPONENT_EXT_QUEUE';}
-"ComponentDb_Ext"                            { this.begin("component_ext_db"); console.log('begin component_ext_db'); return 'COMPONENT_EXT_DB';}
-"Component_Ext"                              { this.begin("component_ext"); console.log('begin component_ext'); return 'COMPONENT_EXT';}
-"ComponentQueue"                             { this.begin("component_queue"); console.log('begin component_queue'); return 'COMPONENT_QUEUE';}
-"ComponentDb"                                { this.begin("component_db"); console.log('begin component_db'); return 'COMPONENT_DB';}
-"Component"                                  { this.begin("component"); console.log('begin component'); return 'COMPONENT';}
+"ComponentQueue_Ext"                         { this.begin("component_ext_queue"); return 'COMPONENT_EXT_QUEUE';}
+"ComponentDb_Ext"                            { this.begin("component_ext_db"); return 'COMPONENT_EXT_DB';}
+"Component_Ext"                              { this.begin("component_ext"); return 'COMPONENT_EXT';}
+"ComponentQueue"                             { this.begin("component_queue"); return 'COMPONENT_QUEUE';}
+"ComponentDb"                                { this.begin("component_db"); return 'COMPONENT_DB';}
+"Component"                                  { this.begin("component"); return 'COMPONENT';}
 
-"Deployment_Node"                         { this.begin("node"); console.log('begin node'); return 'NODE';}
-"Node"                                    { this.begin("node"); console.log('begin node'); return 'NODE';}
-"Node_L"                                  { this.begin("node_l"); console.log('begin node_l'); return 'NODE_L';}
-"Node_R"                                  { this.begin("node_r"); console.log('begin node_r'); return 'NODE_R';}
+"Deployment_Node"                         { this.begin("node"); return 'NODE';}
+"Node"                                    { this.begin("node"); return 'NODE';}
+"Node_L"                                  { this.begin("node_l"); return 'NODE_L';}
+"Node_R"                                  { this.begin("node_r"); return 'NODE_R';}
 
 
-"Rel"                                     { this.begin("rel"); console.log('begin rel'); return 'REL';} 
-"BiRel"                                   { this.begin("birel"); console.log('begin birel'); return 'BIREL';} 
-"Rel_Up"                                  { this.begin("rel_u"); console.log('begin rel_u'); return 'REL_U';}  
-"Rel_U"                                   { this.begin("rel_u"); console.log('begin rel_u'); return 'REL_U';}  
-"Rel_Down"                                { this.begin("rel_d"); console.log('begin rel_d'); return 'REL_D';}  
-"Rel_D"                                   { this.begin("rel_d"); console.log('begin rel_d'); return 'REL_D';}  
-"Rel_Left"                                { this.begin("rel_l"); console.log('begin rel_l'); return 'REL_L';}  
-"Rel_L"                                   { this.begin("rel_l"); console.log('begin rel_l'); return 'REL_L';}  
-"Rel_Right"                               { this.begin("rel_r"); console.log('begin rel_r'); return 'REL_R';}  
-"Rel_R"                                   { this.begin("rel_r"); console.log('begin rel_r'); return 'REL_R';}  
-"Rel_Back"                                { this.begin("rel_b"); console.log('begin rel_b'); return 'REL_B';}  
-"RelIndex"                                { this.begin("rel_index"); console.log('begin rel_index'); return 'REL_INDEX';} 
+"Rel"                                     { this.begin("rel"); return 'REL';} 
+"BiRel"                                   { this.begin("birel"); return 'BIREL';} 
+"Rel_Up"                                  { this.begin("rel_u"); return 'REL_U';}  
+"Rel_U"                                   { this.begin("rel_u"); return 'REL_U';}  
+"Rel_Down"                                { this.begin("rel_d"); return 'REL_D';}  
+"Rel_D"                                   { this.begin("rel_d"); return 'REL_D';}  
+"Rel_Left"                                { this.begin("rel_l"); return 'REL_L';}  
+"Rel_L"                                   { this.begin("rel_l"); return 'REL_L';}  
+"Rel_Right"                               { this.begin("rel_r"); return 'REL_R';}  
+"Rel_R"                                   { this.begin("rel_r"); return 'REL_R';}  
+"Rel_Back"                                { this.begin("rel_b"); return 'REL_B';}  
+"RelIndex"                                { this.begin("rel_index"); return 'REL_INDEX';} 
 
-"UpdateElementStyle"                      { this.begin("update_el_style"); console.log('begin update_el_style'); return 'UPDATE_EL_STYLE';}  
-"UpdateRelStyle"                          { this.begin("update_rel_style"); console.log('begin update_rel_style'); return 'UPDATE_REL_STYLE';} 
-"UpdateLayoutConfig"                      { this.begin("update_layout_config"); console.log('begin update_layout_config'); return 'UPDATE_LAYOUT_CONFIG';} 
+"UpdateElementStyle"                      { this.begin("update_el_style"); return 'UPDATE_EL_STYLE';}  
+"UpdateRelStyle"                          { this.begin("update_rel_style"); return 'UPDATE_REL_STYLE';} 
+"UpdateLayoutConfig"                      { this.begin("update_layout_config"); return 'UPDATE_LAYOUT_CONFIG';} 
 
 <person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config><<EOF>>                return "EOF_IN_STRUCT";
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { console.log('begin attribute with ATTRIBUTE_EMPTY'); this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { console.log('begin attribute'); this.begin("attribute"); }
-<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { console.log('STOP attribute'); this.popState();console.log('STOP diagram'); this.popState();}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(][ ]*[,]             { this.begin("attribute"); return "ATTRIBUTE_EMPTY";}
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config>[(]                    { this.begin("attribute"); }
+<person,person_ext,system_ext_queue,system_ext_db,system_ext,system_queue,system_db,system,boundary,enterprise_boundary,system_boundary,container_ext_db,container_ext,container_queue,container_db,container,container_boundary,component_ext_db,component_ext,component_queue,component_db,component,node,node_l,node_r,rel,birel,rel_u,rel_d,rel_l,rel_r,rel_b,rel_index,update_el_style,update_rel_style,update_layout_config,attribute>[)]          { this.popState();this.popState();}
 
-<attribute>",,"                           { console.log(',,'); return 'ATTRIBUTE_EMPTY';}
-<attribute>","                            { console.log(','); }
-<attribute>[ ]*["]["]                     { console.log('ATTRIBUTE_EMPTY'); return 'ATTRIBUTE_EMPTY';}
-<attribute>[ ]*["]                        { console.log('begin string'); this.begin("string");}
-<string>["]                               { console.log('STOP string');  this.popState(); }
-<string>[^"]*                             { console.log('STR'); return "STR";}
+<attribute>",,"                           { return 'ATTRIBUTE_EMPTY';}
+<attribute>","                            { }
+<attribute>[ ]*["]["]                     { return 'ATTRIBUTE_EMPTY';}
+<attribute>[ ]*["]                        { this.begin("string");}
+<string>["]                               {  this.popState(); }
+<string>[^"]*                             { return "STR";}
 
-<attribute>[ ]*[\$]                       { console.log('begin string_kv'); this.begin("string_kv");}
-<string_kv>[^=]*                          { console.log('STR_KEY'); this.begin("string_kv_key"); return "STR_KEY";}
-<string_kv_key>[=][ ]*["]                 { console.log('begin string_kv_value'); this.popState(); this.begin("string_kv_value"); }
-<string_kv_value>[^"]+                    { console.log('STR_VALUE'); return "STR_VALUE";}
-<string_kv_value>["]                      { console.log('STOP string_kv_value'); this.popState(); this.popState(); }
+<attribute>[ ]*[\$]                       { this.begin("string_kv");}
+<string_kv>[^=]*                          { this.begin("string_kv_key"); return "STR_KEY";}
+<string_kv_key>[=][ ]*["]                 { this.popState(); this.begin("string_kv_value"); }
+<string_kv_value>[^"]+                    { return "STR_VALUE";}
+<string_kv_value>["]                      { this.popState(); this.popState(); }
 
-<attribute>[^,]+                          { console.log('not STR'); return "STR";}
+<attribute>[^,]+                          { return "STR";}
 
-'{'                                       { /* this.begin("lbrace"); */ console.log('begin boundary block'); return "LBRACE";}
-'}'                                       { /* this.popState(); */ console.log('STOP boundary block'); return "RBRACE";}
+'{'                                       { /* this.begin("lbrace"); */ return "LBRACE";}
+'}'                                       { /* this.popState(); */ return "RBRACE";}
    
 [\s]+                                     return 'SPACE';
 [\n\r]+                                   return 'EOL';
@@ -231,7 +231,7 @@ directive
   ;
 
 openDirective
-  : open_directive { console.log("open_directive: ", $1); yy.parseDirective('%%{', 'open_directive'); }
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
   ;
 
 typeDirective
@@ -239,11 +239,11 @@ typeDirective
   ;
 
 argDirective
-  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); console.log("arg_directive: ", $1); yy.parseDirective($1, 'arg_directive'); }
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
   ;
 
 closeDirective
-  : close_directive { console.log("close_directive: ", $1); yy.parseDirective('}%%', 'close_directive', 'c4Context');  }
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'c4Context');  }
   ;
 
 graphConfig
@@ -285,13 +285,13 @@ boundaryStartStatement
     ;
 
 boundaryStart
-    : ENTERPRISE_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | SYSTEM_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | BOUNDARY attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | CONTAINER_BOUNDARY attributes {console.log($1,JSON.stringify($2)); $2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
-    | NODE attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('node', ...$2); $$=$2;}
-    | NODE_L attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('nodeL', ...$2); $$=$2;}
-    | NODE_R attributes {console.log($1,JSON.stringify($2)); yy.addDeploymentNode('nodeR', ...$2); $$=$2;}
+    : ENTERPRISE_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | BOUNDARY attributes {yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | CONTAINER_BOUNDARY attributes {$2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
+    | NODE attributes {yy.addDeploymentNode('node', ...$2); $$=$2;}
+    | NODE_L attributes {yy.addDeploymentNode('nodeL', ...$2); $$=$2;}
+    | NODE_R attributes {yy.addDeploymentNode('nodeR', ...$2); $$=$2;}
     ;
 
 boundaryStopStatement
@@ -305,48 +305,48 @@ diagramStatements
     ;
 
 diagramStatement
-    : PERSON attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('person', ...$2); $$=$2;}
-    | PERSON_EXT attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_person', ...$2); $$=$2;}
-    | SYSTEM attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('system', ...$2); $$=$2;}
-    | SYSTEM_DB attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('system_db', ...$2); $$=$2;}
-    | SYSTEM_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('system_queue', ...$2); $$=$2;}
-    | SYSTEM_EXT attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
-    | SYSTEM_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
-    | SYSTEM_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}      
-    | CONTAINER attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container', ...$2); $$=$2;}
-    | CONTAINER_DB attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container_db', ...$2); $$=$2;}
-    | CONTAINER_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addContainer('container_queue', ...$2); $$=$2;}
-    | CONTAINER_EXT attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container', ...$2); $$=$2;}
-    | CONTAINER_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container_db', ...$2); $$=$2;}
-    | CONTAINER_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addContainer('external_container_queue', ...$2); $$=$2;}      
-    | COMPONENT attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component', ...$2); $$=$2;}
-    | COMPONENT_DB attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component_db', ...$2); $$=$2;}
-    | COMPONENT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addComponent('component_queue', ...$2); $$=$2;}
-    | COMPONENT_EXT attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component', ...$2); $$=$2;}
-    | COMPONENT_EXT_DB attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component_db', ...$2); $$=$2;}
-    | COMPONENT_EXT_QUEUE attributes {console.log($1,JSON.stringify($2)); yy.addComponent('external_component_queue', ...$2); $$=$2;}      
+    : PERSON attributes {yy.addPersonOrSystem('person', ...$2); $$=$2;}
+    | PERSON_EXT attributes {yy.addPersonOrSystem('external_person', ...$2); $$=$2;}
+    | SYSTEM attributes {yy.addPersonOrSystem('system', ...$2); $$=$2;}
+    | SYSTEM_DB attributes {yy.addPersonOrSystem('system_db', ...$2); $$=$2;}
+    | SYSTEM_QUEUE attributes {yy.addPersonOrSystem('system_queue', ...$2); $$=$2;}
+    | SYSTEM_EXT attributes {yy.addPersonOrSystem('external_system', ...$2); $$=$2;}
+    | SYSTEM_EXT_DB attributes {yy.addPersonOrSystem('external_system_db', ...$2); $$=$2;}
+    | SYSTEM_EXT_QUEUE attributes {yy.addPersonOrSystem('external_system_queue', ...$2); $$=$2;}      
+    | CONTAINER attributes {yy.addContainer('container', ...$2); $$=$2;}
+    | CONTAINER_DB attributes {yy.addContainer('container_db', ...$2); $$=$2;}
+    | CONTAINER_QUEUE attributes {yy.addContainer('container_queue', ...$2); $$=$2;}
+    | CONTAINER_EXT attributes {yy.addContainer('external_container', ...$2); $$=$2;}
+    | CONTAINER_EXT_DB attributes {yy.addContainer('external_container_db', ...$2); $$=$2;}
+    | CONTAINER_EXT_QUEUE attributes {yy.addContainer('external_container_queue', ...$2); $$=$2;}      
+    | COMPONENT attributes {yy.addComponent('component', ...$2); $$=$2;}
+    | COMPONENT_DB attributes {yy.addComponent('component_db', ...$2); $$=$2;}
+    | COMPONENT_QUEUE attributes {yy.addComponent('component_queue', ...$2); $$=$2;}
+    | COMPONENT_EXT attributes {yy.addComponent('external_component', ...$2); $$=$2;}
+    | COMPONENT_EXT_DB attributes {yy.addComponent('external_component_db', ...$2); $$=$2;}
+    | COMPONENT_EXT_QUEUE attributes {yy.addComponent('external_component_queue', ...$2); $$=$2;}      
     | boundaryStatement
-    | REL attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel', ...$2); $$=$2;}
-    | BIREL attributes {console.log($1,JSON.stringify($2)); yy.addRel('birel', ...$2); $$=$2;}
-    | REL_U attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_u', ...$2); $$=$2;}
-    | REL_D attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_d', ...$2); $$=$2;}
-    | REL_L attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_l', ...$2); $$=$2;}
-    | REL_R attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_r', ...$2); $$=$2;}
-    | REL_B attributes {console.log($1,JSON.stringify($2)); yy.addRel('rel_b', ...$2); $$=$2;}
-    | REL_INDEX attributes {console.log($1,JSON.stringify($2)); $2.splice(0, 1); yy.addRel('rel', ...$2); $$=$2;}
-    | UPDATE_EL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateElStyle('update_el_style', ...$2); $$=$2;}
-    | UPDATE_REL_STYLE attributes {console.log($1,JSON.stringify($2)); yy.updateRelStyle('update_rel_style', ...$2); $$=$2;}
-    | UPDATE_LAYOUT_CONFIG attributes {console.log($1,JSON.stringify($2)); yy.updateLayoutConfig('update_layout_config', ...$2); $$=$2;}
+    | REL attributes {yy.addRel('rel', ...$2); $$=$2;}
+    | BIREL attributes {yy.addRel('birel', ...$2); $$=$2;}
+    | REL_U attributes {yy.addRel('rel_u', ...$2); $$=$2;}
+    | REL_D attributes {yy.addRel('rel_d', ...$2); $$=$2;}
+    | REL_L attributes {yy.addRel('rel_l', ...$2); $$=$2;}
+    | REL_R attributes {yy.addRel('rel_r', ...$2); $$=$2;}
+    | REL_B attributes {yy.addRel('rel_b', ...$2); $$=$2;}
+    | REL_INDEX attributes {$2.splice(0, 1); yy.addRel('rel', ...$2); $$=$2;}
+    | UPDATE_EL_STYLE attributes {yy.updateElStyle('update_el_style', ...$2); $$=$2;}
+    | UPDATE_REL_STYLE attributes {yy.updateRelStyle('update_rel_style', ...$2); $$=$2;}
+    | UPDATE_LAYOUT_CONFIG attributes {yy.updateLayoutConfig('update_layout_config', ...$2); $$=$2;}
     ;
 
 attributes
-    : attribute { console.log('PUSH ATTRIBUTE: ', $1); $$ = [$1]; }
-    | attribute attributes { console.log('PUSH ATTRIBUTE: ', $1); $2.unshift($1); $$=$2;}
+    : attribute { $$ = [$1]; }
+    | attribute attributes { $2.unshift($1); $$=$2;}
     ;
 
 attribute
     : STR {  $$ = $1.trim(); }
-    | STR_KEY STR_VALUE { console.log('kv: ', $1, $2); let kv={}; kv[$1.trim()]=$2.trim(); $$=kv; }
+    | STR_KEY STR_VALUE { let kv={}; kv[$1.trim()]=$2.trim(); $$=kv; }
     | ATTRIBUTE {  $$ = $1.trim(); }
     | ATTRIBUTE_EMPTY {  $$ = ""; }
     ;

src/diagrams/c4/parser/c4Diagram.spec.js

@@ -1,49 +1,20 @@
-import flowDb from '../c4Db';
-import flow from './c4Diagram.jison';
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
 import { setConfig } from '../../../config';
 
 setConfig({
   securityLevel: 'strict',
 });
 
-describe('parsing a flow chart', function () {
+describe('parsing a C4 diagram', function () {
   beforeEach(function () {
-    flow.parser.yy = flowDb;
-    flow.parser.yy.clear();
-  });
-
-  it('should parse a C4 diagram with one Person correctly', function () {
-    flow.parser.parse(`C4Context
-title System Context diagram for Internet Banking System
-Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
-
-    const yy = flow.parser.yy;
-    expect(yy.getC4Type()).toBe('C4Context');
-    expect(yy.getTitle()).toBe('System Context diagram for Internet Banking System');
-
-    const shapes = yy.getC4ShapeArray();
-    expect(shapes.length).toBe(1);
-    const onlyShape = shapes[0];
-
-    expect(onlyShape).toEqual({
-      alias: 'customerA',
-      descr: {
-        text: 'A customer of the bank, with personal bank accounts.',
-      },
-      label: {
-        text: 'Banking Customer A',
-      },
-      parentBoundary: 'global',
-      typeC4Shape: {
-        text: 'person',
-      },
-      wrap: false,
-    });
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
   });
 
   it('should handle a trailing whitespaces after statements', function () {
     const whitespace = ' ';
-    const rendered = flow.parser.parse(`C4Context${whitespace}
+    const rendered = c4.parser.parse(`C4Context${whitespace}
 title System Context diagram for Internet Banking System${whitespace}
 Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")${whitespace}`);
 
@@ -51,11 +22,11 @@ Person(customerA, "Banking Customer A", "A customer of the bank, with personal b
   });
 
   it('should handle parameter names that are keywords', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 title title
 Person(Person, "Person", "Person")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
     expect(yy.getTitle()).toBe('title');
 
     const shapes = yy.getC4ShapeArray();
@@ -68,10 +39,10 @@ Person(Person, "Person", "Person")`);
   });
 
   it('should allow default in the parameters', function () {
-    flow.parser.parse(`C4Context
+    c4.parser.parse(`C4Context
 Person(default, "default", "default")`);
 
-    const yy = flow.parser.yy;
+    const yy = c4.parser.yy;
 
     const shapes = yy.getC4ShapeArray();
     expect(shapes.length).toBe(1);

src/diagrams/c4/parser/c4Person.spec.js

@@ -0,0 +1,111 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 Person', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Person correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'customerA',
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+      label: {
+        text: 'Banking Customer A',
+      },
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'person',
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'customerA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Banking Customer A',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, "", "A customer of the bank, with personal bank accounts.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+Person(customerA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});

src/diagrams/c4/parser/c4PersonExt.spec.js

@@ -0,0 +1,116 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe('parsing a C4 Person_Ext', function () {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one Person_Ext correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+Person_Ext(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'customerA',
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+      label: {
+        text: 'Banking Customer A',
+      },
+      // TODO: Why are link, sprite, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: 'external_person',
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'customerA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "Banking Customer A")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Banking Customer A',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, "", "A customer of the bank, with personal bank accounts.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'A customer of the bank, with personal bank accounts.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+Person_Ext(customerA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});

src/diagrams/c4/parser/c4System.spec.js

@@ -0,0 +1,123 @@
+import c4Db from '../c4Db';
+import c4 from './c4Diagram.jison';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict',
+});
+
+describe.each([
+  ['System', 'system'],
+  ['SystemDb', 'system_db'],
+  ['SystemQueue', 'system_queue'],
+  ['System_Ext', 'external_system'],
+  ['SystemDb_Ext', 'external_system_db'],
+  ['SystemQueue_Ext', 'external_system_queue'],
+])('parsing a C4 %s', function (macroName, elementName) {
+  beforeEach(function () {
+    c4.parser.yy = c4Db;
+    c4.parser.yy.clear();
+  });
+
+  it('should parse a C4 diagram with one System correctly', function () {
+    c4.parser.parse(`C4Context
+title System Context diagram for Internet Banking System
+${macroName}(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    const yy = c4.parser.yy;
+
+    const shapes = yy.getC4ShapeArray();
+    expect(shapes.length).toBe(1);
+    const onlyShape = shapes[0];
+
+    expect(onlyShape).toEqual({
+      alias: 'SystemAA',
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+      label: {
+        text: 'Internet Banking System',
+      },
+      // TODO: Why are link, sprite, and tags undefined instead of not appearing at all?
+      //       Compare to Person where they don't show up.
+      link: undefined,
+      sprite: undefined,
+      tags: undefined,
+      parentBoundary: 'global',
+      typeC4Shape: {
+        text: elementName,
+      },
+      wrap: false,
+    });
+  });
+
+  it('should parse the alias', function () {
+    c4.parser.parse(`C4Context
+${macroName}(SystemAA, "Internet Banking System")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      alias: 'SystemAA',
+    });
+  });
+
+  it('should parse the label', function () {
+    c4.parser.parse(`C4Context
+${macroName}(SystemAA, "Internet Banking System")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: 'Internet Banking System',
+      },
+    });
+  });
+
+  it('should parse the description', function () {
+    c4.parser.parse(`C4Context
+${macroName}(SystemAA, "", "Allows customers to view information about their bank accounts, and make payments.")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      descr: {
+        text: 'Allows customers to view information about their bank accounts, and make payments.',
+      },
+    });
+  });
+
+  it('should parse a sprite', function () {
+    c4.parser.parse(`C4Context
+${macroName}(SystemAA, $sprite="users")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          sprite: 'users',
+        },
+      },
+    });
+  });
+
+  it('should parse a link', function () {
+    c4.parser.parse(`C4Context
+${macroName}(SystemAA, $link="https://github.com/mermaidjs")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          link: 'https://github.com/mermaidjs',
+        },
+      },
+    });
+  });
+
+  it('should parse tags', function () {
+    c4.parser.parse(`C4Context
+${macroName}(SystemAA, $tags="tag1,tag2")`);
+
+    expect(c4.parser.yy.getC4ShapeArray()[0]).toMatchObject({
+      label: {
+        text: {
+          tags: 'tag1,tag2',
+        },
+      },
+    });
+  });
+});

src/diagrams/c4/svgDraw.js

@@ -1,5 +1,4 @@
 import common from '../common/common';
-import { addFunction } from '../../interactionDb';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 
 export const drawRect = function (elem, rectData) {

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

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

src/diagrams/class/classDiagramGrammar.spec.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const fs = require('fs');
 
 import { LALRGenerator } from 'jison';

src/diagrams/class/classRenderer-v2.js

@@ -3,7 +3,6 @@ import graphlib from 'graphlib';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
-// import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { curveLinear } from 'd3';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
@@ -11,7 +10,6 @@ import common from '../common/common';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let idCache = {};
-const padding = 20;
 
 const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
 
@@ -235,20 +233,6 @@ export const addRelations = function (relations, g) {
   });
 };
 
-/**
- * Gets the ID with the same label as in the cache
- *
- * @param {string} label The label to look for
- * @returns {string} The resulting ID
- */
-const getGraphId = function (label) {
-  const foundEntry = Object.entries(idCache).find((entry) => entry[1].label === label);
-
-  if (foundEntry) {
-    return foundEntry[0];
-  }
-};
-
 /**
  * Merges the value of `conf` with the passed `cnf`
  *

src/diagrams/class/classRenderer.js

@@ -10,12 +10,6 @@ import addSVGAccessibilityFields from '../../accessibility';
 let idCache = {};
 const padding = 20;
 
-const confa = {
-  dividerMargin: 10,
-  padding: 5,
-  textHeight: 10,
-};
-
 /**
  * Gets the ID with the same label as in the cache
  *
@@ -163,7 +157,6 @@ export const draw = function (text, id, _version, diagObj) {
     securityLevel === 'sandbox'
       ? select(sandboxElement.nodes()[0].contentDocument.body)
       : select('body');
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
   // Fetch the default direction, use TD if none was found
   const diagram = root.select(`[id='${id}']`);

src/diagrams/er/erDb.js

@@ -1,7 +1,7 @@
 import { log } from '../../logger';
 import mermaidAPI from '../../mermaidAPI';
 import * as configApi from '../../config';
-import common from '../common/common';
+
 import {
   setAccTitle,
   getAccTitle,
@@ -12,8 +12,6 @@ import {
 
 let entities = {};
 let relationships = [];
-let title = '';
-let description = '';
 
 const Cardinality = {
   ZERO_OR_ONE: 'ZERO_OR_ONE',
@@ -78,7 +76,6 @@ const getRelationships = () => relationships;
 const clear = function () {
   entities = {};
   relationships = [];
-  title = '';
   commonClear();
 };
 

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

src/diagrams/error/errorRenderer.ts

@@ -1,7 +1,7 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log } from './logger';
-import { getErrorMessage } from './utils';
+import { log } from '../../logger';
+import { getErrorMessage } from '../../utils';
 
 let conf = {};
 
@@ -17,10 +17,11 @@ export const setConf = function (cnf: any) {
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  *
+ * @param text
  * @param {string} id The text for the error
  * @param {string} mermaidVersion The version
  */
-export const draw = (id: string, mermaidVersion: string) => {
+export const draw = (text: string, id: string, mermaidVersion: string) => {
   try {
     log.debug('Renering svg for syntax error\n');
 
@@ -72,22 +73,22 @@ export const draw = (id: string, mermaidVersion: string) => {
 
     g.append('text') // text label for the x axis
       .attr('class', 'error-text')
-      .attr('x', 1240)
+      .attr('x', 1440)
       .attr('y', 250)
       .attr('font-size', '150px')
       .style('text-anchor', 'middle')
       .text('Syntax error in graph');
     g.append('text') // text label for the x axis
       .attr('class', 'error-text')
-      .attr('x', 1050)
+      .attr('x', 1250)
       .attr('y', 400)
       .attr('font-size', '100px')
       .style('text-anchor', 'middle')
       .text('mermaid version ' + mermaidVersion);
 
     svg.attr('height', 100);
-    svg.attr('width', 400);
-    svg.attr('viewBox', '768 0 512 512');
+    svg.attr('width', 500);
+    svg.attr('viewBox', '768 0 912 512');
   } catch (e) {
     log.error('Error while rendering info diagram');
     log.error(getErrorMessage(e));

src/diagrams/error/styles.js

@@ -0,0 +1,3 @@
+const getStyles = () => ``;
+
+export default getStyles;

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

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

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

src/diagrams/flowchart/flowRenderer.js

@@ -29,8 +29,6 @@ export const setConf = function (cnf) {
  * @param diagObj
  */
 export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
-  const securityLevel = getConfig().securityLevel;
-
   const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
   const doc = !_doc ? document : _doc;
   const keys = Object.keys(vert);

src/diagrams/gantt/ganttDb.js

@@ -4,7 +4,7 @@ import { log } from '../../logger';
 import * as configApi from '../../config';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
-import common from '../common/common';
+
 import {
   setAccTitle,
   getAccTitle,
@@ -21,8 +21,6 @@ let todayMarker = '';
 let includes = [];
 let excludes = [];
 let links = {};
-let title = '';
-let accDescription = '';
 let sections = [];
 let tasks = [];
 let currentSection = '';
@@ -34,10 +32,6 @@ let topAxis = false;
 // The serial order of the task in the script
 let lastOrder = 0;
 
-const sanitizeText = function (txt) {
-  return common.sanitizeText(txt, configApi.getConfig());
-};
-
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
@@ -47,7 +41,6 @@ export const clear = function () {
   tasks = [];
   currentSection = '';
   funs = [];
-  title = '';
   taskCnt = 0;
   lastTask = undefined;
   lastTaskID = undefined;
@@ -247,7 +240,8 @@ const getStartDate = function (prevTime, dateFormat, str) {
  * - `ms` for milliseconds
  *
  * @param {string} str - A string representing the duration.
- * @returns {moment.Duration} A moment duration, including an invalid moment for invalid input string.
+ * @returns {moment.Duration} A moment duration, including an invalid moment for invalid input
+ *   string.
  */
 const parseDuration = function (str) {
   const statement = /^(\d+(?:\.\d+)?)([yMwdhms]|ms)$/.exec(str.trim());

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

src/diagrams/gantt/ganttRenderer.js

@@ -391,7 +391,6 @@ export const draw = function (text, id, version, diagObj) {
     if (securityLevel === 'sandbox') {
       let sandboxElement;
       sandboxElement = select('#i' + id);
-      const root = select(sandboxElement.nodes()[0].contentDocument.body);
       const doc = sandboxElement.nodes()[0].contentDocument;
 
       rectangles

src/diagrams/git/gitGraphParserV2.spec.js

@@ -363,6 +363,37 @@ describe('when parsing a gitGraph', function () {
     expect(Object.keys(parser.yy.getBranches()).length).toBe(2);
   });
 
+  it('should allow branch names starting with unusual prefixes', function () {
+    const str = `gitGraph:
+    commit
+    %% branch names starting with numbers are not recommended, but are supported by git
+    branch branch01
+    branch checkout02
+    branch cherry-pick03
+    branch branch/example-branch
+    branch merge/test_merge
+    %% single character branch name
+    branch A
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('A');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(7);
+    expect(Object.keys(parser.yy.getBranches())).toEqual(
+      expect.arrayContaining([
+        'branch01',
+        'checkout02',
+        'cherry-pick03',
+        'branch/example-branch',
+        'merge/test_merge',
+        'A',
+      ])
+    );
+  });
+
   it('should handle new branch checkout', function () {
     const str = `gitGraph:
     commit
@@ -550,8 +581,6 @@ describe('when parsing a gitGraph', function () {
       testBranch3Merge,
     ] = Object.values(commits);
 
-    console.log(Object.keys(commits));
-
     expect(mainCommit.branch).toBe('main');
     expect(mainCommit.parents).toStrictEqual([]);
 

src/diagrams/git/gitGraphRenderer.js

@@ -5,7 +5,6 @@ import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let allCommitsDict = {};
-let branchNum;
 
 const commitType = {
   NORMAL: 0,
@@ -83,7 +82,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const sortedKeys = keys.sort((a, b) => {
     return commits[a].seq - commits[b].seq;
   });
-  sortedKeys.forEach((key, index) => {
+  sortedKeys.forEach((key) => {
     const commit = commits[key];
 
     const y = branchPos[commit.branch].pos;
@@ -92,7 +91,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
     if (modifyGraph) {
       let typeClass;
       let commitSymbolType =
-        typeof commit.customType !== 'undefined' ? commit.customType : commit.type;
+        typeof commit.customType !== 'undefined' && commit.customType !== ''
+          ? commit.customType
+          : commit.type;
       switch (commitSymbolType) {
         case commitType.NORMAL:
           typeClass = 'commit-normal';
@@ -290,18 +291,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
 };
 
 /**
- * Detect if there are other commits between commit1's x-position and commit2's x-position on the same
- * branch as commit2.
+ * Detect if there are other commits between commit1's x-position and commit2's x-position on the
+ * same branch as commit2.
  *
  * @param {any} commit1
  * @param {any} commit2
  * @param allCommits
- * @returns {boolean} if there are commits between commit1's x-position and commit2's x-position
+ * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
  */
 const hasOverlappingCommits = (commit1, commit2, allCommits) => {
-  const commit1Pos = commitPos[commit2.id];
-  const commit2Pos = commitPos[commit1.id];
-
   // Find commits on the same branch as commit2
   const keys = Object.keys(allCommits);
   const overlappingComits = keys.filter((key) => {
@@ -322,7 +320,7 @@ const hasOverlappingCommits = (commit1, commit2, allCommits) => {
  * @param {any} y1
  * @param {any} y2
  * @param {any} _depth
- * @returns {number} y value between y1 and y2
+ * @returns {number} Y value between y1 and y2
  */
 const findLane = (y1, y2, _depth) => {
   const depth = _depth || 0;
@@ -355,25 +353,11 @@ const findLane = (y1, y2, _depth) => {
  * @param {any} allCommits
  */
 const drawArrow = (svg, commit1, commit2, allCommits) => {
-  const conf = getConfig();
-
   const p1 = commitPos[commit1.id];
   const p2 = commitPos[commit2.id];
   const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
   // log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
 
-  let url = '';
-  if (conf.arrowMarkerAbsolute) {
-    url =
-      window.location.protocol +
-      '//' +
-      window.location.host +
-      window.location.pathname +
-      window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
-  }
-
   let arc = '';
   let arc2 = '';
   let radius = 0;
@@ -431,7 +415,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
       } ${p2.y}`;
     }
   }
-  const arrow = svg
+  svg
     .append('path')
     .attr('d', lineDef)
     .attr('class', 'arrow arrow' + (colorClassNum % THEME_COLOR_LIMIT));
@@ -439,10 +423,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
 
 const drawArrows = (svg, commits) => {
   const gArrows = svg.append('g').attr('class', 'commit-arrows');
-  let pos = 0;
-
-  const k = Object.keys(commits);
-  k.forEach((key, index) => {
+  Object.keys(commits).forEach((key) => {
     const commit = commits[key];
     if (commit.parents && commit.parents.length > 0) {
       commit.parents.forEach((parent) => {

src/diagrams/git/mockDb.js

@@ -173,7 +173,9 @@ export const getCommits = () => {
     },
   };
 };
-export const clear = () => {};
+export const clear = () => {
+  //no-op
+};
 export const getBranchesAsObjArray = () => [
   {
     name: 'master',

src/diagrams/git/parser/gitGraph.jison

@@ -36,7 +36,7 @@ accDescr\s*"{"\s*                                               { this.begin("ac
 \#[^\n]*                               /* skip comments */
 \%%[^\n]*                              /* skip comments */
 "gitGraph"                              return 'GG';
-"commit"                                return 'COMMIT';
+commit(?=\s|$)                          return 'COMMIT';
 "id:"                                   return 'COMMIT_ID';
 "type:"                                 return 'COMMIT_TYPE';
 "msg:"                                  return 'COMMIT_MSG';
@@ -44,12 +44,12 @@ accDescr\s*"{"\s*                                               { this.begin("ac
 "REVERSE"                               return 'REVERSE';
 "HIGHLIGHT"                             return 'HIGHLIGHT';
 "tag:"                                  return 'COMMIT_TAG';
-"branch"                                return 'BRANCH';
+branch(?=\s|$)                          return 'BRANCH';
 "order:"                                return 'ORDER';
-"merge"                                 return 'MERGE';
-"cherry-pick"                           return 'CHERRY_PICK';
+merge(?=\s|$)                           return 'MERGE';
+cherry-pick(?=\s|$)                     return 'CHERRY_PICK';
 // "reset"                                 return 'RESET';
-"checkout"                              return 'CHECKOUT';
+checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
 "BT"                                    return 'DIR';
 ":"                                     return ':';
@@ -61,7 +61,7 @@ accDescr\s*"{"\s*                                               { this.begin("ac
 <string>["]                             this.popState();
 <string>[^"]*                           return 'STR';
 [0-9]+(?=\s|$)                          return 'NUM';
-\w[-\./\w]*[-\w]                        return 'ID'; // only a subset of https://git-scm.com/docs/git-check-ref-format
+\w([-\./\w]*[-\w])?                     return 'ID'; // only a subset of https://git-scm.com/docs/git-check-ref-format
 <<EOF>>                                 return 'EOF';
 \s+                                    /* skip all whitespace */ // lowest priority so we can use lookaheads in earlier regex
 

src/diagrams/info/info.spec.js

@@ -1,12 +1,14 @@
+import { parser } from './parser/info';
+import infoDb from './infoDb';
 describe('when parsing an info graph it', function () {
-  var ex;
+  let ex;
   beforeEach(function () {
-    ex = require('./parser/info').parser;
-    ex.yy = require('./infoDb');
+    ex = parser;
+    ex.yy = infoDb;
   });
 
   it('should handle an info definition', function () {
-    var str = `info
+    let str = `info
     showInfo`;
 
     ex.parse(str);