marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-06 07:39:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'os_repo/5237-unified-layout-common-renderer' into alanaV11

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-11 13:28:47 +02:00
parent 1bf4cca3a3 5f110e4cde
commit 58f5f4a35d
3 changed files with 119 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
cypress/platform/knsv2.html
View File

@@ -76,6 +76,62 @@
</head>
<body>
<pre id="diagram" class="mermaid">
flowchart LR
subgraph Apa["Apa"]
A["Start"]
B["This is B"]
end
A --> B & C["C"]
Apa --> C
</pre
>
<pre id="diagram" class="mermaid">
flowchart LR
subgraph Apa["Apa"]
B["This is B"]
A["Start"]
end
A --> B & C["C"]
Apa --> C
</pre
>
<pre id="diagram" class="mermaid">
flowchart LR
subgraph Apa["Apa"]
subgraph Gorilla
A["Start"]
B["This is B"]
end
end
A --> B & C["C"]
Gorilla --> C
</pre
>
<pre id="diagram" class="mermaid">
flowchart LR
subgraph Apa["Apa"]
subgraph Gorilla
A["Start"]
B["This is B"]
end
end
A --> B & C["C"]
Apa --> C
</pre
>
<pre id="diagram" class="mermaid2">
flowchart LR
subgraph Apa["Apa"]
subgraph Gorilla
B["This is B"]
A["Start"]
end
end
Apa --> C
A --> B & C["C"]
</pre
>
<pre id="diagram" class="mermaid2">
stateDiagram
direction LR
state Gorilla0 {
@@ -88,7 +144,7 @@ direction LR
A0 --> C0
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart LR
subgraph Gorilla
subgraph Apa
@@ -106,6 +162,17 @@ stateDiagram
</pre
>
<pre id="diagram" class="mermaid2">
flowchart LR
subgraph Apa["Apa"]
A["Start"]
B["This is B"]
end
A --> B & C["C"]
Apa --> C
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "dagre", "mergeEdges": false} }%%
flowchart LR
A ==> B(This is B)
@@ -134,7 +201,7 @@ flowchart
if_state --> True : if n >= 0
</pre
>
<pre id="diagram" class="mermaid3">
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram
state if_state &lt;&lt;choice&gt;&gt;
@@ -228,18 +295,18 @@ stateDiagram-v2
<script type="module">
import mermaid from './mermaid.esm.mjs';
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
// import { layouts } from './mermaid-layout-elk.esm.mjs';
// mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'base',
// handdrawnSeed: 12,
look: 'handdrawn',
// look: 'handdrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre',
layout: 'elk',
// layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },

6
packages/mermaid-layout-elk/src/find-common-ancestor.ts
View File

@@ -7,6 +7,12 @@ export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData)
const { parentById } = treeData;
const visited = new Set();
let currentId = id1;
// Edge case with self edges
if (id1 === id2) {
return parentById[id1] || 'root';
}
while (currentId) {
visited.add(currentId);
if (currentId === id2) {

49
packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js
View File

@@ -152,27 +152,58 @@ export const validate = (graph) => {
return true;
};
const findCommonEdges = (graph, id1, id2) => {
const edges1 = graph.edges().filter((edge) => edge.v === id1 || edge.w === id1);
const edges2 = graph.edges().filter((edge) => edge.v === id2 || edge.w === id2);
const edges1Prim = edges1.map((edge) => {
return { v: edge.v === id1 ? id2 : edge.v, w: edge.w === id1 ? id1 : edge.w };
});
const edges2Prim = edges2.map((edge) => {
return { v: edge.v, w: edge.w };
});
const result = edges1Prim.filter((edgeIn1) => {
return edges2Prim.filter((edge) => edgeIn1.v === edge.v && edgeIn1.w === edge.w).length > 0;
});
return result;
};
/**
* Finds a child that is not a cluster. When faking an edge between a node and a cluster.
*
* @param id
* @param {any} graph
*/
export const findNonClusterChild = (id, graph) => {
log.trace('Searching', id);
const children = graph.children(id).reverse();
export const findNonClusterChild = (id, graph, clusterId) => {
const children = graph.children(id);
log.trace('Searching children of id ', id, children);
if (children.length < 1) {
log.trace('This is a valid node', id);
return id;
}
let reserve;
for (const child of children) {
const _id = findNonClusterChild(child, graph);
const _id = findNonClusterChild(child, graph, clusterId);
// Edge chase where the cluster has an edge to a node and the selected
// child has a link to the same node
const commonEdges = findCommonEdges(graph, clusterId, _id);
if (_id) {
log.trace('Found replacement for', id, ' => ', _id);
return _id;
if (commonEdges.length > 0) {
// console.log(
// '\x1B[44;93;4m abc24 The replacement also has an edge',
// clusterId,
// ' => ',
// _id,
// graph.edges()
// );
reserve = _id;
} else {
return _id;
}
}
}
return reserve;
};
const getAnchorId = (id) => {
@@ -207,10 +238,10 @@ export const adjustClustersAndEdges = (graph, depth) => {
'Cluster identified',
id,
' Replacement id in edges: ',
findNonClusterChild(id, graph)
findNonClusterChild(id, graph, id)
);
descendants[id] = extractDescendants(id, graph);
clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
clusterDb[id] = { id: findNonClusterChild(id, graph, id), clusterData: graph.node(id) };
}
});