I would like, to the graph below,
<link href="" rel="stylesheet"/>
<script src=""></script>
<div> graph TD; A[hello] B[an <b>important</b> link] A-->B
</div>to add an actual link under link pointing to .
I tried to modify the relevant node to
B[an <b>important</b> <a href="">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.
14 Answers
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='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'
});Sure, its possible to add a link in Mermaid node, as shown below:
mermaid.initialize({ startOnLoad: true
});<script src=""></script>
<link href="" rel="stylesheet" />
<div class='mermaid'> graph TD; A(Start)-->B(Do some stuff); B(Take some rest)-->C(do more); click B "" "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"A few diagrams have interaction support:
This functionality is disabled when using
securityLevel='strict'and enabled when using
securityLevel='loose'.
Example
<script src=""></script>
<h2>FlowChart</h2>
<div> graph LR A -- text --> B --> Stackoverflow -- msg --> myLabel2 click Stackoverflow "" "some desc when mouse hover" _blank click myLabel2 "" "some desc when mouse hover"
</div>
<h2>classDiagram</h2>
<div> %% %%{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 "" "This is a link"
</div>
<h2>Gantt</h2>
<div> 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 "" click debug call myFunc() %% NOTE: not working on github
</div>
<script> mermaid.initialize({ securityLevel: 'loose', // strict, loose, antiscript, sandbox // // }); function myFunc(arg) { console.log(arg) }
</script>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.
