search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.89k stars 6.53k forks source link

Allow linkStyle based on link text #6017

Open tomdaly opened 2 hours ago

tomdaly commented 2 hours ago

Proposal

hi,

thanks for developing mermaid!

it's great for creating complex flowcharts via markup. I prefer mermaid to manually drawn diagrams because it's much easier to add in new links and nodes retrospectively without having to re-arrange an entire diagram.

Problem

one issue with this use case (namely, a graph with lots of nodes but binary links) appears when using linkStyle. currently, linkStyle only accepts a 'link number' as a reference, which can cause havoc in a diagram when adding a new link or node early on as it means updating all of the subsequent linkStyle references/styling.

Suggestion

allow linkStyle to be set based on link text instead of link number

Example

the syntax might be something like:

linkStyle "Success" color:red
linkStyle "Failure" color:green

where a link style is explicitly defined based on link number, it takes precedence over the above syntax. linkStyle default should still be maintained for anything not specified as a link number or text reference.

Benefit

this is really useful for complex flowcharts with lots of nodes that have binary decisions (i.e. 'Success' or 'Failure')

this would mean that a graph with 20 different decisions has link styles updated automatically if a new link is added early on, without having to manually view and alter the color of subsequent links

happy to contribute to this if you can link me to a good starting point!

tomdaly commented 2 hours ago

couldn't find an existing issue for this but it's quite niche and hard to search for, so please close if this is a duplicate :)

tomdaly commented 2 hours ago

this suggestion shouldn't clash with #4568 or #4483