Integration, or "embed mode" is used for cases where the storage of the diagram is taken care of by a host application, and diagrams.net is used for diagram editing. In this case, diagrams.net is used inside an iframe or window with special URL parameters, and is remote controlled using the HTML5 Messaging API. Use embed.diagrams.net only for embed mode.
- Load embed.diagrams.net with special URL parameters inside an iframe
- Send the diagram data to the iframe for editing
- Receive and save diagram data from the iframe
- Remove iframe
Depending on the requirements, a PNG or SVG image or the XML for the diagram can be used as the storage format. Consider the following when picking the storage format:
- Images (PNG and SVG) should be used for fast loading with no initial delay. Embedding the diagram data for editing in PNG and SVG images can be used to avoid saving the image and diagram separately, but will result in bigger image files. When using a viewer or editor, images should be used to show a placeholder or preview.
- SVG images should be used if hyperlinks and vector images are required. (The SVG output of diagrams.net uses foreign objects, which are not supported in IE11 and earlier.)
- XML should be used if no image version of the diagram is required or to store the XML separately from the image. A viewer or editor is required to handle these files.
- PNG images should be used if a bitmap image is required, to support IE11 and earlier or for special fonts.
The storage can be any persistence mechanism. The image or XML file can be stored and used in the output of the host application, such as an image tag, SVG DOM or HTML viewer. Authentication, file descriptors, revisions etc must be handled by the host application. All communication between the host application and diagrams.net happens on the client-side.
The protocol specification describes the full messaging API.
The basic flow of the protocol is:
- Wait for
initevent - Send
loadaction - Wait for
save/exitevent
In some cases, additional steps may be required to check for a draft state or to export the diagram as an image. Special messages are available in the protocol to show draft states or a template dialog.
Fonts, colors, default styles, libraries, CSS and more can be configured to match the environment and style of the host application by using the configure=1 URL parameter. See localstorage-svg.html.
JavaScript API for editing embedded SVG and PNG images in an HTML page.
diagram-editor.js- Reusable JavaScript API wrapper for the draw.io editorhelloworld.html- Minimal example (live)javascript.html- Advanced example with multiple formats (live)collapsed.html- Collapsible diagram example
Editing with embedInline mode and adapting embedded SVG images to dark mode.
inline.js- Inline editing implementation with dark mode supportinline.html- Example page (live)inline.drawio.svg- Sample SVG diagram
Saving and loading diagrams to/from HTML5 local storage.
localstorage.html- PNG format (live)localstorage-svg.html- SVG format with hyperlink support (live)localfile.html- Self-modifying local file (live)
Roundtrip editing of diagrams stored on a WebDAV server.
edit-diagram.html- Standalone editing pageself-editing.svg- Self-editing SVG file with embedded PNGself-editing.html- Self-editing HTML with embedded diagramsself-editing-embed.html- Self-editing HTML using embed.jsself-editing-image.html- Self-editing HTML using img tagembed.js- Double-click handler for editing drawio images
A template Chrome extension (Manifest V3) for adding draw.io diagram support to any web application. Based on a production integration. Includes diagram detection, inline editor, dark mode support, and placeholder save handler ready to be connected to your app's API.
contentScript.js- Main integration logicpopup.html/popup.js- Extension popup UImanifest.json- Extension manifest- README - Setup and customization guide