You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello, for the application I am developing, I need to get the parse result for a graph description, render said graph description, and be able to relate the two together via dom ids.
To explain further, my application essentially provides extra keyboard interaction for mermaid graphs to make them accessible to screen reader users. for this it requires a logical model of the graph. Such a logical model can be conveniently gotten using the parse method like this:
This returns an object described in src/diagrams/flowchart/flowDb.js, which has methods like getVertices, getEdges, getSubGraphs, which give me the information needed to put together a logical model of the graph, including dom ids for nodes I could use to relate to the rendered svg.
However the problem arises that then when I actually render the svg using the mermaid.mermaidAPI.render function, the ids for the nodes don't correspond to the dom ids I got for the parseResult. And so I can't use the dom ids I got earlier to relate my logical model to the rendered svg :(
I am guessing what is happening here, that each time mermaid parses a graph, it tries to assign globally unique ids for the nodes, so they dont clash with other mermaid graphs on the same page. since I do one parse call to get my logical model, and a render call to create the svg, in the render instance, the graph is parsed a second time and so the nodes are assigned different ids.
Hopefully this explains well enough the problem I have run into. Is there any way I can get the parse result produced during the render() call, so I can have a logical model where the dom ids actually correspond to the rendered svg?
Help is greatly appreciated!
The text was updated successfully, but these errors were encountered:
Hello, for the application I am developing, I need to get the parse result for a graph description, render said graph description, and be able to relate the two together via dom ids.
To explain further, my application essentially provides extra keyboard interaction for mermaid graphs to make them accessible to screen reader users. for this it requires a logical model of the graph. Such a logical model can be conveniently gotten using the parse method like this:
const parseResult = mermaid.mermaidAPI.parse(textContent).parser.yy
This returns an object described in
src/diagrams/flowchart/flowDb.js
, which has methods likegetVertices
,getEdges
,getSubGraphs
, which give me the information needed to put together a logical model of the graph, including dom ids for nodes I could use to relate to the rendered svg.However the problem arises that then when I actually render the svg using the
mermaid.mermaidAPI.render
function, the ids for the nodes don't correspond to the dom ids I got for the parseResult. And so I can't use the dom ids I got earlier to relate my logical model to the rendered svg :(I am guessing what is happening here, that each time mermaid parses a graph, it tries to assign globally unique ids for the nodes, so they dont clash with other mermaid graphs on the same page. since I do one parse call to get my logical model, and a render call to create the svg, in the render instance, the graph is parsed a second time and so the nodes are assigned different ids.
Hopefully this explains well enough the problem I have run into. Is there any way I can get the parse result produced during the render() call, so I can have a logical model where the dom ids actually correspond to the rendered svg?
Help is greatly appreciated!
The text was updated successfully, but these errors were encountered: