如何在动态网页中正确渲染多个Mermaid图表（适配最新版本）

问题说明 #

我有一个可包含多个Mermaid图表的动态网页，图表以源码形式嵌入在<pre>标签中，需要通过Mermaid处理转换为实际图表。目前存在两个问题：

• 参考旧方案实现的代码无法适配最新版本的Mermaid；
• 无法处理多个图表，仅最后一个会被渲染。

当前代码实现如下：

function add_diagram() {
  diagram_code = `
  <pre class="mermaid">
    graph TD
    A[First diagram] --> B[Something]
  </pre>
  <pre class="mermaid">
    graph TD
    A[Second diagram] --> B[Something]
  </pre>
  `;
  document.getElementById("output").innerHTML += diagram_code;
}
function make_diagrams() {
  $("pre.mermaid").each(function() {
    mermaid.render(
      "body", 
      this.textContent, 
      (function (code) {this.outerHTML = code}).bind(this))
  })
}

<div id="output"/>
<button onclick="add_diagram()">add diagram</button>
<button onclick="make_diagrams()">make diagrams</button>
<script src="https://unpkg.com/mermaid@8/dist/mermaid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

问题原因 #

1. ID重复冲突：调用mermaid.render时传入固定ID"body"，所有图表都会复用这个ID，导致后续渲染的图表覆盖之前的实例，最终仅显示最后一个。
2. 新版API适配问题：Mermaid v9+版本的render方法回调参数逻辑发生变化，旧写法无法正确接收渲染后的DOM内容；同时新版要求每个图表实例使用唯一标识。

修复方案 #

修复后的JavaScript代码 #

function add_diagram() {
  // 为每个pre生成唯一ID，避免渲染冲突
  const id1 = `mermaid-diagram-${Date.now()}-${Math.random().toString(36).slice(2)}`;
  const id2 = `mermaid-diagram-${Date.now()}-${Math.random().toString(36).slice(2)}`;
  const diagram_code = `
  <pre class="mermaid" id="${id1}">
    graph TD
    A[First diagram] --> B[Something]
  </pre>
  <pre class="mermaid" id="${id2}">
    graph TD
    A[Second diagram] --> B[Something]
  </pre>
  `;
  document.getElementById("output").innerHTML += diagram_code;
}

function make_diagrams() {
  // 显式初始化Mermaid，关闭自动加载避免冲突
  mermaid.initialize({ startOnLoad: false });

  $("pre.mermaid").each(function() {
    const $this = $(this);
    const diagramId = $this.attr("id");
    const diagramCode = $this.text().trim();

    // 适配新版render API，传入唯一ID处理渲染
    mermaid.render(diagramId, diagramCode, (svgCode, bindFunctions) => {
      $this.replaceWith(svgCode);
      // 执行绑定函数确保图表交互功能正常
      bindFunctions?.();
    });
  });
}

修复后的HTML代码 #

<div id="output"></div>
<button onclick="add_diagram()">添加图表</button>
<button onclick="make_diagrams()">渲染图表</button>
<!-- 使用最新稳定版Mermaid -->
<script src="https://unpkg.com/mermaid@latest/dist/mermaid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

关键改动说明 #

• 唯一ID生成：为每个动态添加的<pre>标签生成唯一ID，彻底避免渲染时的ID冲突问题。
• 新版API适配：遵循Mermaid v9+的render回调逻辑，正确接收SVG代码与交互绑定函数，保证图表渲染完整且交互正常。
• 显式初始化配置：关闭自动加载开关，让手动渲染逻辑完全可控，避免自动渲染与手动渲染的冲突。

内容的提问来源于stack exchange，提问作者Ilya V. Schurov