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

Some cleanup

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-06-25 12:58:54 +02:00
parent c7f2f609a9
commit b7c03dc27e
3 changed files with 57 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
cypress/platform/knsv2.html
View File

@@ -105,7 +105,7 @@
</head> </head>
<body> <body>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -119,12 +119,12 @@
B@{ shape: diamond} B@{ shape: diamond}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
flowchart: flowchart:
curve: linear curve: rounded
--- ---
flowchart LR flowchart LR
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"] D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
@@ -132,12 +132,14 @@
D@{ shape: question} D@{ shape: question}
I@{ shape: question} I@{ shape: question}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
flowchart: flowchart:
curve: linear curve: rounded
elk:
nodePlacementStrategy: NETWORK_SIMPLEX
--- ---
flowchart LR flowchart LR
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"] D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
@@ -146,7 +148,7 @@
D@{ shape: trap-b} D@{ shape: trap-b}
I@{ shape: lean-l} I@{ shape: lean-l}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -164,7 +166,7 @@ flowchart LR
config: config:
layout: elk layout: elk
flowchart: flowchart:
curve: linear //curve: linear
--- ---
flowchart LR flowchart LR
%% A ==> B %% A ==> B
@@ -172,7 +174,7 @@ flowchart LR
A{A} --> B((Bo boo)) & B & B & B A{A} --> B((Bo boo)) & B & B & B
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -192,7 +194,7 @@ A{A} --> B((Bo boo)) & B & B & B
D --> I & E D --> I & E
E --> I E --> I
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -217,7 +219,7 @@ config:
end end
end end
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -230,7 +232,7 @@ config:
D-->I D-->I
D-->I D-->I
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -269,7 +271,7 @@ flowchart LR
n8@{ shape: rect} n8@{ shape: rect}
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -285,7 +287,7 @@ flowchart LR
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -294,7 +296,7 @@ flowchart LR
A{A} --> B & C A{A} --> B & C
</pre </pre
> >
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -306,7 +308,7 @@ flowchart LR
end end
</pre </pre
> >
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
layout: elk layout: elk
@@ -324,7 +326,7 @@ flowchart LR
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
kanban: kanban:
@@ -343,81 +345,81 @@ kanban
task3[💻 Develop login feature]@{ ticket: 103 } task3[💻 Develop login feature]@{ ticket: 103 }
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
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="mermaid2"> <pre id="diagram4" class="mermaid">
--- ---
config: config:
kanban: kanban:

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

