Mermaid integration

Custom Coding
1

Hey
I’m trying to integrate mermaid flowchart in my webapp, not in png or svg file but with the Interractive option. The documention is here Flowcharts Syntax | Mermaid

It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.

And the render would be this https://jsfiddle.net/s37cjoau/3/ for example
But I don’t understand how to organize my script and html ?
Anyone better than me can help ?
Thanks a lot

Edit, here is an example of in their docs

<body>
  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link"
  </pre>

  <script>
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>
2

Here’s what worked for me.

Load JS library

I poked around in the documentation until I found the API-Usage page, followed the link to the CDN, and copied the URL of the main JS file: https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.min.js

Then I added it to the Code inside header section of custom code for the Softr page I had created for testing:

<script src="https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.min.js">

First way to make flowchart on Softr page

I found a couple of different ways to do this. The first was to create a custom code block on my Softr page, and include everything inside the <body> tag from the example above:

  <pre class="mermaid">
    flowchart LR
        A-->B
        B-->C
        C-->D
        click A callback "Tooltip"
        click B "https://www.github.com" "This is a link"
        click C call callback() "Tooltip"
        click D href "https://www.github.com" "This is a link"
  </pre>

  <script>
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>

Second way to make flowchart on Softr page

I also looked at the JSFiddle example you linked to, and created a custom code block on my Softr page like this:

<div class="mermaid">
  graph LR;
  A-->B;
  click A exampleCallback "Tooltip for a callback"
  click B "http://www.github.com" "This is a tooltip for a link"
</div>
<script>
mermaid.initialize({
	startOnLoad: true,
  securityLevel: 'loose'
});
var exampleCallback = function() {
  alert('A callback was triggered');
}
</script>

Caveats

  • In both cases, I found that the Softr page would flash the source text for the flowchart first, then it would redisplay it as a flowchart. I’m not sure how to fix this, but the first thing I would try is to look in Mermaid’s documentation or support forums to see if they recommend a solution. If not, I’d probably try something like initially styling (CSS) the flowchart block as display: none and use some custom code to wait until Mermaid had initialized before switching it to display: block. There are probably lots of ways to do this.
  • In my experiments I loaded Mermaid into the custom code for just one page. If you are using Mermaid on multiple pages, you might want to consider loading it into the site’s custom code settings.
2 Likes
3

I didn’t take the time to answer you but thank you very much @dcoletta , I understood and I’m implementing all this :heart_hands: