diff --git a/.vite/build.ts b/.vite/build.ts
index 360f878ba..cf52cd50a 100644
--- a/.vite/build.ts
+++ b/.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 {
diff --git a/docs/index.html b/docs/index.html
index abbd23e28..e757a8e78 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -49,10 +49,9 @@
   <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/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-detector.esm.mjs';
+
       window.mermaid = mermaid;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
@@ -60,20 +59,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/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>
diff --git a/packages/mermaid-example-diagram/Readme.md b/packages/mermaid-example-diagram/Readme.md
new file mode 100644
index 000000000..38056e3c7
--- /dev/null
+++ b/packages/mermaid-example-diagram/Readme.md
@@ -0,0 +1,3 @@
+### Do not refer this package. It is not ready.
+
+### Refer mermaid-mindmap instead.
diff --git a/packages/mermaid-mindmap/package.json b/packages/mermaid-mindmap/package.json
index 142790911..5e62d1299 100644
--- a/packages/mermaid-mindmap/package.json
+++ b/packages/mermaid-mindmap/package.json
@@ -2,13 +2,13 @@
   "name": "@mermaid-js/mermaid-mindmap",
   "version": "9.2.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid-mindmap.core.mjs",
-  "module": "dist/mermaid-mindmap.core.mjs",
+  "module": "dist/mermaid-mindmap.esm.min.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.esm.min.mjs",
+      "types": "./dist/detector.d.ts"
     },
     "./*": "./*"
   },
diff --git a/packages/mermaid-mindmap/src/detector.ts b/packages/mermaid-mindmap/src/detector.ts
index af7002b3c..da3caf51e 100644
--- a/packages/mermaid-mindmap/src/detector.ts
+++ b/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;
diff --git a/packages/mermaid-mindmap/src/diagram-definition.ts b/packages/mermaid-mindmap/src/diagram-definition.ts
index 400cf9e7e..e7856289d 100644
--- a/packages/mermaid-mindmap/src/diagram-definition.ts
+++ b/packages/mermaid-mindmap/src/diagram-definition.ts
@@ -12,5 +12,3 @@ export const diagram = {
   styles: mindmapStyles,
   injectUtils,
 };
-
-export { detector, id } from './detector';
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 222b05de8..d9d94226f 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -3,8 +3,6 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  lazyLoadedDiagrams?: string[];
-  loadExternalDiagramsAtStartup?: boolean;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 710557bd9..9d085b40f 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/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
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 10aac48cf..d45eac6aa 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -28,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 }>;
diff --git a/packages/mermaid/src/docs/index.html b/packages/mermaid/src/docs/index.html
index b8015275e..38740b73a 100644
--- a/packages/mermaid/src/docs/index.html
+++ b/packages/mermaid/src/docs/index.html
@@ -49,10 +49,9 @@
   <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-detector.esm.mjs';
+
       window.mermaid = mermaid;
       const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
@@ -60,20 +59,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>
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 534b3e964..aa797af0e 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/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();
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 7d7385c95..4b42e27f7 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/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);
-  } else {
-    await registerLazyLoadedDiagrams(config);
+const registerExternalDiagrams = async (
+  diagrams: ExternalDiagramDefinition[],
+  {
+    lazyLoad = true,
+  }: {
+    lazyLoad?: boolean;
   }
-  mermaidAPI.initialize(config);
+) => {
+  if (lazyLoad) {
+    registerLazyLoadedDiagrams(diagrams);
+  } else {
+    await loadExternalDiagrams(diagrams);
+  }
+  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,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 16c7555d1..8be26678c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -307,11 +307,13 @@ importers:
 
   tests/webpack:
     specifiers:
+      '@mermaid-js/mermaid-mindmap': workspace:*
       mermaid: workspace:*
       webpack: ^5.74.0
       webpack-cli: ^4.10.0
       webpack-dev-server: ^4.11.1
     dependencies:
+      '@mermaid-js/mermaid-mindmap': link:../../packages/mermaid-mindmap
       mermaid: link:../../packages/mermaid
     devDependencies:
       webpack: 5.74.0_webpack-cli@4.10.0
@@ -4679,7 +4681,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -4687,7 +4689,7 @@ packages:
   /axios/0.26.0:
     resolution: {integrity: sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -8167,7 +8169,7 @@ packages:
       readable-stream: 2.3.7
     dev: true
 
-  /follow-redirects/1.15.2_debug@4.3.2:
+  /follow-redirects/1.15.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
     peerDependencies:
@@ -8175,8 +8177,6 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
-    dependencies:
-      debug: 4.3.2
     dev: true
 
   /for-in/1.0.2:
@@ -8942,7 +8942,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
diff --git a/tests/webpack/package.json b/tests/webpack/package.json
index 8a13eb727..c58f456a6 100644
--- a/tests/webpack/package.json
+++ b/tests/webpack/package.json
@@ -17,6 +17,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "mermaid": "workspace:*"
+    "mermaid": "workspace:*",
+    "@mermaid-js/mermaid-mindmap": "workspace:*"
   }
-}
\ No newline at end of file
+}
diff --git a/tests/webpack/public/index.html b/tests/webpack/public/index.html
index 69c4b8a35..cf0e7da9f 100644
--- a/tests/webpack/public/index.html
+++ b/tests/webpack/public/index.html
@@ -5,6 +5,7 @@
     <title>Getting Started</title>
   </head>
   <body>
+    <div id="graphDiv"></div>
     <script src="./main.js"></script>
   </body>
 </html>
diff --git a/tests/webpack/src/index.js b/tests/webpack/src/index.js
index e1d5cad6a..899f66596 100644
--- a/tests/webpack/src/index.js
+++ b/tests/webpack/src/index.js
@@ -1,6 +1,38 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-console */
 const mermaid = require('mermaid');
-// import mermaid from 'mermaid';
+import mindmap from '@mermaid-js/mermaid-mindmap';
 
-console.log(mermaid);
+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);
