Added registerExternalDiagram for Mindmap

Fix lazy loading in webpack

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/diagram_proposal.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

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

.github/ISSUE_TEMPLATE/question.md

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

.github/ISSUE_TEMPLATE/syntax_proposal.yml

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

.github/ISSUE_TEMPLATE/theme_proposal.yml

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

.npmrc

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

.vite/build.ts

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

applitools.config.js

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

cypress/helpers/util.js

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

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

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

cypress/platform/external-diagrams-mindmap.html

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

cypress/platform/viewer.js

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

docs/index.html

@@ -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.2.0-rc6/dist/mermaid.esm.min.mjs';
-      // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
-      console.log(mermaid); // eslint-disable-line
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.mjs';
+      await mermaid.registerExternalDiagrams([mindmap]);
+
       window.mermaid = mermaid;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
@@ -60,20 +60,18 @@
         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);
+        mermaid.parseError = (e) => {
+          console.log('parse error', e); // eslint-disable-line
+        };
+        await mermaid.registerExternalDiagrams([mindmap]);
+        mermaid.initialize(conf);
         console.log('mermaid initialized'); // eslint-disable-line
       }
-      mermaid.parseError = (e) => {
-        console.log('parse error', e); // eslint-disable-line
-      };
+
       await loadMermaid();
     </script>
     <script>

package.json

@@ -3,19 +3,8 @@
   "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",
@@ -147,9 +136,6 @@
   "resolutions": {
     "d3": "^7.0.0"
   },
-  "files": [
-    "dist"
-  ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss"

packages/mermaid-example-diagram/Readme.md

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

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

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

packages/mermaid-mindmap/package.json

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

packages/mermaid-mindmap/src/detector.ts

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

packages/mermaid/README.md

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

packages/mermaid/package.json

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

packages/mermaid/src/Diagram.ts

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

packages/mermaid/src/config.ts

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

packages/mermaid/src/config.type.ts

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

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

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

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

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

packages/mermaid/src/docs/index.html

@@ -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@9.2.0-rc6/dist/mermaid.esm.min.mjs';
-      // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
-      console.log(mermaid); // eslint-disable-line
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+      import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.mjs';
+      await mermaid.registerExternalDiagrams([mindmap]);
+
       window.mermaid = mermaid;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
@@ -60,20 +60,18 @@
         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);
+        mermaid.parseError = (e) => {
+          console.log('parse error', e); // eslint-disable-line
+        };
+        await mermaid.registerExternalDiagrams([mindmap]);
+        mermaid.initialize(conf);
         console.log('mermaid initialized'); // eslint-disable-line
       }
-      mermaid.parseError = (e) => {
-        console.log('parse error', e); // eslint-disable-line
-      };
+
       await loadMermaid();
     </script>
     <script>

packages/mermaid/src/mermaid.spec.ts

@@ -54,24 +54,83 @@ describe('when using mermaid and ', function () {
       expect(mermaidAPI.render).toHaveBeenCalled();
     });
   });
