ARTICLE AD BOX
I have embedded a Drawio editor inside my webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw.io Editor Test</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
}
#controls {
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
#editor {
width: 100%;
height: 600px;
border: 1px solid #ccc;
}
#output {
margin-top: 20px;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
max-height: 300px;
overflow: auto;
}
pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>Draw.io Editor Test</h1>
<div id="controls">
<button onclick="extractXML()">Extract XML</button>
</div>
<iframe id="editor" src="https://embed.diagrams.net/?embed=1&ui=simple&proto=json&modified=0&libraries=1&saveAndExit=0&noSaveBtn=1&noExitBtn=1"></iframe>
<div id="output"></div>
<script>
const iframe = document.getElementById('editor');
let receivedXML = null;
// Listen for messages from the iframe
window.addEventListener('message', function(evt) {
if (evt.data && typeof evt.data === 'string') {
try {
const msg = JSON.parse(evt.data);
console.log('Received message:', msg);
// Handle the export response
if (msg.event === 'export') {
receivedXML = msg.data;
displayXML(receivedXML);
}
// Handle init event - editor is ready, send load action to enable it
if (msg.event === 'init') {
console.log('Editor initialized, loading blank diagram');
iframe.contentWindow.postMessage(
JSON.stringify({
action: 'load',
autosave: 0,
xml: '<mxfile><diagram id="diagram1" name="Page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>'
}),
'*'
);
}
} catch (e) {
// Not a JSON message, ignore
console.debug('Non-JSON message:', e);
}
}
});
function extractXML() {
// Request XML export from the editor
iframe.contentWindow.postMessage(JSON.stringify({
action: 'export',
format: 'xml',
compressed: false
}), '*');
}
function displayXML(xml) {
const output = document.getElementById('output');
output.innerHTML = '<h3>Extracted XML:</h3><pre>' + escapeHtml(xml) + '</pre>';
}
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}
// Wait for iframe to load
iframe.onload = function() {
console.log('Iframe loaded');
};
</script>
</body>
</html>
Now I need to export the diagram into uncompressed XML.
Test
If you use Drawio on your computer and just put the icon of an AWS EC2 shape coming from the AWS library (AWS/Compute), and now save it, the .xml.drawio file will be like this:
<?xml version="1.0" encoding="UTF-8"?> <mxfile host="embed.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36" version="29.3.4"> <diagram id="diagram1" name="Page-1"> <mxGraphModel dx="744" dy="484" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <mxCell id="2" parent="1" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;" value="" vertex="1"> <mxGeometry height="78" width="78" x="161" y="161" as="geometry" /> </mxCell> </root> </mxGraphModel> </diagram> </mxfile>As you can see, the XML contains a lot of metadata on the shapes and icons. But if you export using the code I wrote, the event will contain two properties: xml and data (look at the console, the properties of the export event). The latter has the SVG, the former is of interest:
"<mxfile host=\"embed.diagrams.net\" agent=\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36\" version=\"29.3.4\"><diagram id=\"diagram1\" name=\"Page-1\">jZRfb6MwDMA/Da8Vf8rR14N1u0mbNGkP95yBgWgBo8Rd6X36c0ooUJi0lrbxz3bsuHa8KGv6Jy26+hULUF7oF70XPXhheNjv+duCywD2BwcqLYsBBRN4l//AQd/RkyzALAwJUZHsljDHtoWcFkxojeelWYlqGbUTlYvoT+A9FwpWZn9lQbU7Vjyz/gOyqsfIge80jRiNHTC1KPA8Q9HRizKNSMOq6TNQtnZjXQa/x2+0t8Q0tPQTh3Dt4PYwdBmPaz6Bcpu370Vph7Kla/3ilB/ePhs+MZtmluzCeANusWQNg7UZ/wRbEe7hFkvWMFibWWnMegm3WBKvM773Dja8gztvfqIUT6RkC9mtU22NS2wpQ4X6Wv+I34/270tLqdSMHx8S21lRakjjJ8w05fXFmkKYGgq37RdoktzFL+ID1BsaSRJb1n0gETYzg99KVlZB2DEVTsq5RYADpDU1iuXAZermMwhH2XWODSlMNxyrlL3NI+WG76yy6St7NezE2ex3GgyedA7Puc0nZXFYLa0gtxGG7vwS6uS60wFOHfpZB7t+fwJsgPSFTerZSCaHwe08je+Ixk1+uRG93MnCXR7VbedpvnjhRmwUp1G+6mb3YXT8Dw==</diagram></mxfile>"The content is compressed. When I ask ChatGBT to decompress it, I get:
<mxGraphModel dx="744" dy="484" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"> <root> <mxCell id="0"/> <mxCell id="1" parent="0"/> <mxCell id="2" parent="1" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100" vertex="1"> <mxGeometry x="904.5" y="644.5" width="79" height="79" as="geometry"/> </mxCell> </root> </mxGraphModel>No more metadata on icons :(
Question
Is there a way to get just the uncompressed XML with metadata?
