Adding a HTTP link to a node description breaks the graph

[wsw70]

I would like, to the graph below (also available via a JSFiddle)

<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 a mermaid node?

Note: this report was initially asked as a question on SO but since other HTML tags are accepted it may rather be a bug.

[AidanVIII]

I identified the carrets as a breaking factor in the live editor.

You could use onclick event as per the documentation, but this doesn't provide for accessibility or SEO.

And I see this has been root for a few other issues in the past:

• Support for hyperlink and tooltip
• Add a click style

Since we can't escape them and text link also don't make for a great UI anyway, how about a way to put the link around the node?

<a href="w3.org"> <rect></rect> </a>

or

<a href="w3.org"> <g class="node"> <rect></rect> </g> </a>

If someone would point me toward the parts of the application that this solution would concern, I would happily help looking into it.

[tylerlong]

I can reproduce the issue. I will take a look when I finish the other tasks on hand.

[samuei]

Removing the quotes works on the live editor and for me locally. The Fiddle doesn't accept it, but that's probably a parsing mistake on their end.

[wsw70]

@samuei your hack fixes the immediate issue (the link is cliackable) but breaks the display: grid layout (cc: @tylerlong)

[alexrowesoap]

Hey all. I got links working.
questionA{"<a href='https://google.com'>Google link here</a>"}

setup was
mermaid.initialize({startOnLoad: true, htmlLables: true});
This doesnt work on the live editor though.

[alexrowesoap]

As an aside, it seems that brackets (), encoded or not, break the flowchart. The only solution that worked for me was to escape them to unicode brackets.

[tylerlong]

@wsw70 Could you please post a demo link using https://mermaidjs.github.io/mermaid-live-editor/? I don't quite understand the display:grid layout issue.

@samuei your hack fixes the immediate issue (the link is cliackable) but breaks the display: grid layout (cc: @tylerlong)

[fullergalway]

This works (by using same http/https protocol as the page itself):

graph TD
Ready? -->|try this|B[click <a href=//github.com/knsv/mermaid/issues/467>here</a>!!]

See for yourself

[fullergalway]

This also works, (though sometimes need to respace when editing).

graph TD
Ready? -->|try this| B[click <a href=http://google.com>here</a>!!]

Try it here

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pleabargain]

This works (by using same http/https protocol as the page itself):

graph TD
Ready? -->|try this|B[click <a href=//github.com/knsv/mermaid/issues/467>here</a>!!]

See for yourself

Not working 2022 May 1 on chrome Version 101.0.4951.41 (Official Build) (64-bit)

[jhaoheng]

Hi

How to click the BTN and open another window?

[benrosen-moodys]

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

Even more specifically, it seems to be the double-quotes that crash the graph (not the href element).

Using single-quotes works for me in WebStorm.

Here on GitHub, this:

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

renders like this:

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

Loading