Mermaid流程图点击回调函数无法触发，官方示例及JSFiddle均失效

问题核心原因 #

Mermaid的回调函数需要暴露在全局作用域中，否则渲染引擎无法找到并执行它。你当前用const声明的callback是局部变量，Mermaid无法访问到；另外部分旧版本Mermaid对回调的支持存在兼容性问题。

解决步骤 #

1. 将回调函数挂载到全局作用域
   修改JavaScript代码，把回调函数绑定到window对象上，确保Mermaid能找到它：

   window.callback = function () {
     alert('A callback was triggered');
   };
   const config = {
     logLevel: 1,
     startOnLoad: true,
     flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
     securityLevel: 'loose',
   };
   mermaid.initialize(config);
   

2. 验证Mermaid版本
   确保使用Mermaid v9.0+的稳定版本，旧版本可能存在回调函数的兼容性问题。

3. 确认回调语法正确性
   你的流程图语法是合规的，两种回调写法都支持：

   • click A callback "Tooltip"
   • click C call callback() "Tooltip"

完整可运行代码示例 #

HTML

<pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link"
</pre>

JavaScript

window.callback = function () {
  alert('A callback was triggered');
};
const config = {
  logLevel: 1,
  startOnLoad: true,
  flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
  securityLevel: 'loose',
};
mermaid.initialize(config);

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