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 out of the box anymore (ಠ_ಠ)

more about it under the version 8.2.0 CHANGELOG

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"

Answer 3

A few diagrams have interaction support:

• flowchart
  • flowDB.js
  • other usage
• classDiagram
  • classDB.js
• gantt
  • ganttDB.js

This functionality is disabled when using securityLevel='strict'

and enabled when using securityLevel='loose'.

Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>
<h2>FlowChart</h2>
<div class="mermaid">
  graph LR
  A -- text --> B --> Stackoverflow -- msg --> myLabel2
  click Stackoverflow "https://stackoverflow.com/" "some desc when mouse hover" _blank
  click myLabel2 "https://stackoverflow.com/" "some desc when mouse hover"
</div>

<h2>classDiagram</h2>
<div class="mermaid">
  %% https://github.com/mermaid-js/mermaid/blob/cbe3a9159db4d5e67d270fe701cd63de1510f6ee/docs/directives.md?plain=1#L10-L48
  %%{init: {'theme': 'forest'}}%%
  classDiagram
    class myCls {
      attr type
      method()
    }
    %% ↓ must set: securityLevel=loose %% default para: clsID
    click myCls call myFunc() "desc."

    class myCls2
    click myCls2 call myFunc('hello world') "desc."

    class myClsUseLink {
      +field1
    }

    link myClsUseLink "https://www.github.com" "This is a link"
</div>

<h2>Gantt</h2>
<div class="mermaid">
  gantt
  dateFormat HH:mm
  axisFormat %H:%M
  try to click me : gotoSO, 19:00, 5min
  %% click : debug, after gotoSO,  5min  --> error, click is "keyword"
  clickMe : debug, after gotoSO,  5min
  endNode : milestone, m, 20:00, 0min
  click gotoSO href "https://stackoverflow.com/"
  click debug call myFunc()
  %% NOTE: not working on github
</div>

<script>
  mermaid.initialize({
    securityLevel: 'loose', // strict, loose, antiscript, sandbox // // https://github.com/mermaid-js/mermaid/blob/b141f24068e9c5f6979706383a29db6380ffdf31/docs/usage.md?plain=1#L114-L117
  });

  function myFunc(arg) {
    console.log(arg)
  }
</script>

Answer 4

Here's how to hack it into ERD diagrams, which are kinda new so currently lack any kind of clickable support. First create this Javascript object with node names that refer to your intended link destinations:

var links = {
  Customer: "/customers/index",
  Employee: "/employees/index",
  Shipper: "/shippers/index",
  OrderDetail: "/order_details/index",
  Site: "/sites/index",
  User: "/users/index"
};

And then in the Mermaid initializer click events can get wired up to the relevant graphics objects in the SVG with this trickery:

mermaid.initialize({
  startOnLoad: true,
  securityLevel: "loose",
  er: { useMaxWidth: false },
  mermaid: {callback: function(objId) {
    var svg = document.getElementById(objId);
    var nodeName;
    for(nodeName in links) {
      var gErd = svg.getElementById(nodeName);
      gErd.addEventListener("click",
        function (evt) {
          location.href = links[this.id];
        }
      );
    }
  }}
});

If you click anywhere inside the node, it navigates.

I had put all this together for use in The Brick gem, which is a data-related Ruby on Rails add-on.