Mermaid JS动态生成图表报错：createElementNS读取未定义属性

错误原因 #

1. DOM元素获取错误：document.getElementById("#graphDiv")中多了#前缀，getElementById方法仅需传入纯ID字符串，无需CSS选择器的#标识，导致element变量为undefined，后续调用element.innerHTML时触发报错。
2. Mermaid未完成初始化：新版本Mermaid需要先完成基础配置初始化，直接调用render方法会因缺少运行环境配置引发异常。

修复后的代码 #

HTML部分 #

<div id="graphDiv"></div>
<button id="renderBtn">生成图表</button>

JS部分 #

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.0.2/+esm';

// 初始化Mermaid基础配置
mermaid.initialize({ startOnLoad: false });

document.getElementById("renderBtn").addEventListener("click", async (e) => {
    const element = document.getElementById("graphDiv");
    const graphDefinition = 'graph TB\na-->b';
    
    try {
        // 异步调用render获取SVG内容
        const { svg } = await mermaid.render('graphDiv', graphDefinition);
        element.innerHTML = svg;
    } catch (err) {
        console.error('图表渲染失败:', err);
    }
});

其他动态生成图表的方法 #

• 动态添加元素+Mermaid.run：先创建包含Mermaid语法的DOM元素，再触发渲染

  document.getElementById("renderBtn").addEventListener("click", () => {
      const graphDiv = document.getElementById("graphDiv");
      // 清空容器原有内容
      graphDiv.innerHTML = '';
      // 创建带Mermaid类名的pre标签
      const preElement = document.createElement('pre');
      preElement.classList.add('mermaid');
      preElement.textContent = 'graph TB\na-->b';
      graphDiv.appendChild(preElement);
      // 指定元素触发渲染
      mermaid.run({ nodes: [preElement] });
  });
  

• 模块化调用MermaidAPI：若需更精细化控制，部分版本可单独导入mermaidAPI进行渲染操作（需注意版本兼容性）

内容的提问来源于stack exchange，提问作者M.KH