如何在Mermaid Web时序图中添加指向同页面的超链接

直接写原生<a>标签不生效的核心原因是：Mermaid默认会转义消息文本中的HTML标签，将其作为纯文本渲染，不会解析为DOM元素。以下是两种可直接落地的实现方案：

方案1：使用Mermaid原生支持的Markdown链接语法（推荐） #

Mermaid 9.2及以上版本原生支持在文本中解析Markdown格式链接，不需要额外写JS，直接修改Mermaid代码即可：

sequenceDiagram
    actor User
    participant ABC
    User->>ABC: [Hello](#somelink)

注意事项 #

• 先确认Jekyll站点加载的Mermaid版本≥9.2，低版本不支持该语法
• 同页跳转直接写#目标章节id即可，不需要拼接站点域名
• 提前给跳转目标章节设置对应id，例如<h2 id="somelink">对应章节标题</h2>，避免跳转失效

方案2：渲染后DOM替换（适配低版本Mermaid） #

如果无法升级Mermaid版本，可以在Mermaid渲染完成后，通过JS替换对应文本为超链接，将以下脚本放在Mermaid初始化代码之后即可：

document.addEventListener('DOMContentLoaded', () => {
  mermaid.run().then(() => {
    // 遍历所有Mermaid图内的消息文本节点
    document.querySelectorAll('.mermaid .messageText').forEach(el => {
      // 匹配需要加链接的文本
      if (el.textContent.trim() === 'Hello') {
        el.innerHTML = `<a href="#somelink" style="color: inherit; text-decoration: underline;">Hello</a>`
      }
    })
  })
})

注意事项 #

• 可以自定义a标签样式，和Mermaid默认文本风格保持统一
• 存在多个需要加链接的消息时，可以扩展文本匹配规则批量处理，不需要逐个硬编码

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