search

marcveens / react-drawio

React component for integrating the Diagrams (draw.io) embed iframe
MIT License
43 stars 8 forks source link
diagramsnet drawio react typescript

readme

react-drawio

npm Build Storybook demo

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

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

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.