arrowStyle classDef group style definition on flowchart

[brunolnetto]

Proposal

On previous episodes of me 'n maid-js, I suggested Styled multi-links on flowcharts. Great! @tomperr came to the rescue, opened the pull request and saved the day. This is (curiously) already available on mermaid.live. For my next request, I ask:

How to add style to arrows-heads?

It seems arrowheads are not bounded to links, since linkStyle does not change its style. Should it be? Maybe.

Example

The suggested syntax is bold-faced below:

graph TD
      A([Start]) ==> B[Step 1]
      B ==> C{Flow 1}
      C -- Choice 1.1 --> D[Step 2.1]
      C -- Choice 1.3 --> I[Step 2.3]
      C == Choice 1.2 ==> E[Step 2.2]
      D --> F{Flow 2}
      E ==> F{Flow 2}
      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
      H[Feedback node] ==> B[Step 1]
      F{Flow 2} == Choice 2.2 ==> G((Finish))
      
      linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
      arrowStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px 
      
      classDef start_node fill:#3B1,stroke:#391,stroke-width:8px
      classDef finish_node fill:#3B1,stroke:#391,stroke-width:8px
      classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
      classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px      
      classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
      
      class B,C,E,F,H active_node
      class A start_node;
      class D unactive_node;
      class G finish_node;
      class I bugged_node

Screenshots

No response

[Slanski]

Hi there,

I am also highly interested in this feature. Sometimes a diagram requires specifically the whole link to be in a certain color, including the arrowhead. Plus, more and more people use dark mode/night theme, where black color is not an option for such elements of diagrams as arrowheads.

Any news on this solution?

[brunolnetto]

There is an open pull request on a syntax-related topic to allow commas on class definitions. Similarly, an arrow is "maybe" (not sure since I am just a Triton with a snorkel) a class, which makes it pragmatic to extend the feature for them as well.

I am doing the role of a Project Manager here to ask the assignees @tomperr and @jgreywolf about the progress of this feature.