marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 15:30:03 +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 mermaidjs
mindmap mindmap
mindmaps mindmaps
mrtree
multigraph multigraph
nodesep nodesep
NOTEGROUP NOTEGROUP

11
cypress/platform/knsv2.html
View File

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

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

@@ -10,6 +10,8 @@ import {
insertEdgeLabel, insertEdgeLabel,
positionEdgeLabel, positionEdgeLabel,
} from '../../mermaid/src/rendering-util/rendering-elements/edges.js'; } 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 insertMarkers from '../../mermaid/src/rendering-util/rendering-elements/markers.js';
import { insertNode } from '../../mermaid/src/rendering-util/rendering-elements/nodes.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 { 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.style = edgeData.style += style;
edgeData.labelStyle = edgeData.labelStyle += labelStyle; edgeData.labelStyle = edgeData.labelStyle += labelStyle;
// if (edge.interpolate !== undefined) { const conf = getConfig();
// edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); if (edge.interpolate !== undefined) {
// } else if (edges.defaultInterpolate !== undefined) { edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
// edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear); } else if (edges.defaultInterpolate !== undefined) {
// } else { edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
// edgeData.curve = interpolateToCurve(conf.curve, curveLinear); } else {
// } edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
}
if (edge.text === undefined) { if (edge.text === undefined) {
if (edge.style !== 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(); const elk = new ELK();
// Add the arrowheads to the svg // Add the arrowheads to the svg
@@ -479,6 +482,15 @@ export const render = async (data4Layout, svg, element) => {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]', 'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
'elk.layered.spacing.edgeNodeBetweenLayers': '30', '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: [], children: [],
edges: [], 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'); const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
return layoutRenderer.render(data4Layout, svg, element); return layoutRenderer.render(data4Layout, svg, element);
} }
case 'elk': { case 'elk': {
// TODO: Should fix this import path // TODO: Should fix this import path
const layoutRenderer = await import('../../../mermaid-layout-elk/src/index.js'); 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');
} }
} }
}; };