5043 Move ELK to standalone package

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"
+  ]
+}

packages/mermaid-flowchart-elk/src/detector.spec.ts

@@ -0,0 +1,55 @@
+import plugin from './detector.js';
+import { describe, it } from 'vitest';
+
+const { detector } = plugin;
+
+describe('flowchart-elk detector', () => {
+  it('should fail for dagre-d3', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'dagre-d3',
+        },
+      })
+    ).toBe(false);
+  });
+  it('should fail for dagre-wrapper', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+      })
+    ).toBe(false);
+  });
+  it('should succeed for elk', () => {
+    expect(
+      detector('flowchart', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(true);
+    expect(
+      detector('graph', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(true);
+  });
+
+  it('should detect flowchart-elk', () => {
+    expect(detector('flowchart-elk')).toBe(true);
+  });
+
+  it('should not detect class with defaultRenderer set to elk', () => {
+    expect(
+      detector('class', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(false);
+  });
+});

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;

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,
+};

packages/mermaid-flowchart-elk/src/render-utils.spec.ts

@@ -0,0 +1,41 @@
+import type { TreeData } from './render-utils.js';
+import { findCommonAncestor } from './render-utils.js';
+describe('when rendering a flowchart using elk ', () => {
+  let lookupDb: TreeData;
+  beforeEach(() => {
+    lookupDb = {
+      parentById: {
+        B4: 'inner',
+        B5: 'inner',
+        C4: 'inner2',
+        C5: 'inner2',
+        B2: 'Ugge',
+        B3: 'Ugge',
+        inner: 'Ugge',
+        inner2: 'Ugge',
+        B6: 'outer',
+      },
+      childrenById: {
+        inner: ['B4', 'B5'],
+        inner2: ['C4', 'C5'],
+        Ugge: ['B2', 'B3', 'inner', 'inner2'],
+        outer: ['B6'],
+      },
+    };
+  });
+  it('to find parent of siblings in a subgraph', () => {
+    expect(findCommonAncestor('B4', 'B5', lookupDb)).toBe('inner');
+  });
+  it('to find an uncle', () => {
+    expect(findCommonAncestor('B4', 'B2', lookupDb)).toBe('Ugge');
+  });
+  it('to find a cousin', () => {
+    expect(findCommonAncestor('B4', 'C4', lookupDb)).toBe('Ugge');
+  });
+  it('to find a grandparent', () => {
+    expect(findCommonAncestor('B4', 'B6', lookupDb)).toBe('root');
+  });
+  it('to find ancestor of siblings in the root', () => {
+    expect(findCommonAncestor('B1', 'outer', lookupDb)).toBe('root');
+  });
+});

packages/mermaid-flowchart-elk/src/render-utils.ts

@@ -0,0 +1,25 @@
+export interface TreeData {
+  parentById: Record<string, string>;
+  childrenById: Record<string, string[]>;
+}
+
+export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
+  const { parentById } = treeData;
+  const visited = new Set();
+  let currentId = id1;
+  while (currentId) {
+    visited.add(currentId);
+    if (currentId === id2) {
+      return currentId;
+    }
+    currentId = parentById[currentId];
+  }
+  currentId = id2;
+  while (currentId) {
+    if (visited.has(currentId)) {
+      return currentId;
+    }
+    currentId = parentById[currentId];
+  }
+  return 'root';
+};

packages/mermaid-flowchart-elk/src/styles.ts

@@ -0,0 +1,143 @@
+/** Returns the styles given options */
+export interface FlowChartStyleOptions {
+  arrowheadColor: string;
+  border2: string;
+  clusterBkg: string;
+  clusterBorder: string;
+  edgeLabelBackground: string;
+  fontFamily: string;
+  lineColor: string;
+  mainBkg: string;
+  nodeBorder: string;
+  nodeTextColor: string;
+  tertiaryColor: string;
+  textColor: string;
+  titleColor: string;
+  [key: string]: string;
+}
+
+const genSections = (options: FlowChartStyleOptions) => {
+  let sections = '';
+
+  for (let i = 0; i < 5; i++) {
+    sections += `
+      .subgraph-lvl-${i} {
+        fill: ${options[`surface${i}`]};
+        stroke: ${options[`surfacePeer${i}`]};
+      }
+    `;
+  }
+  return sections;
+};
+
+const getStyles = (options: FlowChartStyleOptions) =>
+  `.label {
+    font-family: ${options.fontFamily};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+  .cluster-label text {
+    fill: ${options.titleColor};
+  }
+  .cluster-label span {
+    color: ${options.titleColor};
+  }
+
+  .label text,span {
+    fill: ${options.nodeTextColor || options.textColor};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 2.0px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.85;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
+    }
+    text-align: center;
+  }
+
+  .cluster rect {
+    fill: ${options.clusterBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  .cluster span {
+    color: ${options.titleColor};
+  }
+  /* .cluster div {
+    color: ${options.titleColor};
+  } */
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: ${options.fontFamily};
+    font-size: 12px;
+    background: ${options.tertiaryColor};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+
+  .flowchartTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.textColor};
+  }
+  .subgraph {
+    stroke-width:2;
+    rx:3;
+  }
+  // .subgraph-lvl-1 {
+  //   fill:#ccc;
+  //   // stroke:black;
+  // }
+
+  .flowchart-label text {
+    text-anchor: middle;
+  }
+
+  ${genSections(options)}
+`;
+
+export default getStyles;

packages/mermaid-flowchart-elk/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "../..",
+    "outDir": "./dist"
+  },
+  "include": ["./src/**/*.ts"],
+  "typeRoots": ["./src/types"]
+}