Diagram Editor

An embeddable draw.io diagram editor. Opens in a full-screen overlay, persists both the editable XML source and a rendered SVG preview. The diagram can be re-opened and edited at any time — the previous state is restored automatically.


Basic

Click Create diagram to open the editor. After saving, the SVG preview is shown inline. Hover the preview and click Edit to re-open and continue editing.


Controlled with onchange

Use onchange to react to saves. Both xml and svg are available in the callback — persist whichever you need to your backend.


Data model

DiagramEditorTypes.DiagramData includes xml — the draw.io graph XML, which is the source of truth for re-editing — and svg — the exported SVG string used for the inline preview. Persist both together with the required scheme (light or dark). Optional caption and description hold metadata. If only svg is stored, the diagram cannot be edited again.