如何在Mermaid序列图的注释中添加超链接？

目前Mermaid官方并未支持在序列图的注释中直接添加超链接——注释仅允许使用<br>标签实现换行，其他HTML标签（包括<a>链接标签）都会被忽略或过滤，无法正常解析为可点击的链接。

替代解决方案 #

如果需要在注释区域实现类似链接的跳转效果，可以尝试以下两种方式：

• 结合角色链接与注释提示：
  既然你已经掌握了给角色添加链接的方法，可以在注释里引导用户点击对应角色的链接入口，示例代码如下：

  sequenceDiagram
      participant Alice
      participant John
      links Alice: {"Dashboard": "https://example.com/alice_dashboard", "Wiki": "https://example.com/alice_wiki"}
      links John: {"Dashboard": "https://example.com/john_dashboard", "Wiki": "https://example.com/john_wiki"}
      Alice->>John: Hello John, how are you?
      John-->>Alice: Great!
      Alice-)John: See you later!
      Note over Alice, John: 查看详情请点击Alice的Dashboard链接
  

• 自定义样式+脚本（限支持自定义CSS/JS的环境）：
  若你的使用环境允许自定义样式（比如自建网站、部分Markdown编辑器），可以通过给注释文本添加标识，再配合CSS和JavaScript模拟链接效果：

  1. 在注释中加入特定标识文本，比如[查看详情]
  2. 用CSS将该文本设置为蓝色、下划线样式，模拟链接外观
  3. 通过JavaScript监听点击事件，触发页面跳转
     这种方式属于非官方hack，兼容性依赖具体使用环境，不推荐在通用场景下使用。

你的原始示例代码 #

sequenceDiagram
    participant Alice
    participant John
    links Alice: {"Dashboard": "https://example.com/alice_dashboard", "Wiki": "https://example.com/alice_wiki"}
    links John: {"Dashboard": "https://example.com/john_dashboard", "Wiki": "https://example.com/john_wiki"}
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
    Note over Alice, John: I want to<br>be a link

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