Display Mermaid Flow Chart diagram

[McHill007]

Hello,

I've been facing some difficulties for the past two days while attempting to create a Mermaid diagram based on a query output and handlers. I've successfully added handlers (via the script panel later on), but I'm struggling to incorporate Mermaid diagrams. Unfortunately, it seems the branch for this feature is currently closed. I'm wondering if there might be any alternative method to display Mermaid flow chart diagrams.

I've tried loading the Mermaid CDN via a script, but I haven't had any success with that approach. Additionally, I've experimented with the "disable_sanitize_html" option, but it also didn't yield the desired results.

Any assistance or guidance you can provide would be greatly appreciated.

[asimonok]

@McHill007 please share the code example which you try to use for a Mermaid diagram.

Also keep attention that loading external scripts don't work in edit panel mode yet. To get scripts loaded you have to open dashboard first and then start editing the panel

[mikhail-vl]

@McHill007 Here is how to do it using the upcoming version, which introduce JS after DOM ready. You can test using CI artifact. We plan to release later this week.

External Script: https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js

Content:

<pre class="mermaid">
    graph LR
    A --- B
    B-->C[fa:fa-ban {{data.0.test}}]
    B-->D(fa:fa-spinner);
</pre>

JavaScript after DOM render:

mermaid.initialize({ startOnLoad: true });

mermaid.run({
  querySelector: '.mermaid',
  suppressErrors: false,
});