如何为Mermaid JS流程图的边添加点击事件以识别点击的边

方法一：利用Mermaid内部API关联边数据（推荐） #

Mermaid在渲染完成后会保留流程图的结构化数据，我们可以通过回调函数获取这些数据，再将边标签元素与对应边的from/to信息绑定：

1. 初始化Mermaid并配置回调
   通过mermaid.initialize()设置渲染回调，在流程图渲染完成后获取图表的内部数据。
2. 绑定点击事件到边标签
   遍历所有.edgeLabel元素，将对应边的from和to信息关联到点击事件中。

示例代码：

// 初始化Mermaid，禁用自动加载，自定义回调
mermaid.initialize({
  startOnLoad: false,
  callback: function(containerId) {
    // 获取渲染后的图表实例
    const diagram = mermaid.getDiagramFromDiv(containerId);
    const graphData = diagram.graph;
    
    // 获取所有边标签DOM元素
    const edgeLabelElements = document.querySelectorAll('.edgeLabel');
    
    // 给每个边标签绑定点击事件
    edgeLabelElements.forEach((labelEl, index) => {
      // graphData.edges的顺序与渲染出的边标签顺序一一对应
      const targetEdge = graphData.edges[index];
      labelEl.addEventListener('click', () => {
        // 这里可以替换成你的业务逻辑，比如弹窗、高亮等
        console.log(`点击了边：${targetEdge.from} -> ${targetEdge.to}`);
      });
    });
  }
});

// 手动触发流程图渲染
mermaid.render('mermaid-container', `
flowchart TD
    p1 -->|10.000| p2
    p2 -->|10.000| p3
    p1 -->|45| p3
    p3 -->|9888| p4
    p3 -->|122| p2
`, function(svgCode) {
  document.getElementById('mermaid-container').innerHTML = svgCode;
});

方法二：通过标签文本映射边信息（适用于无法获取内部API的场景） #

如果无法直接调用Mermaid的内部API，可以预先定义标签文本与对应边的映射关系，通过点击标签的文本内容匹配到目标边：

1. 定义标签-边映射表
   根据流程图的内容，建立标签文本到对应边的映射，注意处理重复标签的情况。
2. 绑定点击事件并匹配映射

示例代码：

// 预先定义标签与边的映射，重复标签需额外区分（比如结合索引）
const labelToEdgeMap = {
  '10.000': ['p1->p2', 'p2->p3'],
  '45': ['p1->p3'],
  '9888': ['p3->p4'],
  '122': ['p3->p2']
};

// 确保在SVG渲染完成后执行以下代码
document.querySelectorAll('.edgeLabel').forEach((labelEl, index) => {
  const labelText = labelEl.querySelector('.edgeLabel').textContent.trim();
  const matchedEdges = labelToEdgeMap[labelText];
  
  labelEl.addEventListener('click', () => {
    if (matchedEdges.length === 1) {
      console.log(`点击了边：${matchedEdges[0]}`);
    } else {
      // 处理重复标签，比如通过索引区分第一个/第二个10.000
      console.log(`点击了边：${matchedEdges[index]}`);
    }
  });
});

注意事项 #

• 方法一的可靠性更高，直接基于Mermaid的内部数据，不会受标签重复的影响；
• 不同版本的Mermaid API可能略有差异，若getDiagramFromDiv或graphData.edges无法使用，可尝试diagram.getGraph()获取数据；
• 所有点击事件的绑定必须在SVG完全渲染完成后执行，避免因DOM元素未生成导致绑定失败。

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