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
72.25k stars 6.57k forks source link

Add Id to Flowchart Links - Enable interactions and classes #4794

Open Ogglas opened 1 year ago

Ogglas commented 1 year ago

Proposal

I know it is possible to style Links with the syntax below but it would be useful to add interactions and use classes as well.

linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;

https://mermaid.js.org/syntax/flowchart.html#styling-links

Would be good with a uniform solution for styling and also the possibility to interact with Links like the issue below:

Like this issue: https://github.com/mermaid-js/mermaid/issues/2305

Example

A suggestion would be to use a similar syntax as subgraph with subgraph ide1 [one].

It would then look something like this: A--textid [text]-->B

You could then add a click like this:

click textid callback "Tooltip for a callback"

Screenshots

No response

rockmasterflex69 commented 1 year ago

Is this potentially related to https://github.com/mermaid-js/mermaid/issues/4568?

Being able to define an ID for a link instead of being at the whim of the index is crucial for enabling dynamic styling and interactivity.

sidharthv96 commented 1 year ago

https://github.com/mermaid-js/mermaid/pull/4483 will help with not having to use IDs.

When deciding the syntax, we need to make sure it doesn't break the existing diagrams.