Abre archivos .drawio online
Lee .drawio, .xml y los PNG o SVG exportados con el diagrama incluido. El archivo se queda en tu dispositivo.
Guía del prompt de IA: genera un diagrama con ChatGPT, Claude o Gemini
Describe un sistema con tus palabras, pega el prompt de abajo en tu LLM y te devolverá un archivo XML .drawio que puedes abrir directamente aquí. El prompt incluye todas las reglas que necesita el modelo (estilos de las formas, trazado de los conectores, disposición, escapado), así que el resultado es fiable a la primera.
- Haz clic en Copiar prompt aquí abajo
- Pégalo en ChatGPT / Claude / Gemini y sustituye
<DESCRIBE WHAT YOU WANT HERE>por tu petición - Guarda el XML que te devuelva el modelo como
diagram.drawioy ábrelo aquí con el botón Abrir de la barra de herramientas
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>Cómo funciona
Pulsa Abrir un archivo .drawio, elige el archivo de tu disco y el diagrama aparece en pantalla. No hay cuenta, ni inicio de sesión, ni paso por Google Drive, ni subida: JavaScript lee el archivo en la pestaña de tu navegador, y la pestaña Red se queda vacía desde que lo abres hasta que lo cierras.
Qué abre. Cuatro cosas. .drawio, el XML mxfile que escriben draw.io y diagrams.net. .xml, el mismo contenido con una extensión genérica, que es lo que resultan ser muchas exportaciones y adjuntos de wiki. .png exportado desde draw.io con el diagrama incluido. Y .svg exportado igual. La forma comprimida de .drawio, la carga deflate más base64 que producen la aplicación de escritorio y las versiones antiguas de diagrams.net, se descomprime automáticamente, así que un archivo que en un editor de texto parece un muro de base64 se abre aquí con normalidad.
Cómo funcionan los formatos de imagen. Cuando draw.io exporta un PNG con una copia del diagrama incluida, escribe el XML de origen en un bloque tEXt con la clave mxfile. Esta página lee ese bloque y reconstruye el diagrama editable. Los SVG exportados llevan la misma carga dentro de <defs>. Si la imagen se exportó sin la copia, no hay nada que leer y la página lo dice, en lugar de mostrar una imagen y llamarla diagrama. Abrir desde una imagen nunca vincula el archivo para guardar, porque escribir XML encima de tu PNG lo destruiría.
Qué ves. Las páginas aparecen como pestañas en la parte inferior, así que un archivo con varias páginas se abre con todas y no solo con la primera. Las formas conservan relleno, borde, tamaño y color del texto; los conectores conservan su trazado, sus puntas de flecha, sus guiones y sus etiquetas. Las formas que el editor no implementa de forma nativa, es decir, las bibliotecas de AWS, Azure, GCP, UML, BPMN y los stencils personalizados, se cargan como marcadores grises con el nombre de la forma original, y su XML se conserva intacto, de modo que un archivo que abres y guardas aquí vuelve a un compañero en draw.io con su contenido de AWS sin tocar.
Ver no es lo único que hace. Es el editor completo abierto por su cara de visor. Dieciséis formas nativas (rectángulo, rectángulo redondeado, elipse, rombo, triángulo, hexágono, paralelogramo, cilindro, nube, documento, nota, bocadillo, proceso, trapecio, texto y swimlane), un panel de propiedades para el estilo de cada forma y cada conector, añadir y renombrar páginas, disposición automática con un clic, importación de Mermaid, un modo presentación a pantalla completa y una vista de comparación que superpone un segundo archivo con lo añadido en verde, lo eliminado como siluetas rojas y los cambios en ámbar. Si solo venías a mirar un archivo que te han enviado, ignora todo eso.
Sacar el diagrama de nuevo. Exportar PNG y Exportar SVG incrustan el XML de origen igual que draw.io, así que la imagen que pasas a alguien sigue siendo un diagrama editable para quien la suelte de nuevo en cualquiera de las dos herramientas. Guardar escribe XML .drawio simple. En los navegadores Chromium (Chrome, Edge, Brave, Opera) el archivo que abriste queda vinculado al disco mediante la File System Access API y Guardar escribe directamente en él; en Firefox y Safari, Guardar descarga una copia. Compartir comprime todo el diagrama dentro del propio enlace, después del #, de modo que el enlace es una copia autocontenida, sin servidor detrás y sin fecha de caducidad.
En el teléfono, la página es de solo lectura por debajo de 768 px: los paneles laterales desaparecen y el lienzo conserva el movimiento, el zoom y el cambio de página. Es a propósito. Editar un diagrama con la yema del dedo, con tiradores de unos pocos píxeles y conectores que se ajustan a puntos de anclaje, es peor que no editar. Ver un diagrama que te han enviado, que es a lo que viene la mayoría, funciona bien.
Sin conexión. La página forma parte de una PWA, así que tras visitarla una vez el service worker tiene los archivos en caché y se vuelve a abrir sin red. Un archivo .drawio en un portátil sin cobertura se abre igual.
Si ya sabes que quieres construir o reorganizar un diagrama en lugar de leerlo, el Diagram Editor de este sitio es la misma herramienta con el lienzo primero.
Preguntas frecuentes
¿Cómo abro un archivo .drawio sin cuenta?
- Pulsa Abrir un archivo .drawio en la parte superior de esta página y elígelo de tu disco. No hay inicio de sesión, ni paso por Google Drive, ni subida: el XML se lee en la pestaña de tu navegador y aparece el diagrama. Ese es todo el proceso, y funciona igual en un equipo donde no has iniciado sesión en nada.
¿Se abre aquí un archivo hecho con draw.io o diagrams.net?
- Sí. Esta página lee y escribe el mismo formato XML mxfile, y el viaje de ida y vuelta lo cubre una batería de pruebas que lee, reescribe y vuelve a leer archivos de ejemplo, entre ellos un diagrama de varias páginas, un swimlane, una imagen incrustada y un archivo lleno de formas de AWS. Los archivos creados en drawio.com se abren aquí, y los guardados aquí se abren allí.
¿Cómo abro un .drawio.png o un .drawio.svg?
- Ábrelo igual que un archivo .drawio. Cuando draw.io exporta una imagen con una copia del diagrama incluida, el XML de origen viaja dentro del archivo: un bloque tEXt con la clave mxfile en un PNG, un bloque dentro de <defs> en un SVG. Esta página lee esa carga y reconstruye el diagrama editable, así que obtienes páginas y formas y no una imagen plana.
¿Por qué dice que mi PNG no tiene XML incrustado?
- Porque ese PNG se exportó sin una copia del diagrama, así que son solo píxeles. draw.io tiene una casilla para incluir el diagrama en la exportación, y sin ella no hay nada que leer. Pide a quien te lo envió el archivo .drawio, o un PNG exportado de nuevo con el diagrama incluido.
¿Puede abrir un archivo .drawio comprimido?
- Sí, automáticamente. La aplicación de escritorio de draw.io y las versiones antiguas de diagrams.net guardan el diagrama comprimido con deflate y codificado en base64, por eso el archivo parece una sola cadena ilegible en un editor de texto. La página detecta esa forma y la descomprime antes de leerla, así que tanto la forma comprimida como la simple se abren igual.
¿Qué pasa con las formas de AWS, Azure, UML o BPMN?
- Se cargan como marcadores grises con el nombre de la forma original, y su XML se conserva intacto en memoria. Puedes moverlas, cambiarles el tamaño y eliminarlas, y se escriben de nuevo en el archivo guardado exactamente como las emitió draw.io. Así puedes abrir un diagrama lleno de iconos de AWS, leerlo, ajustar lo que está hecho con formas estándar y devolver el archivo sin que se pierda nada.
¿Puedo editar el archivo aquí o solo verlo?
- Las dos cosas. Es el editor completo con el botón Abrir subido arriba del todo. Dieciséis formas nativas, estilo por forma y por conector, varias páginas, disposición automática, importación de Mermaid, comparación de versiones y modo presentación están en la página. Si solo venías a ver un diagrama, nada de eso estorba.
¿Funciona en el teléfono?
- Para ver, sí. Por debajo de 768 px los paneles laterales desaparecen y el lienzo pasa a solo lectura, pero moverse, hacer zoom y cambiar de página siguen funcionando, así que un diagrama que te han enviado se lee perfectamente. La edición está desactivada a propósito: los tiradores de las formas miden unos pocos píxeles y los anclajes de los conectores piden una precisión que la yema del dedo no da.
¿Se sube el archivo a algún sitio?
- No. La lectura, el dibujo y la exportación ocurren dentro de la pestaña de tu navegador, y en los navegadores Chromium la File System Access API habla directamente con tu disco. Abre las herramientas para desarrolladores, mira la pestaña Red y abre un diagrama: no sale ni una petición. No se guarda nada en un servidor, y por eso tampoco hay nada en lo que iniciar sesión.
¿Cómo saco un PNG o un SVG?
- Usa Exportar PNG o Exportar SVG en la barra de herramientas. Ambos escriben el XML de origen en el archivo exportado como hace draw.io, un bloque tEXt en el PNG y un bloque <defs> en el SVG, de modo que la imagen sigue siendo editable para quien la abra en cualquiera de las dos herramientas. Guardar, por separado, escribe el XML .drawio simple en el disco.
Formatos de archivo de draw.io: qué se abre aquí
Las extensiones que producen draw.io y diagrams.net, qué contiene realmente cada una y si esta página puede leerla.
| Extensión | Qué contiene | ¿Se abre aquí? |
|---|---|---|
| .drawio | XML mxfile, un elemento diagram por página, simple o comprimido con deflate más base64 | Sí, en las dos formas |
| .xml | El mismo XML mxfile con una extensión genérica | Sí |
| .drawio.png o .png | Un PNG que lleva el XML de origen en un bloque tEXt con la clave mxfile | Sí, si la exportación incluyó el diagrama |
| .drawio.svg o .svg | Un SVG que lleva el XML de origen dentro de un bloque defs | Sí, si la exportación incluyó el diagrama |
| .drawio.html | Una página HTML con el diagrama y un script de visor incluido | No, abre el archivo .drawio |
| .vsdx | Un paquete de Visio, que draw.io convierte con un paso en el servidor | No, conviértelo antes en draw.io |
| Biblioteca de formas .xml | Un elemento mxlibrary con stencils reutilizables, no un diagrama | No, no contiene páginas |
| Un .drawio en Google Drive | El mismo XML mxfile, guardado en Drive y no en el disco | Descarga una copia y ábrela |
La clave del bloque tEXt y el envoltorio defs son convenciones propias de draw.io, y por eso una imagen exportada allí se abre aquí y una exportada aquí se abre allí. Un PNG o SVG exportado sin copia del diagrama es solo una imagen: no hay nada que leer en él.