marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-07 14:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Placement draft

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-12-09 09:29:45 +01:00
parent 8277579259
commit b5ef6d2e23
2 changed files with 117 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
cypress/platform/knsv2.html
View File

@@ -93,6 +93,39 @@
config: config:
layout: elk layout: elk
--- ---
flowchart TB
%% swimlane 1 - A E
%% swimlane 2 - B
%% swimlane 3 - C D
A --> B(I am B, the wide one) --> C
C --> D & F
D --> E
A --> E
B@{ shape: diam}
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart TB
%% swimlane 1 - A E
%% swimlane 2 - B
%% swimlane 3 - C D
A --> E & B
B --> C
B@{ shape: cyl, label: 'Cylinder'}
</pre>
<pre id="diagram4" class="mermaid2">
---
config:
layout: elk
---
flowchart LR flowchart LR
%% subgraph s1["Untitled subgraph"] %% subgraph s1["Untitled subgraph"]
C{"Evaluate"} C{"Evaluate"}
@@ -100,7 +133,7 @@ flowchart LR
B --> C B --> C
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -111,7 +144,7 @@ flowchart LR
D --> I((I the Circle)) D --> I((I the Circle))
D --> I D --> I
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -129,7 +162,7 @@ config:
end end
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -154,7 +187,7 @@ config:
end end
end end
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -167,7 +200,7 @@ config:
D-->I D-->I
D-->I D-->I
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -206,7 +239,7 @@ flowchart LR
n8@{ shape: rect} n8@{ shape: rect}
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -222,7 +255,7 @@ flowchart LR
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -231,7 +264,7 @@ flowchart LR
A{A} --> B & C A{A} --> B & C
</pre </pre
> >
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -243,7 +276,7 @@ flowchart LR
end end
</pre </pre
> >
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
layout: elk layout: elk
@@ -261,7 +294,7 @@ flowchart LR
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
kanban: kanban:
@@ -280,81 +313,81 @@ kanban
task3[💻 Develop login feature]@{ ticket: 103 } task3[💻 Develop login feature]@{ ticket: 103 }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' } nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' } nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' } nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' } nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' } nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' } nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' } nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' } nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
A:::AClass A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
flowchart LR flowchart LR
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' } nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px style A fill:#f9f,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
kanban kanban
id2[In progress] id2[In progress]
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' } docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
</pre> </pre>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid2">
--- ---
config: config:
kanban: kanban:

74
packages/mermaid-layout-elk/src/render.ts
View File

