Links in arrows (not nodes) using mermaid

Hello,
This is my first post, as I have always found an answer thanks to this amazing community!
But this time I vould not find this in help or requested features.

Things I have tried

Searching. I am not a programmer so not too good with the logic of mermaid.

What I’m trying to do

I am trying to add a link within an arrow in the flowchart. This is what a copy paste, I have been able to link the nodes in my flowchart but not the arrow text. If I try to replace these arrows with nodes it becomes a bit disoganised.

Thanks heaps if you have any idea

graph LR
A{solid}
B{gas}
class B internal-link;
C{liquid}

B-->|condensation|C
B-->|deposition|A
A-->|melting|C
A-->|sublimation|B
C-->|vaporisation|B
C-->|freezing|A

From the mermaid documentation, it doesn’t seem like adding hyperlinks to link text is possible. That functionality seems to be only attributed to nodes.

However, if links are absolutely needed on the in-between state in your diagram you could probably get close (but not as pretty as what you have there) by using nodes and changing their styling.

Hope that helps!

Here is a not so pretty example below:


graph LR

solid{solid}
m(melting)
f(freezing)
liquid{liquid}

solid---m-->liquid
liquid---f-->solid

class m internal-link;
class gas internal-link; 
style m stroke-width:0px;
style f stroke-width:0px;

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.