Added registerExternalDiagram for Mindmap

Fix lazy loading in webpack

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,43 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: 'Status: Triage, Type: Bug / Error'
-assignees: ''
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Code Sample**
-If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
-
-**Desktop (please complete the following information):**
-
-- OS: [e.g. iOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
-
-- Device: [e.g. iPhone6]
-- OS: [e.g. iOS8.1]
-- Browser [e.g. stock browser, safari]
-- Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,69 @@
+name: Bug Report
+description: Create a report to help us improve
+labels:
+  - 'Status: Triage'
+  - 'Type: Bug / Error'
+
+body:
+  - type: markdown
+    attributes:
+      value: |-
+        ## Security vulnerabilities
+        Please refer our [Security Policy](https://github.com/mermaid-js/.github/blob/main/SECURITY.md) and report to keep vulnerabilities confidential so we can release fixes first.
+
+        ## Before you submit...
+        We like to help you, but in order to do that should you make a few things first:
+
+        - Use a clear and concise title
+        - Fill out the text fields with as much detail as possible.
+        - Never be shy to give us screenshots and/or code samples. It will help!
+  - type: textarea
+    attributes:
+      label: Description
+      description: Give a clear and concise description of what the bug is.
+      placeholder: When I do ... does ... happen.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Give a step-by-step example on how to reproduce the bug.
+      placeholder: |-
+        1. Do this
+        2. Do that
+        3. ...
+        4. Bug!
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your issue.
+  - type: textarea
+    attributes:
+      label: Code Sample
+      description: |-
+        If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
+        Any text pasted here will be rendered as a Code block.
+      render: text
+  - type: textarea
+    attributes:
+      label: Setup
+      description: |-
+        Please fill out the below info.
+        Note that you only need to fill out one and not both sections.
+      value: |-
+        **Desktop**
+
+        - OS and Version: [Windows, Linux, Mac, ...]
+        - Browser and Version: [Chrome, Edge, Firefox]
+
+        **Smartphone**
+
+        - Device: [Samsung, iPhone, ...]
+        - OS and Version: [Android, iOS, ...]
+        - Browser and Version: [Chrome, Safari, ...]
+  - type: textarea
+    attributes:
+      label: Additional Context
+      description: Anything else to add?

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,17 @@
+blank_issues_enabled: false
+contact_links:
+  - name: GitHub Discussions
+    url: https://github.com/mermaid-js/mermaid/discussions
+    about: Ask the Community questions or share your own graphs in our discussions.
+  - name: Security Vulnerability
+    url: https://github.com/mermaid-js/.github/blob/main/SECURITY.md
+    about: Report security issues confidentially.
+  - name: Slack
+    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
+    about: Join our Community on Slack for Help and a casual chat.
+  - name: Documentation
+    url: https://mermaid-js.github.io
+    about: Read our documentation for all that Mermaid.js can offer.
+  - name: Live Editor
+    url: https://mermaid.live
+    about: Try the live editor to preview graphs in no time.

.github/ISSUE_TEMPLATE/diagram_proposal.yml

@@ -0,0 +1,42 @@
+name: Diagram Proposal
+description: Suggest a new Diagram Type to add to Mermaid.
+labels:
+  - 'Status: Triage'
+  - 'Type: Enhancement'
+
+body:
+  - type: markdown
+    attributes:
+      value: |-
+        ## Before you submit...
+        First of all, thank you for proposing a new Diagram to us.
+        We are always happy about new ideas to improve Mermaid.js wherever possible.
+
+        To get the fastest and best response possible, make sure you do the following:
+
+        - Use a clear and concise title
+        - Fill out the text fields with as much detail as possible.
+        - Never be shy to give us screenshots and/or code samples. It will help!
+  - type: textarea
+    attributes:
+      label: Proposal
+      description: A clear and concise description of what should be added to Mermaid.js.
+      placeholder: Mermaid.js should add ... because ...
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Use Cases
+      description: If applicable, give some use cases for where this diagram would be useful.
+      placeholder: The Diagram could be used for ...
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to show possible examples of how the diagram may look like.
+  - type: textarea
+    attributes:
+      label: Code Sample
+      description: |-
+        If applicable, add a code sample for how to implement this new diagram.
+        The text will automatically be rendered as JavaScript code.
+      render: javascript

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,19 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: 'Status: Triage, Type: Enhancement'
-assignees: ''
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/question.md

@@ -1,16 +0,0 @@
----
-name: Question
-about: Get some help from the community.
-title: ''
-labels: 'Help wanted!, Type: Other'
-assignees: ''
----
-
-## Help us help you!
-
-You want an answer. Here are some ways to get it quicker:
-
-- Use a clear and concise title.
-- Try to pose a clear and concise question.
-- Include as much, or as little, code as necessary.
-- Don't be shy to give us some screenshots, if it helps!

.github/ISSUE_TEMPLATE/syntax_proposal.yml

@@ -0,0 +1,34 @@
+name: Syntax Proposal
+description: Suggest a new Syntax to add to Mermaid.js.
+labels:
+  - 'Status: Triage'
+  - 'Type: Enhancement'
+
+body:
+  - type: markdown
+    attributes:
+      value: |-
+        ## Before you submit...
+        First of all, thank you for proposing a new Syntax to us.
+        We are always happy about new ideas to improve Mermaid.js wherever possible.
+
+        To get the fastest and best response possible, make sure you do the following:
+
+        - Use a clear and concise title
+        - Fill out the text fields with as much detail as possible. Examples are always welcome.
+        - Never be shy to give us screenshots and/or code samples. It will help!
+  - type: textarea
+    attributes:
+      label: Proposal
+      description: A clear and concise description of what Syntax should be added to Mermaid.js.
+      placeholder: Mermaid.js should add ... because ...
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Example
+      description: If applicable, provide an example of the new Syntax.
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to show possible examples of how the theme may look like.

.github/ISSUE_TEMPLATE/theme_proposal.yml

@@ -0,0 +1,42 @@
+name: Theme Proposal
+description: Suggest a new theme to add to Mermaid.js.
+labels:
+  - 'Status: Triage'
+  - 'Type: Enhancement'
+
+body:
+  - type: markdown
+    attributes:
+      value: |-
+        ## Before you submit...
+        First of all, thank you for proposing a new Theme to us.
+        We are always happy about new ideas to improve Mermaid.js wherever possible.
+
+        To get the fastest and best response possible, make sure you do the following:
+
+        - Use a clear and concise title
+        - Fill out the text fields with as much detail as possible. Examples are always welcome!
+        - Never be shy to give us screenshots and/or code samples. It will help!
+  - type: textarea
+    attributes:
+      label: Proposal
+      description: A clear and concise description of what theme should be added to Mermaid.js.
+      placeholder: Mermaid.js should add ... because ...
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Colors
+      description: |-
+        A detailed list of the different colour values to use.
+        A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
+      placeholder: |-
+        - background: #f4f4f4
+        - primaryColor: #fff4dd
+        - ...
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to show possible examples of how the theme may look like.

.gitignore

@@ -32,5 +32,6 @@ cypress/snapshots/
 .eslintcache
 .tsbuildinfo
 tsconfig.tsbuildinfo
+knsv*.html
 
 local*.html

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+strict-peer-dependencies=false

.vite/build.ts

@@ -23,23 +23,13 @@ const packageOptions = {
   'mermaid-mindmap': {
     name: 'mermaid-mindmap',
     packageName: 'mermaid-mindmap',
-    file: 'diagram-definition.ts',
-  },
-  'mermaid-mindmap-detector': {
-    name: 'mermaid-mindmap-detector',
-    packageName: 'mermaid-mindmap',
-    file: 'detector.ts',
-  },
-  'mermaid-example-diagram': {
-    name: 'mermaid-example-diagram',
-    packageName: 'mermaid-example-diagram',
-    file: 'diagram-definition.ts',
-  },
-  'mermaid-example-diagram-detector': {
-    name: 'mermaid-example-diagram-detector',
-    packageName: 'mermaid-example-diagram',
     file: 'detector.ts',
   },
+  // 'mermaid-example-diagram-detector': {
+  //   name: 'mermaid-example-diagram-detector',
+  //   packageName: 'mermaid-example-diagram',
+  //   file: 'detector.ts',
+  // },
 };
 
 interface BuildOptions {
@@ -111,7 +101,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       include: [
         'packages/mermaid-mindmap/src/**',
         'packages/mermaid/src/**',
-        'packages/mermaid-example-diagram/src/**',
+        // 'packages/mermaid-example-diagram/src/**',
       ],
     };
   }
@@ -141,7 +131,7 @@ if (watch) {
   build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
   if (!mermaidOnly) {
     build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
   }
 } else {
   void main();

.vite/server.ts

@@ -1,7 +1,15 @@
-import express from 'express';
+import express, { NextFunction, Request, Response } from 'express';
 import { createServer as createViteServer } from 'vite';
 // import { getBuildConfig } from './build';
 
+const cors = (req: Request, res: Response, next: NextFunction) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type');
+
+  next();
+};
+
 async function createServer() {
   const app = express();
 
@@ -12,6 +20,7 @@ async function createServer() {
     appType: 'custom', // don't include Vite's default HTML handling middlewares
   });
 
+  app.use(cors);
   app.use(express.static('./packages/mermaid/dist'));
   app.use(express.static('./packages/mermaid-example-diagram/dist'));
   app.use(express.static('./packages/mermaid-mindmap/dist'));

applitools.config.js

@@ -15,5 +15,5 @@ module.exports = defineConfig({
     //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
   ],
   // set batch name to the configuration
-  batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
+  // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
 });

