🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-drawio

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-drawio

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

1.0.5
latest
Source
npm
Version published
Weekly downloads
2.2K
-18.57%
Maintainers
1
Weekly downloads
 
Created
Source

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

  • 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)

FAQs

Package last updated on 21 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts