mermaid.js (v10) "Diagram error not found"

March 14, 2023

This works:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <p>Hello, world!</p>
    
    <pre class="mermaid">
    flowchart TB
        id0(["Created"]) --> id1("Public")
        id0 --> id2("Private")
    </pre>

<script type="module">
    console.clear(); //TODO: remove in prod

    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

    mermaid.initialize({
        startOnLoad: true,
        logLevel: "warn"
    });
</script>
</body>
</html>

However, creating the same <pre> dynamically (the eventual use case) and then running Mermaid does not:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <p>Hello, world!</p>
    
<script type="module">
    console.clear(); //TODO: remove in prod

    // Create the same `pre` as previous test:
    let pre = document.createElement('pre');
    pre.className = "mermaid";
    
    pre.innerText = `flowchart TB
    id0(["Create"]) --> id1("Public")
    id0 --> id2("Private")`;
    
    document.body.append(pre);

    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

    mermaid.initialize({
        startOnLoad: true,
        logLevel: "warn"
    });

</script>
</body>
</html>

The above shows a blank screen, and errors in the Console. (For reasons related to my employer’s security policies, I can’t actually inspect the page elements on my work machine. )

What is going on that Mermaid would treat these so differently?

>Solution :

It works if you set the innerHTML instead of innerText. Setting innerText the way you are appears to be inserting <br> tags for the hard returns, which is messing up the Mermaid parser.

(You might need to run snippet in full page mode to see that my example is working.)

UPDATE:

It also works if you use textContent instead of innerText. I recommend you use textContent rather than innerHTML, but they both work.

<!DOCTYPE html>
<html>
<head></head>
<body>
    <p>Hello, world!</p>
    
<script type="module">
    console.clear(); //TODO: remove in prod

    // Create the same `pre` as previous test:
    let pre = document.createElement('pre');
    pre.className = "mermaid";
    document.body.append(pre);
    
    pre.innerHTML = `flowchart TB
    id0(["Create"]) --> id1("Public")
    id0 --> id2("Private")`;
    
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

    mermaid.initialize({
        startOnLoad: true,
        logLevel: "warn"
    });

</script>
</body>
</html>