Feature Request: Add Support for Clickable Links in State Diagram Nodes

[BambioGaming]

Proposal

Feature Request

Mermaid.js currently supports clickable links in flowcharts using the click directive:

graph TD
    A[Start] --> B[Go to Google]
    B --> C[End]
    click B "https://google.com" "Visit Google"

However, state diagrams do not support clickable links in the same way.
It would be very useful to have a similar feature for state diagrams, allowing nodes to link to external URLs or trigger JavaScript functions.

Use Case

Making state transition diagrams interactive for documentation, tutorials, and apps.

Example:

stateDiagram
    [*] --> Idle
    Idle --> Google
    Google --> [*]
    click Google "https://google.com" "Visit Google"

This should allow clicking Google to open https://google.com.

Proposed Solution

1. Introduce click directive support for state diagrams, just like flowcharts.
2. Support both URL links and JavaScript function calls.
3. Ensure accessibility and maintain SVG compatibility.

Related Discussions

#6304

Would love to hear thoughts on feasibility!

Example

No response

Screenshots

No response