-
-
Notifications
You must be signed in to change notification settings - Fork 7.9k
Description
Describe the bug
Perhaps this is works as designed and I haven't grasped the difference between the concept Edge VS. linkStyle
With linkStyle you currently have to either, remember, count or try by chance to apply a style to a specific link.
If you don't have the correct number of the link this may take a while.
https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#styling-links
Therefore, I have been experimenting with ID to Edges and classDef
With the ID to Edges (for me the same as links) you can define the ID and later on pass it class options to define how it looks. The only parameter seemingly not working is color.
https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#attaching-an-id-to-edges
To Reproduce
Steps to reproduce the behavior:
- Create a new mermaid graph (See example in additional context)
- Create two nodes and define an ID for the link/edge give the link a label
- Create a class with the option color e.g. white
- Assign the defined class to the link
- See that the text value of the link doesn't change color
Expected behavior
I would have expected, that the color option within the class definition would change the text value within the link
Desktop:
- OS: WIN11
- Browser Edge
- Version 138
Additional context
uncomment linkStyle to validate, that the color of "Label" changes
Code snip:
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
%%linkStyle 0 color:white