De vuelta de entre los muertos…

Durante muchos años he hecho mis diagramas manualmente (con ayuda de la IA para los retoques finales) usando Excalidraw, draw.io y Mermaid, que funcionan perfectamente, pero requieren tiempo para hacer todo de forma consistente y completa.

Encontré con este proyecto mientras revisaba los repositorios en tendencia de GitHub: Diagram Design. Crea diagramas HTML muy buenos con IA, que se generan rapidísimo, son muy precisos y fáciles de entender.

hero-dark.webp

¿Qué es?

Diagram Design es una habilidad para agentes (Agent Skill): un conjunto de instrucciones que le indica a tu agente de IA cómo diseñar diagramas.

El agente lee tu solicitud y decide qué tipo de diagrama tiene sentido, o simplemente le especificas el tipo de diagrama y el estilo que quieres usar, y listo. Admite 44 tipos de diagramas, incluidos diagramas de arquitectura, diagramas de flujo, líneas de tiempo, diagramas de secuencia, diagramas de Gantt, etc.

Instalación y uso

import-drawio.webp

Solo sigue las instrucciones del repositorio de GitHub, o deja que la IA lo haga :) (https://github.com/cathrynlavery/diagram-design)

Si usas Claude Code, Codex, Cursor u otro agente que admita habilidades, instálalo con:

npx skills add cathrynlavery/diagram-design

Selecciona tu agente y eso es prácticamente todo.

Ahora pídele a tu agente que cree algo. Por ejemplo:

Create an architecture diagram showing a frontend
application connecting to a backend API, PostgreSQL 
database, and Redis cache. Use diagram-design.

Lo que he hecho

spongebob-what.gif

Reemplacé mis diagramas existentes por versiones rediseñadas con esta habilidad de IA. Quizá me precipité, pero no me importa: son más fáciles de entender y es más rápido generar nuevos.

Hasta ahora he comparado más de 50 diagramas y las nuevas versiones se ven muy bien. No he tenido problemas, lo cual es bueno. En el futuro la IA seguirá mejorando, así que tampoco espero tener problemas.

La forma anterior sigue siendo válida y buena si los diagramas cambian con frecuencia, aunque la versión con los retoques finales se beneficiaría un poco del rediseño con IA (en mi humilde opinión).

Eso sí, distintos casos de uso requieren distintas herramientas; los diagramas “profesionales” no “encajarían” con este “rediseño”. Por ahora funciona mejor para proyectos personales o equipos pequeños. No creo que esto reemplace a draw.io o Mermaid, es simplemente otra herramienta fácil de usar.

Quizá empiece a agregar más diagramas en futuras publicaciones o a rediseñar los antiguos. Quizá no.