ST with mermaid diagram - not rendering

Using Streamlit
1

My code narrows down to:

c = """classDiagram
    class I1 {
      <<interface>>
        +void run()
    }
    class C1 {
        +int num
        +void run()
    }
    I1 <|.. C1"""
mc = f"""
        <pre class="mermaid">
            {c}
        </pre>

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

I get an error in syntax.

image
image609×142 10.1 KB

I checked the syntax of the diagram in live editor:

Related to: St.markdown does not render mermaid graphs

Any ideas?