Abre y edita archivos .drawio online
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
Abre un archivo .drawio de tu disco, edítalo de forma visual y guárdalo. No hace falta cuenta y el archivo nunca se sube. El editor lee y escribe el mismo formato XML que draw.io / diagrams.net, así que puedes pasar el archivo a un compañero que use cualquiera de las dos herramientas y el diagrama queda idéntico.
Qué puedes editar. 16 formas nativas para diagramas de flujo y esquemas de arquitectura: rectángulo, rectángulo redondeado, elipse, rombo (decisión), triángulo, hexágono, paralelogramo, cilindro (base de datos), nube, documento, nota, bocadillo, proceso, trapecio, texto sin borde y swimlane, además de subir imágenes para insertar logotipos. Los conectores unen dos formas cualesquiera con tres trazados (recto, ortogonal, curvo) y cinco puntas de flecha (ninguna, clásica, abierta, ovalada, rombo). El panel de propiedades de la derecha edita relleno, borde, grosor, tamaño y color del texto de cada forma, y trazado, flechas, discontinuo y etiqueta de cada conector. Con varias formas seleccionadas puedes alinearlas, distribuirlas y cambiar su orden de apilamiento.
Varias páginas, como en draw.io: las pestañas de abajo cambian de página con un clic, un doble clic la renombra, y en la página activa tienes los botones para duplicarla o eliminarla. Con + Añadir página creas una nueva.
Compatibilidad de ida y vuelta. Las formas que no están entre las 16 nativas (AWS, Azure, GCP, UML, BPMN, esquemas eléctricos, stencils personalizados) se conservan como marcadores. Aparecen como recuadros grises con el nombre de la forma original, puedes moverlas y eliminarlas, y al guardar vuelven al archivo exactamente como las escribió draw.io. Así, un compañero puede dibujar con toda la biblioteca de AWS en drawio.com, pasarte el .drawio, tú ajustas las formas normales aquí y él lo vuelve a abrir sin perder nada.
File System Access API. En los navegadores Chromium (Chrome, Edge, Brave, Opera) el archivo abierto queda vinculado al disco y Guardar escribe directamente en él. En Firefox y Safari, Guardar descarga una copia. En ambos casos no se sube nada, y la pestaña Red de las herramientas para desarrolladores lo confirma.
Exportación a PNG y SVG con el XML incluido. La imagen exportada lleva el XML del diagrama en sus metadatos (un bloque tEXt con la clave mxfile en el PNG, un bloque <defs><mxfile>...</mxfile></defs> en el SVG). Si pasas el PNG a alguien, puede abrirlo en drawio.com y editarlo, porque el diagrama va dentro del archivo y no es solo una imagen. Es la misma convención que usa draw.io, así que funciona en los dos sentidos. Para el PNG puedes elegir la escala (1×, 2× o 3×) y el fondo transparente.
Genera diagramas con IA. Bajo el editor hay una guía con un prompt listo para copiar en ChatGPT, Claude o Gemini. Describe el sistema con tus palabras, pega el prompt con tu descripción, obtén el XML de draw.io y ábrelo aquí. El prompt incluye todas las reglas que necesita el modelo (los estilos de las 16 formas, el formato de los conectores, los tamaños, los criterios de disposición y la instrucción de devolver solo XML), y los bloques de código Markdown de la respuesta se quitan automáticamente.
Importa flowcharts de Mermaid. Desde Insertar › Flowchart de Mermaid… pegas código flowchart o graph (el formato que suelen producir ChatGPT y Claude) y lo conviertes en formas editables en una página nueva. Las formas de los nodos, las etiquetas de los conectores y las líneas discontinuas o gruesas se convierten, y el resultado se organiza automáticamente.
Ordena con un clic. En Organizar, Ordenar ↓ y Ordenar → aplican una disposición automática por niveles (dagre) a la página actual: es lo que necesitas después de importar desde Mermaid, de generar un diagrama con IA o de que uno haya ido creciendo poco a poco. En el mismo menú activas la cuadrícula y el ajuste a la cuadrícula de 10 px.
Comparte con un enlace. Exportar › Copiar enlace para compartir comprime todo el diagrama dentro de la URL, después del #. Sin servidor y sin caducidad: quien abre el enlace obtiene una copia editable. Los diagramas muy grandes no caben en un enlace, y en ese caso la herramienta te pide que guardes el archivo.
Compara versiones. Revisión › Comparar con un archivo… carga un segundo .drawio y lo superpone a la página actual: los elementos añadidos en verde, los eliminados como siluetas rojas translúcidas y los modificados en ámbar.
Presenta. Modo presentación a pantalla completa, una página por diapositiva, con las flechas del teclado para avanzar y retroceder.
Atajos y borradores. Ctrl+Z y Ctrl+Y deshacen y rehacen, Ctrl+S guarda, Ctrl+O abre, Ctrl+C, Ctrl+V y Ctrl+D copian, pegan y duplican, y las flechas mueven la selección 1 px (10 con Mayús). Puedes pegar una imagen del portapapeles directamente en el lienzo. Los cambios en un archivo no vinculado al disco se guardan como borrador en el navegador, y en la siguiente visita puedes restaurarlos.
En el teléfono es de solo lectura. Editar un diagrama con los dedos es peor que no poder hacerlo. Por debajo de 768 px los paneles laterales desaparecen y el lienzo pasa a solo lectura (moverse, hacer zoom y cambiar de página funcionan). Para dibujar, abre la página desde un ordenador o una tableta grande. Si solo necesitas abrir un archivo y leerlo, la página Abrir archivos .drawio online de este sitio es la misma herramienta con el botón Abrir arriba del todo.
Preguntas frecuentes
¿Es compatible con draw.io / diagrams.net?
- Sí. El editor lee y escribe el mismo formato XML .drawio: los archivos creados aquí se abren en drawio.com y los creados en drawio.com se abren aquí. La compatibilidad la comprueba una batería de pruebas que lee, reescribe y vuelve a leer cinco archivos de ejemplo (diagrama de flujo, varias páginas, swimlane, imagen incrustada, formas de AWS) y verifica que el resultado sea idéntico.
¿Cómo abro un archivo .drawio online?
- Con Abrir… en la barra de herramientas, o arrastrando un archivo .drawio, .xml, .svg o .png al lienzo. El editor lee el XML, crea las páginas y ya puedes editar. Los .drawio comprimidos (el formato deflate + base64 de la aplicación de escritorio y de las versiones antiguas de diagrams.net) se descomprimen automáticamente. En Chrome, Edge, Brave y Opera el archivo queda vinculado al disco, así que Guardar escribe en el mismo archivo; en Firefox y Safari, Guardar descarga una copia.
¿Qué formas admite de forma nativa?
- Dieciséis formas generales y de diagramas de flujo, que cubren la mayoría de los casos: rectángulo, rectángulo redondeado, elipse, rombo (decisión), triángulo, hexágono, paralelogramo, cilindro (base de datos), nube, documento, nota, bocadillo, proceso, trapecio, texto y swimlane. Además puedes subir imágenes PNG, JPG o SVG, por ejemplo un logotipo.
¿Qué pasa con las formas de AWS, Azure, UML o BPMN?
- Se cargan como marcadores (recuadros grises con el nombre de la forma original) y su XML se conserva idéntico. Puedes moverlas, cambiarles el tamaño y eliminarlas, y al guardar vuelven al archivo exactamente como las escribió draw.io. Así puedes devolver el archivo a quien use drawio.com y las formas de AWS, UML o Azure reaparecen intactas.
¿Funciona sin conexión?
- Sí. El editor forma parte de una PWA: tras la primera visita el service worker guarda los archivos de la aplicación en caché y la herramienta funciona también sin conexión. Abrir y guardar usan la File System Access API (en los navegadores Chromium) o el selector de archivos normal y la descarga, así que no se necesita red.
¿Cómo funciona el XML incluido en los PNG y los SVG?
- Con Exportar PNG el editor dibuja el lienzo en un PNG y añade un bloque tEXt con la palabra clave mxfile que contiene el XML del diagrama. Exportar SVG hace lo mismo con un elemento <defs><mxfile>…</mxfile></defs> dentro del <svg>. Es la convención de drawio.com, así que quien reciba el PNG puede abrirlo allí y editar el diagrama, porque el origen va dentro de la imagen y no solo los píxeles.
¿Puedo editar un archivo directamente en el disco?
- Sí, en los navegadores Chromium (Chrome, Edge, Brave, Opera). Al abrir un archivo, el editor obtiene un acceso de escritura mediante la File System Access API y Guardar escribe en el archivo original del disco. Una insignia “vinculado al disco” en la barra de herramientas indica que está activo. En Firefox y Safari, que aún no lo admiten, Guardar descarga una copia.
¿Por qué no puedo editar desde el teléfono?
- Porque con los dedos no hay la precisión que hace falta: los tiradores, el ajuste a la cuadrícula y el trazado de los conectores piden un ratón. Por debajo de 768 px los paneles laterales desaparecen y la edición se desactiva, pero moverse, hacer zoom y cambiar de página siguen funcionando, así que puedes ver un diagrama también fuera de casa.
¿Mis diagramas se suben a algún servidor?
- No. La lectura del XML, el dibujo, el guardado y la exportación a PNG y SVG ocurren en la pestaña del navegador, y la File System Access API habla directamente con tu disco. Abre las herramientas para desarrolladores, mira la pestaña Red y comprueba que mientras trabajas no sale ninguna petición.
¿Puedo generar un diagrama con ChatGPT, Claude o Gemini?
- Sí. Bajo el editor está la guía del prompt de IA con el botón Copiar prompt. El prompt incluye todas las reglas que necesita el modelo (los estilos de las 16 formas, el formato de los conectores, los tamaños, los criterios de disposición, las convenciones de los ID, el escapado y la instrucción de devolver solo XML). Pégalo en tu LLM con la descripción del sistema, guarda el XML como .drawio y ábrelo aquí. Los bloques de código Markdown de la respuesta se quitan solos al leerlo.
¿Qué pasa si la IA genera formas que el editor no admite?
- Se cargan como marcadores (recuadros grises con el nombre de la forma original) y siguen siendo editables en posición, eliminación y conexiones, aunque no en lo propio de la forma. Así puedes tomar un archivo drawio complejo con contenido de AWS, UML o BPMN, editar lo que el editor entiende y guardar sin perder el resto.
¿Puedo importar diagramas de Mermaid?
- Sí, los flowcharts. Desde Insertar › Flowchart de Mermaid… pegas código flowchart o graph (el formato que suelen producir ChatGPT, Claude y Gemini). Las formas de los nodos ([], (), {}, (()), [()], {{}} y similares), las etiquetas de los conectores y las líneas discontinuas o gruesas se convierten en formas nativas editables, organizadas automáticamente en una página nueva. Los diagramas de secuencia y de clases aún no se admiten.
¿Cómo comparto un diagrama sin subirlo a ningún sitio?
- Con Exportar › Copiar enlace para compartir: todo el diagrama se comprime (deflate + base64url) dentro del propio enlace, después del #. Quien abre el enlace ve una copia editable. No se guarda nada en ningún servidor, el enlace funciona mientras lo conserves y la parte posterior al # nunca se envía a nuestro servidor.
¿Puedo comparar dos versiones de un diagrama?
- Sí. Abre una versión, elige Revisión › Comparar con un archivo… y selecciona la otra. Los elementos añadidos se resaltan en verde, los eliminados aparecen como siluetas rojas translúcidas y los modificados en ámbar, con el recuento de cada tipo en la leyenda.
¿Puedo reordenar automáticamente un diagrama desordenado?
- Sí. En Organizar, Ordenar ↓ (de arriba abajo) y Ordenar → (de izquierda a derecha) aplican una disposición automática por niveles a la página actual. Es útil sobre todo tras importar un flowchart de Mermaid o un XML generado por IA, donde las posiciones son aproximadas.
¿Es gratis? ¿Necesito una cuenta?
- Es gratis y no hace falta ninguna cuenta ni pago. El editor forma parte de Internet Tool Box y funciona por completo en el navegador.
Formas nativas: referencia de estilos mxCell de draw.io
Cada forma nativa corresponde a una cadena style= fija de un mxCell de draw.io. Útil si editas el XML a mano o si le pides a un LLM que genere diagramas (la guía de IA de esta página usa la misma tabla).
| Tipo | Uso típico | Estilo mxCell (base) |
|---|---|---|
| rectangle | Bloque genérico, paso de un proceso | rounded=0;whiteSpace=wrap;html=1; |
| rounded-rectangle | Bloque suave, nodo terminal | rounded=1;whiteSpace=wrap;html=1;arcSize=15; |
| ellipse | Inicio / fin, contenedor, círculo | ellipse;whiteSpace=wrap;html=1; |
| rhombus | Decisión (sí/no) | rhombus;whiteSpace=wrap;html=1; |
| triangle | Indicador de dirección | triangle;whiteSpace=wrap;html=1;direction=north; |
| hexagon | Preparación, paso intermedio | shape=hexagon;perimeter=hexagonPerimeter2;… |
| parallelogram | Entrada / salida | shape=parallelogram;perimeter=parallelogramPerimeter;… |
| cylinder | Base de datos, almacenamiento | shape=cylinder3;…boundedLbl=1;backgroundOutline=1;size=15; |
| cloud | Servicio en la nube, sistema externo | ellipse;shape=cloud;… |
| document | Archivo, informe | shape=document;…boundedLbl=1; |
| note | Nota adhesiva, comentario | shape=note;…size=14; |
| callout | Bocadillo, anotación | shape=callout;…perimeter=calloutPerimeter; |
| process | Subproceso, proceso predefinido | shape=process;…backgroundOutline=1; |
| trapezoid | Operación manual | shape=trapezoid;perimeter=trapezoidPerimeter;… |
| text | Etiqueta simple, sin borde | text;html=1;align=center;verticalAlign=middle;resizable=0;points=[]; |
| image | Logotipo o imagen incrustada (data URL) | shape=image;html=1;image=data:image/…;base64,…; |
| swimlane | Carril con cabecera | swimlane;…startSize=20; |
Los sufijos de color y texto (fillColor, strokeColor, fontSize, fontColor, strokeWidth) se añaden por igual a todas las formas. La guía del prompt de IA de esta página incluye la plantilla completa con ejemplos.