CommunityProgramación y desarrollogithub.com

wliafe/drawio-skill

Usa Next AI Draw.io MCP para verificar conexiones, guiar la instalación autorizada, operar sesiones y objetos del diagrama, guardar cambios y exportar en drawio, PNG, SVG y drawio.svg editable. Ideal para tareas que requieren invocar este MCP, controlar el tamaño antes de insertar imágenes, exportar sincronizadamente y gestionar archivos por versión temática.

¿Qué es drawio-skill?

Este skill automatiza la interacción con el servidor MCP de Draw.io (`@next-ai-drawio/mcp-server`) para tareas de dibujo técnico. Su propósito es manejar operaciones sobre diagramas existentes o nuevos: cargar, editar, crear, seleccionar páginas y objetos, insertar imágenes con control de capacidad, y exportar en formatos drawio, PNG, SVG y drawio.svg editable. Está diseñado para clientes de IA como Claude Code, Cursor o Codex que exponen herramientas MCP. El skill no impone decisiones de diseño (colores, fuentes, composición), sino que se enfoca en la ejecución confiable de las herramientas. Incluye reglas claras para determinar la versión y ubicación de entrega (por defecto en `project-docs/topic-name/v1/`), manejo de sesiones (reutilizar o iniciar nuevas), detección de conflictos de concurrencia, y verificación post-exportación. También guía la instalación y diagnóstico del servidor MCP cuando no está disponible, apoyándose en referencias documentadas. Es útil para flujos que requieren mantener edición vectorial (no aplanar a imagen) y sincronización de archivos entre formatos.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add wliafe/drawio-skill

Installed? Explore more Programación y desarrollo skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Habilidad de operación con Draw.io MCP

Usa el Servidor Next AI Draw.io MCP (@next-ai-drawio/mcp-server) para ejecutar tareas de dibujo ya determinadas. Esta habilidad se encarga del uso de herramientas y la entrega fiable; no prescribe composición, combinación de colores, fuentes ni métodos de representación. El flujo central es aplicable a diferentes clientes de IA; el descubrimiento de herramientas, la invocación y la forma de cargar la habilidad dependen del anfitrión actual.

Determinar primero la tarea y el servicio

  1. A partir de la solicitud del usuario y el contexto actual, determina: crear nuevo, modificar un archivo existente, continuar en el lienzo actual, o guardar los cambios manuales que el usuario acaba de hacer. Prioriza usar los materiales, directorio de destino y versión existente especificados explícitamente.
  2. Revisa las herramientas MCP actualmente expuestas y mapea los nombres de servicio según la descripción real de la herramienta, por ejemplo get_diagram, edit_diagram, export_diagram; no uses nombres fijos de espacios de nombres del cliente, alias de servicio ni sintaxis de invocación.
  3. Cuando la herramienta objetivo esté expuesta y el cliente actual permita su invocación, usa la herramienta de solo lectura get_drawing_guide para verificar la respuesta; conserva las decisiones existentes de deshabilitación o rechazo. Si ya está disponible, continúa, no la agregues de nuevo. Que una herramienta no esté expuesta no significa que no esté instalada; cuando necesites verificar configuración, instalación, recarga o diagnóstico, consulta Verificación e instalación de MCP.
  4. Este procedimiento está diseñado para el paquete mencionado. Si el usuario especifica explícitamente otro servicio de dibujo, respeta su elección, explica los límites de adaptación y no lo reemplaces por tu cuenta.

Los servicios ya existentes se identifican por el paquete; el nombre del servicio no tiene por qué ser drawio. Solo cuando la configuración sea visible pero aún no haya respondido, informa "configurado, pendiente de verificación". Si no tienes acceso a herramientas, terminal o configuración, proporciona los métodos ejecutables disponibles, sin afirmar que un servicio no existe solo porque no se pueda verificar.

Determinar ubicación de entrega y versión

Por defecto, guarda cuatro archivos con el mismo nombre en documentos-del-proyecto/nombre-del-tema/v1/: nombre-del-tema.drawio, nombre-del-tema.png, nombre-del-tema.svg, nombre-del-tema.drawio.svg. El nombre puede estar en chino o inglés; la versión solo se coloca en el directorio. Los temas nuevos comienzan en v1; los diagramas existentes mantienen su versión actual, solo se agrega vN si el usuario lo solicita explícitamente.

Los archivos existentes continúan usando su ruta y nombre originales, sin renombrar, migrar ni actualizar la versión automáticamente. El directorio, formato y límites de edición especificados por el usuario tienen prioridad. Cuando se trate de nombres, nuevas versiones, múltiples páginas o división de diagramas, consulta Convenciones de dibujo y archivos.

