Back

Technologies:

javascriptjavascript
avatar
Tolerim
21 days ago

How can I use the latest version of Mermaid js without modules?

I am utilizing mermaid JS to generate flow diagrams dynamically with the latest version 10.1.0. While this version provides options for styling the content, it does not allow us to use callbacks for node click events. To import the module, one must use 10.1.0 as a script module, as shown here: 
<script type="module">
  // clicks not working as part of this code, supposed to invoke `navigateToChild`
  import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
  var textColName = "Desc";
  xls = groupBy(xls, levels);
  mermaid.initialize({
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true,
    },
    securityLevel: "loose",
  });

  //Function to refresh graph
  function refreshGraph(data) {
    console.log(data);
    document.getElementsByClassName("mermaid")[0].removeAttribute("data-processed");
    document.getElementsByClassName("mermaid")[0].innerHTML = data;

    //Callback function for node click event
    function navigateToChild(e) {
        console.log("innnn");
        if (e && e != "") {
            refreshGraph(processWorkflowData(xls, e));
        }
    }
    mermaid.contentLoaded();
  }
</script>
For those who prefer to use an older version, the script can be directly injected: 
<script>
  var textColName = "Desc";
  xls = groupBy(xls, levels);
  mermaid.initialize({
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true,
    },
    securityLevel: "loose",
  });

  //Function to refresh graph
  function refreshGraph(data) {
    document
      .getElementsByClassName("mermaid")[0]
      .removeAttribute("data-processed");
    document.getElementsByClassName("mermaid")[0].innerHTML = data;

    //Callback function for node click event
    window.navigateToChild = function (e) {
      refreshGraph(processWorkflowData(xls, e));
    };
    mermaid.contentLoaded();
   
  }
</script>
I am seeking assistance in resolving this issue and determining whether to continue using the esm import or embed the raw js file. It's crucial to note that the raw js for version 10.1.0 is unavailable.
Answers(2)
avatar
Vogi
19 days ago
Verified Answer
I'm sorry to hear that you're having trouble with the node click events in Mermaid JS. According to the Mermaid JS GitHub page, there is an issue with click events not firing on version 2.8.3. However, it seems that this issue has been resolved by setting the security level to "loose" when initializing Mermaid. It's also worth noting that there are other ways to handle click events in JavaScript. For example, you can use the addEventListener() methodor set an attribute like onclick. I hope this helps! Let me know if you have any other questions.

Sources

Simple event listener not working - JS - Stack OverflowClick events not firing on v2.8.3 · Issue #901 · mermaid-js/mermaid ...Simple click event in Node js not working - JavaScript - The ...javascript - Electron notification API 'click' event not working ...node click is not effective · Issue #272 · mermaid-js/mermaid
avatar
Tolerim
21 days ago
The issue with callback on node click not working with the latest version 10.1.0 of Mermaid JS when used as a script module can be resolved by defining the navigateToChild function outside of the refreshGraph function and adding a listener to the document for the click event on the node. Here is the updated code: 
<script type="module">
  // clicks now work with this updated code
  import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
  var textColName = "Desc";
  xls = groupBy(xls, levels);
  mermaid.initialize({
    flowchart: {
      useMaxWidth: true,
      htmlLabels: true,
    },
    securityLevel: "loose",
  });
  refreshGraph(processWorkflowData(xls, null));

  function navigateToChild(e) {
    console.log("innnn");
    if (e && e != "") {
      refreshGraph(processWorkflowData(xls, e));
    }
  }

  function refreshGraph(data) {
    console.log(data);
    document.getElementsByClassName("mermaid")[0].removeAttribute("data-processed");
    document.getElementsByClassName("mermaid")[0].innerHTML = data;

    mermaid.contentLoaded();

    document.addEventListener("click", function (event) {
      if (event.target.tagName === "rect") {
        navigateToChild(event.target.getAttribute("data-id"));
      }
    });
  }
</script>
In this updated code, the navigateToChild function is defined outside of the refreshGraph function and a listener is added to the document for the click event on the node with tag rect. When the event is fired on a rect node, the navigateToChild function is called with the corresponding data ID.
;