mermaid-js · sidharthv96 · Nov 24, 2023 · Nov 18, 2023 · Nov 19, 2023 · Nov 23, 2023
diff --git a/.build/common.ts b/.build/common.ts
@@ -22,4 +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',
+  },
 } as const;
diff --git a/.esbuild/server.ts b/.esbuild/server.ts
@@ -5,6 +5,7 @@ import { getBuildConfig, defaultOptions } from './util.js';
 import { context } from 'esbuild';
 import chokidar from 'chokidar';
 import { generateLangium } from '../.build/generateLangium.js';
+import { packageOptions } from '../.build/common.js';
 
 const parserCtx = await context(
   getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'parser' })
@@ -101,10 +102,9 @@ async function createServer() {
 
   app.use(cors());
   app.get('/events', eventsHandler);
-  app.use(express.static('./packages/parser/dist'));
-  app.use(express.static('./packages/mermaid/dist'));
-  app.use(express.static('./packages/mermaid-zenuml/dist'));
-  app.use(express.static('./packages/mermaid-example-diagram/dist'));
+  for (const { packageName } of Object.values(packageOptions)) {
+    app.use(express.static(`./packages/${packageName}/dist`));
+  }
   app.use(express.static('demos'));
   app.use(express.static('cypress/platform'));
 

diff --git a/demos/flowchart-elk.html b/demos/flowchart-elk.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Flowchart ELK Test Page</title>
+  </head>
+
+  <body>
+    <h1>Flowchart ELK</h1>
+    <pre class="mermaid">
+		flowchart-elk TD
+      A([Start]) ==> B[Step 1]
+      B ==> C{Flow 1}
+      C -- Choice 1.1 --> D[Step 2.1]
+      C -- Choice 1.3 --> I[Step 2.3]
+      C == Choice 1.2 ==> E[Step 2.2]
+      D --> F{Flow 2}
+      E ==> F{Flow 2}
+      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
+      H[Feedback node] ==> B[Step 1]
+      F{Flow 2} == Choice 2.2 ==> G((Finish))
+
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
+      await mermaid.registerExternalDiagrams([flowchartELK]);
+      mermaid.initialize({
+        logLevel: 3,
+      });
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "build:esbuild": "pnpm run -r clean && ts-node-esm --transpileOnly .esbuild/build.ts",
     "build:mermaid": "pnpm build:esbuild --mermaid",
     "build:viz": "pnpm build:esbuild --visualize",
-    "build:types": "tsc -p ./packages/parser/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:types": "tsc -p ./packages/parser/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-flowchart-elk/tsconfig.json --emitDeclarationOnly",
     "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
     "dev": "ts-node-esm --transpileOnly .esbuild/server.ts",
     "dev:vite": "ts-node-esm --transpileOnly .vite/server.ts",

diff --git a/packages/mermaid-flowchart-elk/package.json b/packages/mermaid-flowchart-elk/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@mermaid-js/flowchart-elk",
+  "version": "1.0.0",
+  "description": "Flowchart plugin for mermaid with ELK layout",
+  "module": "dist/mermaid-flowchart-elk.core.mjs",
+  "types": "dist/packages/mermaid-flowchart-elk/src/detector.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/mermaid-flowchart-elk.core.mjs",
+      "types": "./dist/packages/mermaid-flowchart-elk/src/detector.d.ts"
+    },
+    "./*": "./*"
+  },
+  "keywords": [
+    "diagram",
+    "markdown",
+    "flowchart",
+    "elk",
+    "mermaid"
+  ],
+  "scripts": {
+    "prepublishOnly": "pnpm -w run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mermaid-js/mermaid"
+  },
+  "author": "Knut Sveidqvist",
+  "license": "MIT",
+  "standard": {
+    "ignore": [
+      "**/parser/*.js",
+      "dist/**/*.js",
+      "cypress/**/*.js"
+    ],
+    "globals": [
+      "page"
+    ]
+  },
+  "dependencies": {
+    "d3": "^7.4.0",
+    "dagre-d3-es": "7.0.10",
+    "khroma": "^2.0.0",
+    "elkjs": "^0.8.2"
+  },
+  "devDependencies": {
+    "concurrently": "^8.0.0",
+    "rimraf": "^5.0.0",
+    "mermaid": "workspace:*"
+  },
+  "files": [
+    "dist"
+  ]
+}
diff --git a/...c/diagrams/flowchart/elk/detector.spec.ts → ...ermaid-flowchart-elk/src/detector.spec.ts b/...c/diagrams/flowchart/elk/detector.spec.ts → ...ermaid-flowchart-elk/src/detector.spec.ts
diff --git a/packages/mermaid-flowchart-elk/src/detector.ts b/packages/mermaid-flowchart-elk/src/detector.ts
@@ -0,0 +1,32 @@
+import type {
+  ExternalDiagramDefinition,
+  DiagramDetector,
+  DiagramLoader,
+} from '../../mermaid/src/diagram-api/types.js';
+
+const id = 'flowchart-elk';
+
+const detector: DiagramDetector = (txt, config): boolean => {
+  if (
+    // If diagram explicitly states flowchart-elk
+    /^\s*flowchart-elk/.test(txt) ||
+    // If a flowchart/graph diagram has their default renderer set to elk
+    (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
+  ) {
+    return true;
+  }
+  return false;
+};
+
+const loader: DiagramLoader = async () => {
+  const { diagram } = await import('./diagram-definition.js');
+  return { id, diagram };
+};
+
+const plugin: ExternalDiagramDefinition = {
+  id,
+  detector,
+  loader,
+};
+
+export default plugin;
diff --git a/packages/mermaid-flowchart-elk/src/diagram-definition.ts b/packages/mermaid-flowchart-elk/src/diagram-definition.ts
@@ -0,0 +1,12 @@
+// @ts-ignore: JISON typing missing
+import parser from '../../mermaid/src/diagrams/flowchart/parser/flow.jison';
+import * as db from '../../mermaid/src/diagrams/flowchart/flowDb.js';
+import styles from '../../mermaid/src/diagrams/flowchart/styles.js';
+import renderer from './flowRenderer-elk.js';
+
+export const diagram = {
+  db,
+  renderer,
+  parser,
+  styles,
+};
diff --git a/...iagrams/flowchart/elk/flowRenderer-elk.js → ...aid-flowchart-elk/src/flowRenderer-elk.js b/...iagrams/flowchart/elk/flowRenderer-elk.js → ...aid-flowchart-elk/src/flowRenderer-elk.js
@@ -1,16 +1,16 @@
 import { select, line, curveLinear } from 'd3';
-import { insertNode } from '../../../dagre-wrapper/nodes.js';
-import insertMarkers from '../../../dagre-wrapper/markers.js';
-import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js';
+import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
+import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
+import { insertEdgeLabel } from '../../mermaid/src/dagre-wrapper/edges.js';
 import { findCommonAncestor } from './render-utils.js';
-import { labelHelper } from '../../../dagre-wrapper/shapes/util.js';
-import { getConfig } from '../../../config.js';
-import { log } from '../../../logger.js';
-import { setupGraphViewbox } from '../../../setupGraphViewbox.js';
-import common from '../../common/common.js';
-import { interpolateToCurve, getStylesFromArray } from '../../../utils.js';
+import { labelHelper } from '../../mermaid/src/dagre-wrapper/shapes/util.js';
+import { getConfig } from '../../mermaid/src/config.js';
+import { log } from '../../mermaid/src/logger.js';
+import { setupGraphViewbox } from '../../mermaid/src/setupGraphViewbox.js';
+import common from '../../mermaid/src/diagrams/common/common.js';
+import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils.js';
 import ELK from 'elkjs/lib/elk.bundled.js';
-import { getLineFunctionsWithOffset } from '../../../utils/lineWithOffset.js';
+import { getLineFunctionsWithOffset } from '../../mermaid/src/utils/lineWithOffset.js';
 
 const elk = new ELK();
 
@@ -62,7 +62,7 @@
      let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;

      // We create a SVG label, either by delegating to addHtmlLabel or manually
      let vertexNode;
      const labelData = { width: 0, height: 0 };

      const ports = [
@@ -186,7 +186,7 @@
        nodeEl = await insertNode(nodes, node, vertex.dir);
        boundingBox = nodeEl.node().getBBox();
      } else {
        const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
        // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
        // const rows = vertexText.split(common.lineBreakRegex);
        // for (const row of rows) {
@@ -393,7 +393,7 @@
 * Add edges to graph based on parsed graph definition
 *
 * @param {object} edges The edges to add to the graph
 * @param {object} g The graph object
 * @param cy
 * @param diagObj
 * @param graph
@@ -695,7 +695,7 @@
  *
  * @param text
  * @param diagObj
- * @returns {Record<string, import('../../../diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
+ * @returns {Record<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
  */
 export const getClasses = function (text, diagObj) {
   log.info('Extracting classes');
@@ -772,7 +772,7 @@
 /**
 * Recursive function that iterates over an array of nodes and inserts the children of each node.
 * It also recursively populates the inserts the children of the children and so on.
 * @param {*} graph
 * @param nodeArray
 * @param parentLookupDb
 */

diff --git a/...agrams/flowchart/elk/render-utils.spec.ts → ...id-flowchart-elk/src/render-utils.spec.ts b/...agrams/flowchart/elk/render-utils.spec.ts → ...id-flowchart-elk/src/render-utils.spec.ts
diff --git a/...rc/diagrams/flowchart/elk/render-utils.ts → ...mermaid-flowchart-elk/src/render-utils.ts b/...rc/diagrams/flowchart/elk/render-utils.ts → ...mermaid-flowchart-elk/src/render-utils.ts
diff --git a/...maid/src/diagrams/flowchart/elk/styles.ts → packages/mermaid-flowchart-elk/src/styles.ts b/...maid/src/diagrams/flowchart/elk/styles.ts → packages/mermaid-flowchart-elk/src/styles.ts
diff --git a/packages/mermaid-flowchart-elk/tsconfig.json b/packages/mermaid-flowchart-elk/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "../..",
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -68,7 +68,6 @@
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
     "dompurify": "^3.0.5",
-    "elkjs": "^0.8.2",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^1.3.0",

diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -3,6 +3,7 @@ import type {
   DiagramDetector,
   DiagramLoader,
 } from '../../../diagram-api/types.js';
+import { log } from '../../../logger.js';
 
 const id = 'flowchart-elk';
 
@@ -13,13 +14,21 @@ const detector: DiagramDetector = (txt, config): boolean => {
     // If a flowchart/graph diagram has their default renderer set to elk
     (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
   ) {
+    // This will log at the end, hopefully.
+    setTimeout(
+      () =>
+        log.warn(
+          'flowchart-elk was moved to an external package in Mermaid v11. Please refer [release notes](link) for more details. This diagram will be rendered using `dagre` layout as a fallback.'
+        ),
+      500
+    );
     return true;
   }
   return false;
 };
 
 const loader: DiagramLoader = async () => {
-  const { diagram } = await import('./flowchart-elk-definition.js');
+  const { diagram } = await import('../flowDiagram-v2.js');
   return { id, diagram };
 };
 

diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
@@ -17,7 +17,6 @@ import theme from './themes/index.js';
 import c4 from './diagrams/c4/styles.js';
 import classDiagram from './diagrams/class/styles.js';
 import flowchart from './diagrams/flowchart/styles.js';
-import flowchartElk from './diagrams/flowchart/elk/styles.js';
 import er from './diagrams/er/styles.js';
 import git from './diagrams/git/styles.js';
 import gantt from './diagrams/gantt/styles.js';
@@ -86,7 +85,6 @@ describe('styles', () => {
         classDiagram,
         er,
         flowchart,
-        flowchartElk,
         gantt,
         git,
         journey,