I tried to create some example html file that demonstrates how to send some xml content to embed.diagrams.net (see below) and get the error
Not a diagram file (error on line 1 at column 1: Start tag expected,
‘<‘ not found)
=> 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.
<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>
