fix: Load all extraDiagrams

packages/mermaid/src/config.type.ts

@@ -3,7 +3,7 @@
 import DOMPurify from 'dompurify';
 
 export interface MermaidConfig {
-  extraDiagrams?: any;
+  extraDiagrams?: string[];
   theme?: string;
   themeVariables?: any;
   themeCSS?: string;

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

@@ -1,8 +1,6 @@
 import { MermaidConfig } from '../config.type';
+import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
 
-export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
-export type DiagramLoader = (() => Promise<unknown>) | null;
-export type DetectorRecord = { detector: DiagramDetector; loader: DiagramLoader };
 const directive =
   /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
@@ -44,11 +42,10 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
   throw new Error(`No diagram type detected for text: ${text}`);
 };
 
-export const addDetector = (
+export const addDetector = (key: string, detector: DiagramDetector, loader?: DiagramLoader) => {
-  key: string,
+  if (detectors[key]) {
-  detector: DiagramDetector,
+    throw new Error(`Detector with key ${key} already exists`);
-  loader: DiagramLoader | null
+  }
-) => {
   detectors[key] = { detector, loader };
 };
 

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

@@ -1,9 +1,5 @@
-import {
+import { registerDiagram, registerDetector } from './diagramAPI';
-  registerDiagram,
+import { DiagramDefinition, DiagramDetector } from './types';
-  registerDetector,
-  DiagramDefinition,
-  DiagramDetector,
-} from './diagramAPI';
 
 // // @ts-ignore: TODO Fix ts errors
 // import mindmapParser from '../diagrams/mindmap/parser/mindmap';

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

@@ -1,6 +1,7 @@
-import { detectType, DiagramDetector } from './detectType';
+import { detectType } from './detectType';
 import { getDiagram, registerDiagram, registerDetector } from './diagramAPI';
 import { addDiagrams } from './diagram-orchestration';
+import { DiagramDetector } from './types';
 
 addDiagrams();
 

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

@@ -1,10 +1,10 @@
-import { addDetector, DiagramDetector as _DiagramDetector } from './detectType';
+import { addDetector } from './detectType';
 import { log as _log, setLogLevel as _setLogLevel } from '../logger';
 import { getConfig as _getConfig } from '../config';
 import { sanitizeText as _sanitizeText } from '../diagrams/common/common';
-import { MermaidConfig } from '../config.type';
 import { setupGraphViewbox as _setupGraphViewbox } from '../setupGraphViewbox';
 import { addStylesForDiagram } from '../styles';
+import { DiagramDefinition, DiagramDetector } from './types';
 
 /*
   Packaging and exposing resources for externa diagrams so that they can import
@@ -13,28 +13,10 @@ import { addStylesForDiagram } from '../styles';
 */
 export const log = _log;
 export const setLogLevel = _setLogLevel;
-export type DiagramDetector = _DiagramDetector;
 export const getConfig = _getConfig;
 export const sanitizeText = (text: string) => _sanitizeText(text, getConfig());
 export const setupGraphViewbox = _setupGraphViewbox;
 
-export interface InjectUtils {
-  _log: any;
-  _setLogLevel: any;
-  _getConfig: any;
-  _sanitizeText: any;
-  _setupGraphViewbox: any;
-}
-
-export interface DiagramDefinition {
-  db: any;
-  renderer: any;
-  parser: any;
-  styles: any;
-  init?: (config: MermaidConfig) => void;
-  injectUtils?: (utils: InjectUtils) => void;
-}
-
 const diagrams: Record<string, DiagramDefinition> = {};
 const connectCallbacks: Record<string, any> = {}; // TODO fix, eslint-disable-line @typescript-eslint/no-explicit-any
 export interface Detectors {

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

@@ -0,0 +1,26 @@
+import { MermaidConfig } from '../config.type';
+
+export interface InjectUtils {
+  _log: any;
+  _setLogLevel: any;
+  _getConfig: any;
+  _sanitizeText: any;
+  _setupGraphViewbox: any;
+}
+
+export interface DiagramDefinition {
+  db: any;
+  renderer: any;
+  parser: any;
+  styles: any;
+  init?: (config: MermaidConfig) => void;
+  injectUtils?: (utils: InjectUtils) => void;
+}
+
+export interface DetectorRecord {
+  detector: DiagramDetector;
+  loader?: DiagramLoader;
+}
+
+export type DiagramDetector = (text: string, config?: MermaidConfig) => boolean;
+export type DiagramLoader = (() => Promise<{ id: string; diagram: DiagramDefinition }>) | null;

packages/mermaid/src/diagrams/c4/c4Detector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const c4Detector: DiagramDetector = (txt) => {
   return txt.match(/^\s*C4Context|C4Container|C4Component|C4Dynamic|C4Deployment/) !== null;

packages/mermaid/src/diagrams/class/classDetector-V2.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const classDetectorV2: DiagramDetector = (txt, config) => {
   // If we have confgured to use dagre-wrapper then we should return true in this function for classDiagram code thus making it use the new class diagram

packages/mermaid/src/diagrams/class/classDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const classDetector: DiagramDetector = (txt, config) => {
   // If we have confgured to use dagre-wrapper then we should never return true in this function

packages/mermaid/src/diagrams/er/erDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const erDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*erDiagram/) !== null;

packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const flowDetectorV2: DiagramDetector = (txt, config) => {
   // If we have confgured to use dagre-wrapper then we should return true in this function for graph code thus making it use the new flowchart diagram

packages/mermaid/src/diagrams/flowchart/flowDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const flowDetector: DiagramDetector = (txt, config) => {
   // If we have confired to only use new flow charts this function shohuld always return false

packages/mermaid/src/diagrams/gantt/ganttDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const ganttDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*gantt/) !== null;

packages/mermaid/src/diagrams/git/gitGraphDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const gitGraphDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*gitGraph/) !== null;

packages/mermaid/src/diagrams/info/infoDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const infoDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*info/) !== null;

packages/mermaid/src/diagrams/pie/pieDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const pieDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*pie/) !== null;

packages/mermaid/src/diagrams/requirement/requirementDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const requirementDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*requirement(Diagram)?/) !== null;

packages/mermaid/src/diagrams/sequence/sequenceDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const sequenceDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*sequenceDiagram/) !== null;

