Merge pull request #3767 from aloisklink/fix/convert-package-back-to-commonjs

[9.2] fix(mermaid): default mermaid back to CommonJS
Merge pull request #3768 from aloisklink/fix/fix-mermaid.render-types
2025-11-02 20:04:14 +01:00 · 2022-11-07 14:31:45 +05:30 · 2022-11-07 14:01:37 +05:30 · 2022-11-06 23:41:09 +00:00 · 2022-11-06 22:46:57 +00:00 · 2022-11-01 15:27:20 +01:00
23 changed files with 2135 additions and 214 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -32,5 +32,6 @@ cypress/snapshots/
 .eslintcache
 .tsbuildinfo
 tsconfig.tsbuildinfo
+knsv*.html

 local*.html
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=true
--- a/.vite/server.ts
+++ b/.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'));
--- a/cypress/platform/knsv2.html
+++ b/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
--- a/cypress/platform/render-after-error.html
+++ b/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>
--- a/cypress/platform/rerender.html
+++ b/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>
--- a/docs/index.html
+++ b/docs/index.html
@@ -49,14 +49,39 @@
  <body>
    <div id="app"></div>
    <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
+      // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
+      console.log(mermaid); // eslint-disable-line
      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; }',
+        lazyLoadedDiagrams: [
+          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0-rc3/dist/mermaid-mindmap-detector.esm.mjs',
+          // 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
+        ],
+      };
+      if (isDarkMode) conf.theme = 'dark';
+
+      async function loadMermaid() {
+        await mermaid.initialize(conf);
+        console.log('mermaid initialized'); // eslint-disable-line
+      }
+      mermaid.parseError = (e) => {
+        console.log('parse error', e); // 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 +122,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 +146,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 +165,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>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "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",
--- a/packages/mermaid-mindmap/package.json
+++ b/packages/mermaid-mindmap/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/mermaid-mindmap",
-  "version": "9.2.0-rc4",
+  "version": "9.2.0",
  "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",
--- a/packages/mermaid-mindmap/src/styles.js
+++ b/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]};
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,11 +1,11 @@
 {
  "name": "mermaid",
-  "version": "9.2.0-rc2",
+  "version": "9.2.0",
  "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",
--- a/packages/mermaid/src/Diagram.ts
+++ b/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,17 @@ 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, diagram.injectUtils);
+      return new Diagram(txt, parseError);
+    });
  }
-  // If either of the above worked, we have the diagram
-  // logic and can continue
-  return new Diagram(txt, parseError);
+  // return new Diagram(txt, parseError);
 };

 export default Diagram;
--- a/packages/mermaid/src/mocks/mermaidAPI.ts
+++ b/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(),
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -4,6 +4,7 @@ import DOMPurify from 'dompurify';

 export interface MermaidConfig {
  lazyLoadedDiagrams?: string[];
+  loadExternalDiagramsAtStartup?: boolean;
  theme?: string;
  themeVariables?: any;
  themeCSS?: string;
--- a/packages/mermaid/src/docs/index.html
+++ b/packages/mermaid/src/docs/index.html
@@ -49,14 +49,39 @@
  <body>
    <div id="app"></div>
    <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
+      // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
+      console.log(mermaid); // eslint-disable-line
      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; }',
+        lazyLoadedDiagrams: [
+          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0-rc3/dist/mermaid-mindmap-detector.esm.mjs',
+          // 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
+        ],
+      };
+      if (isDarkMode) conf.theme = 'dark';
+
+      async function loadMermaid() {
+        await mermaid.initialize(conf);
+        console.log('mermaid initialized'); // eslint-disable-line
+      }
+      mermaid.parseError = (e) => {
+        console.log('parse error', e); // 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 +122,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 +146,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 +165,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>
--- a/packages/mermaid/src/logger.ts
+++ b/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')
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -48,11 +48,13 @@ 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();
    });
