fix: getElementById type issue.

Converts mindmapDB to TS

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,43 @@
+---
+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

@@ -1,69 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -0,0 +1,19 @@
+---
+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

@@ -0,0 +1,16 @@
+---
+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

@@ -1,34 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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.

.npmrc

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

.vite/build.ts

@@ -23,13 +23,23 @@ 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 {
@@ -101,7 +111,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/**',
       ],
     };
   }
@@ -131,7 +141,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,15 +1,7 @@
-import express, { NextFunction, Request, Response } from 'express';
+import express 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();
 
@@ -20,7 +12,6 @@ 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,8 +2,6 @@ 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,
@@ -52,12 +50,9 @@ 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,
     });
   }
 
@@ -69,9 +64,7 @@ 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);
@@ -107,12 +100,9 @@ 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,
     });
   }
 
@@ -122,9 +112,7 @@ 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

@@ -1,13 +0,0 @@
-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

@@ -1,49 +0,0 @@
-<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/viewer.js

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

docs/index.html

@@ -49,10 +49,10 @@
   <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 mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
-      await mermaid.registerExternalDiagrams([mindmap]);
+      // 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;
 
@@ -60,18 +60,20 @@
         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() {
-        mermaid.parseError = (e) => {
+        await mermaid.initialize(conf);
-          console.log('parse error', e); // eslint-disable-line
-        };
-        await mermaid.registerExternalDiagrams([mindmap]);
-        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>

package.json

@@ -3,8 +3,19 @@
   "private": true,
   "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",
@@ -17,7 +28,7 @@
   "scripts": {
     "build:mermaid": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts --mermaid",
     "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
-    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly",
+    "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
@@ -136,6 +147,9 @@
   "resolutions": {
     "d3": "^7.0.0"
   },
+  "files": [
+    "dist"
+  ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss"

packages/mermaid-example-diagram/Readme.md

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

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

@@ -12,5 +12,3 @@ 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.2-rc.2",
+  "version": "9.2.0-rc3",
   "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": {
     ".": {
-      "import": "./dist/mermaid-mindmap.core.mjs",
+      "require": "./dist/mermaid-mindmap.min.js",
-      "types": "./dist/detector.d.ts"
+      "import": "./dist/mermaid-mindmap.core.mjs"
     },
     "./*": "./*"
   },

packages/mermaid-mindmap/src/detector.ts

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

packages/mermaid-mindmap/src/mermaidUtils.ts

@@ -1,4 +1,4 @@
-import type { MermaidConfig } from 'mermaid';
+import type { MermaidConfig } from 'mermaid/dist/config.type';
 
 const warning = (s: string) => {
   // Todo remove debug code

packages/mermaid-mindmap/src/mindmapDb.ts

@@ -1,6 +1,6 @@
-/** Created by knut on 23-07-2022. */
+/** Created by knut on 15-01-14. */
 import { sanitizeText, getConfig, log } from './mermaidUtils';
-import type { DetailedError } from 'mermaid';
+import type { DetailedError } from 'mermaid/dist/utils';
 
 interface Node {
   id: number;
@@ -17,9 +17,11 @@ interface Node {
 
 let nodes: Node[] = [];
 let cnt = 0;
+let elements: Record<number, HTMLElement> = {};
 export const clear = () => {
   nodes = [];
   cnt = 0;
+  elements = {};
 };
 
 const getParent = function (level: number) {
@@ -105,6 +107,10 @@ export const getType = (startStr: string, endStr: string): number => {
   }
 };
 
+export const setElementForId = (id: number, element: HTMLElement) => {
+  elements[id] = element;
+};
+
 export const decorateNode = (decoration: { icon: string; class: string }) => {
   const node = nodes[nodes.length - 1];
   if (decoration && decoration.icon) {
@@ -144,3 +150,5 @@ export const setErrorHandler = (handler: ParseErrorFunction) => {
 export const getLogger = () => log;
 
 export const getNodeById = (id: number): Node => nodes[id];
+export const getElementById = (id: number | string): HTMLElement =>
+  elements[typeof id === 'string' ? parseInt(id) : id];

packages/mermaid-mindmap/src/mindmapRenderer.js

@@ -1,9 +1,10 @@
-/** Created by knut on 23-07-2022. */
+/** Created by knut on 14-12-11. */
 import { select } from 'd3';
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
-import svgDraw, { getElementById, clearElementRefs } from './svgDraw';
+import svgDraw from './svgDraw';
 import cytoscape from 'cytoscape';
 import coseBilkent from 'cytoscape-cose-bilkent';
+import * as db from './mindmapDb';
 
 // Inject the layout algorithm into cytoscape
 cytoscape.use(coseBilkent);
@@ -154,7 +155,7 @@ function positionNodes(cy) {
     data.x = node.position().x;
     data.y = node.position().y;
     svgDraw.positionNode(data);
-    const el = getElementById(data.nodeId);
+    const el = db.getElementById(data.nodeId);
     log.info('Id:', id, 'Position: (', node.position().x, ', ', node.position().y, ')', data);
     el.attr(
       'transform',
@@ -178,7 +179,6 @@ export const draw = async (text, id, version, diagObj) => {
 
   // This is done only for throwing the error if the text is not valid.
   diagObj.db.clear();
-  clearElementRefs();
   // Parse the graph definition
   diagObj.parser.parse(text);
 

packages/mermaid-mindmap/src/styles.js

@@ -22,10 +22,12 @@ 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]};
+      // color: ${options['gitInv' + i]};
     }
     .section-edge-${i - 1}{
       stroke: ${options['cScale' + i]};
@@ -34,7 +36,7 @@ const genSections = (options) => {
       stroke-width: ${sw};
     }
     .section-${i - 1} line {
-      stroke: ${options['cScaleInv' + i]} ;
+      stroke: ${options['lineColor' + i]} ;
       stroke-width: 3;
     }
 

packages/mermaid-mindmap/src/svgDraw.js

@@ -259,7 +259,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
   // if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
   //   nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
   // }
-  setElementById(node.id, nodeElem);
+  db.setElementForId(node.id, nodeElem);
   return node.height;
 };
 
@@ -286,7 +286,7 @@ export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, ful
 };
 
 export const positionNode = function (node) {
-  const nodeElem = getElementById(node.id);
+  const nodeElem = db.getElementById(node.id);
 
   const x = node.x || 0;
   const y = node.y || 0;
@@ -294,18 +294,4 @@ export const positionNode = function (node) {
   nodeElem.attr('transform', 'translate(' + x + ',' + y + ')');
 };
 
-let elements = {};
-
-const setElementById = (id, element) => {
-  elements[id] = element;
-};
-
-export const getElementById = (id) => {
-  return elements[id];
-};
-
-export const clearElementRefs = () => {
-  elements = {};
-};
-
 export default { drawNode, positionNode, drawEdge };

packages/mermaid/README.md

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

packages/mermaid/package.json

@@ -1,11 +1,11 @@
 {
   "name": "mermaid",
-  "version": "9.2.2-rc.2",
+  "version": "9.2.0-rc6",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "./dist/mermaid.min.js",
+  "main": "./dist/mermaid.core.mjs",
   "module": "./dist/mermaid.core.mjs",
   "types": "./dist/mermaid.d.ts",
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",
@@ -127,8 +127,7 @@
     "d3": "^7.0.0"
   },
   "files": [
-    "dist",
+    "dist"
-    "README.md"
   ],
   "sideEffects": [
     "**/*.css",

packages/mermaid/src/Diagram.ts

@@ -106,10 +106,11 @@ export const getDiagramFromText = (
     // 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);
+      registerDiagram(type, diagram, undefined, diagram.injectUtils);
       return new Diagram(txt, parseError);
     });
   }
+  // return new Diagram(txt, parseError);
 };
 
 export default Diagram;

packages/mermaid/src/__mocks__/mermaidAPI.ts

@@ -25,7 +25,6 @@ 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,8 +40,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[])
   }
 
   currentConfig = cfg;
-  checkConfig(currentConfig);
+  return cfg;
-  return currentConfig;
 };
 
 /**
@@ -69,7 +68,7 @@ export const setSiteConfig = (conf: MermaidConfig): MermaidConfig => {
     siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
   }
 
-  updateCurrentConfig(siteConfig, directives);
+  currentConfig = updateCurrentConfig(siteConfig, directives);
   return siteConfig;
 };
 
@@ -118,7 +117,6 @@ export const setConfig = (conf: MermaidConfig): MermaidConfig => {
   //   conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
   // });
 
-  checkConfig(conf);
   assignWithDepth(currentConfig, conf);
 
   return getConfig();
@@ -226,25 +224,3 @@ 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,9 +3,7 @@
 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;

packages/mermaid/src/defaultConfig.ts

@@ -115,6 +115,7 @@ 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,19 +22,17 @@ 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
+  detector?: DiagramDetector,
+  callback?: (
+    _log: any,
+    _setLogLevel: any,
+    _getConfig: any,
+    _sanitizeText: any,
+    _setupGraphViewbox: any
+  ) => void
 ) => {
   log.debug(`Registering diagram ${id}`);
   if (diagrams[id]) {
@@ -50,9 +48,8 @@ export const registerDiagram = (
     addDetector(id, detector);
   }
   addStylesForDiagram(id, diagram.styles);
-
+  if (typeof callback !== 'undefined') {
-  if (diagram.injectUtils) {
+    callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
-    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,13 +14,7 @@ export interface DiagramDefinition {
   parser: any;
   styles: any;
   init?: (config: MermaidConfig) => void;
-  injectUtils?: (
+  injectUtils?: (utils: InjectUtils) => void;
-    _log: InjectUtils['_log'],
-    _setLogLevel: InjectUtils['_setLogLevel'],
-    _getConfig: InjectUtils['_getConfig'],
-    _sanitizeText: InjectUtils['_sanitizeText'],
-    _setupGraphViewbox: InjectUtils['_setupGraphViewbox']
-  ) => void;
 }
 
 export interface DetectorRecord {
@@ -28,11 +22,5 @@ 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 }>;
+export type DiagramLoader = (() => Promise<{ id: string; diagram: DiagramDefinition }>) | null;

packages/mermaid/src/docs/index.html

@@ -49,10 +49,10 @@
   <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 mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
-      await mermaid.registerExternalDiagrams([mindmap]);
+      // 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;
 
@@ -60,18 +60,20 @@
         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() {
-        mermaid.parseError = (e) => {
+        await mermaid.initialize(conf);
-          console.log('parse error', e); // eslint-disable-line
-        };
-        await mermaid.registerExternalDiagrams([mindmap]);
-        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>

packages/mermaid/src/mermaid.spec.ts

@@ -54,88 +54,6 @@ describe('when using mermaid and ', function () {
       expect(mermaidAPI.render).toHaveBeenCalled();
     });
   });
-  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;'));
-
-      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.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(() => {
-      // we modify mermaid config in some tests, so we need to make sure to reset them
-      mermaidAPI.reset();
-    });
-  });
 
   describe('checking validity of input ', function () {
     it('should throw for an invalid definition', function () {

packages/mermaid/src/mermaid.ts

@@ -2,18 +2,14 @@
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code!
  */
-import type { MermaidConfig } from './config.type';
+import { MermaidConfig } from './config.type';
 import { log } from './logger';
 import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
-import { isDetailedError, type DetailedError } from './utils';
+import { isDetailedError } from './utils';
 import { registerDiagram } from './diagram-api/diagramAPI';
-import { ExternalDiagramDefinition } from './diagram-api/types';
 
-export type { MermaidConfig, DetailedError, ExternalDiagramDefinition };
-
-let externalDiagramsRegistered = false;
 /**
  * ## init
  *
@@ -50,8 +46,9 @@ const init = async function (
   callback?: Function
 ) {
   try {
-    // Not really sure if we need to check this, or simply call initThrowsErrorsAsync directly.
+    const conf = mermaidAPI.getConfig();
-    if (externalDiagramsRegistered) {
+    if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
+      await registerLazyLoadedDiagrams(conf);
       await initThrowsErrorsAsync(config, nodes, callback);
     } else {
       initThrowsErrors(config, nodes, callback);
@@ -67,32 +64,6 @@ const init = 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
@@ -101,6 +72,7 @@ const initThrowsErrors = 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
@@ -132,7 +104,7 @@ const initThrowsErrors = function (
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt: string;
-  const errors: DetailedError[] = [];
+  const errors = [];
 
   // element is the current div with mermaid class
   for (const element of Array.from(nodesToProcess)) {
@@ -172,7 +144,13 @@ const initThrowsErrors = function (
         element
       );
     } catch (error) {
-      handleError(error, errors, mermaid.parseError);
+      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);
     }
   }
   if (errors.length > 0) {
@@ -181,56 +159,49 @@ const initThrowsErrors = function (
   }
 };
 
+let lazyLoadingPromise: Promise<unknown> | undefined = undefined;
 /**
- * This is an internal function and should not be made public, as it will likely change.
+ * @param conf
- * @internal
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
- * @param diagrams - Array of {@link ExternalDiagramDefinition}.
  */
-const registerLazyLoadedDiagrams = (diagrams: ExternalDiagramDefinition[]) => {
+const registerLazyLoadedDiagrams = async (conf: MermaidConfig) => {
-  for (const { id, detector, loader } of diagrams) {
+  // Only lazy load once
-    addDetector(id, detector, loader);
+  // 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);
+      })
+    );
   }
