Feature Request: Allow injecting custom data-* attributes into generated SVG elements for DOM-to-script mapping

[Helron1977]

Hi Mermaid team,

I'd like to request a feature that would allow users to inject custom data-* attributes—such as data-node-id—into the SVG elements generated by Mermaid diagrams.

Use case:
My goal is to allow users to interact with the rendered diagram (e.g., clicking a node), and from there, identify and modify the corresponding part of the original Mermaid script, then trigger a re-render.

To do this reliably, we need a consistent way to map SVG elements back to their source definition. During the parsing phase (before rendering), we can generate a unique ID (e.g., based on the line number or logical index of the element in the script). If Mermaid allowed us to inject this ID as a data-* attribute into the corresponding SVG element, we could then use DOM events to reference and update the script accordingly.

Suggested solution:
Provide a way (perhaps via directive or config) to associate metadata like data-node-id with elements at the script level. This would empower external tooling to implement editable diagrams, change tracking, or script synchronization features with less reliance on internal SVG structure.

Would the team consider supporting this kind of metadata passthrough?

Thank you for your amazing work and the flexibility Mermaid already offers!