React-drawio NPM

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.

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`

autosave (boolean, default: false)\ When enabled, it will call onAutoSave for all changes made
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
csv (string, default: undefined)\ CSV 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)
onAutoSave ((data: EventAutoSave) => void, optional)\ This will only trigger when the autosave property is true
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)