Having Difficulty Importing Mermaid.js In Pluto.jl v0.19.23

[unnamedunknownusername]

I am completely new to javascript libraries so I am probably doing something wrong.

I would really like to import mermaid/js into Pluto.jl so that I can draw diagrams programmatically.

But it isn't doing what I expect

I expect to see the below which I copied from Mermaid live editor examples

I tried different versions of Mermaid using separate cells, using the other import method via a 'src=', using html"""string""" as opposed to @htl("") but nothing seems to change anything or make it work
I have only tried on Pluto v0.19.23 but I don't think that is the issue.

What am I doing wrong?

Copy paste the following in a Pluto.jl cell to replicate

html"""

<script type=module>

const { default: mermaid } = await import( "https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js")

</script>


<pre class="mermaid">

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

</pre>

  
"""

or notebook file:

### A Pluto.jl notebook ###
# v0.19.23

using Markdown
using InteractiveUtils

# ╔═╡ 5c22e4a8-421d-4bc4-acea-f1d560eda290
html"""

<script type=module>

const { default: mermaid } = await import( "https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js")

</script>


<pre class="mermaid">

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

</pre>

  
"""

# ╔═╡ f367ca6e-b42b-4f20-98fb-60d325cc54db


# ╔═╡ 2a3261d6-da6f-40b4-a1ed-c25913677cc6


# ╔═╡ Cell order:
# ╠═5c22e4a8-421d-4bc4-acea-f1d560eda290
# ╠═f367ca6e-b42b-4f20-98fb-60d325cc54db
# ╠═2a3261d6-da6f-40b4-a1ed-c25913677cc6

Many thanks in advance for any help

[runjaj]

My solution to draw diagrams into Pluto.jl is Kroki.jl. It eases using mermaid a lot. Just type:

using Kroki

and then in a new cell:

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

[unnamedunknownusername]

Thanks so much fro the reply
I had tried this using ver0.19.23 and ver0.19.24 but it still didn't work. There was this issue bauglir/Kroki.jl#45
mentioned about a dependency and I tried to do the suggested fix and pin the version but I still got an error.

However I just upgraded Pluto to ver0.19.25 and it seems to work just as you describe. Thanks again