marcveens / react-drawio

React component for integrating the Diagrams (draw.io) embed iframe

react-drawio

React component for integrating the Diagrams (draw.io) embed iframe.

This is an unofficial best-effort package based on the embedding documentation that can be found at https://www.drawio.com/doc/faq/embed-mode.

Table of Contents

• Demo
• Installation
• Examples
• API documentation

Installation

Install this library:

pnpm add react-drawio
# or
yarn add react-drawio
# or
npm i react-drawio

Examples

Simple rendering

import { DrawIoEmbed } from 'react-drawio';

function App() {
  return (
    <DrawIoEmbed />
  );
}

Start with a few settings enabled

import { DrawIoEmbed } from 'react-drawio';

function App() {
  return (
    <DrawIoEmbed urlParameters={{
      ui: 'kennedy',
      spin: true,
      libraries: true,
      saveAndExit: true
    }} />
  );
}

Start with existing diagram

import { DrawIoEmbed } from 'react-drawio';

function App() {
  return (
    <DrawIoEmbed xml="..." />
  );
}

Export diagram programmatically

import { DrawIoEmbed, DrawIoEmbedRef } from 'react-drawio';
import { useRef, useState } from 'react';

function App() {
  const [imgData, setImgData] = useState<string | null>(null);
  const drawioRef = useRef<DrawIoEmbedRef>(null);

  const export = () => {
    if (drawioRef.current) {
      drawioRef.current.exportDiagram({
        format: 'xmlsvg'
      });
    }
  };

  return (
    <>
      <button onClick={export}>Export</button>

      <DrawIoEmbed 
        ref={drawioRef}
        onExport={(data) =>  setImgData(data.data)} 
      />
      
      {imgData && <img src={imgData} />}
    </>
  );
}

API Documentation

All options are based on the documentation at draw.io/doc/faq/embed-mode. If something is off, please let me know by creating an issue.

props

• urlParameters (UrlParameters, default: undefined)
  Parameters documented at https://www.drawio.com/doc/faq/embed-mode

• xml (string, default: undefined)
  XML structure for prefilling the editor

• configuration (Object, default: undefined)
  For configuration options, see https://www.drawio.com/doc/faq/configure-diagram-editor

• exportFormat ('html' | 'html2' | 'svg' | 'xmlsvg' | 'png' | 'xmlpng', default: xmlsvg)
  Set export format

