Dynamic mermaid chart

[BAUGESTALT]

hello community

I have an odd problem that maybe is simply my lacking experience, maybe you can give me some clues.

I'm trying to create a dynamic mermaid diagram but somehow somewhere along the way in between my mySQL database and the diagram rendering, quotes and break-tags are introduced into my code, and diagram rendering fails.

this is the code block where I'm trying to display the diagram:

<div class="mermaid" dmx-text="serverconnect1.data.query_spektrum[0].spektrum">
</div>

maybe this is entirely the wrong approach? does dmx-text introduce
-tags?

thanks for any feedback on this.

[franse]

Hello!
Are you trying to render html? Or do you have some \n ?
What about inner html?

<div class="mermaid" dmx-html="serverconnect1.data.query_spektrum[0].spektrum"></div>

[Hyperbytes]

Perhaps you could show us:

1. What is in the database record.

2. How the api action is rendering it. Best probably the output from the dev console network-> XHR tab

[BAUGESTALT]

for the time being, I just use a basic example from mermaid. basically, I have to output this markup exactly as it is to the mermaid plugin (JS):

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

This markup is then output with quotes for each line and
tags instead of \n.

[BAUGESTALT]

this is how the output looks like:

[franse]

@Hyperbytes is right here, sorry misunderstood you were talking about the js plugin

And how should it be?
Show us how you store it on your mysql table, and also how is the output

[BAUGESTALT]

this example is working:

basically I want to load this text exactly as it is into the code. this markup is then converted to this diagram:

The markup is saved in the database like this (screenshot from mysql editor):

[franse]

Got it, took me a little, you need to run mermaid after server connect loads, otherwise nothing will be rendered as there's no data yet..
After reading this: https://mermaid.js.org/config/usage.html

On main.js before </head> put this:

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: false });
  window.mermaid = mermaid;
</script>

Then:

<div id="diagrama" class="mermaid" dmx-html="serverconnect4.data.query.name_list100">
</div>

If you run mermaid.run() in console then it will be:

So you can run a flow (run javascript) on a dynamic server connect success event:

Server connect loads -> Run flow: Run Javascript: mermaid.run()

Hope made myself clear

[Hyperbytes]

Also...

I dont see how Wappler is adding the <br> tags.

Where did you get the mermaid definition code from?
Was it an HTML source?

Could the BR tags have been embedded in the source during a copy/paste??
Try examining the content of the actual DB record to see if the BR tags are there in the data
Easy enough to remove them, just apply the stripTags formatter to the spektrum output i.e. serverconnect1.data.query_spektrum[0].spektrum.stripTags()

[BAUGESTALT]

@franse

Server connect loads -> Run flow: Run Javascript: mermaid.run()

so I'm a step further... if I run mermaid.run() via console it works. so there seems to be something wrong with event handling. I'm considering using a timer instead, but that's maybe a stupid solution. wappler definitely somehow adds break tags. my markup code is correct, if I run mermaid.run() manually, the diagram is rendered perfectly.

this is using the server connect: success event. maybe that's the wrong event to use?

[franse]

@BAUGESTALT

if I run mermaid.run() manually, the diagram is rendered perfectly.

this is using the server connect: success event. maybe that's the wrong event to use?

There's nothing wrong on call mermaid.run() on a dynamic event..

So it's all solved now?

[BAUGESTALT]

maybe I wasn’t clear. the diagram is only rendered when I run mermaid.run() manually. calling it via dynamic event doesn’t work. so as it is, the website doesn’t work the way it is supposed to.

maybe I’m using the flow wrong? I’m using run > runJS > function name: mermaid function: run().

[bpj]

Create a JavaScript file and include it on your page. In the file have a function, something like this:

function runmermaid(){
mermaid.run()
}

Then call runmermaid in the runJS step

[BAUGESTALT]

thanks for your reply. in the end I worked it out like this:

in head:

<script type="module">
		import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        mermaid.initialize({startOnLoad: false, securityLevel: 'loose'});
        window.mermaid = mermaid;
	</script>

in body:

<div id="diagram" class="mermaid" dmx-html="serverconnect1.data.query_spektrum[0].spektrum"></div>

<script>
		function runmermaid(){
		mermaid.run()
		}
	</script>

In then call 'mermaidrun' in the server connect success event.

thank you for all the help!