how to control color of individual lines in a flowchart.

[jag567]

I am trying to find a way to assign colors to individual lines in a flowchart. I am creating a chart as program output. I want to cycle through a number of colors to make individual lines easier to follow. I have been trying to find a way to associate a css class with a line. So I can use these as proxies for the colors. Interested in suggestions. Class association works fine for shapes but not seeing a way to do it for lines.

[gitsult4n]

give the edge an id then point a classDef at that id

flowchart LR
  A e1@--> B
  B e2@--> C
  classDef red stroke:#ff0000,stroke-width:3px
  classDef blue stroke:#0000ff,stroke-width:3px
  class e1 red
  class e2 blue

e1:::red is the same thing

the class name never lands on the path element
the classDef is compiled into the inline style of the edge path and the arrowhead picks up the same stroke
packages/mermaid/src/diagrams/flowchart/flowDb.ts:477 matches the edge by id
packages/mermaid/src/diagrams/flowchart/flowDb.ts:1273 compiles the class styles
packages/mermaid/src/rendering-util/rendering-elements/edges.js:829 writes them onto the path

needs 11.5.0 or newer
11.4.1 throws a parse error on A e1@--> B

one gotcha
under look: handDrawn the compiled class styles are dropped and the line stays the default colour
packages/mermaid/src/rendering-util/rendering-elements/edges.js:806
the default look and layout: elk and look: neo all colour fine

linkStyle still works and it also survives handDrawn but it takes numeric indices or default only
packages/mermaid/src/diagrams/flowchart/parser/flow.jison:562
for program generated charts the ids are safer since indices shift whenever you insert an edge