diff --git a/.vite/build.ts b/.vite/build.ts
index 6855d3e48..7398d30d5 100644
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -22,22 +22,22 @@ const packageOptions = {
'mermaid-mindmap': {
name: 'mermaid-mindmap',
packageName: 'mermaid-mindmap',
- file: 'add-diagram.ts',
+ file: 'diagram-definition.ts',
},
'mermaid-mindmap-detector': {
name: 'mermaid-mindmap-detector',
packageName: 'mermaid-mindmap',
- file: 'registry.ts',
+ file: 'detector.ts',
},
'mermaid-example-diagram': {
name: 'mermaid-example-diagram',
packageName: 'mermaid-example-diagram',
- file: 'add-diagram.ts',
+ file: 'diagram-definition.ts',
},
'mermaid-example-diagram-detector': {
name: 'mermaid-example-diagram-detector',
packageName: 'mermaid-example-diagram',
- file: 'registry.ts',
+ file: 'detector.ts',
},
};
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 8bd8d7c79..f6ee1ef03 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -385,7 +385,7 @@ flowchart TD
htmlLabels: false,
fontFamily: 'courier',
},
- extraDiagrams: ['./mermaid-mindmap-detector.js'],
+ lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
});
function callback() {
alert('It worked');
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index ca2333cd5..c3c752f9f 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -55,10 +55,6 @@
Security check
-
-example-diagram
-
mindmap
root
@@ -85,6 +81,10 @@ mindmap
::icon(mdi mdi-fire)
gc7((grand
grand
child 8))
+
+ example-diagram
+
+
@@ -100,8 +100,11 @@ mindmap
logLevel: 0,
// basePath: './packages/',
// themeVariables: { darkMode: true },
- extraDiagrams: ['./mermaid-mindmap-detector.esm.mjs'],
- // extraDiagrams: ['../../mermaid-mindmap/registry.ts'],
+ lazyLoadedDiagrams: [
+ './mermaid-mindmap-detector.esm.mjs',
+ './mermaid-example-diagram-detector.esm.mjs',
+ ],
+ // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
});
function callback() {
alert('It worked');
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index ce1ccc94f..f0426dc09 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -36,7 +36,7 @@ const contentLoaded = function () {
document.getElementsByTagName('body')[0].appendChild(div);
}
- graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
+ graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
mermaid2.initialize(graphObj.mermaid);
mermaid2.init();
diff --git a/packages/mermaid-example-diagram/src/exampleDetector.ts b/packages/mermaid-example-diagram/src/detector.ts
similarity index 62%
rename from packages/mermaid-example-diagram/src/exampleDetector.ts
rename to packages/mermaid-example-diagram/src/detector.ts
index 55fbfe2e3..4d857ac26 100644
--- a/packages/mermaid-example-diagram/src/exampleDetector.ts
+++ b/packages/mermaid-example-diagram/src/detector.ts
@@ -1,3 +1,6 @@
+// @ts-ignore: TODO Fix ts errors
+export const id = 'example-diagram';
+
/**
* Detector function that will be called by mermaid to determine if the diagram is this type of digram.
*
@@ -8,3 +11,8 @@
export const detector = (txt: string) => {
return txt.match(/^\s*example-diagram/) !== null;
};
+
+export const loadDiagram = async () => {
+ const { diagram } = await import('./diagram-definition');
+ return { id, diagram };
+};
diff --git a/packages/mermaid-example-diagram/src/add-diagram.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts
similarity index 66%
rename from packages/mermaid-example-diagram/src/add-diagram.ts
rename to packages/mermaid-example-diagram/src/diagram-definition.ts
index ec32ed838..c31b3d6e7 100644
--- a/packages/mermaid-example-diagram/src/add-diagram.ts
+++ b/packages/mermaid-example-diagram/src/diagram-definition.ts
@@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer';
import styles from './styles';
import { injectUtils } from './mermaidUtils';
-window.mermaid.connectDiagram(
- 'example-diagram',
- {
- db,
- renderer,
- parser,
- styles,
- },
- injectUtils
-);
+export const diagram = {
+ db,
+ renderer,
+ parser,
+ styles,
+ injectUtils,
+};
diff --git a/packages/mermaid-example-diagram/src/registry.ts b/packages/mermaid-example-diagram/src/registry.ts
deleted file mode 100644
index 92ff3bd00..000000000
--- a/packages/mermaid-example-diagram/src/registry.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// @ts-ignore: TODO Fix ts errors
-import { detector } from './exampleDetector';
-
-const scriptElement = document.currentScript as HTMLScriptElement;
-const path = scriptElement.src;
-const lastSlash = path.lastIndexOf('/');
-const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
-
-if (typeof document !== 'undefined') {
- if (window.mermaid && typeof window.mermaid.detectors === 'object') {
- window.mermaid.detectors.push({ id: 'example-diagram', detector });
- } else {
- window.mermaid = {};
- window.mermaid.detectors = [{ id: 'example-diagram', detector }];
- }
-
- /*
- * Wait for document loaded before starting the execution.
- */
- window.addEventListener(
- 'load',
- () => {
- if (window.mermaid && typeof window.mermaid.detectors === 'object') {
- window.mermaid.detectors.push({
- id: 'example-diagram',
- detector,
- path: baseFolder,
- });
- }
- },
- false
- );
-}
diff --git a/packages/mermaid-mindmap/src/registry.ts b/packages/mermaid-mindmap/src/detector.ts
similarity index 65%
rename from packages/mermaid-mindmap/src/registry.ts
rename to packages/mermaid-mindmap/src/detector.ts
index a76a3627f..af7002b3c 100644
--- a/packages/mermaid-mindmap/src/registry.ts
+++ b/packages/mermaid-mindmap/src/detector.ts
@@ -5,6 +5,6 @@ export const detector = (txt: string) => {
};
export const loadDiagram = async () => {
- const { mindmap } = await import('./add-diagram');
- return { id, diagram: mindmap };
+ const { diagram } = await import('./diagram-definition');
+ return { id, diagram };
};
diff --git a/packages/mermaid-mindmap/src/add-diagram.ts b/packages/mermaid-mindmap/src/diagram-definition.ts
similarity index 93%
rename from packages/mermaid-mindmap/src/add-diagram.ts
rename to packages/mermaid-mindmap/src/diagram-definition.ts
index c8ade1bfa..e7856289d 100644
--- a/packages/mermaid-mindmap/src/add-diagram.ts
+++ b/packages/mermaid-mindmap/src/diagram-definition.ts
@@ -5,7 +5,7 @@ import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils';
-export const mindmap = {
+export const diagram = {
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts
index a65523f0c..7d8ac38bf 100644
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/packages/mermaid-mindmap/src/mermaidUtils.ts
@@ -53,29 +53,3 @@ export const injectUtils = (
sanitizeText = _sanitizeText;
setupGraphViewbox = _setupGraphViewbox;
};
-
-/*
-const warning = (..._args: any[]) => {
- console.error('Log function was called before initialization');
-};
-
-export let log = {
- trace: warning,
- debug: warning,
- info: warning,
- warn: warning,
- error: warning,
- fatal: warning,
-};
-export let setLogLevel;
-export let getConfig;
-export let sanitizeText;
-export let setupGraphViewbox;
-export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
- log = _log;
- setLogLevel = _setLogLevel;
- getConfig = _getConfig;
- sanitizeText = _sanitizeText;
- setupGraphViewbox = _setupGraphViewbox;
-};
-*/
diff --git a/packages/mermaid-mindmap/src/mindmapDetector.ts b/packages/mermaid-mindmap/src/mindmapDetector.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index b757eb8de..1059d5709 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -3,7 +3,7 @@
import DOMPurify from 'dompurify';
export interface MermaidConfig {
- extraDiagrams?: any;
+ lazyLoadedDiagrams?: any;
theme?: string;
themeVariables?: any;
themeCSS?: string;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index a90001874..710557bd9 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -115,7 +115,7 @@ const config: Partial = {
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
*/
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
- extraDiagrams: [],
+ 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/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 07bd2ccfe..7ddbc9f06 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -55,11 +55,11 @@ const init = async function (
try {
log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
const conf = mermaidAPI.getConfig();
- if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
- // config.extraDiagrams.forEach(async (diagram: string) => {
- const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]);
- addDetector(id, detector, loadDiagram);
- // });
+ if (typeof conf.lazyLoadedDiagrams !== 'undefined' && conf.lazyLoadedDiagrams.length > 0) {
+ for (let i = 0; i < conf.lazyLoadedDiagrams.length; i++) {
+ const { id, detector, loadDiagram } = await import(conf.lazyLoadedDiagrams[i]);
+ addDetector(id, detector, loadDiagram);
+ }
}
mermaid.detectors.forEach(({ id, detector, path }) => {
addDetector(id, detector, path);