Add Mermaid pane

[MarcSkovMadsen]

Based on the discussion in https://twitter.com/michaelaye/status/1436978034460938240

After looking at https://mermaid-js.github.io/mermaid/#/ it looks a pretty powerful and easy to use js libary that would complement existing tools in Panel.

It should also be relatively straightforward to support.

.

[dsantos-em]

Hello, do you have any news regarding the support for Mermaid in Panel? This would be a very useful feature to me. NiceGUI already supports it, but Panel suits my project better. Thank you.

Best regards,

Daniel Santos

[ahuang11]

With JSComponent, you can create your custom implementation:

import param
import panel as pn
from panel.custom import JSComponent

pn.extension()


class MermaidDiagram(JSComponent):

    value = param.String(default="graph TD; A-->B; A-->C; B-->D; C-->D;")

    _esm = """
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';

    mermaid.initialize({ startOnLoad: false });

    export async function render({ model, el }) {
      const { svg } = await mermaid.render('graphDiv', model.value);
      el.innerHTML = svg; // Set the rendered SVG in the container
    }
    """

    _importmap = {
        "imports": {
            "mermaid": "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"
        }
    }

diagram = MermaidDiagram(
    value=(
        """
        graph LR
            A --- B
            B-->C[fa:fa-ban forbidden]
            B-->D(fa:fa-spinner);
        """
    )
)

diagram.show()

[holovizbot]

This issue has been mentioned on HoloViz Discourse. There might be relevant details there:

https://discourse.holoviz.org/t/how-to-use-mermaid-with-panel/8324/1