cypress/helpers/util.js

@@ -2,6 +2,8 @@ const utf8ToB64 = (str) => {
   return window.btoa(unescape(encodeURIComponent(str)));
 };
 
+const batchId = 'mermid-batch' + new Date().getTime();
+
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
     code: graphStr,
@@ -50,9 +52,12 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
+    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
+      batchName: Cypress.spec.name,
+      batchId: batchId + Cypress.spec.name,
     });
   }
 
@@ -64,7 +69,9 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   // Default name to test title
 
   if (useAppli) {
+    cy.log('Check eyes' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
+    cy.log('Closing eyes: ' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);
@@ -100,9 +107,12 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
+    cy.log('Opening eyes 2' + Cypress.spec.name);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
+      batchName: Cypress.spec.name,
+      batchId: batchId + Cypress.spec.name,
     });
   }
 
@@ -112,7 +122,9 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
   // Default name to test title
 
   if (useAppli) {
+    cy.log('Check eyes 2' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
+    cy.log('Closing eyes 2' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);

cypress/integration/other/external-diagrams.spec.js

@@ -0,0 +1,13 @@
+describe('mermaid', () => {
+  describe('registerDiagram', () => {
+    it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
+      const url = 'http://localhost:9000/external-diagrams-mindmap.html';
+      cy.visit(url);
+
+      cy.get('svg', {
+        // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
+        timeout: 10000,
+      }).matchImageSnapshot();
+    });
+  });
+});

cypress/platform/external-diagrams-mindmap.html

@@ -0,0 +1,49 @@
+<html>
+  <body>
+    <h1>Should correctly load a third-party diagram using registerDiagram</h1>
+    <pre id="diagram" class="mermaid">
+mindmap
+  root
+    A
+    B
+    C
+    D
+    E
+    A2
+    B2
+    C2
+    D2
+    E2
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand<br/>child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
+    </pre>
+    <!-- <pre id="diagram" class="mermaid2">
+      example-diagram
+    </pre> -->
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
+    <script type="module">
+      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      import mermaid from '../../packages/mermaid/src/mermaid';
+
+      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.initialize({ logLevel: 0 });
+      await mermaid.initThrowsErrorsAsync();
+    </script>
+  </body>
+</html>

cypress/platform/knsv2.html

@@ -75,16 +75,6 @@ classDiagram
     <pre id="diagram" class="mermaid2">
 mindmap
   root
-    A
-    B
-    C
-    D
-    E
-    A2
-    B2
-    C2
-    D2
-    E2
     child1((Circle))
         grandchild 1
         grandchild 2

cypress/platform/render-after-error.html

@@ -14,16 +14,14 @@
       mermaid.init({ startOnLoad: false });
 
       mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
-      (async () => {
-        try {
-          console.log('rendering');
-          await mermaid.mermaidAPI.render('graphDiv', `>`);
-        } catch (e) {}
+      try {
+        console.log('rendering');
+        mermaid.mermaidAPI.render('graphDiv', `>`);
+      } catch (e) {}
 
-        await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-          document.getElementById('graph').innerHTML = html;
-        });
-      })();
+      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+        document.getElementById('graph').innerHTML = html;
+      });
     </script>
   </body>
 </html>

cypress/platform/rerender.html

@@ -19,10 +19,9 @@
       function rerender(text) {
         const graphText = `graph TD
         A[${text}] -->|Get money| B(Go shopping)`;
-        mermaid.mermaidAPI.render('id', graphText).then((svg) => {
-          console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
-          document.getElementById('graph').innerHTML = svg;
-        });
+        const graph = mermaid.mermaidAPI.render('id', graphText);
+        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
+        document.getElementById('graph').innerHTML = graph;
       }
     </script>
     <button id="rerender" onclick="rerender('Saturday')">Rerender</button>

cypress/platform/viewer.js

@@ -1,4 +1,5 @@
 import mermaid2 from '../../packages/mermaid/src/mermaid';
+import mindmap from '../../packages/mermaid-mindmap/src/detector';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -9,7 +10,7 @@ function b64ToUtf8(str) {
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
  * page.
  */
-const contentLoaded = function () {
+const contentLoaded = async function () {
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -36,8 +37,7 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
-
+    await mermaid2.registerExternalDiagrams([mindmap]);
     mermaid2.initialize(graphObj.mermaid);
     mermaid2.init();
   }

docs/index.html

@@ -50,13 +50,36 @@
     <div id="app"></div>
     <script type="module">
       import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.mjs';
+      await mermaid.registerExternalDiagrams([mindmap]);
+
       window.mermaid = mermaid;
+      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      const conf = {
+        logLevel: 4,
+        startOnLoad: true,
+        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
+      };
+      if (isDarkMode) conf.theme = 'dark';
+
+      async function loadMermaid() {
+        mermaid.parseError = (e) => {
+          console.log('parse error', e); // eslint-disable-line
+        };
+        await mermaid.registerExternalDiagrams([mindmap]);
+        mermaid.initialize(conf);
+        console.log('mermaid initialized'); // eslint-disable-line
+      }
+
+      await loadMermaid();
     </script>
     <script>
       let initEditor = exports.default;
       let parser = new DOMParser();
       let currentCodeExample = 0;
       let colorize = [];
+      let num = 0;
 
       function colorizeEverything(html) {
         initEditor(monaco);
@@ -97,14 +120,12 @@
           renderer: {
             code: function (code, lang) {
               if (lang === 'mermaid-example') {
+                console.log('An example'); // eslint-disable-line
                 currentCodeExample++;
                 colorize.push(currentCodeExample);
                 return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
               } else if (lang === 'mermaid') {
-                // TODO: This will need to be updated when render is async.
-                return (
-                  '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
-                );
+                return '<pre class="mermaid">' + code + '</pre>';
               }
               return this.origin.code.apply(this, arguments);
             },
@@ -123,6 +144,10 @@
               const editHtml = '[:memo: Edit this Page](' + url + ')\n';
               return editHtml + html;
             });
+            // Invoked on each page load after new HTML has been appended to the DOM
+            hook.doneEach(function () {
+              window.mermaid.init();
+            });
 
             hook.afterEach(function (html, next) {
               next(html);
@@ -138,28 +163,17 @@
           },
         ],
       };
-
-      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-      const conf = {
-        logLevel: 4,
-        startOnLoad: false,
-        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
-      };
-      if (isDarkMode) conf.theme = 'dark';
-      mermaid.initialize(conf);
     </script>
     <script>
       window.onhashchange = function (a) {
-        //code
-        if (location) {
-          ga('send', 'pageview', location.hash);
-        }
+        // if (location && ga) {
+        //   ga('send', 'pageview', location.hash);
+        // }
       };
     </script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
+    <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
   </body>
 </html>

package.json

@@ -1,21 +1,10 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "9.2.0-rc2",
+  "version": "9.2.0-rc4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid.core.mjs",
-  "module": "dist/mermaid.core.mjs",
-  "types": "dist/mermaid.d.ts",
   "type": "module",
   "packageManager": "pnpm@7.13.2",
-  "exports": {
-    ".": {
-      "require": "./dist/mermaid.min.js",
-      "import": "./dist/mermaid.core.mjs",
-      "types": "./dist/mermaid.d.ts"
-    },
-    "./*": "./*"
-  },
   "keywords": [
     "diagram",
     "markdown",
@@ -147,9 +136,6 @@
   "resolutions": {
     "d3": "^7.0.0"
   },
-  "files": [
-    "dist"
-  ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss"

packages/mermaid-example-diagram/Readme.md

@@ -0,0 +1,3 @@
+### Do not refer this package. It is not ready.
+
+### Refer mermaid-mindmap instead.

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -12,3 +12,5 @@ export const diagram = {
   styles,
   injectUtils,
 };
+
+export { detector, id } from './detector';

packages/mermaid-mindmap/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mermaid-js/mermaid-mindmap",
-  "version": "9.2.0-rc4",
+  "version": "9.2.2-rc.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid-mindmap.core.mjs",
   "module": "dist/mermaid-mindmap.core.mjs",
+  "types": "dist/detector.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "require": "./dist/mermaid-mindmap.min.js",
-      "import": "./dist/mermaid-mindmap.core.mjs"
+      "import": "./dist/mermaid-mindmap.core.mjs",
+      "types": "./dist/detector.d.ts"
     },
     "./*": "./*"
   },

packages/mermaid-mindmap/src/detector.ts

@@ -1,10 +1,20 @@
-export const id = 'mindmap';
+import type { ExternalDiagramDefinition } from 'mermaid';
 
-export const detector = (txt: string) => {
+const id = 'mindmap';
+
+const detector = (txt: string) => {
   return txt.match(/^\s*mindmap/) !== null;
 };
 
-export const loadDiagram = async () => {
+const loader = async () => {
   const { diagram } = await import('./diagram-definition');
   return { id, diagram };
 };
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;

packages/mermaid-mindmap/src/styles.js

@@ -22,13 +22,10 @@ const genSections = (options) => {
     }
     .section-${i - 1} text {
      fill: ${options['cScaleLabel' + i]};
-    //  fill: ${options['gitInv' + i]};
     }
     .node-icon-${i - 1} {
       font-size: 40px;
       color: ${options['cScaleLabel' + i]};
-      // fill: ${options['cScaleLabel' + i]};
-      // color: ${options['gitInv' + i]};
     }
     .section-edge-${i - 1}{
       stroke: ${options['cScale' + i]};

packages/mermaid/README.md

@@ -0,0 +1 @@
+../../README.md

packages/mermaid/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mermaid",
-  "version": "9.2.0-rc2",
+  "version": "9.2.2-rc.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "./dist/mermaid.core.mjs",
+  "main": "./dist/mermaid.min.js",
   "module": "./dist/mermaid.core.mjs",
   "types": "./dist/mermaid.d.ts",
-  "type": "module",
+  "type": "commonjs",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -72,7 +72,8 @@
     "lodash": "^4.17.21",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.1.2"
+    "stylis": "^4.1.2",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
@@ -86,6 +87,7 @@
     "@types/lodash": "^4.14.185",
     "@types/prettier": "^2.7.0",
     "@types/stylis": "^4.0.2",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
     "concurrently": "^7.4.0",
@@ -125,7 +127,8 @@
     "d3": "^7.0.0"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "sideEffects": [
     "**/*.css",

packages/mermaid/src/Diagram.ts

@@ -81,12 +81,16 @@ export class Diagram {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const getDiagramFromText = async (txt: string, parseError?: Function): Promise<Diagram> => {
+export const getDiagramFromText = (
+  txt: string,
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  parseError?: Function
+): Diagram | Promise<Diagram> => {
   const type = detectType(txt, configApi.getConfig());
   try {
     // Trying to find the diagram
     getDiagram(type);
+    return new Diagram(txt, parseError);
   } catch (error) {
     if (!(error instanceof DiagramNotFoundError)) {
       log.error(error);
@@ -96,14 +100,16 @@ export const getDiagramFromText = async (txt: string, parseError?: Function): Pr
     if (!loader) {
       throw new Error(`Loader for ${type} not found.`);
     }
-    // Diagram not available, loading it
-    const { diagram } = await loader();
-    registerDiagram(type, diagram, undefined, diagram.injectUtils);
-    // new diagram will try getDiagram again and if fails then it is a valid throw
+    // TODO: Uncomment for v10
+    // // Diagram not available, loading it
+    // const { diagram } = await loader();
+    // registerDiagram(type, diagram, undefined, diagram.injectUtils);
+    // // new diagram will try getDiagram again and if fails then it is a valid throw
+    return loader().then(({ diagram }) => {
+      registerDiagram(type, diagram, undefined);
+      return new Diagram(txt, parseError);
+    });
   }
-  // If either of the above worked, we have the diagram
-  // logic and can continue
-  return new Diagram(txt, parseError);
 };
 
 export default Diagram;

packages/mermaid/src/__mocks__/mermaidAPI.ts

@@ -25,6 +25,7 @@ function parse(text: string, parseError?: Function): boolean {
 // original version cannot be modified since it was frozen with `Object.freeze()`
 export const mermaidAPI = {
   render: vi.fn(),
+  renderAsync: vi.fn(),
   parse,
   parseDirective: vi.fn(),
   initialize: vi.fn(),

packages/mermaid/src/config.ts

@@ -40,7 +40,8 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[])
   }
 
   currentConfig = cfg;
-  return cfg;
+  checkConfig(currentConfig);
+  return currentConfig;
 };
 
 /**
@@ -68,7 +69,7 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
     siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
   }
 
-  currentConfig = updateCurrentConfig(siteConfig, directives);
+  updateCurrentConfig(siteConfig, directives);
   return siteConfig;
 };
 
@@ -117,6 +118,7 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
   //   conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
   // });
 
+  checkConfig(conf);
   assignWithDepth(currentConfig, conf);
 
   return getConfig();
@@ -224,3 +226,25 @@ export const reset = (config = siteConfig): void => {
   directives = [];
   updateCurrentConfig(config, directives);
 };
+
+enum ConfigWarning {
+  'LAZY_LOAD_DEPRECATED' = 'The configuration options lazyLoadedDiagrams and loadExternalDiagramsAtStartup are deprecated. Please use registerExternalDiagrams instead.',
+}
+type ConfigWarningStrings = keyof typeof ConfigWarning;
+const issuedWarnings: { [key in ConfigWarningStrings]?: boolean } = {};
+const issueWarning = (warning: ConfigWarningStrings) => {
+  if (issuedWarnings[warning]) {
+    return;
+  }
+  log.warn(ConfigWarning[warning]);
+  issuedWarnings[warning] = true;
+};
+
+const checkConfig = (config: MermaidConfig) => {
+  if (!config) {
+    return;
+  }
+  if (config.lazyLoadedDiagrams || config.loadExternalDiagramsAtStartup) {
+    issueWarning('LAZY_LOAD_DEPRECATED');
+  }
+};

packages/mermaid/src/config.type.ts

@@ -3,7 +3,10 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
+  /** @deprecated use mermaid.registerLazyDiagrams instead */
   lazyLoadedDiagrams?: string[];
+  /** @deprecated use mermaid.registerLazyDiagrams instead */
+  loadExternalDiagramsAtStartup?: boolean;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;

packages/mermaid/src/defaultConfig.ts

@@ -115,7 +115,6 @@ const config: Partial<MermaidConfig> = {
    * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
    */
   secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-  lazyLoadedDiagrams: [],
   /**
    * This option controls if the generated ids of nodes in the SVG are generated randomly or based
    * on a seed. If set to false, the IDs are generated based on the current date and thus are not

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

@@ -22,17 +22,19 @@ export interface Detectors {
   [key: string]: DiagramDetector;
 }
 
+/**
+ * Registers the given diagram with Mermaid.
+ *
+ * Can be used for third-party custom diagrams.
+ *
+ * @param id - A unique ID for the given diagram.
+ * @param diagram - The diagram definition.
+ * @param detector - Function that returns `true` if a given mermaid text is this diagram definition.
+ */
 export const registerDiagram = (
   id: string,
   diagram: DiagramDefinition,
-  detector?: DiagramDetector,
-  callback?: (
-    _log: any,
-    _setLogLevel: any,
-    _getConfig: any,
-    _sanitizeText: any,
-    _setupGraphViewbox: any
-  ) => void
+  detector?: DiagramDetector
 ) => {
   log.debug(`Registering diagram ${id}`);
   if (diagrams[id]) {
@@ -48,8 +50,9 @@ export const registerDiagram = (
     addDetector(id, detector);
   }
   addStylesForDiagram(id, diagram.styles);
-  if (typeof callback !== 'undefined') {
-    callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
+
+  if (diagram.injectUtils) {
+    diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
   }
   log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`);
 };

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

@@ -14,7 +14,13 @@ export interface DiagramDefinition {
   parser: any;
   styles: any;
   init?: (config: MermaidConfig) => void;
-  injectUtils?: (utils: InjectUtils) => void;
+  injectUtils?: (
+    _log: InjectUtils['_log'],
+    _setLogLevel: InjectUtils['_setLogLevel'],
+    _getConfig: InjectUtils['_getConfig'],
+    _sanitizeText: InjectUtils['_sanitizeText'],
+    _setupGraphViewbox: InjectUtils['_setupGraphViewbox']
+  ) => void;
 }
 
 export interface DetectorRecord {
@@ -22,5 +28,11 @@ export interface DetectorRecord {
   loader?: DiagramLoader;
 }
 
+export interface ExternalDiagramDefinition {
+  id: string;
+  detector: DiagramDetector;
+  loader: DiagramLoader;
+}
+
 export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-export type DiagramLoader = (() => Promise<{ id: string; diagram: DiagramDefinition }>) | null;
+export type DiagramLoader = () => Promise<{ id: string; diagram: DiagramDefinition }>;

packages/mermaid/src/docs/index.html

@@ -50,13 +50,36 @@
     <div id="app"></div>
     <script type="module">
       import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.mjs';
+      await mermaid.registerExternalDiagrams([mindmap]);
+
       window.mermaid = mermaid;
+      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      const conf = {
+        logLevel: 4,
+        startOnLoad: true,
+        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
+      };
+      if (isDarkMode) conf.theme = 'dark';
+
+      async function loadMermaid() {
+        mermaid.parseError = (e) => {
+          console.log('parse error', e); // eslint-disable-line
+        };
+        await mermaid.registerExternalDiagrams([mindmap]);
+        mermaid.initialize(conf);
+        console.log('mermaid initialized'); // eslint-disable-line
+      }
+
+      await loadMermaid();
     </script>
     <script>
       let initEditor = exports.default;
       let parser = new DOMParser();
       let currentCodeExample = 0;
       let colorize = [];
+      let num = 0;
 
       function colorizeEverything(html) {
         initEditor(monaco);
@@ -97,14 +120,12 @@
           renderer: {
             code: function (code, lang) {
               if (lang === 'mermaid-example') {
+                console.log('An example'); // eslint-disable-line
                 currentCodeExample++;
                 colorize.push(currentCodeExample);
                 return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
               } else if (lang === 'mermaid') {
-                // TODO: This will need to be updated when render is async.
-                return (
-                  '<pre class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + '</pre>'
-                );
+                return '<pre class="mermaid">' + code + '</pre>';
               }
               return this.origin.code.apply(this, arguments);
             },
@@ -123,6 +144,10 @@
               const editHtml = '[:memo: Edit this Page](' + url + ')\n';
               return editHtml + html;
             });
+            // Invoked on each page load after new HTML has been appended to the DOM
+            hook.doneEach(function () {
+              window.mermaid.init();
+            });
 
             hook.afterEach(function (html, next) {
               next(html);
@@ -138,28 +163,17 @@
           },
         ],
       };
-
-      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-      const conf = {
-        logLevel: 4,
-        startOnLoad: false,
-        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
-      };
-      if (isDarkMode) conf.theme = 'dark';
-      mermaid.initialize(conf);
     </script>
     <script>
       window.onhashchange = function (a) {
-        //code
-        if (location) {
-          ga('send', 'pageview', location.hash);
-        }
+        // if (location && ga) {
+        //   ga('send', 'pageview', location.hash);
+        // }
       };
     </script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
+    <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
   </body>
 </html>

packages/mermaid/src/logger.ts

@@ -48,6 +48,7 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
   log.warn = () => {};
   log.error = () => {};
   log.fatal = () => {};
+
   if (numericLevel <= LEVELS.fatal) {
     log.fatal = console.error
       ? console.error.bind(console, format('FATAL'), 'color: orange')

packages/mermaid/src/mermaid.spec.ts

@@ -48,26 +48,87 @@ describe('when using mermaid and ', function () {
       const node = document.createElement('div');
       node.appendChild(document.createTextNode('graph TD;\na;'));
 
-      await mermaid.initThrowsErrors(undefined, node);
+      mermaid.initThrowsErrors(undefined, node);
       // mermaidAPI.render function has been mocked, since it doesn't yet work
       // in Node.JS (only works in browser)
       expect(mermaidAPI.render).toHaveBeenCalled();
     });
-    it('should throw error (but still render) if lazyLoadedDiagram fails', async () => {
+  });
+  describe('when using #registerExternalDiagrams', function () {
+    it('should throw error (but still render) if registerExternalDiagrams fails', async () => {
       const node = document.createElement('div');
       node.appendChild(document.createTextNode('graph TD;\na;'));
 
-      mermaidAPI.setConfig({
-        lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'],
-      });
-      await expect(mermaid.initThrowsErrors(undefined, node)).rejects.toThrowError(
-        // this error message is probably different on every platform
-        // this one is just for vite-note (node/jest/browser may be different)
-        'Failed to load this-file-does-not-exist.mjs'
-      );
+      await expect(
+        mermaid.registerExternalDiagrams(
+          [
+            {
+              id: 'dummy',
+              detector: (text) => /dummy/.test(text),
+              loader: () => Promise.reject('error'),
+            },
+          ],
+          { lazyLoad: false }
+        )
+      ).rejects.toThrow('Failed to load 1 external diagrams');
 
+      expect(() => mermaid.initThrowsErrorsAsync(undefined, node)).not.toThrow();
       // should still render, even if lazyLoadedDiagrams fails
-      expect(mermaidAPI.render).toHaveBeenCalled();
+      expect(mermaidAPI.renderAsync).toHaveBeenCalled();
+    });
+
+    it('should defer diagram load based on parameter', async () => {
+      let loaded = false;
+      const dummyDiagram = {
+        db: {},
+        renderer: () => {
+          // do nothing
+        },
+        parser: () => {
+          // do nothing
+        },
+        styles: () => {
+          // do nothing
+        },
+      };
+      await expect(
+        mermaid.registerExternalDiagrams(
+          [
+            {
+              id: 'dummy',
+              detector: (text) => /dummy/.test(text),
+              loader: () => {
+                loaded = true;
+                return Promise.resolve({
+                  id: 'dummy',
+                  diagram: dummyDiagram,
+                });
+              },
+            },
+          ],
+          { lazyLoad: true }
+        )
+      ).resolves.toBe(undefined);
+      expect(loaded).toBe(false);
+      await expect(
+        mermaid.registerExternalDiagrams(
+          [
+            {
+              id: 'dummy2',
+              detector: (text) => /dummy2/.test(text),
+              loader: () => {
+                loaded = true;
+                return Promise.resolve({
+                  id: 'dummy2',
+                  diagram: dummyDiagram,
+                });
+              },
+            },
+          ],
+          { lazyLoad: false }
+        )
+      ).resolves.toBe(undefined);
+      expect(loaded).toBe(true);
     });
 
     afterEach(() => {

packages/mermaid/src/mermaid.ts

@@ -7,9 +7,13 @@ import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
-import { isDetailedError, DetailedError } from './utils';
+import { isDetailedError, type DetailedError } from './utils';
+import { registerDiagram } from './diagram-api/diagramAPI';
+import { ExternalDiagramDefinition } from './diagram-api/types';
 
-export type { MermaidConfig, DetailedError };
+export type { MermaidConfig, DetailedError, ExternalDiagramDefinition };
+
+let externalDiagramsRegistered = false;
 /**
  * ## init
  *
@@ -46,7 +50,12 @@ const init = async function (
   callback?: Function
 ) {
   try {
-    await initThrowsErrors(config, nodes, callback);
+    // Not really sure if we need to check this, or simply call initThrowsErrorsAsync directly.
+    if (externalDiagramsRegistered) {
+      await initThrowsErrorsAsync(config, nodes, callback);
+    } else {
+      initThrowsErrors(config, nodes, callback);
+    }
   } catch (e) {
     log.warn('Syntax Error rendering');
     if (isDetailedError(e)) {
@@ -58,19 +67,33 @@ const init = async function (
   }
 };
 
-/**
- * Equivalent to {@link init()}, except an error will be thrown on error.
- *
- * @param config - **Deprecated** Mermaid sequenceConfig.
- * @param nodes - One of:
- * - A DOM Node
- * - An array of DOM nodes (as would come from a jQuery selector)
- * - A W3C selector, a la `.mermaid` (default)
- * @param callback - Function that is called with the id of each generated mermaid diagram.
- *
- * @returns Resolves on success, otherwise the {@link Promise} will be rejected with an Error.
- */
-const initThrowsErrors = async function (
+// eslint-disable-next-line @typescript-eslint/ban-types
+const handleError = (error: unknown, errors: DetailedError[], parseError?: Function) => {
+  log.warn(error);
+  if (isDetailedError(error)) {
+    // handle case where error string and hash were
+    // wrapped in object like`const error = { str, hash };`
+    if (parseError) {
+      parseError(error.str, error.hash);
+    }
+    errors.push({ ...error, message: error.str, error });
+  } else {
+    // assume it is just error string and pass it on
+    if (parseError) {
+      parseError(error);
+    }
+    if (error instanceof Error) {
+      errors.push({
+        str: error.message,
+        message: error.message,
+        hash: error.name,
+        error,
+      });
+    }
+  }
+};
+
+const initThrowsErrors = function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
   nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
@@ -78,31 +101,12 @@ const initThrowsErrors = async function (
   callback?: Function
 ) {
   const conf = mermaidAPI.getConfig();
-  // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
   if (config) {
     // This is a legacy way of setting config. It is not documented and should be removed in the future.
     // @ts-ignore: TODO Fix ts errors
     mermaid.sequenceConfig = config;
   }
 
-  const errors = [];
-
-  if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
-    // Load all lazy loaded diagrams in parallel
-    const results = await Promise.allSettled(
-      conf.lazyLoadedDiagrams.map(async (diagram: string) => {
-        const { id, detector, loadDiagram } = await import(diagram);
-        addDetector(id, detector, loadDiagram);
-      })
-    );
-    for (const result of results) {
-      if (result.status == 'rejected') {
-        log.warn(`Failed to lazyLoadedDiagram due to `, result.reason);
-        errors.push(result.reason);
-      }
-    }
-  }
-
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: ArrayLike<HTMLElement>;
@@ -128,6 +132,7 @@ const initThrowsErrors = async function (
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt: string;
+  const errors: DetailedError[] = [];
 
   // element is the current div with mermaid class
   for (const element of Array.from(nodesToProcess)) {
@@ -154,7 +159,7 @@ const initThrowsErrors = async function (
       log.debug('Detected early reinit: ', init);
     }
     try {
-      await mermaidAPI.render(
+      mermaidAPI.render(
         id,
         txt,
         (svgCode: string, bindFunctions?: (el: Element) => void) => {
@@ -167,13 +172,7 @@ const initThrowsErrors = async function (
         element
       );
     } catch (error) {
-      log.warn('Catching Error (bootstrap)', error);
-      // @ts-ignore: TODO Fix ts errors
-      const mermaidError = { error, str: error.str, hash: error.hash, message: error.str };
-      if (typeof mermaid.parseError === 'function') {
-        mermaid.parseError(mermaidError);
-      }
-      errors.push(mermaidError);
+      handleError(error, errors, mermaid.parseError);
     }
   }
   if (errors.length > 0) {
@@ -182,8 +181,169 @@ const initThrowsErrors = async function (
   }
 };
 
-const initialize = async function (config: MermaidConfig) {
-  await mermaidAPI.initialize(config);
+/**
+ * This is an internal function and should not be made public, as it will likely change.
+ * @internal
+ * @param diagrams - Array of {@link ExternalDiagramDefinition}.
+ */
+const registerLazyLoadedDiagrams = (diagrams: ExternalDiagramDefinition[]) => {
+  for (const { id, detector, loader } of diagrams) {
+    addDetector(id, detector, loader);
+  }
+};
+
+/**
+ * This is an internal function and should not be made public, as it will likely change.
+ * @internal
+ * @param diagrams - Array of {@link ExternalDiagramDefinition}.
+ */
+const loadExternalDiagrams = async (diagrams: ExternalDiagramDefinition[]) => {
+  log.debug(`Loading ${diagrams.length} external diagrams`);
+  // Load all lazy loaded diagrams in parallel
+  const results = await Promise.allSettled(
+    diagrams.map(async ({ id, detector, loader }) => {
+      const { diagram } = await loader();
+      registerDiagram(id, diagram, detector);
+    })
+  );
+  const failed = results.filter((result) => result.status === 'rejected');
+  if (failed.length > 0) {
+    log.error(`Failed to load ${failed.length} external diagrams`);
+    for (const res of failed) {
+      log.error(res);
+    }
+    throw new Error(`Failed to load ${failed.length} external diagrams`);
+  }
+};
+
+/**
+ * Equivalent to {@link init()}, except an error will be thrown on error.
+ *
+ * @alpha
+ * @deprecated This is an internal function and will very likely be modified in v10, or earlier.
+ * We recommend staying with {@link initThrowsErrors} if you don't need `lazyLoadedDiagrams`.
+ *
+ * @param config - **Deprecated** Mermaid sequenceConfig.
+ * @param nodes - One of:
+ * - A DOM Node
+ * - An array of DOM nodes (as would come from a jQuery selector)
+ * - A W3C selector, a la `.mermaid` (default)
+ * @param callback - Function that is called with the id of each generated mermaid diagram.
+ * @returns Resolves on success, otherwise the {@link Promise} will be rejected.
+ */
+const initThrowsErrorsAsync = async function (
+  config?: MermaidConfig,
+  // eslint-disable-next-line no-undef
+  nodes?: string | HTMLElement | NodeListOf<HTMLElement>,
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  callback?: Function
+) {
+  const conf = mermaidAPI.getConfig();
+
+  if (config) {
+    // This is a legacy way of setting config. It is not documented and should be removed in the future.
+    // @ts-ignore: TODO Fix ts errors
+    mermaid.sequenceConfig = config;
+  }
+
+  // if last argument is a function this is the callback function
+  log.debug(`${!callback ? 'No ' : ''}Callback function found`);
+  let nodesToProcess: ArrayLike<HTMLElement>;
+  if (typeof nodes === 'undefined') {
+    nodesToProcess = document.querySelectorAll('.mermaid');
+  } else if (typeof nodes === 'string') {
+    nodesToProcess = document.querySelectorAll(nodes);
+  } else if (nodes instanceof HTMLElement) {
+    nodesToProcess = [nodes];
+  } else if (nodes instanceof NodeList) {
+    nodesToProcess = nodes;
+  } else {
+    throw new Error('Invalid argument nodes for mermaid.init');
+  }
+
+  log.debug(`Found ${nodesToProcess.length} diagrams`);
+  if (typeof config?.startOnLoad !== 'undefined') {
+    log.debug('Start On Load: ' + config?.startOnLoad);
+    mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
+  }
+
+  // generate the id of the diagram
+  const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
+
+  let txt: string;
+  const errors: DetailedError[] = [];
+
+  // element is the current div with mermaid class
+  for (const element of Array.from(nodesToProcess)) {
+    log.info('Rendering diagram: ' + element.id);
+    /*! Check if previously processed */
+    if (element.getAttribute('data-processed')) {
+      continue;
+    }
+    element.setAttribute('data-processed', 'true');
+
+    const id = `mermaid-${idGenerator.next()}`;
+
+    // Fetch the graph definition including tags
+    txt = element.innerHTML;
+
+    // transforms the html to pure text
+    txt = utils
+      .entityDecode(txt)
+      .trim()
+      .replace(/<br\s*\/?>/gi, '<br/>');
+
+    const init = utils.detectInit(txt);
+    if (init) {
+      log.debug('Detected early reinit: ', init);
+    }
+    try {
+      await mermaidAPI.renderAsync(
+        id,
+        txt,
+        (svgCode: string, bindFunctions?: (el: Element) => void) => {
+          element.innerHTML = svgCode;
+          if (typeof callback !== 'undefined') {
+            callback(id);
+          }
+          if (bindFunctions) bindFunctions(element);
+        },
+        element
+      );
+    } catch (error) {
+      handleError(error, errors, mermaid.parseError);
+    }
+  }
+  if (errors.length > 0) {
+    // TODO: We should be throwing an error object.
+    throw errors[0];
+  }
+};
+
+const initialize = function (config: MermaidConfig) {
+  mermaidAPI.initialize(config);
+};
+
+/**
+ * Used to register external diagram types.
+ * @param diagrams - Array of {@link ExternalDiagramDefinition}.
+ * @param opts
+ * @param opts.lazyLoad - If true, the diagram will be loaded on demand.
+ */
+const registerExternalDiagrams = async (
+  diagrams: ExternalDiagramDefinition[],
+  {
+    lazyLoad = true,
+  }: {
+    lazyLoad?: boolean;
+  } = {}
+) => {
+  if (lazyLoad) {
+    registerLazyLoadedDiagrams(diagrams);
+  } else {
+    await loadExternalDiagrams(diagrams);
+  }
+  externalDiagramsRegistered = true;
 };
 
 /**
@@ -219,7 +379,7 @@ if (typeof document !== 'undefined') {
  * This is provided for environments where the mermaid object can't directly have a new member added
  * to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
  *
- * @param {function (err, hash)} newParseErrorHandler New parseError() callback.
+ * @param newParseErrorHandler New parseError() callback.
  */
 const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: any) => void) {
   mermaid.parseError = newParseErrorHandler;
@@ -229,6 +389,125 @@ const parse = (txt: string) => {
   return mermaidAPI.parse(txt, mermaid.parseError);
 };
 
+const executionQueue: (() => Promise<unknown>)[] = [];
+let executionQueueRunning = false;
+const executeQueue = async () => {
+  if (executionQueueRunning) {
+    return;
+  }
+  executionQueueRunning = true;
+  while (executionQueue.length > 0) {
+    const f = executionQueue.shift();
+    if (f) {
+      try {
+        await f();
+      } catch (e) {
+        log.error('Error executing queue', e);
+      }
+    }
+  }
+  executionQueueRunning = false;
+};
+
+/**
+ * @param txt
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ */
+const parseAsync = (txt: string): Promise<boolean> => {
+  return new Promise((resolve, reject) => {
+    // This promise will resolve when the mermaidAPI.render call is done.
+    // It will be queued first and will be executed when it is first in line
+    const performCall = () =>
+      new Promise((res, rej) => {
+        mermaidAPI.parseAsync(txt, mermaid.parseError).then(
+          (r) => {
+            // This resolves for the promise for the queue handling
+            res(r);
+            // This fulfills the promise sent to the value back to the original caller
+            resolve(r);
+          },
+          (e) => {
+            log.error('Error parsing', e);
+            rej(e);
+            reject(e);
+          }
+        );
+      });
+    executionQueue.push(performCall);
+    executeQueue();
+  });
+};
+
+// const asynco = (id: string, delay: number) =>
+//   new Promise((res) => {
+//     setTimeout(() => {
+//       // This resolves for the promise for the queue handling
+//       res(id);
+//     }, delay);
+//   });
+
+/**
+ * @param txt
+ * @param id
+ * @param delay
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ */
+// const test1 = (id: string, delay: number) => {
+//   const p = new Promise((resolve, reject) => {
+//     // This promise will resolve when the mermaidAPI.render call is done.
+//     // It will be queued first and will be executed when it is first in line
+//     const performCall = () =>
+//       new Promise((res) => {
+//         asynco(id, delay).then((r) => {
+//           // This resolves for the promise for the queue handling
+//           res(r);
+//           // This fullfills the promise sent to the value back to the original caller
+//           resolve(r + ' result to caller');
+//         });
+//       });
+//     executionQueue.push(performCall);
+//   });
+//   return p;
+// };
+
+/**
+ * @param txt
+ * @param id
+ * @param text
+ * @param cb
+ * @param container
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ */
+const renderAsync = (
+  id: string,
+  text: string,
+  cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  container?: Element
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    // This promise will resolve when the mermaidAPI.render call is done.
+    // It will be queued first and will be executed when it is first in line
+    const performCall = () =>
+      new Promise((res, rej) => {
+        mermaidAPI.renderAsync(id, text, cb, container).then(
+          (r) => {
+            // This resolves for the promise for the queue handling
+            res(r);
+            // This fullfills the promise sent to the value back to the original caller
+            resolve(r);
+          },
+          (e) => {
+            log.error('Error parsing', e);
+            rej(e);
+            reject(e);
+          }
+        );
+      });
+    executionQueue.push(performCall);
+    executeQueue();
+  });
+};
+
 const mermaid: {
   startOnLoad: boolean;
   diagrams: any;
@@ -236,9 +515,13 @@ const mermaid: {
   parseError?: Function;
   mermaidAPI: typeof mermaidAPI;
   parse: typeof parse;
+  parseAsync: typeof parseAsync;
   render: typeof mermaidAPI.render;
+  renderAsync: typeof renderAsync;
   init: typeof init;
   initThrowsErrors: typeof initThrowsErrors;
+  initThrowsErrorsAsync: typeof initThrowsErrorsAsync;
+  registerExternalDiagrams: typeof registerExternalDiagrams;
   initialize: typeof initialize;
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
@@ -247,9 +530,13 @@ const mermaid: {
   diagrams: {},
   mermaidAPI,
   parse,
+  parseAsync,
   render: mermaidAPI.render,
+  renderAsync,
   init,
   initThrowsErrors,
+  initThrowsErrorsAsync,
+  registerExternalDiagrams,
   initialize,
   parseError: undefined,
   contentLoaded,

packages/mermaid/src/mermaidAPI.ts

@@ -44,6 +44,18 @@ function parse(text: string, parseError?: Function): boolean {
   return diagram.parse(text, parseError);
 }
 
+/**
+ *
+ * @param text
+ * @param parseError
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+async function parseAsync(text: string, parseError?: Function): Promise<boolean> {
+  addDiagrams();
+  const diagram = await getDiagramFromText(text, parseError);
+  return diagram.parse(text, parseError);
+}
+
 export const encodeEntities = function (text: string): string {
   let txt = text;
 
@@ -103,19 +115,295 @@ export const decodeEntities = function (text: string): string {
  *
  * @param {string} id The id of the element to be rendered
  * @param {string} text The graph definition
- * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
+ * @param cb - Optional callback which
  *   is called after rendering is finished with the svg code as inparam.
  * @param {Element} container 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.
- * @returns {void}
+ * @returns Returns the rendered element as a string containing the SVG definition.
  */
-const render = async function (
+const render = function (
   id: string,
   text: string,
-  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
-): Promise<void> {
+): string {
+  addDiagrams();
+  configApi.reset();
+  text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
+  const graphInit = utils.detectInit(text);
+  if (graphInit) {
+    directiveSanitizer(graphInit);
+    configApi.addDirective(graphInit);
+  }
+  const cnf = configApi.getConfig();
+
+  log.debug(cnf);
+
+  // Check the maximum allowed text size
+  if (text.length > cnf.maxTextSize!) {
+    text = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
+  }
+
+  let root: any = select('body');
+
+  // In regular execution the container will be the div with a mermaid class
+  if (typeof container !== 'undefined') {
+    // A container was provided by the caller
+    if (container) {
+      container.innerHTML = '';
+    }
+
+    if (cnf.securityLevel === 'sandbox') {
+      // IF we are in sandboxed mode, we do everyting mermaid related
+      // in a sandboxed div
+      const iframe = select(container)
+        .append('iframe')
+        .attr('id', 'i' + id)
+        .attr('style', 'width: 100%; height: 100%;')
+        .attr('sandbox', '');
+      // const iframeBody = ;
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
+      root.node().style.margin = 0;
+    } else {
+      root = select(container);
+    }
+
+    root
+      .append('div')
+      .attr('id', 'd' + id)
+      .attr('style', 'font-family: ' + cnf.fontFamily)
+      .append('svg')
+      .attr('id', id)
+      .attr('width', '100%')
+      .attr('xmlns', 'http://www.w3.org/2000/svg')
+      .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
+      .append('g');
+  } else {
+    // No container was provided
+    // If there is an existing element with the id, we remove it
+    // this likely a previously rendered diagram
+    const existingSvg = document.getElementById(id);
+    if (existingSvg) {
+      existingSvg.remove();
+    }
+
+    // Remove previous tpm element if it exists
+    let element;
+    if (cnf.securityLevel === 'sandbox') {
+      element = document.querySelector('#i' + id);
+    } else {
+      element = document.querySelector('#d' + id);
+    }
+
+    if (element) {
+      element.remove();
+    }
+
+    // Add the tmp div used for rendering with the id `d${id}`
+    // d+id it will contain a svg with the id "id"
+
+    if (cnf.securityLevel === 'sandbox') {
+      // IF we are in sandboxed mode, we do everyting mermaid related
+      // in a sandboxed div
+      const iframe = select('body')
+        .append('iframe')
+        .attr('id', 'i' + id)
+        .attr('style', 'width: 100%; height: 100%;')
+        .attr('sandbox', '');
+
+      root = select(iframe.nodes()[0]!.contentDocument!.body);
+      root.node().style.margin = 0;
+    } else {
+      root = select('body');
+    }
+
+    // This is the temporary div
+    root
+      .append('div')
+      .attr('id', 'd' + id)
+      // this is the seed of the svg to be rendered
+      .append('svg')
+      .attr('id', id)
+      .attr('width', '100%')
+      .attr('xmlns', 'http://www.w3.org/2000/svg')
+      .append('g');
+  }
+
+  text = encodeEntities(text);
+
+  // Important that we do not create the diagram until after the directives have been included
+  let diag;
+  let parseEncounteredException;
+  try {
+    // diag = new Diagram(text);
+    diag = getDiagramFromText(text);
+    if ('then' in diag) {
+      throw new Error('Diagram is a promise');
+    }
+  } catch (error) {
+    diag = new Diagram('error');
+    parseEncounteredException = error;
+  }
+  // Get the tmp element containing the the svg
+  const element = root.select('#d' + id).node();
+  const graphType = diag.type;
+
+  // insert inline style into svg
+  const svg = element.firstChild;
+  const firstChild = svg.firstChild;
+
+  let userStyles = '';
+  // user provided theme CSS
+  // If you add more configuration driven data into the user styles make sure that the value is
+  // sanitized bye the santiizeCSS function
+  if (cnf.themeCSS !== undefined) {
+    userStyles += `\n${cnf.themeCSS}`;
+  }
+  // user provided theme CSS
+  if (cnf.fontFamily !== undefined) {
+    userStyles += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
+  }
+  // user provided theme CSS
+  if (cnf.altFontFamily !== undefined) {
+    userStyles += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
+  }
+
+  // classDef
+  if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
+    const classes: any = flowRenderer.getClasses(text, diag);
+    const htmlLabels = cnf.htmlLabels || cnf.flowchart?.htmlLabels;
+    for (const className in classes) {
+      if (htmlLabels) {
+        userStyles += `\n.${className} > * { ${classes[className].styles.join(
+          ' !important; '
+        )} !important; }`;
+        userStyles += `\n.${className} span { ${classes[className].styles.join(
+          ' !important; '
+        )} !important; }`;
+      } else {
+        userStyles += `\n.${className} path { ${classes[className].styles.join(
+          ' !important; '
+        )} !important; }`;
+        userStyles += `\n.${className} rect { ${classes[className].styles.join(
+          ' !important; '
+        )} !important; }`;
+        userStyles += `\n.${className} polygon { ${classes[className].styles.join(
+          ' !important; '
+        )} !important; }`;
+        userStyles += `\n.${className} ellipse { ${classes[className].styles.join(
+          ' !important; '
+        )} !important; }`;
+        userStyles += `\n.${className} circle { ${classes[className].styles.join(
+          ' !important; '
+        )} !important; }`;
+        if (classes[className].textStyles) {
+          userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
+            ' !important; '
+          )} !important; }`;
+        }
+      }
+    }
+  }
+
+  const stylis = (selector: string, styles: string) =>
+    serialize(compile(`${selector}{${styles}}`), stringify);
+  const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));
+
+  const style1 = document.createElement('style');
+  style1.innerHTML = `#${id} ` + rules;
+  svg.insertBefore(style1, firstChild);
+
+  try {
+    diag.renderer.draw(text, id, pkg.version, diag);
+  } catch (e) {
+    errorRenderer.draw(text, id, pkg.version);
+    throw e;
+  }
+
+  root
+    .select(`[id="${id}"]`)
+    .selectAll('foreignobject > *')
+    .attr('xmlns', 'http://www.w3.org/1999/xhtml');
+
+  // Fix for when the base tag is used
+  let svgCode = root.select('#d' + id).node().innerHTML;
+
+  log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
+  if (!evaluate(cnf.arrowMarkerAbsolute) && cnf.securityLevel !== 'sandbox') {
+    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
+  }
+
+  svgCode = decodeEntities(svgCode);
+
+  // Fix for when the br tag is used
+  svgCode = svgCode.replace(/<br>/g, '<br/>');
+
+  if (cnf.securityLevel === 'sandbox') {
+    const svgEl = root.select('#d' + id + ' svg').node();
+    const width = '100%';
+    let height = '100%';
+    if (svgEl) {
+      height = svgEl.viewBox.baseVal.height + 'px';
+    }
+    svgCode = `<iframe style="width:${width};height:${height};border:0;margin:0;" src="data:text/html;base64,${btoa(
+      '<body style="margin:0">' + svgCode + '</body>'
+    )}" sandbox="allow-top-navigation-by-user-activation allow-popups">
+  The “iframe” tag is not supported by your browser.
+</iframe>`;
+  } else {
+    if (cnf.securityLevel !== 'loose') {
+      svgCode = DOMPurify.sanitize(svgCode, {
+        ADD_TAGS: ['foreignobject'],
+        ADD_ATTR: ['dominant-baseline'],
+      });
+    }
+  }
+
+  if (typeof cb !== 'undefined') {
+    switch (graphType) {
+      case 'flowchart':
+      case 'flowchart-v2':
+        cb(svgCode, flowDb.bindFunctions);
+        break;
+      case 'gantt':
+        cb(svgCode, ganttDb.bindFunctions);
+        break;
+      case 'class':
+      case 'classDiagram':
+        cb(svgCode, classDb.bindFunctions);
+        break;
+      default:
+        cb(svgCode);
+    }
+  } else {
+    log.debug('CB = undefined!');
+  }
+  attachFunctions();
+
+  const tmpElementSelector = cnf.securityLevel === 'sandbox' ? '#i' + id : '#d' + id;
+  const node = select(tmpElementSelector).node();
+  if (node && 'remove' in node) {
+    node.remove();
+  }
+
+  if (parseEncounteredException) {
+    throw parseEncounteredException;
+  }
+
+  return svgCode;
+};
+
+/**
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ */
+
+const renderAsync = async function (
+  id: string,
+  text: string,
+  cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  container?: Element
+): Promise<string> {
   addDiagrams();
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
@@ -302,7 +590,7 @@ const render = async function (
   try {
     await diag.renderer.draw(text, id, pkg.version, diag);
   } catch (e) {
-    await errorRenderer.draw(text, id, pkg.version);
+    errorRenderer.draw(text, id, pkg.version);
     throw e;
   }
 
@@ -453,7 +741,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
 };
 
 /** @param {MermaidConfig} options */
-async function initialize(options: MermaidConfig = {}) {
+function initialize(options: MermaidConfig = {}) {
   // Handle legacy location of font-family configuration
   if (options.fontFamily) {
     if (!options.themeVariables) {
@@ -483,7 +771,9 @@ async function initialize(options: MermaidConfig = {}) {
 
 export const mermaidAPI = Object.freeze({
   render,
+  renderAsync,
   parse,
+  parseAsync,
   parseDirective,
   initialize,
   getConfig: configApi.getConfig,
@@ -502,6 +792,7 @@ export const mermaidAPI = Object.freeze({
 setLogLevel(configApi.getConfig().logLevel);
 configApi.reset(configApi.getConfig());
 export default mermaidAPI;
+
 /**
  * ## mermaidAPI configuration defaults
  *

packages/mermaid/src/themes/theme-default.js

@@ -147,11 +147,18 @@ class Theme {
       this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });
     }
 
-    // Setup teh label color for the set
-    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+    // Setup the label color for the set
+    this.scaleLabelColor =
+      this.scaleLabelColor !== 'calculated' && this.scaleLabelColor
+        ? this.scaleLabelColor
+        : this.labelTextColor;
 
-    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
-      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
+    if (this.labelTextColor !== 'calculated') {
+      this.cScaleLabel0 = this.cScaleLabel0 || invert(this.labelTextColor);
+      this.cScaleLabel3 = this.cScaleLabel3 || invert(this.labelTextColor);
+      for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
+        this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.labelTextColor;
+      }
     }
 
     /* Flowchart variables */

packages/mermaid/src/themes/theme-forest.js

@@ -121,7 +121,10 @@ class Theme {
     }
 
     // Setup teh label color for the set
-    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+    this.scaleLabelColor =
+      this.scaleLabelColor !== 'calculated' && this.scaleLabelColor
+        ? this.scaleLabelColor
+        : this.labelTextColor;
 
     for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
       this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;

packages/mermaid/src/utils.ts

@@ -825,6 +825,8 @@ export const sanitizeCss = (str) => {
 export interface DetailedError {
   str: string;
   hash: any;
+  error?: any;
+  message?: string;
 }
 
 /** @param error */

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
   # all packages in direct subdirs of packages/
   - 'packages/*'
+  # - 'tests/*'

tests/webpack/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "webpack",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "module": "commonjs",
+  "scripts": {
+    "build": "webpack",
+    "serve": "webpack serve"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "mermaid": "workspace:*",
+    "@mermaid-js/mermaid-mindmap": "workspace:*"
+  }
+}

tests/webpack/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Getting Started</title>
+  </head>
+  <body>
+    <div id="graphDiv"></div>
+    <script src="./main.js"></script>
+  </body>
+</html>

tests/webpack/src/index.js

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
+const mermaid = require('mermaid');
+import mindmap from '@mermaid-js/mermaid-mindmap';
+
+const render = async (graph) => {
+  const svg = await mermaid.renderAsync('dummy', graph);
+  console.log(svg);
+  document.getElementById('graphDiv').innerHTML = svg;
+};
+
+const load = async () => {
+  await mermaid.registerExternalDiagrams([mindmap]);
+  await render('info');
+
+  setTimeout(async () => {
+    await render(`mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectivness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+			`);
+  }, 2500);
+};
+
+window.addEventListener('load', load, false);

tests/webpack/webpack.config.js

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};