我无法在GitLab的维基功能中向Mermaid流程图添加超链接。

Question

我希望将我的流程图用作目录，同时模糊地表示并行事件的时间顺序和它们之间的关系。

我知道可以使用Markdown创建这些图表。通过为“B”节点添加“click”线，当悬停在该节点上时，我可以看到光标的变化，就像它是一个链接，但任何选择它的尝试都不起作用。

graph LR;
    A-->B;
    click B "http://www.github.com"

这是Gitlab本身的限制吗？

- DED

Answer 1

更新：

GitLab 12.1版本现已支持此功能。

给定示例在GitLab Wiki页面中有效。

graph LR;
    A-->B;
    click B "http://www.github.com"

感谢KargWare在评论中指出这一点。

---

是的，这是GitLab的一个限制。有一个开放的问题请求该功能：
https://gitlab.com/gitlab-org/gitlab-ce/issues/50459

希望它最终会被实现。

- Thomas Kainrad

---

我阅读了gitlab的问题。它应该已经被修复了，但对于我来说仍然不起作用。是否需要特殊的语法？我使用了mermaid xyz（由三个反引号包装），行末没有分号。 - KargWare

我发现click事件处理程序必须放在mermaid块的末尾，而不是开头！ - KargWare

我也看到只支持 click ID URL，不支持完整语法 click ID URL altertext target。 - KargWare

如何链接到另一个本地文件而不是URL？ - Bagusflyer

看起来 Github 现在也支持这种语法。耶！ - Mat Schaffer

Answer 2

不仅支持语法，GitLab 15.2（2022年7月）还新增了：

在Wiki WYSIWYG编辑器中实时预览图表

GitLab Flavored Markdown包括扩展支持Mermaid、PlantUML和Kroki图表，但编写除了最基本的图表之外的任何内容都可能很麻烦，因为没有实时预览。

您可以在原始源代码和静态预览之间切换，并且有一些外部工具可用于编写这些图表，但是转移注意力会分散您的注意力。

GitLab 15.2引入了一个实时渲染预览，在Wiki的WYSIWYG编辑器中显示您的图表。

现在，当您在专门的代码块中编写图表时，我们将检测图表类型并显示预览图标。

启用后，实时预览将在代码块上方呈现并随着您的输入更新，因此您可以确保格式正确且输出将完全符合您的预期。

请参阅文档和问题。

- VonC