What is inside a .drawio file
draw.io saves diagrams in a format inherited from mxGraph, the JavaScript diagramming library it is built on. The outer element is `<mxfile>`, and each page of your diagram is a `<diagram>` element inside it. The page itself is an `<mxGraphModel>`: a flat list of `mxCell` entries, where each cell is either a vertex (a shape) or an edge (a connector), with an `mxGeometry` giving its position and size.
What a cell looks like is stored in a single `style` string — something like `rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14`. The shape type, colours, dashes, arrowheads and text alignment all live in that string, which is why a converter has to parse it rather than just reading the XML attributes.
Older files, and files saved with compression switched on, don't store the page as readable XML at all. Instead the page is URL-encoded, deflate-compressed and base64-encoded into one long opaque string. That is why opening a .drawio file in a text editor sometimes shows a wall of characters instead of shapes. This viewer handles both forms, and tells you how many pages were compressed.
Opening .drawio.png and .drawio.svg files
When you export from draw.io with “Include a copy of my diagram” ticked, the image carries the full diagram inside it. A `.drawio.png` stores the XML in a PNG text chunk; a `.drawio.svg` stores it in the `content` attribute of the root `<svg>` element. The picture is what everyone else sees; the embedded copy is what lets draw.io reopen it as an editable diagram.
This viewer reads that embedded copy, so a diagram someone pasted into a wiki or a README as an image can be turned back into shapes. If you drop in an ordinary PNG or SVG that was exported without the diagram, it will say so — there is no reliable way to recover boxes and arrows from pixels, and it won't guess.
What converts cleanly, and what gets simplified
Rectangles (square or rounded), ellipses and circles, rhombus decision shapes, free text, containers and swimlanes convert directly, keeping their position, size, fill, stroke colour, dashed outlines, font size and label. Labels written with draw.io's rich-text formatting are converted to plain text with their line breaks intact. Children of a container or swimlane are placed at their true position on the page, since draw.io stores them relative to their parent.
Connectors become arrows that stay bound to the shapes at each end, so moving a box drags its arrows with it. Waypoints you added by hand are kept, orthogonal (right-angled) connectors are routed with right angles, and arrowheads map to their closest match — including the crow's-foot ends used in entity-relationship diagrams. Connector labels travel with the arrow.
Stencil and icon shapes are the honest limit. AWS, Azure, GCP and Cisco icons, cylinders, clouds, UML actors and embedded images are drawn with shape libraries that have no editable equivalent on an Excalidraw-style canvas. They are converted to a dashed, labelled box of the same size in the same place — named after the icon if it had no label — and the viewer tells you how many shapes on the page were simplified. The layout and every connection survive; the artwork does not.
Why open it here instead of in draw.io
If you have draw.io and want to keep editing in draw.io, use draw.io — it is excellent and free. This tool is for the other cases: a diagram attached to an email or a ticket that you just need to read, a machine where you can't install the desktop app, a `.drawio.png` in a repository that you want to rework, or a diagram you want to move onto a freeform canvas next to the notes it belongs with.
Converting to an infinite canvas also changes what the diagram is for. draw.io is built for precise, finished diagrams. A canvas is built for thinking around them — sticking notes beside a box, sketching an alternative next to the original, linking the architecture diagram to the meeting where it was decided. OmniCanvas keeps the converted diagram fully editable, so it can keep evolving there.