Support mermaid v10

[sidharthv96]

From v10, mermaid is ESM only.
So window.mermaid will not be available natively.
Also, mermaid.init is deprecated and replaced with mermaid.run.

mermaid-js/mermaid#4115

[bkeane]

For anyone arriving here looking for how they can get their diagrams back up in running, the Mermaid CHANGELOG.md has the answer:

Fix your imported mermaid version to @9...

<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>

I had a look at creating a PR, but found myself quickly in a space that I was unaware of before. If you consider yourself good at navigating the ESM v CJS situation cropping up with cdns hosting up npm etc, this could be a cake walk for you.

I'd also really love to see an experienced path through this fix in a PR. I understand the problem, but I'm not satisfied with any solutions I have yet read about.

[SumithChandran]

We are also facing same problem in our document site where mermaid diagrams are not rendering all of a sudden.

Downgrading the version to 9 seems to fix the issue.
Question is will we have to stick to this version from now on or is there a possible fix comming down the way to use the latest version?

[corentinleberre]

I've made a PR correcting this issue #30.
I hope it will be merged soon :)

[Leward]

Thank you @corentinleberre for the PR. I tagged and publish a new version (v2). The README has been updated accordingly.

[SumithChandran]

For anyone arriving here looking for how they can get their diagrams back up in running, the Mermaid CHANGELOG.md has the answer:

Fix your imported mermaid version to @9...

<script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>

I had a look at creating a PR, but found myself quickly in a space that I was unaware of before. If you consider yourself good at navigating the ESM v CJS situation cropping up with cdns hosting up npm etc, this could be a cake walk for you.

I'd also really love to see an experienced path through this fix in a PR. I understand the problem, but I'm not satisfied with any solutions I have yet read about.

<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.js"></script>
Or
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.js"></script>

These should work right?
It's not working for me when I tried.
Also mermaid@9 script which was a fix is also not working now.

[corentinleberre]

Hey! This package has been updated yesterday to v2. That's why it may not work on your setup currently.
Make sure you update mermaid import accordingly to the README.md and especially this part :

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

<script src="//unpkg.com/[email protected]/dist/docsify-mermaid.js"></script>`

[SumithChandran]

@corentinleberre ,
I added these line to my page.
The diagram renders fine when I load the page for the 1st time.
When I click on another page in the sidebar the diagrams are not loading.
To make this more clear I am adding a test page I created.
mermaid_diagram_not_loading.zip