Diagramas con una skill de Claude Code: ejemplos reales

Cuando necesito un diagrama le pido a Claude Code que lo dibuje con la skill diagram-design. En vez de un esquema distinto cada vez, sale siempre con el mismo estilo y listo para publicar. Los cuatro diagramas de este post (arquitectura, flujo, secuencia y árbol) están hechos con ella y son de esta misma web.

Qué es diagram-design

Es una skill de Cathryn Lavery (licencia MIT) que vive como un SKILL.md con sus referencias. Cubre 39 tipos de diagrama: arquitectura, flujo, secuencia, ER, timeline, Gantt, Sankey, UML y más. Cada diagrama sale como HTML con SVG inline y sigue unas reglas fijas: rejilla de 4 px, conectores ortogonales con esquinas redondeadas, máximo 9 nodos y como mucho 2 elementos destacados con el color de acento.

Esa última regla es la que más se nota: el diagrama te obliga a decidir qué es lo importante. Si todo está resaltado, nada lo está.

Ejemplo 1: la arquitectura de esta web

El prompt fue casi literal:

Dibuja la arquitectura de marcbenito.com en producción:
push a GitHub, build en Vercel, CDN, lector, Googlebot,
Search Console y Datadog RUM. Resalta solo el CDN y Search Console.

Fíjate en lo que hace sin que se lo pidas: agrupa Build y CDN en una zona «Vercel», pinta en azul lo que viaja por HTTP, y rodea el rectángulo de la zona en lugar de cruzar por detrás de otros nodos.

Ejemplo 2: verificar el sitio en Search Console

Este lo hice mientras daba de alta la propiedad en Search Console. Me faltaba el token de verificación en el layout, así que el proceso real tuvo un bucle de reintento:

El camino feliz va en el color de acento y el reintento en discontinua, así se lee el flujo principal de un vistazo.

Ejemplo 3: del git push al índice de Google

Para ver el orden en el tiempo, un diagrama de secuencia. Cada actor tiene su línea de vida y las barras marcan cuándo tiene el control:

Ejemplo 4: la estructura de rutas de la web

Para una jerarquía, un árbol. Salió de leer las carpetas de src/app, así que los números (6 posts, 10 proyectos, 1 charla) son los de verdad:

Instalarla desde skills.sh

skills.sh es un directorio de skills para agentes. Se instala con la CLI skills pasándole el repositorio de GitHub:

npx skills add cathrynlavery/diagram-design

Eso copia la skill a tu carpeta de skills (en mi caso ~/.agents/skills/diagram-design). Reinicia Claude Code y la detecta sola cuando le pides un diagrama.

También se puede instalar como plugin desde el marketplace de Claude Code, que además añade comandos como /diagram-design:export-diagram:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

Cómo la uso en el día a día

• Pido el diagrama con el contenido, no con el estilo. Nodos, relaciones y qué destacar. El estilo ya lo pone la skill.
• Le dejo que me diga el tipo. Antes de dibujar propone tipo y tamaño; si me parece mal, lo cambio ahí.
• Exporto a PNG o SVG con /diagram-design:export-diagram cuando lo necesito fuera del HTML.
• Una sola vez, mis colores. La primera vez que la usas en un proyecto ofrece sacar los tokens de marca de tu web.

Preguntas frecuentes