Add Id to Flowchart Links - Enable interactions and classes

[Ogglas]

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: #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]

Is this potentially related to #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]

#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.