-  describe('when using #initThrowsErrorsAsync', function () {
-    it('should throw error (but still render) if lazyLoadedDiagram fails', async () => {
+  describe('when using #registerExternalDiagrams', function () {
+    it('should throw error (but still render) if registerExternalDiagrams fails', async () => {
       const node = document.createElement('div');
       node.appendChild(document.createTextNode('graph TD;\na;'));
 
-      mermaidAPI.setConfig({
-        lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'],
-      });
-      await expect(mermaid.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'
-      );
+      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();

packages/mermaid/src/mermaid.ts

@@ -9,8 +9,11 @@ import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
 import { isDetailedError, type DetailedError } from './utils';
 import { registerDiagram } from './diagram-api/diagramAPI';
+import { ExternalDiagramDefinition } from './diagram-api/types';
 
-export type { MermaidConfig, DetailedError };
+export type { MermaidConfig, DetailedError, ExternalDiagramDefinition };
+
+let externalDiagramsRegistered = false;
 /**
  * ## init
  *
@@ -47,8 +50,8 @@ const init = async function (
   callback?: Function
 ) {
   try {
-    const conf = mermaidAPI.getConfig();
-    if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
+    // Not really sure if we need to check this, or simply call initThrowsErrorsAsync directly.
+    if (externalDiagramsRegistered) {
       await initThrowsErrorsAsync(config, nodes, callback);
     } else {
       initThrowsErrors(config, nodes, callback);
@@ -89,6 +92,7 @@ const handleError = (error: unknown, errors: DetailedError[], parseError?: Funct
     }
   }
 };
+
 const initThrowsErrors = function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
@@ -177,45 +181,39 @@ const initThrowsErrors = function (
   }
 };
 
-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.
+ * @param diagrams - Array of {@link ExternalDiagramDefinition}.
  */
-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);
-      })
-    );
+const registerLazyLoadedDiagrams = (diagrams: ExternalDiagramDefinition[]) => {
+  for (const { id, detector, loader } of diagrams) {
+    addDetector(id, detector, loader);
   }
-  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);
-      })
-    );
+/**
+ * This is an internal function and should not be made public, as it will likely change.
+ * @internal
+ * @param diagrams - Array of {@link ExternalDiagramDefinition}.
+ */
+const loadExternalDiagrams = async (diagrams: ExternalDiagramDefinition[]) => {
+  log.debug(`Loading ${diagrams.length} external diagrams`);
+  // Load all lazy loaded diagrams in parallel
+  const results = await Promise.allSettled(
+    diagrams.map(async ({ id, detector, loader }) => {
+      const { diagram } = await loader();
+      registerDiagram(id, diagram, detector);
+    })
+  );
+  const failed = results.filter((result) => result.status === 'rejected');
+  if (failed.length > 0) {
+    log.error(`Failed to load ${failed.length} external diagrams`);
+    for (const res of failed) {
+      log.error(res);
+    }
+    throw new Error(`Failed to load ${failed.length} external diagrams`);
   }
-  await loadingPromise;
 };
 
 /**
@@ -242,13 +240,6 @@ const initThrowsErrorsAsync = async 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
@@ -323,10 +314,9 @@ const initThrowsErrorsAsync = async function (
       handleError(error, errors, mermaid.parseError);
     }
   }
-  const allErrors = [...registerLazyLoadedDiagramsErrors, ...errors];
-  if (allErrors.length > 0) {
+  if (errors.length > 0) {
     // TODO: We should be throwing an error object.
-    throw allErrors[0];
+    throw errors[0];
   }
 };
 
@@ -335,16 +325,25 @@ const initialize = function (config: MermaidConfig) {
 };
 
 /**
- * @param config
- * @deprecated This is an internal function and should not be used. Will be removed in v10.
+ * Used to register external diagram types.
+ * @param diagrams - Array of {@link ExternalDiagramDefinition}.
+ * @param opts
+ * @param opts.lazyLoad - If true, the diagram will be loaded on demand.
  */
-const initializeAsync = async function (config: MermaidConfig) {
-  if (config.loadExternalDiagramsAtStartup) {
-    await loadExternalDiagrams(config);
+const registerExternalDiagrams = async (
+  diagrams: ExternalDiagramDefinition[],
+  {
+    lazyLoad = true,
+  }: {
+    lazyLoad?: boolean;
+  } = {}
+) => {
+  if (lazyLoad) {
+    registerLazyLoadedDiagrams(diagrams);
   } else {
-    await registerLazyLoadedDiagrams(config);
+    await loadExternalDiagrams(diagrams);
   }
-  mermaidAPI.initialize(config);
+  externalDiagramsRegistered = true;
 };
 
 /**
@@ -414,7 +413,7 @@ const executeQueue = async () => {
  * @param txt
  * @deprecated This is an internal function and should not be used. Will be removed in v10.
  */
-const parseAsync = (txt: string) => {
+const parseAsync = (txt: string): Promise<boolean> => {
   return new Promise((resolve, reject) => {
     // This promise will resolve when the mermaidAPI.render call is done.
     // It will be queued first and will be executed when it is first in line
@@ -424,7 +423,7 @@ const parseAsync = (txt: string) => {
           (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
+            // This fulfills the promise sent to the value back to the original caller
             resolve(r);
           },
           (e) => {
@@ -522,8 +521,8 @@ const mermaid: {
   init: typeof init;
   initThrowsErrors: typeof initThrowsErrors;
   initThrowsErrorsAsync: typeof initThrowsErrorsAsync;
+  registerExternalDiagrams: typeof registerExternalDiagrams;
   initialize: typeof initialize;
-  initializeAsync: typeof initializeAsync;
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
 } = {
@@ -537,8 +536,8 @@ const mermaid: {
   init,
   initThrowsErrors,
   initThrowsErrorsAsync,
+  registerExternalDiagrams,
   initialize,
-  initializeAsync,
   parseError: undefined,
   contentLoaded,
   setParseErrorHandler,

pnpm-workspace.yaml

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

tests/webpack/package.json

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

tests/webpack/public/index.html

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

tests/webpack/src/index.js

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

tests/webpack/webpack.config.js

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