Apri e modifica file .drawio online
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
Apri un file `.drawio` dal tuo disco, modificalo in modo visuale e salvalo. Non serve un account e il file non viene mai caricato. L'editor legge e scrive lo stesso formato XML di draw.io / diagrams.net, quindi puoi passare il file a un collega che usa uno dei due strumenti e il diagramma resta identico.
Cosa puoi modificare. 16 forme native per diagrammi di flusso e schemi di architettura: rettangolo, rettangolo arrotondato, ellisse, rombo (decisione), triangolo, esagono, parallelogramma, cilindro (database), nuvola, documento, nota, fumetto, processo, trapezio, testo semplice e swimlane, più il caricamento di immagini per inserire loghi. I collegamenti uniscono due forme qualsiasi con tre percorsi (dritto, ortogonale, curvo) e cinque punte di freccia (nessuna, classica, aperta, ovale, rombo). Il pannello Proprietà a destra modifica riempimento, bordo, spessore, dimensione e colore del testo di ogni forma, e percorso, frecce, tratteggio ed etichetta di ogni collegamento. Con più forme selezionate puoi allinearle, distribuirle e cambiarne l'ordine di sovrapposizione.
Più pagine, come in draw.io: le schede in basso cambiano pagina con un clic, un doppio clic rinomina, e sulla pagina attiva trovi i pulsanti per duplicarla o eliminarla. Con + Aggiungi pagina ne crei una nuova.
Compatibilità in andata e ritorno. Le forme che non rientrano nelle 16 native (AWS, Azure, GCP, UML, BPMN, schemi elettrici, stencil personalizzati) vengono conservate come segnaposto. Compaiono come riquadri grigi con il nome della forma originale, puoi spostarle ed eliminarle, e al salvataggio tornano nel file esattamente come le aveva scritte draw.io. Un collega può quindi disegnare con tutta la libreria AWS su drawio.com, passarti il `.drawio`, tu sistemi le forme normali qui e lui lo riapre senza perdere nulla.
File System Access API. Sui browser Chromium (Chrome, Edge, Brave, Opera) il file aperto resta collegato al disco e Salva scrive direttamente su quel file. Su Firefox e Safari Salva scarica una copia. In entrambi i casi non c'è nessun caricamento, e la scheda Rete degli strumenti per sviluppatori lo conferma.
Export PNG e SVG con l'XML incluso. L'immagine esportata contiene l'XML del diagramma nei metadati (un chunk tEXt con chiave `mxfile` nel PNG, un blocco `<defs><mxfile>...</mxfile></defs>` nell'SVG). Se passi il PNG a qualcuno, può aprirlo su drawio.com e modificarlo, perché il diagramma è dentro il file e non è solo un'immagine. È la stessa convenzione che usa draw.io, quindi funziona nei due sensi. Per il PNG puoi scegliere la scala (1×, 2× o 3×) e lo sfondo trasparente.
Genera diagrammi con l'AI. Sotto l'editor c'è una guida con un prompt pronto da copiare per ChatGPT, Claude o Gemini. Descrivi il sistema a parole, incolla il prompt con la tua descrizione, ottieni l'XML di draw.io e aprilo qui. Il prompt contiene tutte le regole che servono al modello (gli stili delle 16 forme, il formato dei collegamenti, le dimensioni, i criteri di layout, l'istruzione di restituire solo XML), e i blocchi di codice Markdown nella risposta vengono tolti in automatico.
Importa flowchart Mermaid. Da Inserisci › Flowchart Mermaid… incolli codice `flowchart` o `graph` (il formato che ChatGPT e Claude producono di solito) e lo trasformi in forme modificabili su una nuova pagina. Forme dei nodi, etichette dei collegamenti e linee tratteggiate o spesse vengono convertite, e il risultato viene disposto in automatico.
Riordina con un clic. In Disponi, Riordina ↓ e Riordina → applicano un layout automatico a livelli (dagre) alla pagina corrente: è quello che ti serve dopo un import da Mermaid, un diagramma generato dall'AI o uno cresciuto un pezzo alla volta. Nello stesso menu attivi la griglia e l'aggancio alla griglia da 10 px.
Condividi con un link. Esporta › Copia link di condivisione comprime tutto il diagramma dentro l'URL, dopo il #. Nessun server e nessuna scadenza: chi apre il link ottiene una copia modificabile. I diagrammi molto grandi non ci stanno in un link, e in quel caso lo strumento ti chiede di salvare il file.
Confronta versioni. Revisione › Confronta con un file… carica un secondo .drawio e lo sovrappone alla pagina corrente: elementi aggiunti in verde, rimossi come sagome rosse trasparenti, modificati in giallo ambra.
Presenta. Modalità presentazione a schermo intero, una pagina per slide, con le frecce della tastiera per andare avanti e indietro.
Scorciatoie e bozze. Ctrl+Z e Ctrl+Y annullano e ripetono, Ctrl+S salva, Ctrl+O apre, Ctrl+C, Ctrl+V e Ctrl+D copiano, incollano e duplicano, le frecce spostano la selezione di 1 px (10 con Maiusc). Puoi incollare un'immagine dagli appunti direttamente sulla tela. Le modifiche a un file non collegato al disco vengono salvate come bozza nel browser, e alla visita successiva puoi ripristinarle.
Da telefono è in sola lettura. Modificare un diagramma con le dita è peggio che non poterlo fare. Sotto i 768 px i pannelli laterali spariscono e la tela diventa di sola lettura (spostamento, zoom e cambio pagina funzionano). Per disegnare apri la pagina da un computer o da un tablet grande. Se ti serve solo aprire un file e leggerlo, la pagina Aprire file .drawio online di questo sito è lo stesso strumento con il pulsante Apri in cima alla pagina.
Domande frequenti
È compatibile con draw.io / diagrams.net?
- Sì. L'editor legge e scrive lo stesso formato XML .drawio: i file creati qui si aprono su drawio.com e quelli creati su drawio.com si aprono qui. La compatibilità è verificata da una serie di test che leggono, riscrivono e rileggono cinque file di esempio (diagramma di flusso, più pagine, swimlane, immagine incorporata, forme AWS) e controllano che il risultato sia identico.
Come apro un file .drawio online?
- Da File › Apri… nella barra degli strumenti, oppure trascinando un file .drawio, .xml, .svg o .png sulla tela. L'editor legge l'XML, crea le pagine e puoi iniziare a modificare. I .drawio compressi (il formato deflate + base64 dell'app desktop e delle vecchie versioni di diagrams.net) vengono decompressi in automatico. Su Chrome, Edge, Brave e Opera il file resta collegato al disco, quindi Salva scrive sullo stesso file; su Firefox e Safari Salva scarica una copia.
Quali forme sono supportate?
- Sedici forme native che coprono la gran parte dei diagrammi di flusso: rettangolo, rettangolo arrotondato, ellisse, rombo (decisione), triangolo, esagono, parallelogramma, cilindro (database), nuvola, documento, nota, fumetto, processo, trapezio, testo e swimlane. In più puoi caricare immagini PNG, JPG o SVG, per esempio un logo.
Cosa succede alle forme AWS, Azure, UML o BPMN?
- Vengono caricate come segnaposto (riquadri grigi con il nome della forma originale) e il loro XML viene conservato identico. Puoi spostarle, ridimensionarle ed eliminarle, e al salvataggio tornano nel file esattamente come le aveva scritte draw.io. Puoi quindi restituire il file a chi usa drawio.com e le forme AWS, UML o Azure ricompaiono intatte.
Funziona offline?
- Sì. L'editor fa parte di una PWA: dopo la prima visita il service worker tiene in cache i file dell'applicazione e lo strumento funziona anche senza connessione. Apertura e salvataggio usano la File System Access API (sui browser Chromium) oppure il normale selettore di file e il download, quindi la rete non serve.
Come funziona l'XML incluso nei PNG e negli SVG?
- Con Esporta PNG l'editor disegna la tela in un PNG e poi aggiunge un chunk tEXt con la parola chiave mxfile che contiene l'XML del diagramma. Esporta SVG fa lo stesso con un elemento <defs><mxfile>…</mxfile></defs> dentro l'<svg>. È la convenzione di drawio.com, quindi chi riceve il PNG può aprirlo lì e modificare il diagramma, perché il sorgente è dentro l'immagine.
Posso generare un diagramma con ChatGPT, Claude o Gemini?
- Sì. Sotto l'editor c'è la guida al prompt AI con il pulsante Copia prompt. Il prompt contiene tutte le regole che servono al modello (gli stili delle 16 forme, il formato dei collegamenti, le dimensioni, i criteri di layout, le convenzioni per gli ID, l'escaping e l'istruzione di restituire solo XML). Incollalo nel tuo LLM con la descrizione del sistema, salva l'XML come .drawio e aprilo qui. I blocchi di codice Markdown nella risposta vengono tolti in automatico.
Posso importare un diagramma Mermaid?
- Sì, i flowchart. Da Inserisci › Flowchart Mermaid… incolli codice flowchart o graph (il formato che ChatGPT, Claude e Gemini producono di solito). Forme dei nodi ([], (), {}, (()), [()], {{}} e simili), etichette dei collegamenti e linee tratteggiate o spesse diventano forme native modificabili, disposte in automatico su una nuova pagina. I diagrammi di sequenza e delle classi non sono ancora supportati.
Come condivido un diagramma senza caricarlo da nessuna parte?
- Con Esporta › Copia link di condivisione: tutto il diagramma viene compresso (deflate + base64url) nel link stesso, dopo il #. Chi apre il link vede una copia modificabile. Niente viene salvato su un server, il link funziona finché lo conservi e la parte dopo il # non viene mai inviata al nostro server.
Posso confrontare due versioni di un diagramma?
- Sì. Apri una versione, scegli Revisione › Confronta con un file… e seleziona l'altra. Gli elementi aggiunti sono evidenziati in verde, quelli rimossi compaiono come sagome rosse trasparenti e quelli modificati in giallo ambra, con il conteggio di ciascun tipo in alto.
Posso riordinare in automatico un diagramma disordinato?
- Sì. In Disponi, Riordina ↓ (dall'alto in basso) e Riordina → (da sinistra a destra) applicano un layout automatico a livelli alla pagina corrente. È utile soprattutto dopo un import da Mermaid o un XML generato dall'AI, dove le posizioni sono approssimative.
Perché da telefono non posso modificare?
- Perché con le dita non si ha la precisione che serve: maniglie, aggancio alla griglia e percorsi dei collegamenti richiedono il mouse. Sotto i 768 px i pannelli laterali spariscono e la modifica è disattivata, ma spostamento, zoom e cambio pagina funzionano, quindi puoi guardare un diagramma anche fuori casa.
I miei diagrammi vengono caricati su un server?
- No. Lettura dell'XML, disegno, salvataggio ed export PNG/SVG avvengono tutti nella scheda del browser, e la File System Access API parla direttamente con il tuo disco. Apri gli strumenti per sviluppatori, guarda la scheda Rete e verifica che durante il lavoro non parta nessuna richiesta.
È gratis? Serve un account?
- È gratis e non serve nessun account né pagamento. L'editor fa parte di Internet Tool Box e funziona interamente nel browser.
Forme native: riferimento degli stili mxCell di draw.io
Ogni forma nativa corrisponde a una stringa `style=` fissa di un mxCell di draw.io. Utile se modifichi l'XML a mano o se chiedi a un LLM di generare diagrammi (la guida AI di questa pagina usa la stessa tabella).
| Tipo | Uso tipico | Stile mxCell (base) |
|---|---|---|
| rectangle | Blocco generico, passo di un processo | rounded=0;whiteSpace=wrap;html=1; |
| rounded-rectangle | Blocco morbido, nodo terminale | rounded=1;whiteSpace=wrap;html=1;arcSize=15; |
| ellipse | Inizio / fine, contenitore, cerchio | ellipse;whiteSpace=wrap;html=1; |
| rhombus | Decisione (sì/no) | rhombus;whiteSpace=wrap;html=1; |
| triangle | Indicatore di direzione | triangle;whiteSpace=wrap;html=1;direction=north; |
| hexagon | Preparazione, passaggio intermedio | shape=hexagon;perimeter=hexagonPerimeter2;… |
| parallelogram | Input / output | shape=parallelogram;perimeter=parallelogramPerimeter;… |
| cylinder | Database, archivio | shape=cylinder3;…boundedLbl=1;backgroundOutline=1;size=15; |
| cloud | Servizio cloud, sistema esterno | ellipse;shape=cloud;… |
| document | File, report | shape=document;…boundedLbl=1; |
| note | Nota adesiva, commento | shape=note;…size=14; |
| callout | Fumetto, annotazione | shape=callout;…perimeter=calloutPerimeter; |
| process | Sottoprocesso, processo predefinito | shape=process;…backgroundOutline=1; |
| trapezoid | Operazione manuale | shape=trapezoid;perimeter=trapezoidPerimeter;… |
| text | Etichetta semplice, senza bordo | text;html=1;align=center;verticalAlign=middle;resizable=0;points=[]; |
| image | Logo o immagine incorporata (data URL) | shape=image;html=1;image=data:image/…;base64,…; |
| swimlane | Corsia con intestazione | swimlane;…startSize=20; |
I suffissi di colore e testo (fillColor, strokeColor, fontSize, fontColor, strokeWidth) vengono aggiunti allo stesso modo a ogni forma. La guida al prompt AI di questa pagina contiene il modello completo con esempi.