Here is what I am looking to do :

import panel as pn

pn.extension()

mermaid_content = """
graph TD
    A[Start] --> B{Decision}
    B -- Yes --> C[OK];
    B -- No ----> D[KO];
    C --> E[End];
    D --> E;
"""

js_code = f"""
<script src="@10/dist/mermaid.min.js"></script>
<div class="mermaid">
{mermaid_content}
</div>
<script>
  mermaid.initialize({{ startOnLoad: true }});
</script>
"""

html_pane = pn.pane.HTML(js_code, height=300, width=400)

pn.Column(html_pane).servable()

When I run this I am not getting a diagram.

Instead this is what I get

graph TD A[Start] --> B{Decision} B -- Yes --> C[OK]; B -- No ----> D[KO]; C --> E[End]; D --> E;

Things I have tried

1. Use panel_mermaid to generate a diagram - this works, but it does not allow me to seamlessly blend mermaid diagrams into my Html / markdown - which is possible with other frameworks like solara
2. Tried writing my own parser to weave panel_mermaid generation into markdown - this was a waste of time and too complicated

I am hoping some one out there knows how to get this working - thanks