embed drawio HTML into React

Question

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.net/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.net\&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>

score 4 · Answer 1 · edited Jul 06 '21 at 22:37

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 component 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 component. 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:

Host the Drawio code in a seperate location from the Vue code on a static server
Import the Drawio code into a Vue context using an <iframe>
Create a Vue component 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.com`
    }
}

</script>

To communicate 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
}, "*");
```

To listen for message coming 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.

embed drawio HTML into React

1 Answers1