marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 23:09:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

#5237 Elk tweaks and additional layout algorithms

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-05-17 12:46:02 +02:00
parent 47d4929bc6
commit 991721e955
4 changed files with 51 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.cspell/mermaid-terms.txt
View File

@@ -18,6 +18,7 @@ Markdownish
mermaidjs
mindmap
mindmaps
mrtree
multigraph
nodesep
NOTEGROUP

11
cypress/platform/knsv2.html
View File

@@ -75,12 +75,17 @@
</style>
</head>
<body>
<pre id="diagram" class="mermaid2">
<pre id="diagram" class="mermaid">
%%{init: {"layout": "stress"} }%%
stateDiagram
NumLockOff --> NumLockOn : EvNumLockPressed
[*] --> T1
T1 --> T2
T2 --> T3
T3 --> T1
T1 --> T3
</pre
>
<pre id="diagram" class="mermaid2">
<pre id="diagram" class="mermaid">
stateDiagram
State1: The state with a note
note right of State1

28
packages/mermaid-layout-elk/src/index.ts
View File

@@ -10,6 +10,8 @@ import {
insertEdgeLabel,
positionEdgeLabel,
} from '../../mermaid/src/rendering-util/rendering-elements/edges.js';
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';
@@ -373,13 +375,14 @@ export const addEdges = function (dataForLayout, graph, svg) {
edgeData.style = edgeData.style += style;
edgeData.labelStyle = edgeData.labelStyle += labelStyle;
// if (edge.interpolate !== undefined) {
// edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
// } else if (edges.defaultInterpolate !== undefined) {
// edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
// } else {
// edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
// }
const conf = getConfig();
if (edge.interpolate !== undefined) {
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
} else if (edges.defaultInterpolate !== undefined) {
edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
} else {
edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
}
if (edge.text === undefined) {
if (edge.style !== undefined) {
@@ -466,7 +469,7 @@ function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
}
}
export const render = async (data4Layout, svg, element) => {
export const render = async (data4Layout, svg, element, algorithm) => {
const elk = new ELK();
// Add the arrowheads to the svg
@@ -479,6 +482,15 @@ export const render = async (data4Layout, svg, element) => {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
'elk.algorithm': algorithm,
'nodePlacement.strategy': 'NETWORK_SIMPLEX',
'spacing.nodeNode': 70,
'spacing.nodeNodeBetweenLayers': 25,
'spacing.edgeNode': 10,
'spacing.edgeNodeBetweenLayers': 20,
'spacing.edgeEdge': 20,
'spacing.edgeEdgeBetweenLayers': 20,
'spacing.nodeSelfLoop': 20,
},
children: [],
edges: [],

23
packages/mermaid/src/rendering-util/render.js
View File

@@ -4,10 +4,31 @@ export const render = async (data4Layout, svg, element) => {
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);
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');
}
}
};