linkStyle classDef and link group style definition
See original GitHub issueI 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:
- Created a year ago
- Comments:22 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I look forward for the answer while you look for it with your binocle.
A working woman.