Open .drawio files online
Reads .drawio, .xml, and PNG or SVG exported with the diagram inside. The file stays on your device.
AI prompt guide — generate a diagram with ChatGPT, Claude or Gemini
Describe a system in natural language, paste the prompt below into your LLM, and it returns a .drawio XML file you can open here directly. The prompt encodes every rule the model needs (shape styles, edge routing, layout, escaping) so output is one-shot reliable.
- Click Copy prompt below
- Paste it into ChatGPT / Claude / Gemini and replace
<DESCRIBE WHAT YOU WANT HERE>with your request - Save the LLM's XML output as
diagram.drawioand open it here via the toolbar's Open button
You are generating a .drawio XML diagram file. Follow these rules strictly.
1. ROOT STRUCTURE
Output a single .drawio XML file with exactly this skeleton:
<mxfile>
<diagram name="Page-1" id="page1">
<mxGraphModel dx="800" dy="600" grid="1" gridSize="10" guides="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- shape and edge cells go here -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
2. SHAPE CELLS
Every shape is an <mxCell> with: id (unique string), value (text label), style (from the allowed list), vertex="1", parent="1", and a child <mxGeometry x="..." y="..." width="..." height="..." as="geometry"/>.
Allowed shape style strings - use EXACTLY one of these as the base of the style attribute:
- Rectangle: rounded=0;whiteSpace=wrap;html=1;
- Rounded rectangle: rounded=1;whiteSpace=wrap;html=1;arcSize=15;
- Ellipse: ellipse;whiteSpace=wrap;html=1;
- Rhombus: rhombus;whiteSpace=wrap;html=1;
- Triangle: triangle;whiteSpace=wrap;html=1;direction=north;
- Hexagon: shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;
- Parallelogram: shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;
- Cylinder (db): shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;
- Cloud: ellipse;shape=cloud;whiteSpace=wrap;html=1;
- Document: shape=document;whiteSpace=wrap;html=1;boundedLbl=1;
- Note (sticky): shape=note;whiteSpace=wrap;html=1;size=14;
- Callout: shape=callout;whiteSpace=wrap;html=1;perimeter=calloutPerimeter;
- Process: shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;
- Trapezoid: shape=trapezoid;perimeter=trapezoidPerimeter;whiteSpace=wrap;html=1;
- Text label: text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];
- Swimlane: swimlane;whiteSpace=wrap;html=1;startSize=20;
Append colour and font attributes to the style. Example complete style:
rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;fontColor=#212529;strokeWidth=1;
3. EDGE CELLS
Connect shapes with: <mxCell id="..." edge="1" parent="1" source="<sourceId>" target="<targetId>" style="..." value="<label or empty>"><mxGeometry relative="1" as="geometry"/></mxCell>
Allowed edge styles:
- Orthogonal (default for flowcharts): edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;
- Straight: edgeStyle=none;html=1;
- Curved: curved=1;edgeStyle=orthogonalEdgeStyle;html=1;
Append arrow heads: startArrow=none;endArrow=classic;
For a dashed edge add: dashed=1;
4. SIZING (use these defaults unless content demands more)
- Rectangle / process: 120 x 60
- Ellipse: 120 x 60 (use 80 x 80 for circles)
- Rhombus / decision: 120 x 80
- Cylinder / database: 60 x 80
- Text label: 80 x 30
- Swimlane (vertical): 200 x 400
- Swimlane (horizontal): 400 x 200
5. LAYOUT
- Origin is top-left. x increases rightward, y increases downward.
- Leave at least 40 px of empty space between adjacent shapes.
- Flowcharts: prefer top-down vertical flow; edges go downward.
- Architecture / system diagrams: prefer left-right horizontal flow.
- Never let shapes overlap.
- If using a swimlane, place child shapes inside its bounding box.
6. IDS
- Shape IDs are strings of ascending integers starting from "2" ("0" and "1" are reserved).
- Edge IDs continue the sequence after the last shape ID.
- Every edge's source and target must point to an existing shape id.
7. ESCAPING
- In the value attribute (the label), encode &, <, >, " as & < > ".
- Style values must not be quoted. Separate key=value pairs with ;.
8. OUTPUT
Output ONLY the XML, starting with <mxfile> and ending with </mxfile>. No commentary. No markdown fences. No prose before or after.
---
Now generate a .drawio diagram for: <DESCRIBE WHAT YOU WANT HERE>How it works
Press Open a .drawio file, pick the file off your disk, and the diagram is on screen. There is no account, no sign-in, no Google Drive step and no upload: the file is read by JavaScript in your browser tab, and the Network tab stays empty from the moment you open it to the moment you close it.
What it opens. Four things. `.drawio`, the mxfile XML that draw.io and diagrams.net write. `.xml`, the same content under a generic extension, which is what a lot of exports and wiki attachments turn out to be. `.png` exported from draw.io with the diagram included. And `.svg` exported the same way. The compressed form of `.drawio`, the deflate plus base64 payload the desktop app and older diagrams.net versions produce, is decompressed automatically, so a file that looks like a wall of base64 in a text editor opens normally here.
How the image formats work. When draw.io exports a PNG with a copy of the diagram included, it writes the source XML into a tEXt chunk keyed `mxfile`. This page reads that chunk back out and rebuilds the editable diagram from it. SVG exports carry the same payload inside `<defs>`. If the image was exported without the copy there is nothing to read, and the page says so rather than showing a picture and calling it a diagram. Opening from an image never binds the file for saving, because writing XML back over your PNG would destroy it.
What you see. Pages appear as tabs along the bottom, so a multi-page file opens with all of its pages rather than just the first. Shapes keep their fill, stroke, font size and font colour; edges keep their routing style, arrow heads, dashes and labels. Shapes the editor does not implement natively, meaning the AWS, Azure, GCP, UML, BPMN and custom stencil libraries, load as grey placeholders labelled with the original shape name, and their XML is preserved verbatim, so a file you open and save here goes back to a colleague on draw.io with its AWS content intact.
Viewing is not all it does. This is the full editor opened on its viewing face. Sixteen native shapes (rectangle, rounded rectangle, ellipse, rhombus, triangle, hexagon, parallelogram, cylinder, cloud, document, sticky note, callout, process, trapezoid, text and swimlane), a properties panel for per-shape and per-edge styling, multi-page add and rename, one-click auto-layout, Mermaid import, a fullscreen presentation mode, and a compare view that overlays a second file with additions in green, deletions as red ghosts and changes in amber. If you only came to look at a file someone sent you, ignore all of it.
Getting the diagram back out. Export PNG and Export SVG both embed the source XML the way draw.io does, so the image you hand someone is still an editable diagram to anyone who drops it back into either tool. Save writes plain `.drawio` XML. On Chromium browsers (Chrome, Edge, Brave, Opera) the file you opened is bound to disk through the File System Access API and Save writes straight back to it; on Firefox and Safari, Save falls back to a download. Share compresses the whole diagram into the link itself, after the `#`, so the link is a self-contained copy with no server behind it and no expiry date.
On a phone, the page is read-only below 768 px: the side panels collapse and the canvas keeps pan, zoom and page switching. That is deliberate. Editing a diagram with a fingertip, where handles are a few pixels across and edges snap to anchor points, is worse than not editing at all. Viewing a diagram someone sent you, which is why most people arrive here, works fine.
Offline. The page is part of a PWA, so once you have visited it the service worker has the assets cached and it opens again without a network connection. A `.drawio` file on a laptop with no signal still opens.
If you already know you want to build or restructure a diagram rather than read one, the Diagram Editor on this site is the same tool with the canvas first.
Frequently Asked Questions
How do I open a .drawio file without an account?
- Press Open a .drawio file at the top of this page and pick it off your disk. There is no sign-in, no Google Drive step and no upload: the XML is parsed in your browser tab and the diagram appears. That is the whole flow, and it works the same on a machine where you are not logged in to anything.
Will a file made in draw.io or diagrams.net open here?
- Yes. This page reads and writes the same mxfile XML format, and the round trip is covered by a test suite that parses, re-serialises and re-parses fixture files including a multi-page diagram, a swimlane, an embedded image and a file full of AWS shapes. Files authored on drawio.com open here, and files saved here open there.
How do I open a .drawio.png or .drawio.svg?
- Open it the same way as a .drawio file. When draw.io exports an image with a copy of the diagram included, the source XML rides along inside the file: a tEXt chunk keyed mxfile in a PNG, a block inside <defs> in an SVG. This page reads that payload and rebuilds the editable diagram, so you get pages and shapes rather than a flat picture.
Why does it say my PNG has no embedded XML?
- Because that PNG was exported without a copy of the diagram, so it is only pixels. draw.io has a checkbox for including the diagram in the export, and without it there is nothing to read back. Go back to whoever sent it and ask for the .drawio file, or for a PNG re-exported with the diagram included.
Can it open a compressed .drawio file?
- Yes, automatically. The draw.io desktop app and older diagrams.net versions store the diagram deflate-compressed and base64-encoded, which is why the file looks like one long unreadable string in a text editor. The page detects that form and decompresses it before parsing, so both the compressed and the plain form open the same way.
What happens to AWS, Azure, UML or BPMN shapes?
- They load as grey placeholders showing the original shape name, and their XML is kept verbatim in memory. You can move, resize and delete them, and they are written back into the saved file exactly as draw.io emitted them. So you can open a diagram full of AWS icons, read it, adjust the parts built from standard shapes, and hand the file back without anything being lost.
Can I edit the file here, or only view it?
- Both. This is the full editor with the Open button moved above the fold. Sixteen native shapes, per-shape and per-edge styling, multiple pages, auto-layout, Mermaid import, version compare and a presentation mode are all on the page. If you only came to look at a diagram, none of it gets in the way.
Does it work on a phone?
- For viewing, yes. Below 768 px the side panels collapse and the canvas becomes read-only, but pan, zoom and page switching still work, so a diagram someone sent you is perfectly readable. Editing is disabled on purpose: shape handles are a few pixels across and edge anchors need precision a fingertip cannot give.
Is the file uploaded anywhere?
- No. Parsing, rendering and export all run inside your browser tab, and on Chromium browsers the File System Access API talks straight to your local disk. Open DevTools, watch the Network tab, and open a diagram: not one outbound request fires. Nothing is stored on a server, which is also why there is nothing to sign in to.
How do I get a PNG or an SVG out of it?
- Use Export PNG or Export SVG in the toolbar. Both write the source XML into the exported file the way draw.io does, a tEXt chunk for PNG and a <defs> block for SVG, so the image stays editable for anyone who opens it in either tool. Save, separately, writes the plain .drawio XML back to disk.
draw.io file formats: what opens here
The extensions draw.io and diagrams.net produce, what each one actually contains, and whether this page can read it.
| Extension | What it holds | Opens here? |
|---|---|---|
| .drawio | mxfile XML, one diagram element per page, plain or deflate plus base64 compressed | Yes, either form |
| .xml | The same mxfile XML under a generic extension | Yes |
| .drawio.png or .png | A rendered PNG carrying the source XML in a tEXt chunk keyed mxfile | Yes, when the export included the diagram |
| .drawio.svg or .svg | A rendered SVG carrying the source XML inside a defs block | Yes, when the export included the diagram |
| .drawio.html | An HTML page with the diagram plus a bundled viewer script | No, open the .drawio file instead |
| .vsdx | A Visio package, which draw.io converts with a server-side step | No, convert it in draw.io first |
| Shape library .xml | An mxlibrary element holding reusable stencils, not a diagram | No, it contains no pages |
| A .drawio in Google Drive | The same mxfile XML, held in Drive rather than on disk | Download a copy first, then open it |
The tEXt chunk keyword and the defs wrapper are draw.io's own conventions, which is why an image exported there opens here and an image exported here opens there. A PNG or SVG exported without a copy of the diagram is only a picture: there is nothing to read back out of it.