• baseUrl (string, default: https://embed.diagrams.net)
  For self hosted instances of draw.io, insert your URL here

• onLoad ((data: EventLoad) => void, optional)

• onSave ((data: EventSave) => void, optional)

• onClose ((data: EventExit) => void, optional)

• onConfigure ((data: EventConfigure) => void, optional)

• onMerge ((data: EventMerge) => void, optional)

• onPrompt ((data: EventPrompt) => void, optional)

• onTemplate ((data: EventTemplate) => void, optional)

• onDraft ((data: EventDraft) => void, optional)

• onExport ((data: EventExport) => void, optional)

Actions

It is possible to send actions to the Diagrams iframe. These actions are available as functions bound to the ref of the component, see examples.

• load ((obj: ActionLoad) => void)
  Load the contents of a diagram
• configure ((obj: ActionConfigure) => void)
  Send configuration option to the iframe. Read more about it at https://www.drawio.com/doc/faq/configure-diagram-editor
• merge ((obj: ActionMerge) => void)
  Merge the contents of the given XML into the current file
• dialog ((obj: ActionDialog) => void)
  Display a dialog in the editor window
• prompt ((obj: ActionPrompt) => void)
  Display a prompt in the editor window
• template ((obj: ActionTemplate) => void)
  Show the template dialog
• layout ((obj: ActionLayout) => void)
  Runs an array of layouts using the same format as Arrange > Layout > Apply.
• draft ((obj: ActionDraft) => void)
  Show a draft dialog
• status ((obj: ActionStatus) => void)
  Display a message in the status bar
• spinner ((obj: ActionSpinner) => void)
  Display a spinner with a message or hide the current spinner if show is set to false
• exportDiagram ((obj: ActionExport) => void)

react-drawio's Issues

Warning: React.jsx

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Unable to disable 'Save & Exit' button

Hi Marc,

I am attempting to disable the save and exit button (and all other buttons). Per your documentation this can be achieved by
setting:

<DrawIoEmbed
  urlParameters={{
    noExitBtn: true,
    noSaveBtn: true,
    saveAndExit: false,
  }}
/>

However, on doing this, I still see the save & exit button:

Is this a bug, and if so, could you please consider fixing it when you get the time?

Thanks,
Puru

Configuration makes the implementation fail

Just adding the configuration tag to the component makes the embedded iframe to just be blank. Adding or removing any options to the object makes no difference:

<DrawIoEmbed
	urlParameters={{
		ui: 'min',
		spin: true,
		saveAndExit: false,
		noSaveBtn: true,
		noExitBtn: true,
	}}
	configuration={{}}
/>

Removing the configuration tag makes it load correctly. Am I doing something wrong?

Load drawio with files of different formats

Hi there,

Is there a way to load DrawIoEmbed with different file types, not just XML?

I want to load PNG, Visio files, etc., when the component is mounted. Currently, I can only load XML files by using the xml prop.

If I spin up DrawIoEmbed, I can drop these files into the editor, and it works nicely, so there might be a way to do this programmatically.

Thanks

Programmatically call the save event

Is it possible to programmatically trigger the save event?

About How to show preview, for the programmatically exported data

For the data of whichever format there is no option mentioned , about how to show them in a preview

Need support for a 'sketch' theme in the ui urlParameter

Hi,

Thank you for this great package. I was looking over the draw.io themes documentation, and it seems that the 'sketch' theme mentioned there is not supported for this package. The supported themes seem to be 'dark' | 'kenedy' | 'atlas' | 'min'. Would it be possible to add a 'sketch' theme to support this theme from draw.io?

https://www.drawio.com/blog/diagram-editor-theme

Thanks,
Puru

Starter needing help

Hi Marc,

Thanks for the great library, however I'm quite a starter in react. (not really my strong suit).
I was curious how if I can seed the data from a variable (in my case fileContent).
I have used the following code working before to load the content of a file, but I don't know how to insert this value into the DrawIOEmbed element.

import { useState, useEffect } from 'react'
import { DrawIoEmbed } from 'react-drawio';

export default function RenderDrawIO ({fileName}) {
    const [fileContent, setFileContent] = useState(undefined);
    const drawioRef = useRef<DrawIoEmbedRef>(null);
  
    useEffect(() => {
      const getFile = async () => {
        const response = await fetch(`/drawio/${fileName}.excalidraw`);
        const value = await response.json();
        setFileContent(value);
      }
      getFile();
    }, []);
  
    return (
      <DrawIoEmbed 
       xml="test.drawio"
      UrlParameters={{
        spin: true,
        libraries: false,
        noSaveBtn: true,
        noExitBtn: true
      }} />
      );
  }

Any possibility you're able to assist? :)

Regards,
Cédric

Allow png export options

Hi,

In the embed mode documentation, there are some additional parameters that you can use e.g. when exporting a png you can set transparent background to false:

https://www.drawio.com/doc/faq/embed-mode#:~:text=For%20png%20and,the%20background%20color.

Would it be possible to add these to the exportDiagram() function?

Thanks,
Angus

Uncaught DOMException: Failed to read a named property 'addEventListener' from 'Window'

Hi,

I'm getting this error when trying to use react-drawio in an actual application.

Uncaught DOMException: Failed to read a named property 'addEventListener' from 'Window': Blocked a frame with origin "https://my-application-domain" from accessing a cross-origin frame.

Any idea how this can be fixed? Is there somewhere that is using trying to add a direct listener as opposed to postMessage?

Thanks.