draw.io for React

import { useRef, useState } from "react";
import { DrawioEditor, type DrawioEditorHandle } from "@drawio/react";

const KEY = "drawio-example";

// Saves every change in the browser's local storage. Reload the page: the
// diagram is still there. Replace localStorage with a call to your backend.
export default function Autosave()
{
  const [xml] = useState(() => localStorage.getItem(KEY) ?? undefined);
  const editor = useRef<DrawioEditorHandle>(null);

  return (
    <div style={{ height: 600 }}>
      <DrawioEditor
        ref={editor}
        xml={xml}
        autosave
        onAutosave={(event) =>
        {
          localStorage.setItem(KEY, event.xml!);
          // Stored: the editor does not ask before the page is left
          editor.current!.setModified(false);
        }}
        // Light or dark like the system, without the Save, Save and Exit and Exit buttons
        urlParameters={{ dark: "auto", noSaveBtn: true, saveAndExit: false, noExitBtn: true }}
      />
    </div>
  );
}

import { useRef } from "react";
import { DrawioEditor, type DrawioEditorHandle } from "@drawio/react";

// Your own buttons call the editor through a ref.
export default function Export()
{
  const editor = useRef<DrawioEditorHandle>(null);

  async function download(format: "png" | "svg" | "xmlsvg")
  {
    const result = await editor.current!.export({ format });
    const link = document.createElement("a");
    link.href = result.data as string;
    link.download = (format == "xmlsvg") ? "diagram.drawio.svg" : "diagram." + format;
    link.click();
  }

  async function downloadXml()
  {
    const xml = await editor.current!.getXml();
    const link = document.createElement("a");
    link.href = "data:application/xml;charset=utf-8," + encodeURIComponent(xml);
    link.download = "diagram.drawio";
    link.click();
  }

  return (
    <>
      <div className="toolbar">
        <button onClick={() => download("png")}>PNG</button>
        <button onClick={() => download("svg")}>SVG</button>
        <button onClick={() => download("xmlsvg")}>Editable SVG</button>
        <button onClick={downloadXml}>.drawio</button>
      </div>
      <div style={{ height: 600 }}>
        <DrawioEditor ref={editor} urlParameters={{ dark: "auto", noSaveBtn: true, saveAndExit: false, noExitBtn: true }} />
      </div>
    </>
  );
}

import { useRef, useState } from "react";
import { DrawioEditor, type DrawioEditorHandle } from "@drawio/react";

// Stores the diagram as an SVG image with the diagram inside (.drawio.svg),
// like draw.io for Notion. Any page can show the image, and the editor can
// open it again. Click the image to edit it.
export default function EditableImage()
{
  const [image, setImage] = useState<string>();
  const [editing, setEditing] = useState(false);
  const editor = useRef<DrawioEditorHandle>(null);

  async function save(exit?: boolean)
  {
    const result = await editor.current!.export({ format: "xmlsvg" });
    setImage(result.data as string);

    if (exit)
    {
      setEditing(false);
    }
  }

  return (
    <>
      {(image != null) ?
        <img src={image} alt="Diagram" className="diagram" title="Click to edit"
          onClick={() => setEditing(true)} /> :
        <button onClick={() => setEditing(true)}>Insert a diagram</button>}

      {editing &&
        <div className="overlay">
          <DrawioEditor
            ref={editor}
            xml={image}
            // Light or dark like the system, with a Save and Exit and an Exit button
            urlParameters={{ dark: "auto", noSaveBtn: true, saveAndExit: true }}
            onSave={(event) => save(event.exit)}
            onExit={() => setEditing(false)}
          />
        </div>}
    </>
  );
}

import { useRef, useState } from "react";
import { DrawioEditor, type DrawioEditorHandle, type DrawioEvent } from "@drawio/react";

