marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-14 21:09:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6826 from mermaid-js/6784-edge-label-color-mismatch

Browse Source 
6784: Fix edge ID styling mismatch with linkStyle color
This commit is contained in:
Knut Sveidqvist
2025-09-10 13:41:44 +00:00
committed by GitHub
parent 027d7b6368 2e1d156d66
commit baf4093e8d
4 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/four-eyes-wish.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Ensure edge label color is applied when using classDef with edge IDs

13
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -1186,4 +1186,17 @@ end
imgSnapshotTest(graph, { htmlLabels: false }); imgSnapshotTest(graph, { htmlLabels: false });
}); });
}); });
it('V2 - 17: should apply class def colour to edge label', () => {
imgSnapshotTest(
` graph LR
id1(Start) link@-- "Label" -->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
class id2 myClass
classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
class link myClass
`
);
});
}); });

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

@@ -25,7 +25,7 @@ import {
import rough from 'roughjs'; import rough from 'roughjs';
import createLabel from './createLabel.js'; import createLabel from './createLabel.js';
import { addEdgeMarkers } from './edgeMarker.ts'; import { addEdgeMarkers } from './edgeMarker.ts';
import { isLabelStyle } from './shapes/handDrawnShapeStyles.js'; import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js';
const edgeLabels = new Map(); const edgeLabels = new Map();
const terminalLabels = new Map(); const terminalLabels = new Map();
@@ -43,8 +43,10 @@ export const getLabelStyles = (styleArray) => {
export const insertEdgeLabel = async (elem, edge) => { export const insertEdgeLabel = async (elem, edge) => {
let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels); let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
const { labelStyles } = styles2String(edge);
edge.labelStyle = labelStyles;
const labelElement = await createText(elem, edge.label, { const labelElement = await createText(elem, edge.label, {
style: getLabelStyles(edge.labelStyle), style: edge.labelStyle,
useHtmlLabels, useHtmlLabels,
addSvgBackground: true, addSvgBackground: true,
isNode: false, isNode: false,

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
View File

@@ -20,7 +20,11 @@ export const compileStyles = (node: Node) => {
// the array is the styles of node from the classes it is using // the array is the styles of node from the classes it is using
// node.cssStyles is an array of styles directly set on the node // node.cssStyles is an array of styles directly set on the node
// concat the arrays and remove duplicates such that the values from node.cssStyles are used if there are duplicates // concat the arrays and remove duplicates such that the values from node.cssStyles are used if there are duplicates
const stylesMap = styles2Map([...(node.cssCompiledStyles || []), ...(node.cssStyles || [])]); const stylesMap = styles2Map([
...(node.cssCompiledStyles || []),
...(node.cssStyles || []),
...(node.labelStyle || []),
]);
return { stylesMap, stylesArray: [...stylesMap] }; return { stylesMap, stylesArray: [...stylesMap] };
}; };