diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index de9780185d..968d04f72c 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -72,7 +72,7 @@ Student "1" --o "1" IdCard : carries Student "1" --o "1" Bike : rides -
+    
 mindmap
   root
     child1((Circle))
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index 8cf180ae79..e3bc69448a 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -48,11 +48,32 @@ describe('when using mermaid and ', function () {
       const node = document.createElement('div');
       node.appendChild(document.createTextNode('graph TD;\na;'));
 
-      mermaid.initThrowsErrors(undefined, node);
+      await mermaid.initThrowsErrors(undefined, node);
       // mermaidAPI.render function has been mocked, since it doesn't yet work
       // in Node.JS (only works in browser)
       expect(mermaidAPI.render).toHaveBeenCalled();
     });
+    it('should throw error (but still render) if lazyLoadedDiagram fails', async () => {
+      const node = document.createElement('div');
+      node.appendChild(document.createTextNode('graph TD;\na;'));
+
+      mermaidAPI.setConfig({
+        lazyLoadedDiagrams: ['this-file-does-not-exist.mjs'],
+      });
+      await expect(mermaid.initThrowsErrors(undefined, node)).rejects.toThrowError(
+        // this error message is probably different on every platform
+        // this one is just for vite-note (node/jest/browser may be different)
+        'Failed to load this-file-does-not-exist.mjs'
+      );
+
+      // should still render, even if lazyLoadedDiagrams fails
+      expect(mermaidAPI.render).toHaveBeenCalled();
+    });
+
+    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 () {
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index b1700253b7..5867dc3b23 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -47,13 +47,7 @@ const init = async function (
   callback?: Function
 ) {
   try {
-    const conf = mermaidAPI.getConfig();
-    if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
-      await registerLazyLoadedDiagrams(conf);
-      await initThrowsErrorsAsync(config, nodes, callback);
-    } else {
-      initThrowsErrors(config, nodes, callback);
-    }
+    await initThrowsErrors(config, nodes, callback);
   } catch (e) {
     log.warn('Syntax Error rendering');
     if (isDetailedError(e)) {
@@ -90,7 +84,19 @@ const handleError = (error: unknown, errors: DetailedError[], parseError?: Funct
     }
   }
 };
-const initThrowsErrors = function (
+/**
+ * Equivalent to {@link init()}, except an error will be thrown on error.
+ *
+ * @param config - **Deprecated** Mermaid sequenceConfig.
+ * @param nodes - One of:
+ * - A DOM Node
+ * - An array of DOM nodes (as would come from a jQuery selector)
+ * - A W3C selector, a la `.mermaid` (default)
+ * @param callback - Function that is called with the id of each generated mermaid diagram.
+ *
+ * @returns Resolves on success, otherwise the {@link Promise} will be rejected with an Error.
+ */
+const initThrowsErrors = async function (
   config?: MermaidConfig,
   // eslint-disable-next-line no-undef
   nodes?: string | HTMLElement | NodeListOf,
@@ -104,6 +110,24 @@ const initThrowsErrors = function (
     mermaid.sequenceConfig = config;
   }
 
+  const errors = [];
+
+  if (conf?.lazyLoadedDiagrams && conf.lazyLoadedDiagrams.length > 0) {
+    // Load all lazy loaded diagrams in parallel
+    const results = await Promise.allSettled(
+      conf.lazyLoadedDiagrams.map(async (diagram: string) => {
+        const { id, detector, loadDiagram } = await import(diagram);
+        addDetector(id, detector, loadDiagram);
+      })
+    );
+    for (const result of results) {
+      if (result.status == 'rejected') {
+        log.warn(`Failed to lazyLoadedDiagram due to `, result.reason);
+        errors.push(result.reason);
+      }
+    }
+  }
+
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: ArrayLike;
@@ -129,7 +153,6 @@ const initThrowsErrors = function (
   const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
 
   let txt: string;
-  const errors: DetailedError[] = [];
 
   // element is the current div with mermaid class
   for (const element of Array.from(nodesToProcess)) {