packages/mermaid/src/diagrams/state/stateDetector-V2.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const stateDetectorV2: DiagramDetector = (text, config) => {
   if (text.match(/^\s*stateDiagram-v2/) !== null) return true;

packages/mermaid/src/diagrams/state/stateDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const stateDetector: DiagramDetector = (txt, config) => {
   // If we have confired to only use new state diagrams this function should always return false

packages/mermaid/src/diagrams/user-journey/journeyDetector.ts

@@ -1,4 +1,4 @@
-import type { DiagramDetector } from '../../diagram-api/detectType';
+import type { DiagramDetector } from '../../diagram-api/types';
 
 export const journeyDetector: DiagramDetector = (txt) => {
   return txt.match(/^\s*journey/) !== null;

packages/mermaid/src/mermaid.ts

@@ -9,13 +9,13 @@ import { mermaidAPI } from './mermaidAPI';
 import { addDetector } from './diagram-api/detectType';
 import {
   registerDiagram,
-  DiagramDefinition,
   setLogLevel,
   getConfig,
   setupGraphViewbox,
   sanitizeText,
 } from './diagram-api/diagramAPI';
 import { isDetailedError } from './utils';
+import { DiagramDefinition } from './diagram-api/types';
 
 /**
  * ## init
@@ -54,12 +54,14 @@ const init = async function (
 ) {
   try {
     log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
-    const conf = mermaidAPI.getConfig();
+    const conf = config; // TODO OR mermaidAPI.getConfig(); ?
-    if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) {
+    if (conf?.extraDiagrams && conf.extraDiagrams.length > 0) {
-      // config.extraDiagrams.forEach(async (diagram: string) => {
+      await Promise.allSettled(
-      const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]);
+        conf.extraDiagrams.map(async (diagram: string) => {
-      addDetector(id, detector, loadDiagram);
+          const { id, detector, loadDiagram } = await import(diagram);
-      // });
+          addDetector(id, detector, loadDiagram);
+        })
+      );
     }
     mermaid.detectors.forEach(({ id, detector, path }) => {
       addDetector(id, detector, path);