使用mermaid.render更新Mermaid流程图时触发Promise未定义错误

问题描述 #

尝试更新Mermaid JS流程图时遇到错误，原本预期mermaid.render生成SVG代码并传递给回调函数，但抛出以下错误：

Uncaught (in promise) TypeError: e is undefined

用户的原始代码如下：

<script type="module">
  import  mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
window.mermaid=mermaid;

setTimeout(updateMermaid,5000);

function after(svg){
        document.getElementById("mermaidflow").innerHTML = svg;
}

function updateMermaid(){
    console.log(mermaid);
    mermaidtext=document.getElementById("mermaidtext").value;
    console.log(mermaidtext);

    mermaid.render('mermaidflow',mermaidtext,after);
   
}
</script><textarea id="mermaidtext" > graph TD
     A --> B 
</textarea><br>
<input type=button value=updateMermaid onClick=updateMermaid()>

<div id="mermaidflow" class="mermaid" style="max-width:800px">
    graph TD
    Start --> Stop 
</div>

问题原因 #

Mermaid 10及以上版本的render方法已改为返回Promise对象，不再支持旧版本的「第三个参数为回调函数」的写法。你传入的after回调会被当成配置项的一部分，导致内部逻辑找不到预期的参数，从而抛出e is undefined错误。

修复方案 #

将回调写法替换为Promise的then链式调用，或者使用async/await语法：

方案1：使用then链式调用 #

修改updateMermaid函数：

function updateMermaid(){
    const mermaidtext = document.getElementById("mermaidtext").value;
    mermaid.render('mermaidflow', mermaidtext)
        .then(result => {
            document.getElementById("mermaidflow").innerHTML = result.svg;
        })
        .catch(err => {
            console.error('渲染失败:', err);
        });
}

方案2：使用async/await（更直观） #

async function updateMermaid(){
    try {
        const mermaidtext = document.getElementById("mermaidtext").value;
        const result = await mermaid.render('mermaidflow', mermaidtext);
        document.getElementById("mermaidflow").innerHTML = result.svg;
    } catch (err) {
        console.error('渲染失败:', err);
    }
}

额外优化点 #

• 给mermaidtext变量加上const声明，避免全局变量污染
• 原代码中的setTimeout(updateMermaid,5000)可以保留，确保页面加载完成后Mermaid已完成初始化

完整修复代码 #

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  window.mermaid = mermaid;

  setTimeout(updateMermaid, 5000);

  async function updateMermaid(){
      try {
          const mermaidtext = document.getElementById("mermaidtext").value;
          const result = await mermaid.render('mermaidflow', mermaidtext);
          document.getElementById("mermaidflow").innerHTML = result.svg;
      } catch (err) {
          console.error('渲染失败:', err);
      }
  }
</script>
<textarea id="mermaidtext"> graph TD
     A --> B 
</textarea><br>
<input type="button" value="updateMermaid" onClick="updateMermaid()">

<div id="mermaidflow" class="mermaid" style="max-width:800px">
  graph TD
  Start --> Stop 
</div>

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