diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
new file mode 100644
index 000000000..3a6c37e88
--- /dev/null
+++ b/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();
+ });
+ });
+});
diff --git a/cypress/platform/external-diagrams-mindmap.html b/cypress/platform/external-diagrams-mindmap.html
new file mode 100644
index 000000000..2d18532da
--- /dev/null
+++ b/cypress/platform/external-diagrams-mindmap.html
@@ -0,0 +1,58 @@
+
+
+ Should correctly load a third-party diagram using registerDiagram
+
+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
child 6))
+ ::icon(mdi mdi-fire)
+ gc7((grand
grand
child 8))
+
+
+ example-diagram
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/mermaid-example-diagram/src/diagram-definition.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts
index c31b3d6e7..95f7cc11d 100644
--- a/packages/mermaid-example-diagram/src/diagram-definition.ts
+++ b/packages/mermaid-example-diagram/src/diagram-definition.ts
@@ -12,3 +12,5 @@ export const diagram = {
styles,
injectUtils,
};
+
+export { detector, id } from './detector';
diff --git a/packages/mermaid-mindmap/src/diagram-definition.ts b/packages/mermaid-mindmap/src/diagram-definition.ts
index e7856289d..400cf9e7e 100644
--- a/packages/mermaid-mindmap/src/diagram-definition.ts
+++ b/packages/mermaid-mindmap/src/diagram-definition.ts
@@ -12,3 +12,5 @@ export const diagram = {
styles: mindmapStyles,
injectUtils,
};
+
+export { detector, id } from './detector';
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index bb05090e3..b2f2b7a45 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -23,10 +23,28 @@ export interface Detectors {
}
/**
+ * Registers the given diagram with Mermaid.
*
- * @param id
- * @param diagram
- * @param detector
+ * Can be used for third-party custom diagrams.
+ *
+ * For third-party diagrams that are rarely used, we recommend instead setting
+ * the `lazyLoadedDiagrams` param in the Mermaid config, as that will instead
+ * only load the diagram when needed.
+ *
+ * @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.
+ *
+ * @example How to add `@mermaid-js/mermaid-mindmap` to mermaid
+ *
+ * ```js
+ * import {
+ * diagram as mindmap, detector as mindmapDetector, id as mindmapId
+ * } from "@mermaid-js/mermaid-mindmap";
+ * import mermaid from "mermaid";
+ *
+ * mermaid.mermaidAPI.registerDiagram(mindmapId, mindmap, mindmapDetector);
+ * ```
*/
export const registerDiagram = (
id: string,
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 7c967e5fd..5a3f5c5b1 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -18,6 +18,7 @@ import { compile, serialize, stringify } from 'stylis';
import pkg from '../package.json';
import * as configApi from './config';
import { addDiagrams } from './diagram-api/diagram-orchestration';
+import { registerDiagram } from './diagram-api/diagramAPI';
import classDb from './diagrams/class/classDb';
import flowDb from './diagrams/flowchart/flowDb';
import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -480,11 +481,14 @@ async function initialize(options: MermaidConfig) {
addDiagrams();
}
+export { registerDiagram };
+
export const mermaidAPI = Object.freeze({
render,
parse,
parseDirective,
initialize,
+ registerDiagram,
getConfig: configApi.getConfig,
setConfig: configApi.setConfig,
getSiteConfig: configApi.getSiteConfig,