feat: loadExternalDiagramsAtStartup

packages/mermaid/package.json

@@ -72,7 +72,8 @@
     "lodash": "^4.17.21",
     "moment-mini": "^2.24.0",
     "non-layered-tidy-tree-layout": "^2.0.2",
-    "stylis": "^4.1.2"
+    "stylis": "^4.1.2",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.25.7",
@@ -86,6 +87,7 @@
     "@types/lodash": "^4.14.185",
     "@types/prettier": "^2.7.0",
     "@types/stylis": "^4.0.2",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
     "concurrently": "^7.4.0",

packages/mermaid/src/config.type.ts

@@ -4,6 +4,7 @@ import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
   lazyLoadedDiagrams?: string[];
+  loadExternalDiagramsAtStartup?: boolean;
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;

packages/mermaid/src/mermaid.ts

@@ -8,6 +8,7 @@ import utils from './utils';
 import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
+import { registerDiagram } from './diagram-api/diagramAPI';
 
 /**
  * ## init
@@ -178,6 +179,22 @@ const registerLazyLoadedDiagrams = async (conf: MermaidConfig) => {
   await lazyLoadingPromise;
 };
 
+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 (lazyLoadingPromise === undefined) {
+    // Load all lazy loaded diagrams in parallel
+    lazyLoadingPromise = 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 lazyLoadingPromise;
+};
+
 /**
  * @deprecated This is an internal function and should not be used. Will be removed in v10.
  */
@@ -286,7 +303,11 @@ const initialize = function (config: MermaidConfig) {
  * @deprecated This is an internal function and should not be used. Will be removed in v10.
  */
 const initializeAsync = async function (config: MermaidConfig) {
-  await registerLazyLoadedDiagrams(config);
+  if (config.loadExternalDiagramsAtStartup) {
+    await loadExternalDiagrams(config);
+  } else {
+    await registerLazyLoadedDiagrams(config);
+  }
   mermaidAPI.initialize(config);
 };