From draw.io it is possible to embed the diagram as an HTML, however, when trying to use the generated HTML in a react app, nothing appears on the screen. The following script is loaded into the HTML page as well: <script type="text/javascript" src=".min.js"></script>

Any idea why this isn't working?

If I put the exact same code and HTML in a file without React, everything works as expected.

JS

const mystyle = {
  maxWidth: "100%",
  border: "1px solid transparent"
}

ReactDOM.render(
  <div className="mxgraph" style={mystyle} data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams\&quot; modified=\&quot;2021-04-08T16:37:39.233Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36\&quot; etag=\&quot;O3fNti_B0JlDfU6ko1tb\&quot; version=\&quot;14.5.8\&quot; type=\&quot;google\&quot;&gt;&lt;diagram id=\&quot;3VQJ_haBxNLfYGOJBekl\&quot; name=\&quot;Page-1\&quot;&gt;zZZdb5swFIZ/DZeRAqQ0vUwJ68c0dVJUTdoNcu0TbBUwsg8D9utngiEgWjW7ibiKec4by+exZXD8MKsfFCn4D8kgdbw1qx1/73ieG6y35qcljSXu+rYjiRKsY+szOIi/YIM9LQUDbVmHUMoURTGFVOY5UJwwopSsprGjTNkEFCSByTJacKAkhVnsl2DIO7q9GaUfQSQch/5sJSN92ALNCZPVCPmR44dKSuxGWR1C2tqbevn2SXVYmIIcL/nDHW1U9DtSm9fb77s4eno5Pq9WdpY/JC1twzQVjr8zbE80f5NEsdCQrgNsei1KljmDdmbX8e8rLhAOBaFttTInwTCOWWrL+h2QcvtwlDke7EQf9NAvCBRCPUK2pweQGaBqTMRWVxvr154wr3+uztvl9nvAR1sVWEbsCUmGqc8SzcB6/A+n3sypyIsSY4byZDZIzQru35QZJe0oqoGWKPJkV4inNrk3weUKd4MLhG+vKdyfCYdeaUwKEZf0S++vGkKiYcHaN97StG9m2lvZhFLQOk4IQkWaD8UPN4sRvzvFF+w92C7N+83Muyzx0gvm5RRd9g1zd8mVflXlwUx5oUCbDkF9afxZy/znkF6udfOSvJ5283j+8jnVRh+QfvQP&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}"></div>,
  document.getElementById('root')
);

HTML

<div id="root"></div>

From draw.io it is possible to embed the diagram as an HTML, however, when trying to use the generated HTML in a react app, nothing appears on the screen. The following script is loaded into the HTML page as well: <script type="text/javascript" src="https://viewer.diagrams/js/viewer-static.min.js"></script>

Any idea why this isn't working?

If I put the exact same code and HTML in a file without React, everything works as expected.

JS

const mystyle = {
  maxWidth: "100%",
  border: "1px solid transparent"
}

ReactDOM.render(
  <div className="mxgraph" style={mystyle} data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;app.diagrams\&quot; modified=\&quot;2021-04-08T16:37:39.233Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36\&quot; etag=\&quot;O3fNti_B0JlDfU6ko1tb\&quot; version=\&quot;14.5.8\&quot; type=\&quot;google\&quot;&gt;&lt;diagram id=\&quot;3VQJ_haBxNLfYGOJBekl\&quot; name=\&quot;Page-1\&quot;&gt;zZZdb5swFIZ/DZeRAqQ0vUwJ68c0dVJUTdoNcu0TbBUwsg8D9utngiEgWjW7ibiKec4by+exZXD8MKsfFCn4D8kgdbw1qx1/73ieG6y35qcljSXu+rYjiRKsY+szOIi/YIM9LQUDbVmHUMoURTGFVOY5UJwwopSsprGjTNkEFCSByTJacKAkhVnsl2DIO7q9GaUfQSQch/5sJSN92ALNCZPVCPmR44dKSuxGWR1C2tqbevn2SXVYmIIcL/nDHW1U9DtSm9fb77s4eno5Pq9WdpY/JC1twzQVjr8zbE80f5NEsdCQrgNsei1KljmDdmbX8e8rLhAOBaFttTInwTCOWWrL+h2QcvtwlDke7EQf9NAvCBRCPUK2pweQGaBqTMRWVxvr154wr3+uztvl9nvAR1sVWEbsCUmGqc8SzcB6/A+n3sypyIsSY4byZDZIzQru35QZJe0oqoGWKPJkV4inNrk3weUKd4MLhG+vKdyfCYdeaUwKEZf0S++vGkKiYcHaN97StG9m2lvZhFLQOk4IQkWaD8UPN4sRvzvFF+w92C7N+83Muyzx0gvm5RRd9g1zd8mVflXlwUx5oUCbDkF9afxZy/znkF6udfOSvJ5283j+8jnVRh+QfvQP&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}"></div>,
  document.getElementById('root')
);

HTML

<div id="root"></div>

• javascript
• reactjs
• draw.io

Share Improve this question Follow asked Apr 8, 2021 at 17:17 techhighlandstechhighlands 97222 gold badges2121 silver badges4040 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I was tasked with doing something similar, but with Vue JS instead of React. So with that caveat, I'm happy to share my experience.

Our goal was to embed a Drawio instance into a Vue ponent that could be used inside of a larger Vue application. To do this, we tried to get Drawio to spit out it's HTML that could then be encapsulated into a ponent. Unfortunetly, this didn't work for a number of reasons:

• There are issue with running vanilla JS (as inside a <script> tag) inside Vue for security reasons
• There are timing issues with trying to wait until the Drawio section is finished loading
• They just flat-out don't play nice together

After many hours, we realized that without forking Drawio and significantly re-writing the library, this task was basically impossible.

So below was our non-ideal solution:

1. Host the Drawio code in a seperate location from the Vue code on a static server
2. Import the Drawio code into a Vue context using an <iframe>
3. Create a Vue ponent which encapsulated the <iframe>

<template>
    <iframe ref="drawioIFrame" :src="iFrameSrc" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class DiagramFrame extends Vue {

    get iFrameSrc(): string {
        return `http://mydrawiourl.`
    }
}

</script>

4. To municate between Vue and Drawio, we used window.postMessage. Getting a reference from the iframe, we can send a message like this:

   drawIoWindow.postMessage(message, "*")
   

   And within Drawio:

   window.parent.postMessage({
     message
   }, "*");
   

5. To listen for message ing from the other side, we used the following:

   Vue:

   mounted() {
       window.addEventListener('message', this.handleMessagesFromDrawIo)
   }
   
   beforeDestroy() {
       window.removeEventListener('message', this.handleMessagesFromDrawIo)
   }
   

   Drawio:

   mxEvent.addListener(window, 'message', mxUtils.bind(this, messageHandler)); 
   

Though non-ideal, this pattern has actually worked quite well for us.

you should use document.createElement("script"); inside a useEffect hook:

  useEffect(() => {
    // Load diagrams viewer script
    const script = document.createElement("script");
    script.src = "https://viewer.diagrams/js/viewer-static.min.js";
    script.async = true;
    document.body.appendChild(script);
  }, []);

then add your diagram in the body:

    <div
      className="mxgraph"
      style={{
        maxWidth: "100%",
        border: "1px solid transparent",
        overflow: "hidden",
        position: "relative",
        width: "100%"
      }}
      data-mxgraph={YOUR_DIAGRAM_DATA}
    />