I am unable to add hyperlinks to a mermaid flowchart within the wiki functionality of gitlab

Question

I want to use my flowchart as a table of contents that also represents the progression of parallel events vaguely in chronological order and their relation to one another.

I know to create these charts using markdown. By adding the "click" line for the "B" node i can see my cursor change when hovering over the node as if it were a link but any attempt to select it doesn't work.

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

Is this a limitation of Gitlab itself?

Peshitta

Answer 1

Update:

This is now supported since GitLab 12.1.

The given example works in GitLab Wiki pages.

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

Thanks, KargWare for pointing this out in the comments.

---

Yes, this is a limitation of GitLab. There is an open issue requesting the feature:
https://gitlab.com/gitlab-org/gitlab-ce/issues/50459

Hopefully, it will be implemented eventually.

Pause

I read the gitlab issue. It should be fixed, but for me it is still not working. Is there an special snytax needed? I used mermaid xyz (wrapped by three ticks)with no semi-colons at the line end – Hypersensitive

I found out that the click event-handlers must be at the end, not at the beginning of the mermaid block! – Hypersensitive

Also I saw that only click ID URL is supported, not the full syntax click ID URL altertext target – Hypersensitive

How to link to another local file instead of URL? – Forceps

Looks like github supports this syntax at the moment too. Yay! – Distaff

Answer 2

Not only the syntax is supported, but GitLab 15.2 (July 2022) adds:

Live preview diagrams in the wiki WYSIWYG editor

GitLab Flavored Markdown includes extensions to support Mermaid, PlantUML, and Kroki diagrams but writing anything other than the most basic diagrams can be cumbersome without a live preview.

You can toggle between the raw source and static preview and there are external tools you can use to write these diagrams, but the shift away from your content can be distracting.

GitLab 15.2 introduces a live rendered preview of your diagram in the wiki’s WYSIWYG editor.

Now, as you write your diagram in a specialized code block we will detect the diagram type and display a preview icon.

When enabled, the live preview renders above the code block and updates as you type, so you can ensure your formatting is correct and the output will be exactly what you expect.

See Documentation and Issue.

Yirinec