Possible to render mermaid.js diagrams?

[andness]

I'm looking into ways of rendering mermaid.js diagrams in Grafana. I've looked at the "diagram" plugin but it only allows rendering of statically defined mermaid diagrams. Then I thought about this plugin and since mermaid.js is designed to be embedded in Markdown documents I thought maybe it would be possible to do it.

To be clear: The source of the mermaid diagram definition would be my data source (in our case Postgres, but loading from an API call could also be an option). There's no need to embed metrics in the diagram like the diagram plugin offers, just the need to get the diagram definition dynamically.

I tried very briefly to load mermaid.js in the "javascript code" section but had no success. I'm a complete idiot when it comes to frontend development though so it might be possible with the right tricks.

Totally understand if this is outside the scope of this plugin but thought I would ask anyway!

[mikhail-vl]

@andness It's an exciting idea. You can't just include mermaid in the JavaScript Code because external libraries have to be compiled.

I am going to try now to see if it works.

[mikhail-vl]

@andness Thank you for the idea. It looks nice!

[mikhail-vl]

@andness The new Diagram functionality works great, but the size of mermaid+d3 library makes the plugin ~4.2Mb compare to the current 1.3Mb, which is 3x increase.

I had to revert the commit, and I am considering keeping it as a separate branch for now to think about how to proceed.

You can download the signed CI artifact with Mermaid from https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/actions/runs/4520732135 to use.

```diagram
flowchart LR
  A[Hard] -->|Text| B(Round)
  B --> C{Decision}
  C -->|One| D[Result 1]
  C -->|Two| E[Result 2]

[sridharvdp]

Hello @mikhail-vl , I have downloaded the artifact you've provided with mermaid and tried using it but the panels seems to render the code instead of the diagram inside of the panel (screenshot below). Do you know why ?

[mikhail-vl]

@sridharvdp Do you have Sanitizing enabled? We explained in the documentation https://volkovlabs.io/plugins/volkovlabs-dynamictext-panel/content/#sanitizing