首次调用mermaid.renderAsync渲染思维导图报错，切换主题后正常求助

问题描述 #

我通过JavaScript从数组生成Mermaid思维导图语法，该语法在mermaid.live中可正常渲染，但使用await mermaid.renderAsync方法首次调用时，出现「Syntax error in graph」错误，控制台输出如下：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'h')
    at cF.run (cytoscape.umd.js

切换主题（如base、neutral或dark）后，第二次调用makeGraph即可正常显示思维导图。

相关代码 #

渲染图表代码 #

async function makeGraph(id) {
    let data = localStorage.getItem("mermaidMindMapInput");
    
    var svg = await mermaid.renderAsync("svg_" + id, data);
    var elem = document.getElementById(id);
    elem.innerHTML = svg;
}

HTML代码 #

<div id="g2"></div>

切换主题代码 #

function changeTheme() {
        // 获取下拉选择框元素
        var themeSelect = document.querySelector("#theme-select");

        // 为选择框添加主题切换事件监听
        console.log(document.querySelector("#theme-select"));
        document
            .querySelector("#theme-select")
            .addEventListener("change", function () {
                // 获取选中的主题
                var selectedTheme = event.target.value;

                // 判断主题是否变化
                if (selectedTheme !== currentTheme) {
                    // 更新当前主题
                    currentTheme = selectedTheme;

                    // 使用新主题重新初始化Mermaid
                    mermaid.initialize({ startOnLoad: true, theme: currentTheme });

                    // 移除已存在的SVG图表
                    var diagrams = document.querySelectorAll(".g2");
                    diagrams.forEach((diagram) => {
                        var svg = diagram.querySelector("svg");
                        if (svg) {
                            diagram.removeChild(svg);
                        }
                    });

                    // 重新渲染图表
                    makeGraph("g2");
                }
            });
    }

原因分析 #

这个错误的核心是首次调用makeGraph时，Mermaid未完成完整初始化：
Mermaid渲染思维导图依赖底层的cytoscape库，首次调用前如果没有显式执行mermaid.initialize()，相关配置和依赖资源未加载就绪，导致渲染时出现未定义的属性调用错误。而切换主题时执行了mermaid.initialize()，完成了初始化流程，所以第二次调用能正常工作。

解决方案 #

在页面加载完成后，先显式初始化Mermaid，再调用渲染方法：

// 页面DOM加载完成后执行初始化与首次渲染
document.addEventListener('DOMContentLoaded', async function() {
    // 初始化Mermaid，关闭自动渲染避免冲突
    mermaid.initialize({ startOnLoad: false, theme: 'base' });
    // 首次渲染图表
    await makeGraph("g2");
});

注意事项：

• 将startOnLoad设为false，避免Mermaid自动渲染和手动调用renderAsync产生冲突
• 确保localStorage.getItem("mermaidMindMapInput")获取的Mermaid语法格式正确（已在mermaid.live验证过，此环节无问题）

内容的提问来源于stack exchange，提问作者Ralf Bordé