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
71.77k stars 6.51k forks source link

Source line number metadata in rendered diagram #2107

Open kevbry opened 3 years ago

kevbry commented 3 years ago

There's a feature in some text diagram editors that allows you to click on a portion of the rendered output, and have the corresponding line of the source selected in the editor. Correspondingly, being able to somehow hilight the portion of the rendered graph related to the currently selected source line.

To make this work, I'd need to have the rendered graph include metadata about the source file. I have a prototype of this working in mermaid sequence diagrams where I modified the parser to include source line numbers in sequenceDb, then modified the sequenceRenderer to attach a data-lineno attribute to the text and polygons in the diagram. With that working, it's pretty trivial to update the live editor to be able to select the right source line based on what diagram part was clicked.

If I cleaned it up and sent a PR, would it be acceptable even if it only worked for sequence diagrams for the first draft?

sidharthv96 commented 1 year ago

@kevbry this would be a very useful feature, can you raise the PR? I wonder if we could do something in a more generic manner, covering all diagrams, but your PR can be a starting point.

Yokozuna59 commented 1 year ago

It might be easier when we have the langium parser. The langium team have a showcase that read the document and refers to specific line on it when you click the AST:

https://langium.org/showcase/arithmetics/