CODEWITHSUNDEEP
javascriptdraw.iodiagrams.net
Stefan
Stefan

Reputation: 12260

How to correctly pass xml to draw.io / embed.diagrams.net?

I tried to create some example html file that demonstrates how to send xml content to embed.diagrams.net (see below example and https://www.drawio.com/doc/faq/embed-mode). I get the error

Not a diagram file (error on line 1 at column 1: Start tag expected, '<' not found)

enter image description here

=> How to fix the code to correctly pass the xml content to embed.diagrams.net?

I already tried to remove line breaks and other whitespaces but did not get it working.

I also tried to encode the xml as uri and send it using the "#U" or "#R" argument to app.diagrams.net. But that did not work inside an iframe.

(My actual use case is to show some draw.io content in JupyterLab 4 using IPython.display and IPython.HTML functions. Before doing so, I need a working JavaScript example.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diagrams.net Embed Demo</title>
</head>
<body>
<iframe id="embed-diagram" src="https://embed.diagrams.net/" width="100%" height="600px"></iframe>

<script>
    // Example draw.io XML content
    var xml = `<mxfile host="app.diagrams.net">
            <diagram name="Page-1">
                <mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
                    <root>
                        <mxCell id="0"/>
                        <mxCell id="1" parent="0"/>
                        <mxCell id="2" value="hello world" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
                            <mxGeometry x="160" y="160" width="80" height="30" as="geometry"/>
                        </mxCell>
                    </root>
                </mxGraphModel>
            </diagram>
        </mxfile>
    `;          

    const iframe = document.getElementById('embed-diagram');

    window.addEventListener('message', function(event) {
        if (event.data === 'ready') {
            console.log('Iframe ready to receive data');

            var message = "{action: 'load', xml: '"+ xml + "'}";

            console.log(message);

            iframe.contentWindow.postMessage(message, '*');
        }
    });

    iframe.onload = function() {
        console.log('Iframe loaded');
        iframe.contentWindow.postMessage(JSON.stringify({
            action: 'init'
        }), '*');
    };
</script>
</body>
</html>

If I store the xml content as *.drawio file and open it in http://app.diagrams.net, it is displayed as expected.

enter image description here

<mxfile host="app.diagrams.net">
    <diagram name="Page-1">
        <mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
            <root>
                <mxCell id="0"/>
                <mxCell id="1" parent="0"/>
                <mxCell id="2" value="hello world" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
                    <mxGeometry x="160" y="160" width="80" height="30" as="geometry"/>
                </mxCell>
            </root>
        </mxGraphModel>
    </diagram>
</mxfile>

Upvotes: 1

Views: 157

Answers (1)

Stefan
Stefan

Reputation: 12260

a) By default, the xml content must not be wrapped in json like {'action': 'load', 'xml': xml} but should be send directly.

<html>
    <body>
        <iframe id="embed-diagram" src="https://embed.diagrams.net" width="100%" height="600px"></iframe>
        
        <script>
        
            var xml = `<mxfile host="app.diagrams.net">
                    <diagram name="Page-1">
                        <mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
                            <root>
                                <mxCell id="0"/>
                                <mxCell id="1" parent="0"/>
                                <mxCell id="2" value="hello world" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
                                    <mxGeometry x="160" y="160" width="80" height="30" as="geometry"/>
                                </mxCell>
                            </root>
                        </mxGraphModel>
                    </diagram>
                </mxfile>
            `;
            
        
            window.addEventListener('message', function(event) {
                if (event.data === 'ready') {
                    const iframe = document.getElementById('embed-diagram');
                    iframe.contentWindow.postMessage(xml,'*');
                }
            });
        </script>
    </body>
</html>

b) Or include proto=json in url to enable json protocol.

Upvotes: 1

Related Questions