javascriptmermaid

How to add a link in a mermaid node description?


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.


Solution

  • I was searching for a similar thing and found this. Your problem is the " of the href definition, which breaks 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 Example


    Note for 8.2.0 & later

    Version 8.2.0 of mermaid introduced a breaking change to make HTML tags in nodes an opt-in feature.

    More about it is explained in the version 8.2.0 changelog.

    In order to allow tags in nodes (including <a> links) you'll need to explicitly allow unsecure content via:

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