Open and edit .drawio files online
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
Open any `.drawio` file from your disk, edit it visually, and save it back. No account, and the file is never uploaded. The editor reads and writes the same XML format draw.io / diagrams.net uses, so you can hand the resulting file to a teammate using either tool and the diagram comes out identical.
What's editable: 16 native shapes covering general flowchart and architecture needs, namely rectangle, rounded rectangle, ellipse, rhombus (decision), triangle, hexagon, parallelogram, cylinder (database), cloud, document, sticky note, callout, process, trapezoid, plain text, and swimlane container, plus image upload for embedded logos. Edges connect any two shapes with three routing styles (straight, orthogonal, curved) and the five standard arrow heads (none, classic, open, oval, diamond). Properties panel on the right lets you edit fill, stroke, stroke width, font size and font colour per shape, plus routing/arrows/dashed/label per edge.
Multi-page like drawio: page tabs at the bottom, click to switch, double-click to rename, right-click for context options. Add and delete pages on the fly.
Round-trip compatibility: shapes outside the native 16 (AWS, Azure, GCP, UML, BPMN, electrical, custom stencils …) are preserved as opaque placeholders. They show up as grey boxes with the original shape name, you can move and delete them, and they re-serialise into the saved file exactly as drawio emitted them. So a teammate can author with the full AWS library on drawio.com, hand you the `.drawio`, you tweak the regular shapes here, save it back, and they can open it again without losing the AWS content.
File System Access API: on Chromium browsers (Chrome, Edge, Brave, Opera, about 75% of desktop traffic) clicking Open binds the file to disk and Save writes back to that exact file. On Firefox and Safari Save falls back to Download. Either way there is no upload, and the DevTools Network tab confirms zero outbound requests during the entire workflow.
PNG and SVG export with embedded XML: the exported image carries the source XML inside its metadata (PNG tEXt chunk with key `mxfile`, SVG `<defs><mxfile>...</mxfile></defs>`). Hand someone the PNG and they can open it on drawio.com and edit it, because the diagram is in the file, not just a flat picture. This is the same convention drawio uses for its own exports, so the file round-trips both directions.
Generate diagrams with AI: a built-in prompt-guide card on the page provides a copy-ready prompt template for ChatGPT, Claude or Gemini. Describe your system in natural language, paste the prompt into the LLM with your description, get back drawio XML, open it here. The template encodes every rule the model needs (the 16 shape style strings, edge formats, sizing defaults, layout heuristics, the "output only XML" instruction) so generation is one-shot reliable. Markdown fences in the LLM output are stripped automatically on parse.
Import Mermaid flowcharts: the Mermaid… toolbar button accepts `flowchart` / `graph` code (the format ChatGPT and Claude produce by default) and converts it into fully editable shapes on a new page. Node shapes, edge labels and dashed/thick links all map across, and the result is auto-arranged with the built-in layout engine.
Tidy up with one click: the Tidy ↓ / Tidy → buttons run a rank-based auto-layout (dagre) over the current page, which is what you want after a Mermaid import, an AI generation, or any diagram that grew organically.
Share as a link: the Share button compresses the whole diagram into the URL itself (after the #). No server and no expiry: anyone opening the link gets an editable copy.
Compare versions: Compare… loads a second .drawio file and overlays it on the current page, with added elements green, removed red ghosts, changed amber.
Present: fullscreen page-per-slide presentation mode with arrow-key navigation.
Mobile is view-only: editing a diagram on a phone is genuinely worse than no editor. Below 768px the side panels collapse and the canvas becomes read-only (pan, zoom, page-switch still work). Open on a desktop or large tablet to author. If you only need to open a file and read it, the Drawio Viewer on this site is the same tool with the Open button above the fold.
Frequently Asked Questions
Is this compatible with drawio / diagrams.net?
- Yes. The editor reads and writes the same .drawio XML format. Files authored here open in drawio.com, and files authored on drawio.com open here. The compatibility is exercised by a round-trip test suite that parses, re-serialises, and re-parses five fixture files (flowchart, multi-page, swimlane, image-with-data-URL, AWS-shapes) and confirms deep equality.
Can I open existing .drawio files?
- Yes. Click Open in the toolbar, or drop a .drawio / .xml / .svg / .png onto the canvas. The editor parses the XML, sets up your pages, and you start editing. Compressed .drawio files (the deflate+base64 format used by the drawio desktop app and older diagrams.net versions) are decompressed automatically. On Chrome/Edge/Brave/Opera the file is bound to disk via the File System Access API so subsequent Save writes back to the same file; on Firefox / Safari Save falls back to a download.
What shapes are supported natively?
- Sixteen general / flowchart shapes covering the 80% case: Rectangle, Rounded Rectangle, Ellipse, Rhombus (decision), Triangle, Hexagon, Parallelogram, Cylinder (database), Cloud, Document, Sticky Note, Callout, Process, Trapezoid, Text label, Swimlane container. Plus image upload for embedded logos and PNG/JPG/SVG content.
What happens to shapes I don't support (AWS, Azure, UML, BPMN)?
- They load as opaque placeholders (grey boxes showing the original shape name) and their full XML is preserved verbatim in memory. You can move, resize and delete them, and they re-serialise into the saved file exactly as drawio emitted them. So you can hand the file back to drawio.com and the AWS / UML / Azure shapes show up unchanged.
Does it work offline?
- Yes. The editor is a PWA: once you visit it the service worker caches the assets, and the tool works offline on subsequent visits. File reading / writing uses the local File System Access API (Chromium) or `<input type=file>` + download fallback. No network needed once cached.
How does the PNG/SVG embedded XML work?
- When you Export PNG, the editor renders the canvas to a PNG and then injects a tEXt chunk with the keyword `mxfile` containing the diagram's XML. SVG export does the same via a `<defs><mxfile>…</mxfile></defs>` element inside the root `<svg>`. This is the same convention drawio.com uses, so you can hand someone the .png and they can open it on drawio.com and edit the diagram, because the source is inside the image and not just the rendered pixels.
Can I edit a file directly on disk?
- Yes, on Chromium browsers (Chrome, Edge, Brave, Opera). When you Open a file the editor obtains a writable handle via the File System Access API, and Save writes back to the original file on disk. A 📁 "bound to disk" badge in the toolbar shows when this is active. On Firefox and Safari (no FSA support yet) Save falls back to a download.
Why is the editor read-only on mobile?
- Diagram editing with touch is genuinely worse than no editor: handles, snap-to-grid and edge routing all need precision a finger can't provide. Below 768px we collapse the side panels and disable editing, but pan, zoom and page-switch still work so you can view a diagram on the go. Open on a desktop or large tablet to author.
Are my diagrams uploaded anywhere?
- No. The XML parsing, ReactFlow rendering, serialization, and PNG/SVG export all run inside your browser tab. The File System Access API talks directly to your local disk, and no server is involved. Open DevTools, watch the Network tab, and confirm no outbound request fires during the entire workflow.
Can I generate a diagram with ChatGPT / Claude / Gemini?
- Yes. There's a dedicated AI prompt-guide card on the page with a Copy prompt button. The template encodes every rule the model needs (16 shape style strings, edge formats, sizing defaults, layout heuristics, ID conventions, escaping, "output only XML" closing instruction). Paste it into your LLM with a system description, get back .drawio XML, open it here via the toolbar. Markdown code fences in the LLM output are stripped automatically on parse so you don't have to clean them by hand.
What if the AI produces shapes my editor doesn't support?
- They load as opaque placeholders (grey boxes with the original shape name visible) and stay editable for position, deletion and connections, just not the shape's intrinsics. The opaque preservation path means you can take a complex drawio file with AWS / UML / BPMN content, edit the parts the editor understands, and save without losing the rest.
Can I import Mermaid diagrams?
- Yes. Click Mermaid… in the toolbar and paste flowchart / graph code (the format ChatGPT, Claude and Gemini produce by default). Node shapes ([], (), {}, (()), [()], {{}} and friends), edge labels, dashed and thick links all convert to native editable shapes, and the result is auto-arranged on a new page. Sequence and class diagrams are not supported yet.
How do I share a diagram without uploading it anywhere?
- Click Share: the whole diagram is compressed (deflate + base64url) into the link itself, after the #. Anyone opening the link sees an editable copy. Nothing is stored on any server, the link works as long as you keep it, and the hash fragment is never sent to ours.
Can I compare two versions of a diagram?
- Yes. Open one version, click Compare… and pick the other file. Added elements are highlighted green, removed ones appear as red translucent ghosts, changed ones amber, with a count of each in the legend.
Can I rearrange a messy diagram automatically?
- Yes. Tidy ↓ (top-to-bottom) and Tidy → (left-to-right) run a rank-based auto-layout over the current page. Especially useful after importing a Mermaid flowchart or AI-generated XML where positions are rough.
Is it free, and do I need an account?
- It is free and there is no account or payment of any kind. The editor is part of the Internet Tool Box suite and runs entirely in your browser.
Native shapes: drawio mxCell style reference
Every native shape maps to a deterministic drawio mxCell `style=` string. Useful when hand-editing .drawio XML or when prompting an LLM to generate diagrams (the AI guide on this page uses the same table).
| Kind | Use case | mxCell style (base) |
|---|---|---|
| rectangle | Generic block, process step | rounded=0;whiteSpace=wrap;html=1; |
| rounded-rectangle | Soft block, terminal node | rounded=1;whiteSpace=wrap;html=1;arcSize=15; |
| ellipse | Start / End, container, circle | ellipse;whiteSpace=wrap;html=1; |
| rhombus | Decision (yes/no) | rhombus;whiteSpace=wrap;html=1; |
| triangle | Direction marker | triangle;whiteSpace=wrap;html=1;direction=north; |
| hexagon | Preparation step, hop | shape=hexagon;perimeter=hexagonPerimeter2;… |
| parallelogram | Input / Output | shape=parallelogram;perimeter=parallelogramPerimeter;… |
| cylinder | Database, storage | shape=cylinder3;…boundedLbl=1;backgroundOutline=1;size=15; |
| cloud | Cloud service, external system | ellipse;shape=cloud;… |
| document | File, report | shape=document;…boundedLbl=1; |
| note | Sticky note, comment | shape=note;…size=14; |
| callout | Speech / pointer annotation | shape=callout;…perimeter=calloutPerimeter; |
| process | Subroutine, predefined process | shape=process;…backgroundOutline=1; |
| trapezoid | Manual operation | shape=trapezoid;perimeter=trapezoidPerimeter;… |
| text | Plain label, no border | text;html=1;align=center;verticalAlign=middle;resizable=0;points=[]; |
| image | Embedded logo / picture (data URL) | shape=image;html=1;image=data:image/…;base64,…; |
| swimlane | Lane container with header | swimlane;…startSize=20; |
Style suffixes for colour / font (fillColor, strokeColor, fontSize, fontColor, strokeWidth) are appended uniformly to every shape. See the AI prompt guide on this page for the full template with worked examples.