如何在Mermaid流程图边线上添加交互式链接？

Mermaid官方流程图文档仅支持给节点添加交互式链接，目前原生功能里没有直接为边线（连线）绑定URL的实现。除了你提到的“为边线创建中间节点”方案外，还有两种相对简便的变通方法：

• 利用click指令结合自定义CSS/JS模拟
  借助Mermaid的linkStyle给连线标记类名，再配合前端代码实现点击跳转，无需额外创建节点：

  1. 给目标连线添加自定义类：

     flowchart LR
         A --> B
         linkStyle 0 class:clickable-line;
     

  2. 添加CSS让连线显示可点击状态：

     .clickable-line {
         cursor: pointer;
         stroke-dasharray: 5,5; /* 可选：用虚线突出可点击 */
     }
     

  3. 用JS监听点击事件触发跳转：

     document.addEventListener('click', e => {
         if (e.target.classList.contains('clickable-line')) {
             window.open('你的目标URL', '_blank');
         }
     });
     

  注意：该方法依赖Mermaid生成的DOM结构，不同版本可能存在兼容性差异，需要实际测试验证。

• 使用第三方扩展工具
  部分基于Mermaid的第三方编辑器或插件（如部分Markdown编辑器的Mermaid扩展）支持连线绑定链接，但这不属于原生Mermaid功能，需根据你的使用环境选择适配的工具。

截至目前，Mermaid核心功能仍未提供边线直接绑定URL的官方方案，上述方法均为现有功能的变通实现，相比“中间加节点”的方式，第一种无需额外构建节点结构，相对更简洁。

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