Skip to content

Working with IDs of Edges doesn't provide the same result as linkStyle (color) #6784

@rajat-ht

Description

@rajat-ht

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:

  1. Create a new mermaid graph (See example in additional context)
  2. Create two nodes and define an ID for the link/edge give the link a label
  3. Create a class with the option color e.g. white
  4. Assign the defined class to the link
  5. 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

Screenshots
Without linkStyle
Image

With linkStyle
Image

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

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions