diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 9ad2b5604..d67e7a28c 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -1133,4 +1133,17 @@ end ` ); }); + + 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 +` + ); + }); }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index a97668d5f..178ab4693 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -25,7 +25,7 @@ import { import rough from 'roughjs'; import createLabel from './createLabel.js'; import { addEdgeMarkers } from './edgeMarker.ts'; -import { isLabelStyle } from './shapes/handDrawnShapeStyles.js'; +import { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js'; const edgeLabels = new Map(); const terminalLabels = new Map(); @@ -43,8 +43,10 @@ export const getLabelStyles = (styleArray) => { export const insertEdgeLabel = async (elem, edge) => { let useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels); + const { labelStyles } = styles2String(edge); + edge.labelStyle = labelStyles; const labelElement = await createText(elem, edge.label, { - style: getLabelStyles(edge.labelStyle), + style: edge.labelStyle, useHtmlLabels, addSvgBackground: true, isNode: false,