+  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;
 };
 
 /**
- * This is an internal function and should not be made public, as it will likely change.
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
- * @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
@@ -239,7 +210,7 @@ const initThrowsErrorsAsync = 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
@@ -271,7 +242,7 @@ const initThrowsErrorsAsync = async function (
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt: string;
-  const errors: DetailedError[] = [];
+  const errors = [];
 
   // element is the current div with mermaid class
   for (const element of Array.from(nodesToProcess)) {
@@ -311,7 +282,13 @@ const initThrowsErrorsAsync = async function (
         element
       );
     } catch (error) {
-      handleError(error, errors, mermaid.parseError);
+      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);
     }
   }
   if (errors.length > 0) {
@@ -325,25 +302,16 @@ const initialize = function (config: MermaidConfig) {
 };
 
 /**
- * Used to register external diagram types.
+ * @param config
- * @param diagrams - Array of {@link ExternalDiagramDefinition}.
+ * @deprecated This is an internal function and should not be used. Will be removed in v10.
- * @param opts
- * @param opts.lazyLoad - If true, the diagram will be loaded on demand.
  */
-const registerExternalDiagrams = async (
+const initializeAsync = async function (config: MermaidConfig) {
-  diagrams: ExternalDiagramDefinition[],
+  if (config.loadExternalDiagramsAtStartup) {
-  {
+    await loadExternalDiagrams(config);
-    lazyLoad = true,
-  }: {
-    lazyLoad?: boolean;
-  } = {}
-) => {
-  if (lazyLoad) {
-    registerLazyLoadedDiagrams(diagrams);
   } else {
-    await loadExternalDiagrams(diagrams);
+    await registerLazyLoadedDiagrams(config);
   }
-  externalDiagramsRegistered = true;
+  mermaidAPI.initialize(config);
 };
 
 /**
@@ -389,123 +357,12 @@ 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> => {
+const parseAsync = (txt: string) => {
-  return new Promise((resolve, reject) => {
+  return mermaidAPI.parseAsync(txt, mermaid.parseError);
-    // 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: {
@@ -517,12 +374,10 @@ const mermaid: {
   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;
+  initializeAsync: typeof initializeAsync;
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
 } = {
@@ -532,12 +387,10 @@ const mermaid: {
   parse,
   parseAsync,
   render: mermaidAPI.render,
-  renderAsync,
   init,
   initThrowsErrors,
-  initThrowsErrorsAsync,
-  registerExternalDiagrams,
   initialize,
+  initializeAsync,
   parseError: undefined,
   contentLoaded,
   setParseErrorHandler,

packages/mermaid/src/mermaidAPI.ts

@@ -115,19 +115,19 @@ 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 cb - Optional callback which
+ * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb 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 Returns the rendered element as a string containing the SVG definition.
+ * @returns {void}
  */
 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
-): string {
+): void {
   addDiagrams();
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
@@ -401,9 +401,9 @@ const render = function (
 const renderAsync = async function (
   id: string,
   text: string,
-  cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
-): Promise<string> {
+): Promise<void> {
   addDiagrams();
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
@@ -741,13 +741,12 @@ const handleDirective = function (p: any, directive: any, type: string): void {
 };
 
 /** @param {MermaidConfig} options */
-function initialize(options: MermaidConfig = {}) {
+function initialize(options: MermaidConfig) {
   // Handle legacy location of font-family configuration
-  if (options.fontFamily) {
+  if (options?.fontFamily) {
-    if (!options.themeVariables) {
+    if (!options.themeVariables?.fontFamily) {
-      options.themeVariables = {};
+      options.themeVariables = { fontFamily: options.fontFamily };
     }
-    options.themeVariables.fontFamily = options.fontFamily;
   }
 
   // Set default options

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

@@ -147,18 +147,11 @@ class Theme {
       this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });
     }
 
-    // Setup the label color for the set
+    // Setup teh label color for the set
-    this.scaleLabelColor =
+    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
-      this.scaleLabelColor !== 'calculated' && this.scaleLabelColor
-        ? this.scaleLabelColor
-        : this.labelTextColor;
 
-    if (this.labelTextColor !== 'calculated') {
+    for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
-      this.cScaleLabel0 = this.cScaleLabel0 || invert(this.labelTextColor);
+      this['cScaleLabel' + i] = this['cScaleLabel' + i] || this.scaleLabelColor;
-      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,10 +121,7 @@ class Theme {
     }
 
     // Setup teh label color for the set
-    this.scaleLabelColor =
+    this.scaleLabelColor = this.scaleLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
-      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,8 +825,6 @@ export const sanitizeCss = (str) => {
 export interface DetailedError {
   str: string;
   hash: any;
-  error?: any;
-  message?: string;
 }
 
 /** @param error */

pnpm-workspace.yaml

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

tests/webpack/package.json

@@ -1,23 +0,0 @@
-{
-  "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

@@ -1,11 +0,0 @@
-<!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

@@ -1,38 +0,0 @@
-/* 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

@@ -1,10 +0,0 @@
-// 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'),
-  },
-};