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.
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 '
.
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'
});