@@ -481,20 +481,30 @@ export const render = async (
id: 'root', id: 'root',
layoutOptions: { layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'elk.algorithm': algorithm, 'elk.layered.priority.direction': 10,
'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy, 'elk.algorithm': 'elk.layered',
// 'elk.algorithm': 'elk.stress',
// 'partitioning.activate': true,
// 'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
'elk.layered.nodePlacement.strategy': 'INTERACTIVE',
// 'nodePlacement.strategy': 'LINEAR_SEGMENTS',
'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges, 'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
'elk.direction': 'DOWN', 'elk.direction': 'DOWN',
'spacing.baseValue': 35, 'spacing.baseValue': 35,
'elk.layered.unnecessaryBendpoints': true, // 'elk.layered.unnecessaryBendpoints': true,
'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy, // 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy,
// 'spacing.nodeNode': 20, // 'elk.layered.cycleBreaking.strategy': 'INTERACTIVE',
// 'spacing.nodeNodeBetweenLayers': 25, // 'elk.layered.layering.strategy': 'MIN_WIDTH',
// 'spacing.edgeNode': 20, // 'layering.strategy': 'SIMPLE',
// 'spacing.edgeNodeBetweenLayers': 10, // 'layering.nodePromotion.strategy': 'NODECOUNT_PERCENTAGE',
// 'spacing.edgeEdge': 10, // 'elk.topdown.nodeType': 'PARALLEL_NODE',
// 'spacing.edgeEdgeBetweenLayers': 20, 'spacing.nodeNode': 20,
// 'spacing.nodeSelfLoop': 20, 'spacing.nodeNodeBetweenLayers': 25,
'spacing.edgeNode': 20,
'spacing.edgeNodeBetweenLayers': 10,
'spacing.edgeEdge': 10,
'spacing.edgeEdgeBetweenLayers': 20,
'spacing.nodeSelfLoop': 20,
// Tweaking options // Tweaking options
// 'elk.layered.nodePlacement.favorStraightEdges': true, // 'elk.layered.nodePlacement.favorStraightEdges': true,
@@ -505,14 +515,21 @@ export const render = async (
// 'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY', // 'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
// 'elk.layered.mergeHierarchyEdges': true, // 'elk.layered.mergeHierarchyEdges': true,
// 'elk.layered.feedbackEdges': true, // 'elk.layered.feedbackEdges': true,
// 'elk.layered.crossingMinimization.semiInteractive': true, // 'elk.layered.crossingMinimization.semiInteractive': false,
// 'crossingMinimization.semiInteractive': false,
// 'elk.layered.edgeRouting.splines.sloppy.layerSpacingFactor': 1, // 'elk.layered.edgeRouting.splines.sloppy.layerSpacingFactor': 1,
// 'elk.layered.edgeRouting.polyline.slopedEdgeZoneWidth': 4.0, // 'elk.layered.edgeRouting.polyline.slopedEdgeZoneWidth': 4.0,
// 'elk.layered.wrapping.validify.strategy': 'LOOK_BACK', // 'elk.layered.wrapping.validify.strategy': 'LOOK_BACK',
// 'elk.insideSelfLoops.activate': true, // 'elk.insideSelfLoops.activate': true,
// 'elk.alg.layered.options.EdgeStraighteningStrategy': 'NONE', // 'elk.alg.layered.options.EdgeStraighteningStrategy': 'NONE',
// 'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES', // NODES_AND_EDGES // 'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES', // NODES_AND_EDGES
// 'elk.layered.considerModelOrder.strategy': 'PREFER_NODES',
// 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES // 'elk.layered.wrapping.cutting.strategy': 'ARD', // NODES_AND_EDGES
// 'elk.layered.wrapping.cutting.strategy': 'NODES_AND_EDGES',
'elk.alignment': 'BOTTOM',
// 'elk.layered.nodePlacement.bk.fixedAlignment': 'RIGHTDOWN',
// 'elk.edgeRouting': 'UNDEFINED',
'elk.layered.crossingMinimization.forceNodeModelOrder': true,
}, },
children: [], children: [],
edges: [], edges: [],
@@ -547,6 +564,8 @@ export const render = async (
// Iterate through all nodes and add the top level nodes to the graph // Iterate through all nodes and add the top level nodes to the graph
const nodes = data4Layout.nodes; const nodes = data4Layout.nodes;
const count = 3;
nodes.forEach((n: { id: string | number }) => { nodes.forEach((n: { id: string | number }) => {
const node = nodeDb[n.id]; const node = nodeDb[n.id];
@@ -565,6 +584,7 @@ export const render = async (
'spacing.baseValue': 30, 'spacing.baseValue': 30,
'nodeLabels.placement': '[H_CENTER V_TOP, INSIDE]', 'nodeLabels.placement': '[H_CENTER V_TOP, INSIDE]',
}; };
if (node.dir) { if (node.dir) {
node.layoutOptions = { node.layoutOptions = {
...node.layoutOptions, ...node.layoutOptions,
@@ -575,11 +595,35 @@ export const render = async (
'elk.hierarchyHandling': 'SEPARATE_CHILDREN', 'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
}; };
} }
delete node.x; delete node.x;
delete node.y; delete node.y;
delete node.width; delete node.width;
delete node.height; delete node.height;
} }
if (node.id === 'A' || node.id === 'E') {
node.layoutOptions = {
...node.layoutOptions,
'partitioning.partition': 1,
};
node.x = 0;
}
if (node.id === 'B') {
node.layoutOptions = {
...node.layoutOptions,
'partitioning.partition': 2,
};
node.x = 300;
}
if (node.id === 'C' || node.id === 'D' || node.id === 'F') {
node.layoutOptions = {
...node.layoutOptions,
'partitioning.partition': 3,
};
node.x = 800;
}
// count = count - 1;
// console.log('APA13 node partition node id=', node.id, 'count = ', count);
}); });
elkGraph.edges.forEach((edge: any) => { elkGraph.edges.forEach((edge: any) => {
const source = edge.sources[0]; const source = edge.sources[0];
@@ -592,10 +636,10 @@ export const render = async (
setIncludeChildrenPolicy(target, ancestorId); setIncludeChildrenPolicy(target, ancestorId);
} }
}); });
// const copy = JSON.parse(JSON.stringify({ ...elkGraph })); const copy = JSON.parse(JSON.stringify({ ...elkGraph }));
// console.log('APA13 layout before', copy); console.log('APA13 layout before', copy);
const g = await elk.layout(elkGraph); const g = await elk.layout(elkGraph);
// console.log('APA13 layout', JSON.parse(JSON.stringify(g))); console.log('APA13 layout', JSON.parse(JSON.stringify(g)));
// debugger; // debugger;
await drawNodes(0, 0, g.children, svg, subGraphsEl, 0); await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
g.edges?.map( g.edges?.map(