En los propios términos del Skill
Un skill para crear, editar y validar archivos de diagramas de draw.io (.drawio, .drawio.svg, .drawio.png) mediante la generación de XML mxGraph correcto. Gestiona diagramas de flujo, arquitectura de sistemas, diagramas de secuencia, diagramas ER y diagramas de clases UML mediante plantillas en assets/templates/, mientras que la topología de red, BPMN y los mapas mentales recurren a bibliotecas de formas o trabajo manual.
El agente recibe un flujo de trabajo de seis pasos, una paleta de colores semántica con cadenas de estilo listas para usar, una lista de verificación de validación previa a la entrega y scripts opcionales de Python (validate-drawio.py, add-shape.py). Está dirigido a agentes que trabajan en un repositorio donde los diagramas conviven con el código que documentan, y los archivos generados están pensados para abrirse de inmediato en la extensión de VS Code hediet.vscode-drawio.
Qué produce
- El propio archivo .drawio, escrito en la ruta que solicitó.
- Un resumen de una frase de lo que muestra el diagrama.
- Estado de validación, que indica si se ejecutó el script del validador y si pasó.
- Instrucciones de edición para cuando es probable que personalice el diagrama: haga clic en una forma para seleccionarla, haga doble clic para editar la etiqueta, arrastre para reposicionarla.
Cómo funciona
- 01Precisar la Solicitud
El flujo de trabajo comienza estableciendo el tipo de diagrama, las entidades o actores, las relaciones, la ruta de salida y si el archivo es nuevo o una edición.
- 02Reutilizar una Plantilla o el Esqueleto Mínimo
Cuando el tipo de diagrama coincide con uno de los que hay en assets/templates/, copie esa estructura y sustituya los valores de marcador de posición; para diseños novedosos, comience con el esqueleto mxfile válido mínimo con las dos celdas raíz.
- 03Planificar el Diseño Antes de Escribir XML
Primero esboce filas o niveles, y luego distribuya las formas en la cuadrícula: 40-60px horizontalmente entre formas de la misma fila, 80-120px entre filas de nivel, en un lienzo A4 horizontal predeterminado de 1169 x 827 px.
- 04Generar el XML de mxGraph
Escriba las celdas de vértices y aristas con ids únicos y referencias parent coincidentes, y escape los caracteres especiales de XML en las etiquetas para que el archivo se mantenga bien formado.
- 05Aplicar Estilos de la Paleta
Las cadenas de estilo provienen de una paleta semántica fija — primario/info #dae8fc con #6c8ebf, advertencia/decisión #fff2cc con #d6b656, error/fin #f8cecc con #b85450 — de modo que el mismo propósito mantenga el mismo color en todo el proyecto.
- 06Guardar, Validar, Entregar
Escriba el archivo en la ruta solicitada con extensión .drawio, ejecute opcionalmente el validador y luego indique al usuario cómo abrirlo y resuma qué contiene el diagrama.