+
---
config:
layout: elk
@@ -119,12 +119,12 @@
B@{ shape: diamond}
-
+
---
config:
layout: elk
flowchart:
- curve: linear
+ curve: rounded
---
flowchart LR
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
@@ -132,12 +132,14 @@
D@{ shape: question}
I@{ shape: question}
-
+
---
config:
layout: elk
flowchart:
- curve: linear
+ curve: rounded
+ elk:
+ nodePlacementStrategy: NETWORK_SIMPLEX
---
flowchart LR
D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
@@ -146,7 +148,7 @@
D@{ shape: trap-b}
I@{ shape: lean-l}
-
+
---
config:
layout: elk
@@ -164,7 +166,7 @@ flowchart LR
config:
layout: elk
flowchart:
- curve: linear
+ //curve: linear
---
flowchart LR
%% A ==> B
@@ -172,7 +174,7 @@ flowchart LR
A{A} --> B((Bo boo)) & B & B & B
-
+
---
config:
layout: elk
@@ -192,7 +194,7 @@ A{A} --> B((Bo boo)) & B & B & B
D --> I & E
E --> I
-
+
---
config:
layout: elk
@@ -217,7 +219,7 @@ config:
end
end
-
+
---
config:
layout: elk
@@ -230,7 +232,7 @@ config:
D-->I
D-->I
-
+
---
config:
layout: elk
@@ -269,7 +271,7 @@ flowchart LR
n8@{ shape: rect}
-
+
---
config:
layout: elk
@@ -285,7 +287,7 @@ flowchart LR
-
+
---
config:
layout: elk
@@ -294,7 +296,7 @@ flowchart LR
A{A} --> B & C
-
+
---
config:
layout: elk
@@ -306,7 +308,7 @@ flowchart LR
end
-
+
---
config:
layout: elk
@@ -324,7 +326,7 @@ flowchart LR
-
+
---
config:
kanban:
@@ -343,81 +345,81 @@ kanban
task3[💻 Develop login feature]@{ ticket: 103 }
-
+
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
-
+
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
style A fill:#f9f,stroke:#333,stroke-width:4px
-
+
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-
+
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
-
+
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
-
+
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
style A fill:#f9f,stroke:#333,stroke-width:4px
-
+
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-
+
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
-
+
flowchart LR
nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
-
+
flowchart LR
nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px
-
+
flowchart LR
nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-
+
flowchart LR
nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
A:::AClass
classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-
+
flowchart LR
nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
style A fill:#f9f,stroke:#333,stroke-width:4px
-
+
kanban
id2[In progress]
docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
-
+
---
config:
kanban:
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index 7e2a82c75..4d969d4e5 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -9,7 +9,6 @@ import type {
import { curveLinear } from 'd3';
import ELK from 'elkjs/lib/elk.bundled.js';
import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
-import { bounds } from '../../mermaid/src/diagrams/user-journey/journeyRenderer';
type Node = LayoutData['nodes'][number];
@@ -74,9 +73,9 @@ export const render = async (
...node,
children: [],
};
- // Let lke render with the copy
+ // Let elk render with the copy
graph.children.push(child);
- // Save the original contining the intersection function
+ // Save the original containing the intersection function
nodeDb[node.id] = child;
await addVertices(nodeEl, nodeArr, child, node.id);
@@ -267,7 +266,6 @@ export const render = async (
const edges = dataForLayout.edges;
const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
const linkIdCnt: any = {};
- const dir = dataForLayout.direction || 'DOWN';
let defaultStyle: 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
// 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);
// Add the edge to the graph
graph.edges.push({
- // @ts-ignore TODO: fix this
- id: 'e' + edge.start + edge.end,
...edge,
sources: [source],
targets: [target],
@@ -810,6 +806,25 @@ export const render = async (
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);
// 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);
edge.points = cutter2(startNode, endNode, edge.points);
log.debug('UIO cutter2: Points after cutter2:', edge.points);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index afcd65360..7efa6eb9b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -602,7 +602,7 @@ export const insertEdge = function (
// .attr('cx', point.x)
// .attr('cy', point.y);
// });
- if (edge.showPoints || true) {
+ if (edge.showPoints) {
lineData.forEach((point) => {
elem
.append('circle')