How to add an internal reference/link to a mermaid node description?

Question

Following this answerI can add external link to mermaid graph like this

graph TD;
    A-->B[google];
    A-->C;
    C-->B;
    click B "https://google.com";

I can add an internal reference (to main.md file) to markdown like this

[[main]]

How do I add internal reference to another mark down file in the mermaid node description?

I tried

graph TD;
    A-->B[google];
    A-->C;
    C-->B;
    click B "[[main]]";

and

graph TD;
    A-->[[main]];
    A-->C;
    C-->B;

neither works.

Did you ever figure this out? – Benjamin Aug 03 '22 at 17:38 — Benjamin, Aug 03 '22 at 17:38

score 0 · Answer 1 · answered Sep 15 '22 at 15:08

Mermaid ERD diagrams are kinda new and lack any kind of clickable support (at least any that I could find), so to make it work for The Brick gem which is a data-related Ruby on Rails add-on, I found it was possible to create this Javascript object with node names and 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 use this to do addEventListener("click" ...) on relevant graphics objects inside the Mermaid 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];
        }
      );
    }
  }}
});

The result is if you click anywhere inside the node, it navigates. Hopefully something similar is possible in your graphs.

How to add an internal reference/link to a mermaid node description?

1 Answers1