Embed Draw.io diagrams in Dash

Hi!

I’m trying to embed an editable Draw.io diagram into a Dash app. For that, I am following the reference. My approach is the following:

  1. Embed the application in an dash.html.Iframe object.
  2. Load the script using dash_defer_html_import (see this post).
    However, I have not managed to make it work: the embeded app remains stuck in the loading wheel. From my understanding, the script is not triggered.
import dash
from dash import dcc, html
import base64
import dash_defer_js_import as dji

app = dash.Dash(__name__)

diagram_xml = """
<mxfile>
    <diagram name="Page-1">
        <mxGraphModel dx="1424" dy="1321" grid="1" gridSize="10" guides="1">
            <root>
                <mxCell id="0" value="" style="group" vertex="1" connectable="0" />
                <mxCell id="1" value="Example Box" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FFFFFF;strokeColor=#000000;shadow=1;" vertex="1" connectable="1" x="100" y="100" width="100" height="60" />
            </root>
        </mxGraphModel>
    </diagram>
</mxfile>
"""

app.layout = html.Div(
    [
        html.H1("Draw.io Integration"),
        # Embedding Draw.io in the Dash app
        html.Iframe(
            id="drawio-iframe",
            src=f"https://embed.diagrams.net/?embed=1&spin=1",
            width="800",
            height="600",
            style={"border": "none"},
        ),
        dji.Import(
            """
        // Listen for messages from the iframe
        window.addEventListener("message", function(event) {

            // Handle the 'init' event when the iframe is ready
            if (event.data === "init") {
                // Send the XML data to the iframe to load the diagram
                const diagramXML = `"""
            + diagram_xml
            + """`;
                const iframe = document.getElementById("drawio-iframe");

                // Send the XML data to the iframe for loading the diagram
                iframe.contentWindow.postMessage({
                    action: "load",
                    xml: diagramXML
                }, "*");
            }
        }, false);
    """
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

I don’t have a lot of experience using JS code in Dash, so I might be missing something obvious. Thank you for yout help!

Best,

Jan