feat: Remove direct file dependency of mermaid from elk, by using peerDependency.

.build/common.ts

@@ -22,14 +22,9 @@ export const packageOptions = {
     packageName: 'mermaid-zenuml',
     file: 'detector.ts',
   },
-  'mermaid-flowchart-elk': {
-    name: 'mermaid-flowchart-elk',
-    packageName: 'mermaid-flowchart-elk',
-    file: 'detector.ts',
-  },
   'mermaid-layout-elk': {
     name: 'mermaid-layout-elk',
     packageName: 'mermaid-layout-elk',
-    file: 'index.ts',
+    file: 'layouts.ts',
   },
 } as const;

cypress/platform/knsv2.html

@@ -508,6 +508,8 @@ mindmap
       // import mindmap from '../../packages/mermaid-mindmap/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
       import mermaid from './mermaid.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       // await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

packages/mermaid-layout-elk/package.json

@@ -34,7 +34,7 @@
     "elkjs": "^0.9.3",
     "d3": "^7.9.0"
   },
-  "devDependencies": {
+  "peerDependencies": {
     "mermaid": "workspace:^"
   },
   "files": [

packages/mermaid-layout-elk/src/layouts.ts

@@ -0,0 +1,17 @@
+import type { LayoutLoaderDefinition } from 'mermaid';
+
+const loader = async () => await import(`./render.js`);
+const algos = ['elk.stress', 'elk.force', 'elk.mrtree', 'elk.sporeOverlap'];
+
+export const layouts: LayoutLoaderDefinition[] = [
+  {
+    name: 'elk',
+    loader,
+    algorithm: 'elk.layered',
+  },
+  ...algos.map((algo) => ({
+    name: algo,
+    loader,
+    algorithm: algo,
+  })),
+];

packages/mermaid-layout-elk/src/render.ts

@@ -1,21 +1,22 @@
 // @ts-nocheck File not ready to check types
-
+import { curveLinear } from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import { getConfig } from '../../mermaid/src/config.js';
+import mermaid from 'mermaid';
-import common from '../../mermaid/src/diagrams/common/common.js';
+import { findCommonAncestor } from './find-common-ancestor.js';
-import { log } from '../../mermaid/src/logger.js';
+
-import { insertCluster } from '../../mermaid/src/rendering-util/rendering-elements/clusters.js';
+const {
-import {
+  common,
+  getConfig,
+  insertCluster,
   insertEdge,
   insertEdgeLabel,
+  insertMarkers,
+  insertNode,
+  interpolateToCurve,
+  labelHelper,
+  log,
   positionEdgeLabel,
-} from '../../mermaid/src/rendering-util/rendering-elements/edges.js';
+} = mermaid.internalHelpers;
-import { curveLinear } from 'd3';
-import { interpolateToCurve } from '../../mermaid/src/utils.js';
-import insertMarkers from '../../mermaid/src/rendering-util/rendering-elements/markers.js';
-import { insertNode } from '../../mermaid/src/rendering-util/rendering-elements/nodes.js';
-import { labelHelper } from '../../mermaid/src/rendering-util/rendering-elements/shapes/util.js';
-import { findCommonAncestor } from './find-common-ancestor.js';
 
 const nodeDb = {};
 const portPos = {};

packages/mermaid-layout-elk/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "../..",
+    "rootDir": "./src",
     "outDir": "./dist",
     "types": ["vitest/importMeta", "vitest/globals"]
   },

packages/mermaid/src/internals.ts

@@ -0,0 +1,31 @@
+import { getConfig } from './config.js';
+import common from './diagrams/common/common.js';
+import { log } from './logger.js';
+import { insertCluster } from './rendering-util/rendering-elements/clusters.js';
+import {
+  insertEdge,
+  insertEdgeLabel,
+  positionEdgeLabel,
+} from './rendering-util/rendering-elements/edges.js';
+import insertMarkers from './rendering-util/rendering-elements/markers.js';
+import { insertNode } from './rendering-util/rendering-elements/nodes.js';
+import { labelHelper } from './rendering-util/rendering-elements/shapes/util.js';
+import { interpolateToCurve } from './utils.js';
+
+/**
+ * Internal helpers for mermaid
+ * @deprecated - This should not be used by external packages, as the definitions will change without notice.
+ */
+export const internalHelpers = {
+  common,
+  getConfig,
+  insertCluster,
+  insertEdge,
+  insertEdgeLabel,
+  insertMarkers,
+  insertNode,
+  interpolateToCurve,
+  labelHelper,
+  log,
+  positionEdgeLabel,
+};

packages/mermaid/src/mermaid.ts

@@ -16,6 +16,9 @@ import type { DetailedError } from './utils.js';
 import type { ExternalDiagramDefinition } from './diagram-api/types.js';
 import type { UnknownDiagramError } from './errors.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
+import { registerLayoutLoaders } from './rendering-util/render.js';
+import type { LayoutLoaderDefinition } from './rendering-util/render.js';
+import { internalHelpers } from './internals.js';
 
 export type {
   MermaidConfig,
@@ -26,6 +29,7 @@ export type {
   ParseOptions,
   ParseResult,
   UnknownDiagramError,
+  LayoutLoaderDefinition,
 };
 
 export interface RunOptions {
@@ -413,11 +417,17 @@ export interface Mermaid {
   render: typeof render;
   init: typeof init;
   run: typeof run;
+  registerLayoutLoaders: typeof registerLayoutLoaders;
   registerExternalDiagrams: typeof registerExternalDiagrams;
   initialize: typeof initialize;
   contentLoaded: typeof contentLoaded;
   setParseErrorHandler: typeof setParseErrorHandler;
   detectType: typeof detectType;
+  /**
+   * Internal helpers for mermaid
+   * @deprecated - This should not be used by external packages, as the definitions will change without notice.
+   */
+  internalHelpers: typeof internalHelpers;
 }
 
 const mermaid: Mermaid = {
@@ -428,11 +438,13 @@ const mermaid: Mermaid = {
   init,
   run,
   registerExternalDiagrams,
+  registerLayoutLoaders,
   initialize,
   parseError: undefined,
   contentLoaded,
   setParseErrorHandler,
   detectType,
+  internalHelpers,
 };
 
 export default mermaid;

packages/mermaid/src/rendering-util/render.js

@@ -1,34 +0,0 @@
-export const render = async (data4Layout, svg, element) => {
-  switch (data4Layout.layoutAlgorithm) {
-    case 'dagre': {
-      const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
-      return layoutRenderer.render(data4Layout, svg, element);
-    }
-
-    case 'elk': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.layered');
-    }
-    case 'stress': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.stress');
-    }
-    case 'force': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.force');
-    }
-    case 'mrtree': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.mrtree');
-    }
-    case 'sporeOverlap': {
-      // TODO: Should fix this import path
-      const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js');
-      return layoutRenderer.render(data4Layout, svg, element, 'elk.sporeOverlap');
-    }
-  }
-};

