I have a Markdown Editor component for Blazor. In this component, I use an old version of Mermaid to display graphs.

I added the Mermaid library using this script

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

Unfortunately, this version raises an error

e.replace is not a function

So, I tried to replace this script with

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

In this case, I don’t have an error but the graph is not rendered because when I check if

if (typeof mermaid !== 'undefined') {
    // code
}

is always false. So, I tried to add the code abode in the JavaScript script like

import { mermaid } from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({
    startOnLoad: true
});

// rest of the script

but in this case, the error is

Unhandled exception rendering component: Could not find ‘initialize’ (‘initialize’ was undefined).

Error: Could not find ‘initialize’ (‘initialize’ was undefined).

So, my questions are:

• how can I add the import in my script and call the initialize function
• how can I check if mermaid is available