Clicking an element in the preview highlights line in the editor with its associated definition

Context

My team is evaluating Mermaid for use documenting many complex flows and sequences in application architecture. This will make for many quite lengthy source documents. The greatest value of Mermaid for us is the ability to version diagrams right along with our source code. We'll be able to incorporate visual documentation additions and updates right into our code workflow (code review, PRs, CI/CD pipelines, etc.), fight doc rot, and more easily see how our architecture has changed over time, or will change with refactors and new features.

The Problem

Initial feedback from our evaluation (aside from "what a great tool!") is concern that when updating a diagram that hasn't changed in months or years, it will be conceptually simple to see what rendered visual elements need to change, but there will be a lot of cognitive friction in actually making the change, because we'll have to read through a lot of Mermaid source syntax to find the right line(s) corresponding to the visual elements to change.

Existing cognitive process for editing a diagram

flowchart TD
    Conceptualize[conceptualize<br/>architectural change] --> FindVisualElement["identify associated<br/>diagram element(s)"]
    FindVisualElement --> BeginReading
    MakeEdit --> Review[review diagram]
    Review --> Validate{did the change<br/>have the<br />intended effect?}
    Validate --> |yes| Done[w00t!]
    Validate --> |no| Frustration[Arg!!!!] --> Undo([undo change]) --> NextSourceLine
    subgraph EDITING
        BeginReading[read first line of source] -->CandidateLine{think this is it?}
        NextSourceLine[read next line] --> CandidateLine
        CandidateLine --> |yes| MakeEdit([edit source line])
        CandidateLine --> |no| NextSourceLine
    end

Proposed Solution

Clicking an element in the live editor's preview window should focus the associated line(s) responsible for generating that element within the editor.

By "focus", I mean:

in the case of links/edges: highlight the line where the link/edge is specified, and move the cursor to
in the case of nodes, highlight the line with the clicked element's definition, and put the cursor right before the text column where the definition begins. By "definition", I mean: For a given node, if the node includes text in its box, the definition is where that text is specified, else it is the first reference to the node id (the editor highlights other uses of the id already, very helpfully).
In the case of elements that span multiple lines, such as a rect or loop in a sequence diagram, the block of all relevant lines in the editor should be highlighted.

This would give the live editor a lot of the ease-of-use of traditional drag-and-drop diagramming tools, while retaining all of the advantage of rendering diagrams from source code.

Resulting cognitive process for editing a diagram

flowchart TD
    id1[conceptualize<br/>architectural change] --> id2["identify associated<br/>diagram element(s)"]
    id2 --> Click(["click element"])
    Click --> Focus{{source line focused in editor}}
    Focus --> MakeChange([edit source line])
    MakeChange --> Review[review diagram]
    Review --> Validate{did the change<br/>have the<br />intended effect?}
    Validate --> |yes| Done[w00t!]
    Validate --> |no| Frustration[Arg!!!!] --> Undo([undo change]) --> MakeChange

mermaid-js / mermaid-live-editor