@@ -9,7 +9,6 @@ import type {
import { curveLinear } from 'd3'; import { curveLinear } from 'd3';
import ELK from 'elkjs/lib/elk.bundled.js'; import ELK from 'elkjs/lib/elk.bundled.js';
import { type TreeData, findCommonAncestor } from './find-common-ancestor.js'; import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
import { bounds } from '../../mermaid/src/diagrams/user-journey/journeyRenderer';
type Node = LayoutData['nodes'][number]; type Node = LayoutData['nodes'][number];
@@ -74,9 +73,9 @@ export const render = async (
...node, ...node,
children: [], children: [],
}; };
// Let lke render with the copy // Let elk render with the copy
graph.children.push(child); graph.children.push(child);
// Save the original contining the intersection function // Save the original containing the intersection function
nodeDb[node.id] = child; nodeDb[node.id] = child;
await addVertices(nodeEl, nodeArr, child, node.id); await addVertices(nodeEl, nodeArr, child, node.id);
@@ -267,7 +266,6 @@ export const render = async (
const edges = dataForLayout.edges; const edges = dataForLayout.edges;
const labelsEl = svg.insert('g').attr('class', 'edgeLabels'); const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
const linkIdCnt: any = {}; const linkIdCnt: any = {};
const dir = dataForLayout.direction || 'DOWN';
let defaultStyle: string | undefined; let defaultStyle: string | undefined;
let defaultLabelStyle: string | undefined; let defaultLabelStyle: string | undefined;
@@ -404,13 +402,11 @@ export const render = async (
// calculate start and end points of the edge, note that the source and target // calculate start and end points of the edge, note that the source and target
// can be modified for shapes that have ports // can be modified for shapes that have ports
// @ts-ignore TODO: fix this
const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir); const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge);
log.debug('abc78 source and target', source, target); log.debug('abc78 source and target', source, target);
// Add the edge to the graph // Add the edge to the graph
graph.edges.push({ graph.edges.push({
// @ts-ignore TODO: fix this
id: 'e' + edge.start + edge.end,
...edge, ...edge,
sources: [source], sources: [source],
targets: [target], targets: [target],
@@ -810,6 +806,25 @@ export const render = async (
log.debug('UIO cutter2: No suitable outside point found for end node intersection'); log.debug('UIO cutter2: No suitable outside point found for end node intersection');
} }
// Final cleanup: Check if the last point is too close to the previous point
if (points.length > 1) {
const lastPoint = points[points.length - 1];
const secondLastPoint = points[points.length - 2];
const distance = Math.sqrt(
(lastPoint.x - secondLastPoint.x) ** 2 + (lastPoint.y - secondLastPoint.y) ** 2
);
// If the distance is very small (less than 2 pixels), remove the last point
if (distance < 2) {
log.debug(
'UIO cutter2: Last point too close to previous point, removing it. Distance:',
distance
);
log.debug('UIO cutter2: Removing last point:', lastPoint, 'keeping:', secondLastPoint);
points.pop();
}
}
log.debug('UIO cutter2: Final points:', points); log.debug('UIO cutter2: Final points:', points);
// Debug: Check which side of the end node we're ending at // Debug: Check which side of the end node we're ending at
@@ -1061,49 +1076,6 @@ export const render = async (
}); });
} }
// edge.points = cutPathAtIntersect2(startNode, edge.points.reverse(), offset, {
// x: startNode.x + startNode.width / 2 + offset.x,
// y: startNode.y + startNode.height / 2 + offset.y,
// width: sw,
// height: startNode.height,
// padding: startNode.padding,
// }).reverse();
// edge.points = cutPathAtIntersect2(endNode, edge.points, offset, {
// x: endNode.x + ew / 2 + endNode.offset.x,
// y: endNode.y + endNode.height / 2 + endNode.offset.y,
// width: ew,
// height: endNode.height,
// padding: endNode.padding,
// });
// edge.points = cutPathAtIntersect(
// edge.points.reverse(),
// {
// x: startNode.offset.posX + startNode.width / 2,
// y: startNode.offset.posY + startNode.height / 2,
// width: sw,
// height: startNode.height,
// padding: startNode.padding,
// },
// true // startNode.shape === 'diamond' || startNode.shape === 'diam'
// ).reverse();
// console.log('UIO width', sw, startNode.width);
// edge.points = cutPathAtIntersect(
// edge.points,
// {
// x: endNode.offset.posX + endNode.width / 2,
// y: endNode.offset.posY + endNode.height / 2,
// width: ew,
// height: endNode.height,
// padding: endNode.padding,
// },
// endNode.shape === 'diamond' || endNode.shape === 'diam'
// );
// startNode.intersect = undefined;
// endNode.intersect = undefined;
log.debug('UIO cutter2: Points before cutter2:', edge.points); log.debug('UIO cutter2: Points before cutter2:', edge.points);
edge.points = cutter2(startNode, endNode, edge.points); edge.points = cutter2(startNode, endNode, edge.points);
log.debug('UIO cutter2: Points after cutter2:', edge.points); log.debug('UIO cutter2: Points after cutter2:', edge.points);

2
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@@ -602,7 +602,7 @@ export const insertEdge = function (
// .attr('cx', point.x) // .attr('cx', point.x)
// .attr('cy', point.y); // .attr('cy', point.y);
// }); // });
if (edge.showPoints || true) { if (edge.showPoints) {
lineData.forEach((point) => { lineData.forEach((point) => {
elem elem
.append('circle') .append('circle')