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
68.69k stars 6.07k forks source link

Please add data attributes `data-from-id` and `data-to-id` to `g class='edgeLabel'` svg / make it clickable in flowchart #5497

Open d2a-raudenaerde opened 2 months ago

d2a-raudenaerde commented 2 months ago

Hi,

I'm trying to make an interactive flowchart, where my customers can click on the edges to filter data based on that transition.

However, there is no link between the rendered svg and the edge labels (there is info for the paths, in the id attribute, but paths are hard to click on, and the label overlaps the paths, so users can't click there).

Please add one (or two) data attibutes, preferably: data-from-id and data-to-id or similar with the id of the nodes (the nodes data-id).

d2a-raudenaerde commented 2 months ago

For an example flowchart that I'd like to have: image

d2a-raudenaerde commented 1 month ago

Should be somethin along these lines:

edgeG.attr('data-from-id', edge.sourceId); edgeG.attr('data-to-id', edge.targetId);

On r665 in flowRenderer-elk.js