Operaciones de sesión y objetos

  • Ejecuta operaciones MCP según el contenido y diseño proporcionados por la tarea actual; cuando no se pueda inferir la entrada necesaria, solo confirma los elementos faltantes que afectarán el objeto o resultado de la operación.
  • Prioriza reutilizar la sesión objetivo ya confirmada. Si es realmente necesario crear o restaurar una sesión, llama a start_session y lee el formato de la herramienta y las restricciones de operación; si falta esa información, usa get_drawing_guide. Verificar la conexión no requiere crear una nueva sesión.
  • Para archivos existentes, después de usar load_diagram, primero usa get_diagram para leer los IDs de los objetos, luego modifica mediante edit_diagram usando esos IDs. Si el lienzo actual es conocido y sigue siendo válido, se pueden hacer ediciones locales directamente; en caso de conflicto de modificación concurrente, reorganiza la edición basándote en el contenido más reciente devuelto por el servicio, sin sobrescribir las nuevas modificaciones del usuario.
  • load_diagram y create_new_diagram reemplazan el documento actual. Antes de cambiar, confirma si el lienzo actual es el objetivo y si hay modificaciones manuales que deban conservarse. Cuando el usuario solicite guardar los cambios actuales, lee y exporta directamente el lienzo actual, sin cargar primero el archivo antiguo del disco.
  • Usa create_new_diagram solo para diagramas nuevos o cuando el usuario solicite explícitamente un reemplazo completo. Todas las escrituras y modificaciones de .drawio / .drawio.svg se realizan a través de MCP; no uses herramientas de archivos o scripts para reescribir el XML del diagrama. Construir los parámetros XML según lo requiera la herramienta es parte de la llamada normal.
  • Mantén editables el texto, los nodos, las relaciones y los grupos; los materiales se pueden incrustar, pero no se puede aplanar todo el diagrama como imagen en lugar del archivo fuente editable.
  • Antes de usar iconos como servicios en la nube o dispositivos de red, llama a get_shape_library y usa los nombres de estilo reales devueltos; no adivines identificadores de iconos.
  • Para edición multipágina, primero usa list_pages para determinar la página objetivo y usa explícitamente el parámetro de selección de página, no dependas de la primera página por defecto. Cuando el usuario diga "este cuadro" o "la flecha seleccionada", puedes usar get_selection. Si la lectura de selección no está disponible, lee el lienzo y localiza por página, etiqueta y posición; solo si hay múltiples candidatos pregunta específicamente, sin recargar el servicio ni pedir que se vuelva a seleccionar repetidamente.

Imágenes y límites de tamaño

Antes de insertar imágenes, consulta Preprocesamiento de imágenes y control de tamaño. Primero verifica el material y el volumen de incrustación estimado; comprime la copia si es necesario: las fotos permiten escalado moderado y compresión con pérdida; el texto, líneas finas y materiales transparentes priorizan la fidelidad. No sobrescribas el material original ni instales software de preprocesamiento automáticamente.

El presupuesto debe cubrir el Base64 real, el XML completo del diagrama, la solicitud serializada y la exportación de retorno. get_diagram puede plegar los datos de la imagen; no uses la longitud del texto devuelto para afirmar que el diagrama no supera el límite. Después de insertar materiales grandes, prueba la exportación a través de MCP lo antes posible; la creación, modificación y exportación en los cuatro formatos solo usan MCP, no uses otras herramientas para complementar la exportación ni inventes parámetros no expuestos como width, height o scale.

Si después de comprimir a una claridad aceptable aún hay problemas, conserva los resultados exitosos, explica el cuello de botella y deja que el usuario decida si continuar comprimiendo, eliminar materiales o dividir el diagrama; no cambies el contenido ni la paginación automáticamente.

Guardar y exportar

  1. Antes de guardar, usa get_diagram para leer el lienzo actual, el archivo correspondiente, la página y la ruta de salida. Primero verifica las advertencias de sincronización; "llamada exitosa pero posiblemente falten modificaciones manuales recientes" no significa que el último estado esté confirmado. Primero restaura la sincronización antes de exportar formalmente; si la herramienta ya ha escrito el archivo, aclara que la actualidad del archivo aún no se ha verificado y vuelve a exportar después de la restauración.
  2. Guarda .drawio mediante export_diagram; el archivo fuente multipágina completo se exporta sin el parámetro de selección de página. Por defecto, exporta también PNG, SVG y .drawio.svg editable; si el usuario solo necesita algunos formatos, sigue su solicitud. Las imágenes y el SVG editable seleccionan explícitamente la página objetivo, sin depender de la página activa del navegador.
  3. .drawio.svg debe exportarse realmente en ese formato; no se puede renombrar un SVG normal como sustituto. Verifica el contenido del diagrama incrustado; antes de la lectura de seguridad, guarda primero el lienzo actual. Para multipágina, indica qué páginas contiene la copia; no pases una copia de una sola página como el archivo fuente completo.
  4. Después de exportar, vuelve a leer y verifica el estado de contenido observable, comprobando las advertencias de sincronización. El servicio no tiene un bloqueo instantáneo general; si el contenido cambia durante el proceso, resincroniza y exporta los archivos afectados, sin considerar una única lectura como garantía de consistencia de los cuatro archivos. Si hay cambios continuos o no se puede confirmar, indica que la sincronización no está verificada y, si es necesario, pide al usuario que pause la edición manual.
  5. Usa rutas absolutas en el entorno de ejecución real de MCP. Verifica la integridad del contenido y la ausencia de materiales faltantes en la generación de archivos y el renderizado final; que la captura de pantalla se vea bien no significa que la exportación formal haya sido exitosa. Ver el XML de solo lectura o un mensaje de exportación exitosa no reemplaza la verificación real del renderizado.
  6. Después de restablecer la conexión, se puede reintentar una vez; si el problema es claramente de capacidad, primero corrige la capacidad y luego reintenta los pasos afectados una vez. Si no hay cambios, no repitas la llamada; si aún falla, explica el cuello de botella específico y los formatos faltantes. Las reglas detalladas de guardado están en Convenciones de dibujo y archivos.

Reportar resultados

Proporciona brevemente el archivo fuente, las imágenes, la versión utilizada y las verificaciones realizadas. Indica por separado y con veracidad: "configuración existente", "herramienta respondió", "archivo guardado", "renderizado verificado".

Si la exportación de imágenes o la verificación visual fallan, primero conserva el archivo fuente guardado exitosamente, explica los formatos faltantes y la razón específica; no uses imágenes antiguas como exportación actual ni des por completo lo que no se ha verificado.

Skills relacionados