mermaid-js / mermaid-live-editor

Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.
https://mermaid.live
MIT License
4.3k stars 654 forks source link

By element code highlight #1483

Open Zen0x7 opened 4 months ago

Zen0x7 commented 4 months ago

Is your feature request related to a problem? Please describe. Not quite true.

Describe the solution you'd like Imagine that you put your mice over on the element (in the canvas) so the part of the code related to the element is highlighted.

Ideally, if you click the element you can jump to the editor part where is living the definition of.

Describe alternatives you've considered I'm not pretty sure if there are alternatives. I know that GitHub uses ref links to highlight piece of code. Like this link (See the URL).

I think on hover but can be just by pressing.

Additional context

The following can be illuminative:

No element with hover

0_q4nK2VtXaPrCBqcy

Element hovered

0_q4nK2VtXaPrCBqcy

So, just the part/portion of the code responsible for the element is being highlighted, in this case, just the internal for statement.