question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

linkStyle classDef and link group style definition

See original GitHub issue

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
      

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:22 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
brunolnettocommented, Dec 16, 2022

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

1reaction
brunolnettocommented, Nov 12, 2022
Read more comments on GitHub >

github_iconTop Results From Across the Web

Styling links - Learn web development | MDN
To learn how to style link states, and how to use links effectively in common UI features like navigation menus. Let's look at...
Read more >
Support inline styles for Graph arrows · Issue #1971 · mermaid ...
Context Currently in graph (LD/TD) an arrow style can only be changed via something like linkStyle 4 stroke:#000,fill:none,stroke-width:2px ...
Read more >
Changing a link-style, only for a certain class - Stack Overflow
Another method is giving the links a class of their own, eg: CSS a.navlink:visited a.navlink:hover { background-color: #3366FF; }.
Read more >
Produce great looking flowcharts in seconds
To produce it, I do the following: Define chart type. To make this flowchart go from Left-to-Right I enter graph LR . For...
Read more >
CSS and Links | multiple link schemes, hover effects
Basic CSS Link block | Setting up multiple schemes · Inheritance | Hover ... remember the correct order to define these pseudo-elements in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found