Mermaid as a JSExtension

Help / Discuss
1

Hello,

I am aware of kroki.io macro but unfortunately we are not able to install it for some from us independent reasons. We would happy to have a mermaid graphs only. I found some information concerning the custom js libs and an old mermaid macro (GitHub - jingkaimori/xwiki-mermaid: mermaid render and editor for xwiki) which uses it.

So I tried to do so and added XWiki.javaScriptExtension with the following content:
require(["https://unpkg.com/mermaid@8.9.1/dist/mermaid.min.js"],function(mermaid){mermaid.initialize({startOnLoad:true});});
the JS lib will be loaded on the page and I am able to see the mermaid lib in the Firefox debugger.

However the html-macro is not being formatted:

{{html}}
<div class="mermaid">
flowchart TD
    Start --> Stop
</div>
{{/html}}

I noticed that the original macro does some kind of formatting and replaces new lines with commas but none of the replaces made it work. Do you have any ideas what could help?

2

Just checked the same page from Google Chrome and it works like a charm.
image

3

While the situation in Firefox is much more interesting. If I delete page data & cache the first load of the page works correct:
image

4

but if I reload the page the picture disappears:
image