#5237 Adding elk support

mermaid-js · Apr 29, 2024 · b3e29dc · b3e29dc
1 parent b22ae10
commit b3e29dc
Show file tree

Hide file tree

Showing 8 changed files with 803 additions and 23 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -78,23 +78,16 @@
   <body>
     <pre id="diagram" class="mermaid">
 stateDiagram-v2
-    state fork_state <<fork>>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
+    state if_state <<choice>>
+    [*] --> IsPositive
+    IsPositive --> if_state
+    if_state --> False: if n < 0
+    if_state --> True : if n >= 0
   </pre
     >
     <pre id="diagram" class="mermaid2">
 stateDiagram-v2
-    state First {
        Second
-    }
   </pre
     >
     <pre id="diagram" class="mermaid2">

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -67,6 +67,7 @@
     "d3": "^7.4.0",
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
+    "elkjs": "^0.8.2",
     "dayjs": "^1.11.7",
     "dompurify": "^3.0.5",
     "khroma": "^2.0.0",

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -86,7 +86,8 @@ export const draw = async function (text: string, id: string, _version: string,
   // performRender(data4Rendering);
 
   data4Layout.type = diag.type;
-  data4Layout.layoutAlgorithm = 'dagre-wrapper';
+  // data4Layout.layoutAlgorithm = 'dagre-wrapper';
+  data4Layout.layoutAlgorithm = 'elk';
   data4Layout.skin = 'roughjs';
   data4Layout.direction = DIR;
   data4Layout.nodeSpacing = conf.nodeSpacing || 50;

diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -158,7 +158,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
     edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
-    const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
+    const paths = insertEdge(edgePaths, edge, clusterDb, diagramtype, graph, id);
     positionEdgeLabel(edge, paths);
   });