how to prevent mermaid.js changing DOM

I want to use mermaid.js in Blazor and have Blazor update the DOM. The documentation states, "With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site." However, I discovered that the function below still modifies the DOM, causing issues with Blazor. How can I prevent this? My intention is to simply return the SVG string back to Blazor.

const { svg } = await mermaid.render('graphDiv', diagramDefinition);

https://mermaid.js.org/config/usage.html#api-usage

My complete code:

mermaid.initialize({ startOnLoad: false });

window.mermaidInterop = {
    renderDiagram: async function (diagramDefinition) {
        const { svg } = await mermaid.render('graphDiv', diagramDefinition);
        return svg;
    }
};

private MarkupString diagramSvg;
private string diagramDefinition = "graph LR;\nA-->B;\nA-->C;\nB-->D;\nC-->D;";
private async Task RenderDiagramAsync()
{
    var svgstring = await JSRuntime.InvokeAsync<string>("mermaidInterop.renderDiagram", diagramDefinition);
    diagramSvg = (MarkupString)svgstring;
    StateHasChanged();
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/UVk9zZ7