Search code examples
c#blazormarkupblazor-webassemblymermaid

Render Mermaid diagram with Blazor WebAssembly App in .NET 5.0

I have followed the guide for Deploying Mermaid here:

https://mermaid-js.github.io/mermaid/#/?id=deploying-mermaid

Using it on codepen works directly:

https://codepen.io/Ogglas/pen/MWjWNxR

mermaid.initialize({
  startOnLoad:true
});

<div class="mermaid">
    graph LR
        A[Client] --- B[Load Balancer]
        B-->C[Server01]
        B-->D(Server02)
</div>

To enable it in Blazor i edited BlazorApp.Client -> wwwroot -> index.html and added the following below <script src="_framework/blazor.webassembly.js"></script>.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

I then edited Index.razor with the following values:

<h1>Hello, world!</h1>

Welcome to your new app.

<div class="mermaid">
    graph LR
        A[Client] --- B[Load Balancer]
        B-->C[Server01]
        B-->D(Server02)
</div>

However this does not render the mermaid diagram. What am I doing wrong?

Solution

  • Solved it with a button click for now:

    Index.razor:

    @page "/"
@inject IJSRuntime JSRuntime

<h1>Hello, world!</h1>

Welcome to your new app.

<div>
    <button @onclick="TriggerClick">
        Trigger Mermaid diagram render
    </button>
</div>

<div>
    Graph:
    <div id="output"></div>
</div>

<SurveyPrompt Title="How is Blazor working for you?" />

@code {

    public async Task TriggerClick()
    {
        await JSRuntime.InvokeVoidAsync("renderMermaidDiagram");
    }
}

    index.html, add this to the <head> section:

    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
    window.renderMermaidDiagram = () => {
        var output = document.getElementById("output");
        var input = "graph LR \n" +
            "A[Client] --- B[Load Balancer] \n" +
            "B-->C[Server01] \n" +
            "B-->D(Server02) \n";
        mermaid.mermaidAPI.render('theGraph', input, function (svgCode) {
            output.innerHTML = svgCode;
        });
    }
</script>

    Will look like this:

    enter image description here

    Note that some of the tutorials for mermaid uses outdated versions and will not work with the latest releases.

    Sources:

    https://mermaid-js.github.io/mermaid/#/Tutorials?id=mermaid-with-html

    https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0