search

jdbranham / grafana-diagram

A Grafana plugin to visualize metrics in a diagram using flow charts, gantt charts, sequence diagrams, or class diagrams
https://jdbranham.github.io/grafana-diagram/
Apache License 2.0
447 stars 87 forks source link

Mermaid Line Break doesn't seem to work in Diagram #230

Open psheehymn opened 2 years ago

psheehymn commented 2 years ago

I have a diagram with several boxes with long text that I would like to break in the middle to create taller, narrower boxes. Several references (https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/ for one) indicate to use break symbols (\<br> and \<br/>) to split long lines of text in Mermaid. These also work in the Mermaid Live Editor (https://mermaid.live/).

However, it does not have the desired effect in the Grafana Diagram plugin; the break symbol shortens the box, but the text is not split. Please see the attached images for examples of what occurs both without and with the break symbols. Both forms appears to be recognized, as they both shorten the respective boxes.

We are running Grafana v8.4.7 and Diagram v1.7.3.

NoBreaks WithBreaks .

OscarVanL commented 1 year ago

It looks like it strips out all HTML in the node's text, I have some <img> tags which render fine, but when I then add a metric to the node it gets rid of the image.

OscarVanL commented 1 year ago

I have a disgusting hack to get this to work!

If you put the escaped symbols for the desired HTML formatting inside the Mermaid diagram definition, then once you apply the metric onto that node, then it'll un-escape the HTML and the HTML will work again.

In your example, you wanted the name to be Post-Initial<br>Page Refresh. If you set this as Post-Initial&ltbr&gtPage Refresh then once you apply the metric it'll render how you wanted.

This falls apart if you have long HTML content, for instance, say you had an image on the node: "&ltimg src='https://www.mywebsite.com/image.png'; width='30';&gtbr NodeName", then Mermaid will end up rendering a reeeeeaally wide node expecting that the HTML tag was actually the text inside the node. So it's only really applicable for cases like yours.

psheehymn commented 1 year ago

Thanks, I will try this.