How to add a link in a mermaid node description?

Question

I would like, to the graph below,

<link href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.js"></script>
<div class="mermaid">
  graph TD; 
  A[hello] 
  B[an <b>important</b> link] 
  A-->B
</div>

to add an actual link under link pointing to http://google.com.

I tried to modify the relevant node to

B[an <b>important</b> <a href="http://google.com">link</a>] 

but this breaks (crashes) the graph. Specifically, I noticed that what is not accepted is the href element.

Is it possible to add a link in the mermaid node description?

EDIT: I opened a bug report on the mermaid.js repository. Not fixed yet as of June 2017.

Answer 1

I know it's late but: I was searching for a similar thing and found this. Your problem are the " of the href definition breaking the mermaid syntax.

I could achieve what you wanted to do by using

B[an <b>important</b> <a href='http://google.com'>link</a>]

so replacing the doublequotes " of the href definition with single ones '

See the example here.

---

Update a year later

in a newer version of mermaid this is not directly supported anymore (ಠ_ಠ)

more about it under Special note regarding version 8.2

Now you'll need to additionally allow unsecure content via

mermaidAPI.initialize({
    securityLevel: 'loose'
});

Answer 2

Sure, its possible to add a link in Mermaid node, as shown below:

mermaid.initialize({
  startOnLoad: true
});

<script src="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js"></script>
<link href="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.css" rel="stylesheet" />

<div class='mermaid'>
  graph TD; 
  A(Start)-->B(Do some stuff); 
  B(Take some rest)-->C(do more);
  click B "http://www.github.com" "This is a link"
  
</div>

You can also do a callback by using this script

<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>

and then inserting this into your HTML below node A-->B in your HTML

click A callback "Hi I'm a callback, whats up"