packages/mermaid/src/rendering-util/render.ts

@@ -0,0 +1,40 @@
+export interface LayoutAlgorithm {
+  render(data4Layout: any, svg: any, element: any, algorithm?: string): any;
+}
+
+export type LayoutLoader = () => Promise<LayoutAlgorithm>;
+export interface LayoutLoaderDefinition {
+  name: string;
+  loader: LayoutLoader;
+  algorithm?: string;
+}
+
+const layoutAlgorithms: Record<string, LayoutLoaderDefinition> = {};
+
+export const registerLayoutLoaders = (loaders: LayoutLoaderDefinition[]) => {
+  for (const loader of loaders) {
+    layoutAlgorithms[loader.name] = loader;
+  }
+};
+
+// TODO: Should we load dagre without lazy loading?
+const registerDefaultLayoutLoaders = () => {
+  registerLayoutLoaders([
+    {
+      name: 'dagre',
+      loader: async () => await import('./layout-algorithms/dagre/index.js'),
+    },
+  ]);
+};
+
+registerDefaultLayoutLoaders();
+
+export const render = async (data4Layout: any, svg: any, element: any) => {
+  if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
+    throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
+  }
+
+  const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
+  const layoutRenderer = await layoutDefinition.loader();
+  return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm);
+};

pnpm-lock.yaml

@@ -442,7 +442,6 @@ importers:
       elkjs:
         specifier: ^0.9.3
         version: 0.9.3
-    devDependencies:
       mermaid:
         specifier: workspace:^
         version: link:../mermaid

tsconfig.json

@@ -66,7 +66,7 @@
     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
     // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    "noEmitOnError": false /* Disable emitting files if any type checking errors are reported. */,
     // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */