Blazor组件中Mermaid.js导入及初始化问题求助

1. 正确导入并初始化Mermaid.js #

Mermaid v10采用ES模块格式，默认不会暴露到全局window对象，这是导致你之前检测不到、调用initialize失败的核心原因。需要手动将mermaid实例挂载到全局，或封装成可被Blazor调用的函数：

方式一：模块脚本挂载到全局 #

在页面（如_Host.cshtml或index.html）中添加以下模块脚本：

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    // 将mermaid挂载到全局，供Blazor访问
    window.mermaid = mermaid;
    // 初始化配置
    mermaid.initialize({ 
        startOnLoad: true,
        theme: 'default' // 可根据需求添加其他配置
    });
</script>

方式二：封装为Blazor可调用的JS函数 #

若不想污染全局变量，可封装专用初始化函数：

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    // 定义全局函数
    window.initMermaid = async () => {
        await mermaid.initialize({ startOnLoad: true });
        return true;
    };
    // 可选：页面加载时自动初始化
    window.initMermaid();
</script>

在Blazor组件中调用：

@inject IJSRuntime JS

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JS.InvokeAsync<bool>("initMermaid");
        // 初始化完成后执行图表渲染逻辑
    }
}

2. 检测Mermaid是否可用 #

ES模块是异步加载的，同步检测会因模块未加载完成返回false，推荐以下两种检测方式：

方式一：全局变量异步检测 #

基于全局挂载的实例，在Blazor中通过JS互操作检测：

private async Task<bool> IsMermaidAvailable()
{
    return await JS.InvokeAsync<bool>("() => typeof window.mermaid !== 'undefined'");
}

也可在JS中封装检测函数：

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    window.mermaid = mermaid;
    mermaid.initialize({ startOnLoad: true });
    
    window.isMermaidReady = () => typeof window.mermaid !== 'undefined' && window.mermaid.initialize !== undefined;
</script>

Blazor调用：

var isReady = await JS.InvokeAsync<bool>("isMermaidReady");

方式二：监听模块加载完成事件 #

通过自定义事件通知Blazor模块加载完成：

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    window.mermaid = mermaid;
    await mermaid.initialize({ startOnLoad: true });
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('mermaidReady'));
</script>

Blazor组件中监听：

@inject IJSRuntime JS

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JS.InvokeVoidAsync("() => { document.addEventListener('mermaidReady', () => { /* 执行就绪后的逻辑 */ }); }");
    }
}

补充说明 #

• 旧版报错e.replace is not a function是因为v10与旧版API不兼容，必须使用ES模块导入，不能再用旧的UMD脚本。
• 务必在Blazor组件的OnAfterRenderAsync生命周期中执行Mermaid操作，确保DOM已准备完毕。

内容的提问来源于stack exchange，提问作者Enrico