marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6683 from mermaid-js/6576-state-diagram-label-position

Browse Source 
6576: State diagram edge label position
This commit is contained in:
Knut Sveidqvist
2025-08-08 10:26:18 +00:00
committed by GitHub
parent aa5d443a46 356da0b4d7
commit 3d319824a6
4 changed files with 256 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cold-sites-accept.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Position the edge label in state diagram correctly relative to the edge

225
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -602,6 +602,231 @@ State1 --> [*]
--
55
}
`,
{}
);
});
it('should render edge labels correctly', () => {
imgSnapshotTest(
`---
title: On The Way To Something Something DarkSide
config:
look: default
theme: default
---
stateDiagram-v2
state State1_____________
{
c0
}
state State2_____________
{
c1
}
state State3_____________
{
c7
}
state State4_____________
{
c2
}
state State5_____________
{
c3
}
state State6_____________
{
c4
}
state State7_____________
{
c5
}
state State8_____________
{
c6
}
[*] --> State1_____________
State1_____________ --> State2_____________ : Transition1_____
State2_____________ --> State4_____________ : Transition2_____
State2_____________ --> State3_____________ : Transition3_____
State3_____________ --> State2_____________
State4_____________ --> State2_____________ : Transition5_____
State4_____________ --> State5_____________ : Transition6_____
State5_____________ --> State6_____________ : Transition7_____
State6_____________ --> State4_____________ : Transition8_____
State2_____________ --> State7_____________ : Transition4_____
State4_____________ --> State7_____________ : Transition4_____
State5_____________ --> State7_____________ : Transition4_____
State6_____________ --> State7_____________ : Transition4_____
State7_____________ --> State1_____________ : Transition9_____
State5_____________ --> State8_____________ : Transition10____
State8_____________ --> State5_____________ : Transition11____
`,
{}
);
});
it('should render edge labels correctly with multiple transitions', () => {
imgSnapshotTest(
`---
title: Multiple Transitions
config:
look: default
theme: default
---
stateDiagram-v2
state State1_____________
{
c0
}
state State2_____________
{
c1
}
state State3_____________
{
c7
}
state State4_____________
{
c2
}
state State5_____________
{
c3
}
state State6_____________
{
c4
}
state State7_____________
{
c5
}
state State8_____________
{
c6
}
state State9_____________
{
c9
}
[*] --> State1_____________
State1_____________ --> State2_____________ : Transition1_____
State2_____________ --> State4_____________ : Transition2_____
State2_____________ --> State3_____________ : Transition3_____
State3_____________ --> State2_____________
State4_____________ --> State2_____________ : Transition5_____
State4_____________ --> State5_____________ : Transition6_____
State5_____________ --> State6_____________ : Transition7_____
State6_____________ --> State4_____________ : Transition8_____
State2_____________ --> State7_____________ : Transition4_____
State4_____________ --> State7_____________ : Transition4_____
State5_____________ --> State7_____________ : Transition4_____
State6_____________ --> State7_____________ : Transition4_____
State7_____________ --> State1_____________ : Transition9_____
State5_____________ --> State8_____________ : Transition10____
State8_____________ --> State5_____________ : Transition11____
State9_____________ --> State8_____________ : Transition12____
`,
{}
);
});
it('should render edge labels correctly with multiple states', () => {
imgSnapshotTest(
`---
title: Multiple States
config:
look: default
theme: default
---
stateDiagram-v2
state State1_____________
{
c0
}
state State2_____________
{
c1
}
state State3_____________
{
c7
}
state State4_____________
{
c2
}
state State5_____________
{
c3
}
state State6_____________
{
c4
}
state State7_____________
{
c5
}
state State8_____________
{
c6
}
state State9_____________
{
c9
}
state State10_____________
{
c10
}
[*] --> State1_____________
State1_____________ --> State2_____________ : Transition1_____
State2_____________ --> State3_____________ : Transition2_____
State3_____________ --> State4_____________ : Transition3_____
State4_____________ --> State5_____________ : Transition4_____
State5_____________ --> State6_____________ : Transition5_____
State6_____________ --> State7_____________ : Transition6_____
State7_____________ --> State8_____________ : Transition7_____
State8_____________ --> State9_____________ : Transition8_____
State9_____________ --> State10_____________ : Transition9_____
`,
{}
);

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

@@ -637,6 +637,11 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
log.info('arrowTypeEnd', edge.arrowTypeEnd);
addEdgeMarkers(svgPath, edge, url, id, diagramType, strokeColor);
const midIndex = Math.floor(points.length / 2);
const point = points[midIndex];
if (!utils.isLabelCoordinateInPath(point, svgPath.attr('d'))) {
pointsHasChanged = true;
}
let paths = {};
if (pointsHasChanged) {

21
packages/mermaid/src/utils.ts
View File

@@ -884,6 +884,7 @@ export default {
runFunc,
entityDecode,
insertTitle,
isLabelCoordinateInPath,
parseFontSize,
InitIDGenerator,
};
@@ -960,3 +961,23 @@ export function handleUndefinedAttr(
) {
return attrValue ?? null;
}
/**
* Checks if the x or y coordinate of the edge label
* appears in the given SVG path data string.
*
* @param point - The Point object with x and y properties to check.
* @param dAttr - SVG path data string (the 'd' attribute of an SVG path element).
* @returns - True if the rounded x or y coordinate of the edge label is found
* in the sanitized path data string; otherwise, false.
*/
export function isLabelCoordinateInPath(point: Point, dAttr: string) {
const roundedX = Math.round(point.x);
const roundedY = Math.round(point.y);
const sanitizedD = dAttr.replace(/(\d+\.\d+)/g, (match) =>
Math.round(parseFloat(match)).toString()
);
return sanitizedD.includes(roundedX.toString()) || sanitizedD.includes(roundedY.toString());
}