以下の3つ目（TikiBillさん）のアンサーが参考になりました． stackoverflow.com

最新のバージョン8.13.0のmermaid.jsのdist_devフォルダを中身ごと Blazorソリューション（Blazoeは3.0）のwwwrootのjsフォルダ（Javascriptファイルを格納するフォルダとして事前に作成したもの）にコピーします． github.com
index.htmlにmermaid.jsの読み込みとアンサーにあるJavascriptコードを headタグに記述します．

    <script src="./js/dist_dev/mermaid.js"></script>
    <script>
        var JsFunctions = window.JsFunctions || {};
        JsFunctions = {
            MermaidInitialize: function () {
                mermaid.initialize({
                    startOnLoad: true,
                });
            },

            MermaidRender: function () {
                mermaid.init();
            }
        };
    </script>

任意のrazorファイルにアンサーにあるC#コードを書きます．

<div class="mermaid">
    mermaidの記述をココに
</div>
@code {
    [Inject]
    #nullable enable // null許容型の許可
    protected IJSRuntime? JsRuntime { get; set; } = null;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!(this.JsRuntime is null))
        {
            if (firstRender)
            {
                await this.JsRuntime.InvokeVoidAsync("JsFunctions.MermaidInitialize");
            }

            await this.JsRuntime.InvokeVoidAsync("JsFunctions.MermaidRender");
        }
    }
}

参考

ちなみに github.com
（NuGet Gallery | MermaidJS.Blazor 1.0.2）
とBlazor用のNuGetパッケージもあるみたいです．

芋の独り言

当ブログへのアクセスは当ブログのプライバシーポリシーに同意したものとみなします．

Blazorでmermaid.jsを使いたいとき

参考