Mermaid v10调用render方法无法渲染图表且元素被删除求助

问题根源 #

• 同时启用startOnLoad: true和手动调用mermaid.render引发冲突：startOnLoad会自动扫描页面中带mermaid类的元素并执行渲染，若你的#flowchart元素被该逻辑误处理，就会出现DOM元素消失的情况。
• Mermaid 10的ESM模块在初始化、渲染逻辑上与v7版本差异较大，旧版本的手动渲染逻辑不再适配。

修复方案 #

方案1：禁用自动渲染，纯手动控制 #

修改代码，关闭自动渲染开关，只通过手动调用render生成图表：

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    // 禁用自动渲染，避免逻辑冲突
    mermaid.initialize({startOnLoad: false});
    document.addEventListener("DOMContentLoaded", async function () {
      const element = document.querySelector("#flowchart");
      // 先确认元素存在再执行后续操作
      if (!element) return;
      const { svg, bindFunctions } = await mermaid.render('flowchart', 'graph TD;\nA-->B');
      element.innerHTML = svg;
      bindFunctions?.(element);
    });
</script>

方案2：使用官方标准自动渲染写法 #

如果无需手动控制渲染时机，直接采用官方推荐的自动渲染方式，给目标元素添加mermaid类即可：

<div id="flowchart" class="mermaid">
graph TD;
A-->B
</div>

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

额外注意点 #

• 确保页面中存在id="flowchart"的DOM元素，且脚本通过DOMContentLoaded事件确保元素已加载完成。
• Mermaid 10的ESM模块依赖浏览器ES6模块支持，若需兼容老旧浏览器，可考虑切换到UMD版本。

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