How to export Draw.io 'xml' data using javascript API for my Custom Web Application? (Retrieving XML Data from Canvas via Iframe)

[mesbahworld]

Description

I am working on integrating the Draw.io editor into my custom web application, which is based on html css js. As a data modeler, I know little javascript. I have successfully embedded Draw.io in an iframe and can interact with it to some extent. However, I need help retrieving the designed ERD diagram's XML data from the canvas and passing it back to my application for further processing and generate SQL DDL script from ERD model. But I am unable to do that and here is my current situation:

Current Setup

1. Hosting Environment:
   I have deployed the Draw.io editor on my own server using Tomcat, with NGINX as a proxy. The application is accessible via this URL:
   https://app.flingex.com/draw/

2. Integration with Web App:
   I have embedded the Draw.io editor in an iframe on one of my Web Application using the following code:

   <iframe 
       id="drawio_iframe" 
       src="https://app.flingex.com/draw/" 
       style="width: 100%; height: 500px;">
   </iframe>

3. Objective:
   I want to retrieve the clean XML data of the diagram designed in the Draw.io editor via the iframe using postMessage. The XML data will then be stored in the database for further manipulation and generate SQL DDL script from ERD model .

What I've Tried

1. Sending postMessage to the Iframe
   I used the following JavaScript to send a message to the iframe:

   const iframe = document.getElementById('drawio_iframe');
   iframe.contentWindow.postMessage(
       { action: 'export', format: 'xml' },
       'https://app.flingex.com'
   );

2. Listening for Messages in the Iframe
   I opened the iframe directly in a new tab (https://app.flingex.com/draw/) and added this listener to debug:

   window.addEventListener('message', function(event) {
       console.log('Message received:', event);
   });

3. Results:

   • The postMessage seems to send successfully, but I don’t see any response or XML data being returned to my application.
   • No messages are logged in the iframe console.

Expected Behavior

• When I send { action: 'export', format: 'xml' } to the iframe, I expect the iframe to respond with the exported XML data from the Draw.io canvas.

Questions

1. Is there any additional configuration or API setup required to enable Draw.io to handle postMessage events for exporting XML data?
2. Are there any permissions, headers, or origin configurations I need to adjust on the server or in the iframe for this to work?
3. Can someone provide a working example or guide for achieving this integration?

Additional Information

• Draw.io deployment: Self-hosted (Tomcat + NGINX)
• Application: APEX (html, css and JavaScript based integration)
• I am not using embed=1 in the iframe URL, as I want to keep the design tools visible.
• The URL https://app.flingex.com/draw/ works fine when accessed directly.

What I Need

I’m looking for guidance on how to properly implement the following:

1. Send a message from my web app to the iframe to trigger the XML export.
2. Retrieve the exported XML data in the parent application (via postMessage or another method).
3. Any specific Draw.io settings, scripts, or code snippets needed to enable this functionality.

Thank You!

I appreciate any help or suggestions to solve this issue. Let me know if you need more details or access to any specific code snippets.

---

**Tags **

• draw.io
• iframe
• postmessage
• javascript
• html

[ericbaril72]

My understanding is that an iframe is completely independant of your web app.
Since I also run server side services for my web app, I have used the "updater.js" plugin.
Adding &p=update&url-updater=/<update-service/&updateInterval=1000&... into the iframe src-url attributes and the drawio.js iframe will POST the XML to your server . you could POST from your main webapp to your server to retrieve what you need.

I my case, the server send back some element info to dynamicly highlight part of the diagram