// Edits a diagram image in place, like draw.io for Notion: the editor opens
// over the image (embedInline). The iframe covers the window and stays
// hidden until an image is edited. Press Escape to stop editing.
export default function InlineEditing()
{
  const [image, setImage] = useState<string>();
  const [editing, setEditing] = useState(false);
  const editor = useRef<DrawioEditorHandle>(null);
  const target = useRef<HTMLDivElement>(null);

  function edit()
  {
    const r = target.current!.getBoundingClientRect();
    const border = 8;
    setEditing(true);

    editor.current!.load({
      xml: image,
      border,
      rect: { left: r.left - border, top: r.top - border, width: r.width + 2 * border, height: r.height + 2 * border },
      minWidth: Math.min(600, innerWidth - 60),
      minHeight: Math.min(400, innerHeight - 60),
      maxFitScale: 1.5,
      viewport: { x: 0, y: 0, width: innerWidth, height: innerHeight },
      // The image shows the diagram in the light or dark mode of the page
      theme: "auto"
    });
  }

  function handleEvent(event: DrawioEvent)
  {
    if (event.event == "export" && event.exit)
    {
      // The edited diagram as an SVG with the diagram inside
      setImage(event.data as string);
      setEditing(false);
    }
    else if (event.event == "exit")
    {
      setEditing(false);
    }
    else if (event.event == "resize")
    {
      // The editor asks to go fullscreen or back
      editor.current!.fullscreenChanged(event.fullscreen);
    }
  }

  return (
    <>
      <div ref={target} className="inline-target" onClick={edit} title="Click to edit">
        {(image != null) ? <img src={image} alt="Diagram" /> : <span>Click to draw a diagram</span>}
      </div>

      <DrawioEditor
        ref={editor}
        urlParameters={{ embedInline: true, dark: "auto" }}
        onEvent={handleEvent}
        style={{
          position: "fixed", inset: 0, zIndex: 10, background: "transparent",
          visibility: editing ? "visible" : "hidden"
        }}
      />
    </>
  );
}

import { useState } from "react";
import { DrawioEditor, type Descriptor } from "@drawio/react";

const SOURCE = `graph TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| D[Fix it]
  D --> B`;

// Converts Mermaid to an editable diagram. Use {format: "csv", data} for CSV.
export default function Mermaid()
{
  const [source, setSource] = useState(SOURCE);
  const [descriptor, setDescriptor] = useState<Descriptor>({ format: "mermaid", data: SOURCE });

  return (
    <div className="split">
      <div className="side">
        <textarea value={source} onChange={(e) => setSource(e.target.value)} spellCheck={false} />
        <button onClick={() => setDescriptor({ format: "mermaid", data: source })}>Convert</button>
      </div>
      <DrawioEditor descriptor={descriptor} urlParameters={{ dark: "auto" }} />
    </div>
  );
}

import { DrawioEditor } from "@drawio/react";

// A new diagram starts with the template dialog. The selected template is
// loaded with autosave on.
export default function Templates()
{
  return (
    <div style={{ height: 600 }}>
      <DrawioEditor
        templates
        autosave
        urlParameters={{ dark: "auto" }}
        onAutosave={(event) => console.log("Diagram changed", event.xml?.length)}
      />
    </div>
  );
}

import { useState } from "react";
import { DrawioEditor, type UrlParameters } from "@drawio/react";

// URL parameters change the look of the editor. A change reloads it with
// the diagram. The configuration customises fonts, colours, styles and
// shape libraries:
// https://www.drawio.com/docs/reference/configure-diagram-editor
export default function Options()
{
  const [ui, setUi] = useState<UrlParameters["ui"]>("kennedy");
  const [dark, setDark] = useState<UrlParameters["dark"]>("auto");
  const [lang, setLang] = useState("en");

  return (
    <>
      <div className="toolbar">
        <select value={ui} onChange={(e) => setUi(e.target.value as UrlParameters["ui"])}>
          <option value="kennedy">Default</option>
          <option value="min">Minimal</option>
          <option value="atlas">Atlas</option>
          <option value="sketch">Sketch</option>
          <option value="simple">Simple</option>
        </select>
        <select value={String(dark)} onChange={(e) => setDark((e.target.value == "auto") ? "auto" : e.target.value == "true")}>
          <option value="auto">Light or dark like the system</option>
          <option value="false">Light</option>
          <option value="true">Dark</option>
        </select>
        <select value={lang} onChange={(e) => setLang(e.target.value)}>
          <option value="en">English</option>
          <option value="de">Deutsch</option>
          <option value="fr">Français</option>
          <option value="ja">日本語</option>
        </select>
      </div>
      <div style={{ height: 600 }}>
        <DrawioEditor
          urlParameters={{ ui, dark, lang, libraries: true }}
          config={{
            defaultLibraries: "general;flowchart",
            presetColors: ["E6F4EA", "FCE8E6", "E8F0FE", "FEF7E0"],
            defaultVertexStyle: { rounded: "1" }
          }}
        />
      </div>
    </>
  );
}