feat: add mermaidAPI.registerDiagram()

Exposes the registerDiagram() function publically as
`mermaid.mermaidAPI.registerDiagram` so that users can add their
own diagrams at bundle-time.

This is instead of using the lazyLoadedDiagrams config setting.

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -12,3 +12,5 @@ export const diagram = {
   styles,
   injectUtils,
 };
+
+export { detector, id } from './detector';

packages/mermaid-mindmap/src/diagram-definition.ts

@@ -12,3 +12,5 @@ export const diagram = {
   styles: mindmapStyles,
   injectUtils,
 };
+
+export { detector, id } from './detector';

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,

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,