fix: Diagram load issue

.vite/build.ts

@@ -6,6 +6,7 @@ import pkg from '../package.json' assert { type: 'json' };
 
 const { dependencies } = pkg;
 const watch = process.argv.includes('--watch');
+const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 type OutputOptions = Exclude<
@@ -129,14 +130,19 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 const main = async () => {
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
   for (const pkg of packageNames) {
+    if (mermaidOnly && pkg !== 'mermaid') {
+      continue;
+    }
     await buildPackage(pkg);
   }
 };
 
 if (watch) {
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+  if (!mermaidOnly) {
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+  }
 } else {
   void main();
 }

package.json

@@ -26,6 +26,7 @@
     "git graph"
   ],
   "scripts": {
+    "build:mermaid": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts --mermaid",
     "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
     "build:types": "concurrently \"tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly\" \"tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly\"",
     "build:watch": "pnpm build:vite --watch",

packages/mermaid/src/Diagram.ts

@@ -1,6 +1,6 @@
 import * as configApi from './config';
 import { log } from './logger';
-import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
+import { DiagramNotFoundError, getDiagram, registerDiagram } from './diagram-api/diagramAPI';
 import { detectType, getDiagramLoader } from './diagram-api/detectType';
 import { isDetailedError } from './utils';
 export class Diagram {
@@ -92,9 +92,13 @@ export const getDiagramFromText = (
     getDiagram(type);
     return new Diagram(txt, parseError);
   } catch (error) {
+    if (!(error instanceof DiagramNotFoundError)) {
+      log.error(error);
+      throw error;
+    }
     const loader = getDiagramLoader(type);
     if (!loader) {
-      throw new Error(`Diagram ${type} not found.`);
+      throw new Error(`Loader for ${type} not found.`);
     }
     // TODO: Uncomment for v10
     // // Diagram not available, loading it

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

@@ -34,6 +34,7 @@ export const registerDiagram = (
     _setupGraphViewbox: any
   ) => void
 ) => {
+  log.debug(`Registering diagram ${id}`);
   if (diagrams[id]) {
     log.warn(`Diagram ${id} already registered.`);
     // The error throw is commented out to as it breaks pages where you have multiple diagrams,
@@ -50,11 +51,19 @@ export const registerDiagram = (
   if (typeof callback !== 'undefined') {
     callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
   }
+  log.debug(`Registered diagram ${id}. ${Object.keys(diagrams).join(', ')} diagrams registered.`);
 };
 
 export const getDiagram = (name: string): DiagramDefinition => {
+  log.debug(`Getting diagram ${name}. ${Object.keys(diagrams).join(', ')} diagrams registered.`);
   if (name in diagrams) {
     return diagrams[name];
   }
-  throw new Error(`Diagram ${name} not found.`);
+  throw new DiagramNotFoundError(name);
 };
+
+export class DiagramNotFoundError extends Error {
+  constructor(message: string) {
+    super(`Diagram ${message} not found.`);
+  }
+}

packages/mermaid/src/logger.ts

@@ -30,6 +30,8 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
  * @param {LogLevel} [level="fatal"] The level to set the logging to. Default is `"fatal"`
  */
 export const setLogLevel = function (level: keyof typeof LEVELS | number | string = 'fatal') {
+  // TODO: Even if we call initialize with loglevel 0, many initial logs are skipped as LL is set to 5 initially.
+
   let numericLevel: number = LEVELS.fatal;
   if (typeof level === 'string') {
     level = level.toLowerCase();
@@ -39,6 +41,7 @@ export const setLogLevel = function (level: keyof typeof LEVELS | number | strin
   } else if (typeof level === 'number') {
     numericLevel = level;
   }
+  numericLevel = 0;
   log.trace = () => {};
   log.debug = () => {};
   log.info = () => {};

packages/mermaid/src/mermaid.ts

@@ -159,7 +159,7 @@ const initThrowsErrors = function (
   }
 };
 
-let lazyLoadingPromise: Promise<unknown> | undefined;
+let lazyLoadingPromise: Promise<unknown> | undefined = undefined;
 /**
  * @param conf
  * @deprecated This is an internal function and should not be used. Will be removed in v10.
@@ -179,12 +179,15 @@ const registerLazyLoadedDiagrams = async (conf: MermaidConfig) => {
   await lazyLoadingPromise;
 };
 
+let loadingPromise: Promise<unknown> | undefined = undefined;
+
 const loadExternalDiagrams = async (conf: MermaidConfig) => {
   // Only lazy load once
   // TODO: This is a hack. We should either throw error when new diagrams are added, or load them anyway.
-  if (lazyLoadingPromise === undefined) {
+  if (loadingPromise === undefined) {
+    log.debug(`Loading ${conf?.lazyLoadedDiagrams?.length} external diagrams`);
     // Load all lazy loaded diagrams in parallel
-    lazyLoadingPromise = Promise.allSettled(
+    loadingPromise = Promise.allSettled(
       (conf?.lazyLoadedDiagrams ?? []).map(async (url: string) => {
         const { id, detector, loadDiagram } = await import(url);
         const { diagram } = await loadDiagram();
@@ -192,7 +195,7 @@ const loadExternalDiagrams = async (conf: MermaidConfig) => {
       })
     );
   }
-  await lazyLoadingPromise;
+  await loadingPromise;
 };
 
 /**