Merge branch 'feat/3701-expose-registerDiagram' into sidv/fixLL

* feat/3701-expose-registerDiagram:
  feat: add `mermaidAPI.registerDiagram()`
  refactor(mermaid): remove registerDiagram cb func
  fix(mermaid): fix DiagramDefinition types

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.ts

@@ -106,11 +106,10 @@ export const getDiagramFromText = (
     // registerDiagram(type, diagram, undefined, diagram.injectUtils);
     // // new diagram will try getDiagram again and if fails then it is a valid throw
     return loader().then(({ diagram }) => {
-      registerDiagram(type, diagram, undefined, diagram.injectUtils);
+      registerDiagram(type, diagram, undefined);
       return new Diagram(txt, parseError);
     });
   }
-  // return new Diagram(txt, parseError);
 };
 
 export default Diagram;

packages/mermaid/src/diagram-api/diagramAPI.ts

@@ -22,17 +22,34 @@ export interface Detectors {
   [key: string]: DiagramDetector;
 }
 
+/**
+ * Registers the given diagram with Mermaid.
+ *
+ * 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,
   diagram: DiagramDefinition,
-  detector?: DiagramDetector,
-  callback?: (
-    _log: any,
-    _setLogLevel: any,
-    _getConfig: any,
-    _sanitizeText: any,
-    _setupGraphViewbox: any
-  ) => void
+  detector?: DiagramDetector
 ) => {
   log.debug(`Registering diagram ${id}`);
   if (diagrams[id]) {
@@ -48,8 +65,9 @@ export const registerDiagram = (
     addDetector(id, detector);
   }
   addStylesForDiagram(id, diagram.styles);
-  if (typeof callback !== 'undefined') {
-    callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
+
+  if (diagram.injectUtils) {
+    diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
   }
   log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`);
 };

packages/mermaid/src/diagram-api/types.ts

@@ -14,7 +14,13 @@ export interface DiagramDefinition {
   parser: any;
   styles: any;
   init?: (config: MermaidConfig) => void;
-  injectUtils?: (utils: InjectUtils) => void;
+  injectUtils?: (
+    _log: InjectUtils['_log'],
+    _setLogLevel: InjectUtils['_setLogLevel'],
+    _getConfig: InjectUtils['_getConfig'],
+    _sanitizeText: InjectUtils['_sanitizeText'],
+    _setupGraphViewbox: InjectUtils['_setupGraphViewbox']
+  ) => void;
 }
 
 export interface DetectorRecord {

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';
@@ -769,6 +770,8 @@ function initialize(options: MermaidConfig = {}) {
   addDiagrams();
 }
 
+export { registerDiagram };
+
 export const mermaidAPI = Object.freeze({
   render,
   renderAsync,
@@ -776,6 +779,7 @@ export const mermaidAPI = Object.freeze({
   parseAsync,
   parseDirective,
   initialize,
+  registerDiagram,
   getConfig: configApi.getConfig,
   setConfig: configApi.setConfig,
   getSiteConfig: configApi.getSiteConfig,