Apri file .drawio online
Legge .drawio, .xml e i PNG o SVG esportati con il diagramma incluso. Il file resta sul tuo dispositivo.
Guida al prompt AI: genera un diagramma con ChatGPT, Claude o Gemini
Descrivi un sistema a parole, incolla il prompt qui sotto nel tuo LLM e otterrai un file XML .drawio da aprire direttamente qui. Il prompt contiene tutte le regole che servono al modello (stili delle forme, percorsi dei collegamenti, layout, escaping), così il risultato è affidabile al primo tentativo.
- Clicca Copia prompt qui sotto
- Incollalo in ChatGPT / Claude / Gemini e sostituisci
<DESCRIBE WHAT YOU WANT HERE>con la tua richiesta - Salva l'XML restituito dal modello come
diagram.drawioe aprilo qui con File › Apri… nella barra degli strumenti
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>Come funziona
Premi Apri un file .drawio, scegli il file dal disco e il diagramma compare sullo schermo. Niente account, niente accesso, nessun passaggio da Google Drive e nessun caricamento: il file viene letto da JavaScript nella scheda del browser, e la scheda Rete resta vuota da quando lo apri a quando chiudi la pagina.
Cosa apre. Quattro tipi di file. `.drawio`, l'XML mxfile scritto da draw.io e diagrams.net. `.xml`, lo stesso contenuto con un'estensione generica, che è quello che spesso arriva da export e allegati di wiki. `.png` esportati da draw.io con il diagramma incluso. E `.svg` esportati allo stesso modo. Anche la forma compressa del `.drawio`, cioè il contenuto deflate più base64 prodotto dall'app desktop e dalle vecchie versioni di diagrams.net, viene decompressa in automatico: un file che in un editor di testo sembra un muro di base64 qui si apre normalmente.
Come funzionano i formati immagine. Quando draw.io esporta un PNG con una copia del diagramma, scrive l'XML sorgente in un chunk tEXt con chiave `mxfile`. Questa pagina rilegge quel chunk e ricostruisce il diagramma modificabile. Gli SVG esportati portano lo stesso contenuto dentro `<defs>`. Se l'immagine è stata esportata senza la copia non c'è niente da leggere, e la pagina te lo dice invece di mostrarti una figura spacciandola per un diagramma. Un file aperto da un'immagine non resta mai collegato al disco per il salvataggio, perché scrivere XML sopra il tuo PNG lo distruggerebbe.
Cosa vedi. Le pagine compaiono come schede in basso, quindi un file con più pagine si apre con tutte le pagine e non solo la prima. Le forme mantengono riempimento, bordo, dimensione e colore del testo; i collegamenti mantengono percorso, punte di freccia, tratteggio ed etichette. Le forme che l'editor non gestisce in modo nativo, cioè le librerie AWS, Azure, GCP, UML, BPMN e gli stencil personalizzati, vengono caricate come segnaposto grigi con il nome della forma originale, e il loro XML resta identico: un file aperto e salvato qui torna al collega su draw.io con il contenuto AWS intatto.
Non serve solo a guardare. È l'editor completo, aperto sul lato della visualizzazione. Sedici forme native (rettangolo, rettangolo arrotondato, ellisse, rombo, triangolo, esagono, parallelogramma, cilindro, nuvola, documento, nota, fumetto, processo, trapezio, testo e swimlane), un pannello per lo stile di forme e collegamenti, pagine da aggiungere e rinominare, riordino automatico con un clic, import da Mermaid, una modalità presentazione a schermo intero e un confronto che sovrappone un secondo file con le aggiunte in verde, le rimozioni come sagome rosse e le modifiche in giallo ambra. Se volevi solo guardare un file che ti hanno mandato, puoi ignorare tutto.
Come esportare il diagramma. Esporta PNG ed Esporta SVG includono l'XML sorgente come fa draw.io, quindi l'immagine che mandi resta un diagramma modificabile per chiunque la riapra in uno dei due strumenti. Salva scrive un normale XML `.drawio`. Sui browser Chromium (Chrome, Edge, Brave, Opera) il file aperto resta collegato al disco tramite la File System Access API e Salva scrive direttamente su quel file; su Firefox e Safari Salva scarica una copia. Copia link di condivisione comprime tutto il diagramma nel link, dopo il `#`, quindi il link è una copia autonoma, senza un server dietro e senza scadenza.
Da telefono la pagina è in sola lettura sotto i 768 px: i pannelli laterali spariscono e sulla tela restano spostamento, zoom e cambio pagina. È una scelta voluta: modificare un diagramma con la punta del dito, con maniglie di pochi pixel e collegamenti che si agganciano a punti precisi, è peggio che non poterlo fare. Guardare un diagramma che ti hanno mandato, che è il motivo per cui arriva qui la maggior parte delle persone, funziona bene.
Offline. La pagina fa parte di una PWA: dopo la prima visita il service worker tiene in cache i file e la pagina si riapre anche senza connessione. Un `.drawio` su un portatile senza rete si apre lo stesso.
Se sai già che vuoi creare o ristrutturare un diagramma invece di leggerlo, l'editor draw.io online di questo sito è lo stesso strumento con la tela in primo piano.
Domande frequenti
Come apro un file .drawio senza account?
- Premi Apri un file .drawio in cima a questa pagina e scegli il file dal disco. Niente accesso, nessun passaggio da Google Drive e nessun caricamento: l'XML viene letto nella scheda del browser e il diagramma compare. È tutto qui, e funziona allo stesso modo su un computer dove non hai fatto l'accesso a nessun servizio.
Un file creato con draw.io o diagrams.net si apre qui?
- Sì. Questa pagina legge e scrive lo stesso formato XML mxfile, e l'andata e ritorno è verificata da test che leggono, riscrivono e rileggono file di esempio, tra cui un diagramma su più pagine, una swimlane, un'immagine incorporata e un file pieno di forme AWS. I file creati su drawio.com si aprono qui, e quelli salvati qui si aprono là.
Come apro un .drawio.png o un .drawio.svg?
- Allo stesso modo di un file .drawio. Quando draw.io esporta un'immagine con una copia del diagramma, l'XML sorgente viaggia dentro il file: un chunk tEXt con chiave mxfile nel PNG, un blocco dentro <defs> nell'SVG. Questa pagina legge quel contenuto e ricostruisce il diagramma modificabile, quindi ottieni pagine e forme e non un'immagine piatta.
Perché dice che il mio PNG non contiene l'XML?
- Perché quel PNG è stato esportato senza una copia del diagramma, quindi contiene solo pixel. In draw.io c'è una casella per includere il diagramma nell'export, e senza di essa non c'è niente da rileggere. Chiedi a chi te l'ha mandato il file .drawio, oppure un PNG esportato di nuovo con il diagramma incluso.
Si può aprire un file .drawio compresso?
- Sì, in automatico. L'app desktop di draw.io e le vecchie versioni di diagrams.net salvano il diagramma compresso con deflate e codificato in base64, ed è per questo che in un editor di testo il file sembra una lunga stringa illeggibile. La pagina riconosce questa forma e la decomprime prima di leggerla, quindi la versione compressa e quella normale si aprono allo stesso modo.
Cosa succede alle forme AWS, Azure, UML o BPMN?
- Vengono caricate come segnaposto grigi con il nome della forma originale, e il loro XML resta identico in memoria. Puoi spostarle, ridimensionarle ed eliminarle, e al salvataggio tornano nel file esattamente come le aveva scritte draw.io. Puoi quindi aprire un diagramma pieno di icone AWS, leggerlo, sistemare le parti fatte con le forme standard e restituire il file senza perdere nulla.
Posso modificare il file qui o solo guardarlo?
- Tutte e due le cose. È l'editor completo con il pulsante Apri spostato in cima alla pagina. Sedici forme native, stile di forme e collegamenti, più pagine, riordino automatico, import da Mermaid, confronto tra versioni e modalità presentazione sono tutti qui. Se volevi solo guardare un diagramma, non ti intralciano.
Funziona da telefono?
- Per guardare sì. Sotto i 768 px i pannelli laterali spariscono e la tela diventa di sola lettura, ma spostamento, zoom e cambio pagina funzionano, quindi un diagramma che ti hanno mandato si legge bene. La modifica è disattivata di proposito: le maniglie delle forme sono larghe pochi pixel e i punti di aggancio dei collegamenti richiedono una precisione che un dito non ha.
Il file viene caricato da qualche parte?
- No. Lettura, visualizzazione ed export avvengono tutti nella scheda del browser, e sui browser Chromium la File System Access API parla direttamente con il tuo disco. Apri gli strumenti per sviluppatori, guarda la scheda Rete e apri un diagramma: non parte nessuna richiesta. Niente viene salvato su un server, ed è anche per questo che non c'è nessun account da creare.
Come ottengo un PNG o un SVG del diagramma?
- Dal menu Esporta, con Esporta PNG o Esporta SVG. Entrambi scrivono l'XML sorgente nel file esportato come fa draw.io (un chunk tEXt per il PNG, un blocco <defs> per l'SVG), quindi l'immagine resta modificabile per chiunque la apra in uno dei due strumenti. Salva, invece, scrive sul disco il normale XML .drawio.
Formati di file di draw.io: cosa si apre qui
Le estensioni prodotte da draw.io e diagrams.net, cosa contiene davvero ciascuna e se questa pagina può leggerla.
| Estensione | Cosa contiene | Si apre qui? |
|---|---|---|
| .drawio | XML mxfile, un elemento diagram per pagina, normale o compresso con deflate più base64 | Sì, in entrambe le forme |
| .xml | Lo stesso XML mxfile con un'estensione generica | Sì |
| .drawio.png o .png | Un PNG con l'XML sorgente in un chunk tEXt con chiave mxfile | Sì, se l'export includeva il diagramma |
| .drawio.svg o .svg | Un SVG con l'XML sorgente dentro un blocco defs | Sì, se l'export includeva il diagramma |
| .drawio.html | Una pagina HTML con il diagramma e uno script di visualizzazione | No, apri il file .drawio |
| .vsdx | Un file di Visio, che draw.io converte con un passaggio lato server | No, convertilo prima in draw.io |
| Libreria di forme .xml | Un elemento mxlibrary con stencil riutilizzabili, non un diagramma | No, non contiene pagine |
| Un .drawio su Google Drive | Lo stesso XML mxfile, ma su Drive invece che sul disco | Scaricane prima una copia, poi aprila |
La chiave del chunk tEXt e il blocco defs sono convenzioni di draw.io, ed è per questo che un'immagine esportata là si apre qui e una esportata qui si apre là. Un PNG o un SVG esportato senza una copia del diagramma è solo un'immagine: non c'è niente da rileggere.