linkStyle classDef and link group style definition

[brunolnetto]

I wish to attribute the properties of some edges by some a priori defined classDef as it is possible to nodes. I tried to substitute the repeated properties by the defined classDef, but the configuration does not apply. An alternative to avoid repetition is by group similar edges likeso linkStyle 0, 1, 4, 6, 7, 8, 9 stroke:gold, stroke-width:4px. The syntax, however, is not available.

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 stroke:gold, stroke-width:4px
      linkStyle 1 stroke:gold, stroke-width:4px
      linkStyle 4 stroke:gold, stroke-width:4px
      linkStyle 6 stroke:gold, stroke-width:4px
      linkStyle 7 stroke:gold, stroke-width:4px
      linkStyle 8 stroke:gold, stroke-width:4px
      linkStyle 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

      classDef pathEdge stroke:gold, stroke-width:4px

      class A start_node;
      class B active_node;
      class C active_node;
      class D unactive_node;
      class E active_node;
      class F active_node;
      class G finish_node;
      class H active_node;
      class I bugged_node
      

[knsv]

Good idea! This would simplify when styling many links.

[brunolnetto]

Does it imply it will appear as a feature in near future :-)? If the answer is Yes, how can I contribute to make it available for as many diagrams you can count?

[brunolnetto]

A minor suggestion is to group also the node styling, instead of individual definition, likeso: class B C E F H active_node

[michkrej]

I would love to take a look a this if no one else is working on it! @knsv

[brunolnetto]

Go for it, girl! I totally support your iniciative.

[brunolnetto]

@knsv @michkrej Do we progress on something somehow? I look forward for it. :-)

[sjackson0109]

this would be useful.

classDef would be logical; but how do you assign a link to a class would be the next obvious problem :)

[brunolnetto]

I am not aware of the implementation details: Is a node a renderable object? "What one fool can do, another can"

[brunolnetto]

@knsv Do we have any progress on this issue?

[michkrej]

I've started working on another project, so if someone wants to take a look at this issue instead of me please do :)

[brunolnetto]

A working woman.

[tomperr]

Looks like the feature is already implemented, and works perfectly if we use the comma as the separator (and not space)

linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
class B,C,E,F,H active_node

EDIT: the grammar does not allow to do the same for classDef

[brunolnetto]

How to I color the arrow heads?

[sjackson0109]

Can you give an example of it in use and the appropriate diagram/export? <edited - removed the email thread>

[brunolnetto]

@sjackson0109 is everything alright? You seem a bit sick.

[sjackson0109]

Probably because I was half asleep when I replied @brunolnetto

am fine with this:
‘’’
linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
class B,C,E,F,H active_node
‘’’

[brunolnetto]

Your example seems precisely equal to @tomperr's. I will take it as well. In case you know how to color arrow heads, I ask you to give me a thumbs up.

[tomperr]

I will take a look to add the same behaviour for classDef in the next days

[tomperr]

btw sorry @brunolnetto, but I don't have the answer to your question, and it does not seem to be related to this issue

[brunolnetto]

I look forward for the answer while you look for it with your binocle.

[brunolnetto]

It seems MermaidJS needs some full-annoying developer. I may fill this application form out.

[brunolnetto]

I see a pull request, I give 👍🏽 . I wish I could review-comment-approve it. Sad 😿