feature request: no ids in linkStyle

it would be great not to have to identify links by ID when writing the text description, because inserting links in the middle gets really messy. So I end up having to put them at the end, and then nothing is organized after a while. It’s also very annoying to have to count links when I’m writing a graph and if I get it off by one, it can be hard to find the node on the flowchart diagram… it’s just needless debugging. Maybe you could allow something like:

graph TD 
A --> B style stroke:#a00,stroke-width:2px;

which would be a huge improvement over what I have to do now - I have to keep counting out the links to remember which number a link style goes on (i’m trying to do a flowchart with red and green links). even better would be being able to apply classes to links, which seems like it would be theoretically the same as doing so for nodes, but with the new syntax you could do:

A --> B style .red
OR
A --> B class red

And it would automatically apply a group of styles. I think this is a large usability issue, and if you could fix it that would be awesome.

[Ariex]

@0dminnimda , open the example page, use developer tools to select the arrow from B (Go shopping) to C (Let me think), you can see its code like below:

<g id="L-B-C" style="opacity: 1;" class="edgePath LS-B LE-C"><path style="fill:none" marker-end="url(#arrowhead24)" d="M161.03125,170L161.03125,174.16666666666666C161.03125,178.33333333333334,161.03125,186.66666666666666,161.11458333333334,195.08333358764648C161.19791666666666,203.50000050862627,161.36458333333334,212.00000101725254,161.44791666666666,216.25000127156568L161.53125,220.50000152587882" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead24"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowheadPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g>

add this to styles:

g#L-B-C path {
    fill: red !important;
    stroke: red !important;
}

you can see the arrow is red now

[vshesh]

Here’s what I mean:

graph TD
A --> B
B --> C
C --> A

Now say I want one of these to be red links and the other two to be green links

graph TD
A --> B
B --> C
C --> A

linkStyle 1 style .red
linkStyle 2 class green
linkStyle 3 class green

That was easy to do with 3 links, but it’s really hard to do with more than, say, 10. I have to manually count out which link i’m looking at for an id. A much simpler thing would be putting linksyles into the link declarations directly:

graph TD
B --> A
A --> B, linkStyle class red
^ or any other equivalent syntax that works with your parser

now i don’t need to know which number link it is, and if, for example I go back and add another link in the middle:

graph TD
B --> A
C --> A
A --> B, linkstyle class red

I don’t have to go renumber all my ids!!