Mermaid.js v10动态创建<pre>元素渲染失败原因咨询

静态创建带mermaid类的<pre>元素能正常渲染Mermaid流程图：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <p>Hello, world!</p>
    
    <pre class="mermaid">
    flowchart TB
        id0(["Created"]) --> id1("Public")
        id0 --> id2("Private")
    </pre>

<script type="module">
    console.clear(); //TODO: remove in prod

    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

    mermaid.initialize({
        startOnLoad: true,
        logLevel: "warn"
    });
</script>
</body>
</html>

但动态创建相同<pre>元素时，初始化Mermaid后页面空白且控制台报错：

<!DOCTYPE html>
<html>
<head></head><body>
    <p>Hello, world!</p>
    
<script type="module">
    console.clear(); //TODO: remove in prod

    // 创建和之前测试相同的pre元素
    let pre = document.createElement('pre');
    pre.className = "mermaid";
    
    pre.innerText = `flowchart TB
    id0(["Create"]) --> id1("Public")
    id0 --> id2("Private")`;
    
    document.body.append(pre);

    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

    mermaid.initialize({
        startOnLoad: true,
        logLevel: "warn"
    });

</script>
</body>
</html>

请问Mermaid对这两种处理方式不同的原因是什么？

核心原因 #

Mermaid的startOnLoad: true配置，是在模块加载完成并执行初始化时，自动扫描页面中已存在的mermaid类元素。但ES模块的加载是异步的：你先动态创建并添加了元素，然后才发起模块请求，等Mermaid模块下载完成、执行initialize时，浏览器可能已经触发过DOMContentLoaded事件了——此时startOnLoad的自动扫描逻辑已经错过，不会再处理之后添加的动态元素。

另外，动态设置innerText时的文本格式（比如换行、缩进）可能和静态HTML里的有细微差别，但这不是导致报错空白的主要原因，核心问题还是扫描时机不匹配。

解决方法 #

• 手动触发渲染：关闭startOnLoad，在动态添加元素后手动调用mermaid.run()扫描并渲染元素：

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

// 动态创建并添加元素的代码...
document.body.append(pre);

mermaid.initialize({
    startOnLoad: false, // 关闭自动加载
    logLevel: "warn"
});
mermaid.run(); // 手动触发渲染流程

• 调整初始化时机：确保Mermaid初始化逻辑在动态元素添加完成后执行，并且依赖手动调用渲染，而非自动的startOnLoad。

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