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

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>