React/Next.js渲染多个Mermaid图表时出现间歇性混叠问题求助

这种图表混叠（多个图表内容混杂到同一个SVG容器）的问题，本质是Mermaid渲染时的上下文隔离不到位，加上React/Next.js的异步渲染特性，导致多个图表的DOM元素被错误注入到同一个容器里。以下是针对性的解决步骤：

1. 给每个图表分配唯一容器ID #

绝对不要用固定ID，每个图表组件实例必须有独立的标识，避免渲染时争抢DOM容器。React 18+可以直接用useId()生成唯一ID：

import { useId, useEffect, useRef } from 'react';
import mermaid from 'mermaid';

const MermaidChart = ({ diagramCode }) => {
  const containerRef = useRef(null);
  const uniqueChartId = useId();

  useEffect(() => {
    if (!containerRef.current) return;
    containerRef.current.id = uniqueChartId;

    const render = async () => {
      await mermaid.initialize({ startOnLoad: false });
      const { svg } = await mermaid.render(uniqueChartId, diagramCode);
      containerRef.current.innerHTML = svg;
    };

    render();

    // 卸载时清空容器，避免残留DOM影响下一次渲染
    return () => {
      if (containerRef.current) containerRef.current.innerHTML = '';
    };
  }, [diagramCode, uniqueChartId]);

  return <div ref={containerRef} />;
};

export default MermaidChart;

2. 隔离Mermaid渲染上下文 #

不要依赖全局的Mermaid初始化，每次渲染都调用独立的API实例，避免全局状态干扰：

// 替换useEffect里的render函数
const render = async () => {
  // 动态导入获取独立的API实例
  const { mermaidAPI } = await import('mermaid');
  mermaidAPI.initialize({ startOnLoad: false, securityLevel: 'loose' });
  const { svg } = await mermaidAPI.render(uniqueChartId, diagramCode);
  containerRef.current.innerHTML = svg;
};

3. 防止异步渲染竞争 #

组件更新时，先中断未完成的渲染请求，防止旧的渲染结果覆盖新内容：

useEffect(() => {
  const abortController = new AbortController();

  const render = async () => {
    try {
      if (abortController.signal.aborted) return;
      
      const { mermaidAPI } = await import('mermaid');
      mermaidAPI.initialize({ startOnLoad: false });
      const { svg } = await mermaidAPI.render(uniqueChartId, diagramCode);
      
      if (!abortController.signal.aborted && containerRef.current) {
        containerRef.current.innerHTML = svg;
      }
    } catch (err) {
      if (err.name !== 'AbortError') console.error('Mermaid渲染失败:', err);
    }
  };

  render();

  return () => abortController.abort();
}, [diagramCode, uniqueChartId]);

4. 升级Mermaid版本 #

你使用的11.3.0版本存在已知的多图表渲染冲突bug，建议升级到最新稳定版（比如11.x系列的后续版本或10.x稳定版），官方已经修复了不少类似DOM隔离问题。

验证方法：在页面中渲染4个以上不同的图表，反复刷新页面、切换路由，观察是否还会出现混叠情况。

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