question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding a HTTP link to a node description breaks the graph

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:6
  • Comments:13

github_iconTop GitHub Comments

3reactions
pleabargaincommented, May 1, 2022

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)

1reaction
alexrowesoapcommented, Mar 15, 2018

Hey all. I got links working. questionA{"&lt;a href&#61;&#39;https://google.com&#39;&gt;Google link here&lt;/a&gt;"}

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add a link in a mermaid node description?
to add an actual link under link pointing to http://google.com . but this breaks (crashes) the graph. Specifically, I noticed that what is...
Read more >
Using hyperlinks with nodes, edges and labels
This article shows how to add hyperlink functionality to graph elements. Description. Using the built-in anchor functionality provided by the Flex framework.
Read more >
Creating hyperlinks - Learn web development | MDN
I'm creating a link to the Mozilla homepage. Adding supporting information with the title attribute. Another attribute you may want to add to ......
Read more >
Linked Data - Design Issues - W3C
Whenever one looks up the URI for a node in the RDF graph, the server returns information about the arcs out of that...
Read more >
How to Create a Link Preview: The Definite Guide ...
A preview of url link usually contains the title, a description, ... The following Open Graph tags are used for creating link previews:....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found