使用mermaid.render函数动态渲染流程图时节点点击事件无法触发回调函数的问题

我来帮你分析这个问题并给出解决方案：

问题原因 #

当你使用mermaid.render()方法动态生成图表时，Mermaid会把点击事件的绑定逻辑封装在第三个回调参数bindFunctions里，但你的代码只把生成的SVG代码插入到了div中，没有执行这个绑定函数，所以点击事件无法触发。而静态方式下Mermaid初始化时会自动完成事件绑定，所以能正常工作。

解决办法 #

在获取到svgCode和bindFunctions后，除了把SVG插入到DOM，还要调用bindFunctions()来完成点击事件的绑定。注意这个函数需要传入对应的DOM元素（也就是你插入SVG的div），这样它才能找到对应的元素并绑定事件。

修正后的代码如下：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ theme: "base", startOnLoad: false, securityLevel: 'loose' });
</script>
<p onclick="CreateGraph()">CreateGraph</p>
<div class="mermaid"></div>
<script>
var CreateGraph = function() {
var gdata = `
flowchart
a-->b
click a callback
`;
var div = document.getElementsByClassName("mermaid")[0];
mermaid.render("graphDiv", gdata, (svgCode, bindFunctions) => {
div.innerHTML = svgCode;
// 关键：调用bindFunctions绑定点击事件
bindFunctions(div);
});
};
var callback = function() {
alert('A callback was triggered');
};
</script>

补充说明 #

• bindFunctions函数的作用是遍历生成的SVG元素，把定义的点击事件（比如click a callback）绑定到对应的节点上。
• 确保你的callback函数在全局作用域下可访问，这样Mermaid才能找到它并触发。

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