API Render without DOM Manipulation

[wfoxall]

Would it be good to either modify the existing render and renderAsync functions to allow pure "definition in, SVG out" functionality without touching the DOM, or introduce new functions specifically for this. Eg. process and processAsync?

I'm currently trying to use the mermaidAPI in a similar way to the API Usage section of the docs. But I'm finding myself in the situation where the mermaidAPI and frontend framework I'm using are fighting to update the DOM. (Vue in this case)

I would like to just supply the graph definition to mermaid's render or renderAsync functions, receive the SVG definition from the callback or resolved promise, then use the frontend framework's tools to manually patch the DOM.
I could then watch for changes in the graph definition and repeat the above automatically.

Because mermaidAPI tries to remove and re-add the SVG elements itself, it makes it difficult to retain control over the DOM.

[sidharthv96]

That would be ideal, but afaik, the lot of calculations rely on proper DOM, that's why we're unable to do server side rendering too.

I'm doing the following in live editor.
https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/components/View.svelte#L82-L102

[wfoxall]

Ah I see. Thanks so much for the quick reply too!
Just familiarizing myself with the Svelte code, but I think I'm doing something very similar.
But because I might have multiple diagrams, I'm generating random container and SVG element ids per component, then (on data changes) replacing the container innerHTML in much the same way:

const container = document.getElementById(this.$data.containerid);
let diagram = document.getElementById(this.$data.diagramid);
if(!diagram) {
    diagram = document.createElement('svg') // temporary node for mermaid to work from if needed (will be replaced)
    diagram.id = this.$data.containerid;
}
await mermaid.mermaidAPI.renderAsync(this.$data.diagramid,this.value,(svg=>{
    if(container) {
        container.innerHTML = svg;
    }
}))

It feels hacky, but it's mostly working so I'll carry on with this strategy!
I'm a big fan of mermaid - and your suggestions in discussion #3811 - so will keep an eye on the repo in case there are opportunities to help.

[sidharthv96]

https://github.com/emersonbottero/vitepress-plugin-mermaid uses Vue to render diagrams. Might be helpful for you.