How to change the color of an element dinamically ?

[Andromelus]

I would like to know if it is possible to change the color of an element (a link between two nodes or a node) after the diagram has been generated.

For example, if we take this diagram as an example:

graph LR
toto --> titi

This will generate a link like this:

<path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-toto LE-titi" id="L-toto-titi-0" d="M44.86249923706055,19.5L49.02916590372721,19.5C53.19583257039388,19.5,61.52916590372721,19.5,69.86249923706055,19.5C78.19583257039388,19.5,86.52916590372722,19.5,90.69583257039388,19.5L94.86249923706055,19.5"></path>

I wish to assign the red color to the link. I tried to:

• style="fill: red"
• disable in developer console the fill: none css attribute
• add fill="red" to the path element

All without success.

Is what I am trying to achieve possible, and if yes, how can I do it ?

[huynhicode]

Hi @Andromelus

Maybe try stroke: red. Although that doesn't update the arrow color to red.

You can also try lineColor: red before you export the diagram. This will update the link and arrow color.

themeVariables: {
     lineColor: red
}

Example here

Documentation here

[Andromelus]

Your first solution is almost perfect (I want to update the diagram after generation). I will dig into it. Thank you very much.