+  });
+  describe('when using #initThrowsErrorsAsync', function () {
    it('should throw error (but still render) if lazyLoadedDiagram fails', async () => {
      const node = document.createElement('div');
      node.appendChild(document.createTextNode('graph TD;\na;'));
@@ -60,14 +62,14 @@ describe('when using mermaid and ', function () {
      mermaidAPI.setConfig({
        lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'],
      });
-      await expect(mermaid.initThrowsErrors(undefined, node)).rejects.toThrowError(
+      await expect(mermaid.initThrowsErrorsAsync(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'
      );

      // should still render, even if lazyLoadedDiagrams fails
-      expect(mermaidAPI.render).toHaveBeenCalled();
+      expect(mermaidAPI.renderAsync).toHaveBeenCalled();
    });

    afterEach(() => {
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -7,7 +7,8 @@ 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';

 export type { MermaidConfig, DetailedError };
 /**
@@ -46,7 +47,12 @@ const init = async function (
  callback?: Function
 ) {
  try {
-    await initThrowsErrors(config, nodes, callback);
+    const conf = mermaidAPI.getConfig();
+    if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
+      await initThrowsErrorsAsync(config, nodes, callback);
+    } else {
+      initThrowsErrors(config, nodes, callback);
+    }
  } catch (e) {
    log.warn('Syntax Error rendering');
    if (isDetailedError(e)) {
@@ -58,19 +64,32 @@ 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 +97,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 +128,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 +155,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 +168,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 +177,174 @@ const initThrowsErrors = async function (
  }
 };

-const initialize = async function (config: MermaidConfig) {
-  await mermaidAPI.initialize(config);
+let lazyLoadingPromise: Promise<PromiseSettledResult<void>[]> | undefined = undefined;
+/**
+ * This is an internal function and should not be made public, as it will likely change.
+ * @internal
+ * @param conf - Mermaid config.
+ * @returns An array of {@link PromiseSettledResult}, showing the status of imports.
+ */
+const registerLazyLoadedDiagrams = async (conf: MermaidConfig) => {
+  // Only lazy load once
+  // TODO: This is a hack. We should either throw error when new diagrams are added, or load them anyway.
+  if (lazyLoadingPromise === undefined) {
+    // Load all lazy loaded diagrams in parallel
+    lazyLoadingPromise = Promise.allSettled(
+      (conf?.lazyLoadedDiagrams ?? []).map(async (diagram: string) => {
+        const { id, detector, loadDiagram } = await import(diagram);
+        addDetector(id, detector, loadDiagram);
+      })
+    );
+  }
+  return await lazyLoadingPromise;
+};
+
+let loadingPromise: Promise<unknown> | undefined = undefined;
+
+const loadExternalDiagrams = async (conf: MermaidConfig) => {
+  // Only lazy load once
+  // TODO: This is a hack. We should either throw error when new diagrams are added, or load them anyway.
+  if (loadingPromise === undefined) {
+    log.debug(`Loading ${conf?.lazyLoadedDiagrams?.length} external diagrams`);
+    // Load all lazy loaded diagrams in parallel
+    loadingPromise = Promise.allSettled(
+      (conf?.lazyLoadedDiagrams ?? []).map(async (url: string) => {
+        const { id, detector, loadDiagram } = await import(url);
+        const { diagram } = await loadDiagram();
+        registerDiagram(id, diagram, detector, diagram.injectUtils);
+      })
+    );
+  }
+  await loadingPromise;
+};
+
+/**
+ * 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();
+
+  const registerLazyLoadedDiagramsErrors: Error[] = [];
+  for (const registerResult of await registerLazyLoadedDiagrams(conf)) {
+    if (registerResult.status == 'rejected') {
+      registerLazyLoadedDiagramsErrors.push(registerResult.reason);
+    }
+  }
+
+  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);
+    }
+  }
+  const allErrors = [...registerLazyLoadedDiagramsErrors, ...errors];
+  if (allErrors.length > 0) {
+    // TODO: We should be throwing an error object.
+    throw allErrors[0];
+  }
+};
+
+const initialize = function (config: MermaidConfig) {
+  mermaidAPI.initialize(config);
+};
+
+/**
+ * @param config
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ */
+const initializeAsync = async function (config: MermaidConfig) {
+  if (config.loadExternalDiagramsAtStartup) {
+    await loadExternalDiagrams(config);
+  } else {
+    await registerLazyLoadedDiagrams(config);
+  }
+  mermaidAPI.initialize(config);
 };

 /**
@@ -219,7 +380,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 +390,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) => {
+  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 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 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,10 +516,14 @@ 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;
  initialize: typeof initialize;
+  initializeAsync: typeof initializeAsync;
  contentLoaded: typeof contentLoaded;
  setParseErrorHandler: typeof setParseErrorHandler;
 } = {
@@ -247,10 +531,14 @@ const mermaid: {
  diagrams: {},
  mermaidAPI,
  parse,
+  parseAsync,
  render: mermaidAPI.render,
+  renderAsync,
  init,
  initThrowsErrors,
+  initThrowsErrorsAsync,
  initialize,
+  initializeAsync,
  parseError: undefined,
  contentLoaded,
  setParseErrorHandler,
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/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
 *
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/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 */
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/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;
--- a/packages/mermaid/src/utils.ts
+++ b/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 */
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Sidharth Vinod	2243af1871	Merge pull request #3767 from aloisklink/fix/convert-package-back-to-commonjs [9.2] fix(mermaid): default mermaid back to CommonJS	2022-11-07 14:31:45 +05:30
Sidharth Vinod	41dbf0fa96	Merge pull request #3768 from aloisklink/fix/fix-mermaid.render-types [9.2] fix(mermaid): fix `mermaid.render` types	2022-11-07 14:01:37 +05:30
Alois Klink	1a5e7315c0	fix(mermaid): default mermaid back to CommonJS Default mermaid back to being a CommonJS module. Improrting Mermaid as CommonJS (e.g. using `require("mermaid")`) is normally broken (since v8), due to it's dependency on d3, which is now ESM only. However, it looks like some software (e.g. TypeScript, in the docusaurus project) could still handle the CommonJS version of Mermaid. This commit now means that older versions of Node/build-tools should now default to using the CommonJS version of Mermaid. Newer tools should still see that the `"module"` field points to ESM, or use the `exports["."]["import"]` field to load ESM.	2022-11-06 23:41:09 +00:00
Alois Klink	da6bb9498a	fix(mermaid): fix mermaid.render types The cb param of mermaid.render should be optional, and mermaid.render returns an SVG string instead of `void`.	2022-11-06 22:46:57 +00:00
Knut Sveidqvist	e78ac9b92a	Updated version	2022-11-01 15:27:20 +01:00
Knut Sveidqvist	d4c19ffa59	Merge branch 'release/9.2.0' of github.com:mermaid-js/mermaid into release/9.2.0	2022-10-28 09:34:36 +02:00
Knut Sveidqvist	120940f9f4	Merge pull request #3731 from aloisklink/fix/load-lazy-loaded-diagrams-in-initThrowsErrors [9.2.0] Support `lazyLoadedDiagrams` when calling `initThrowsErrorsAsync`	2022-10-28 09:33:58 +02:00
Alois Klink	48b1f489fc	fix(mermaid): error if lazyLoadedDiagrams fails Throws and logs a warning if lazyLoadedDiagrams fails to load properly. Rendering is still performed, even on a lazyLoadedDiagrams failure.	2022-10-27 17:48:21 +01:00
Alois Klink	e62dd255bc	feat: expose initThrowsErrorsAsync publicly Expose the function `initThrowsErrorsAsync()` publicly as `mermaid.initThrowsErrorsAsync()`. It has the TSDoc `@alpha` and `@deprecated` tags, so people should be warned that it might be modified in Mermaid v10 or earlier. Needed for `mermaid-cli` to handle `lazyLoadedDiagrams`.	2022-10-27 17:48:12 +01:00
Alois Klink	13110c4ed9	docs(mermaid): document initThrowsErrorsAsync Add some basic tsdoc for initThrowsErrorsAsync.	2022-10-27 17:02:50 +01:00
Alois Klink	327fcbf902	fix: lazy load diagrams in initThrowsErrorsAsync Previously, calling initThrowsErrorsAsync would not load any of the lazyLoadedDiagrams entries. Adaptated from reverted commit `4601c90904`	2022-10-27 16:50:57 +01:00
Alois Klink	81924f72c8	Revert "Merge branch 'release_9.2.0_buggfixes'" This reverts commit `1a0309fb87`, reversing changes made to `56a8068a7f`. This is because the PR https://github.com/mermaid-js/mermaid/pull/3702 worked fine on the `develop` and `release_9.2.0_buggfixes` branches, but had a bunch of git merge conflicts on the `release/9.2.0` branch.	2022-10-27 16:43:09 +01:00
Knut Sveidqvist	1a0309fb87	Merge branch 'release_9.2.0_buggfixes' Conflicts: packages/mermaid/src/mermaid.ts	2022-10-24 10:28:27 +02:00
Knut Sveidqvist	8ad8d39fe4	Versions for latest rcs	2022-10-20 12:57:29 +02:00
Sidharth Vinod	56a8068a7f	fix: Error handling	2022-10-19 20:30:07 +05:30
Sidharth Vinod	d17aa6ecdd	Merge branch 'release_9.2.0_buggfixes' into release/9.2.0 * release_9.2.0_buggfixes: fix: Add default arg to options fix: Build types chore: Update creation date fix: getElementById type issue.	2022-10-19 19:21:19 +05:30
Sidharth Vinod	4c311ea4b1	fix: TS errors	2022-10-19 19:03:29 +05:30
Knut Sveidqvist	1388e201e5	Adding queue for async calls in mermaidts and fixing icon color	2022-10-19 14:30:36 +02:00
Sidharth Vinod	125312c114	chore: Add CORS to vite dev	2022-10-19 12:48:09 +02:00
Knut Sveidqvist	ea314cd24a	Setting version to rc7	2022-10-19 08:01:21 +02:00
Knut Sveidqvist	8230c8f8b4	Merge remote-tracking branch 'origin/release/9.2.0' into release/9.2.0	2022-10-19 07:52:14 +02:00
Knut Sveidqvist	d115fbc6da	Merge branch 'release_9.2.0_buggfixes' into release/9.2.0	2022-10-19 07:52:05 +02:00
Sidharth Vinod	775fb80c43	Merge branch 'release_9.2.0_buggfixes' into release/9.2.0 * release_9.2.0_buggfixes: fix: Remove hardcoded numericLevel fix: Diagram load issue	2022-10-15 21:38:34 +05:30
Sidharth Vinod	b486177ca7	fix: Diagram load issue	2022-10-15 00:28:21 +05:30
Knut Sveidqvist	957e64fe8a	Docs with lazy loading using rc bundles	2022-10-14 16:10:57 +02:00
Knut Sveidqvist	7881d1e457	Merge branch 'release_9.2.0_buggfixes' into release/9.2.0	2022-10-14 15:12:56 +02:00
Knut Sveidqvist	fc8db95597	Release 9.20 fixes of docsify	2022-10-14 15:05:00 +02:00
Knut Sveidqvist	cc10e62ebd	Merge branch 'release_9.2.0_buggfixes' into release/9.2.0	2022-10-14 10:03:02 +02:00
Knut Sveidqvist	d348f2847c	Merge branch 'release_9.2.0_buggfixes' into release/9.2.0	2022-10-12 11:54:22 +02:00
Sidharth Vinod	ebef4a1416	chore: add `auto-install-peers` to `.npmrc`	2022-10-12 12:02:08 +05:30
Sidharth Vinod	24605784f2	chore: Update lockfile	2022-10-12 12:01:54 +05:30
Sidharth Vinod	3240f8ae56	feat: loadExternalDiagramsAtStartup	2022-10-12 11:56:39 +05:30
Sidharth Vinod	50f44c5cb0	Merge branch 'release/9.2.0' of https://github.com/mermaid-js/mermaid into release/9.2.0 * 'release/9.2.0' of https://github.com/mermaid-js/mermaid: #3252 Handling for trailing whitespaces in subgraph titles	2022-10-11 16:17:00 +05:30
Sidharth Vinod	cc2f4f779a	feat: Add initializeAsync	2022-10-11 16:16:54 +05:30
Knut Sveidqvist	00ce0fc034	Merge branch 'release_9.2.0_buggfixes' into release/9.2.0	2022-10-11 12:30:38 +02:00
Knut Sveidqvist	bc5ef5fb7d	Fix for async issue in parse, adding parseAsync	2022-10-11 11:20:34 +02:00
Knut Sveidqvist	c20b8a0664	Merge pull request #3633 from mermaid-js/sidv/dirtyFixSync fix: Dirty fix for sync render.	2022-10-11 09:04:43 +02:00
Sidharth Vinod	23e590e09b	Revert "fix(test): Rerender" This reverts commit `a017ffc3c9`.	2022-10-10 22:04:33 +08:00
Sidharth Vinod	60e4585e20	Revert "fix: use async in render-after-error" This reverts commit `d59f878020`.	2022-10-10 22:04:05 +08:00
Sidharth Vinod	ba436cc37a	fix: Tests	2022-10-10 21:57:22 +08:00
Sidharth Vinod	960ea450e9	fix: Dirty fix for sync render. Should be reverted for v10	2022-10-10 21:50:59 +08:00