Diagram Design: la skill que dibuja diagramas con tu marca en vez de cajas redondeadas

Diagram Design es hoy el repositorio con más estrellas nuevas de GitHub —casi 3.000 en un solo día— y lo que hay dentro no es un modelo ni una aplicación: es una skill, un conjunto de instrucciones y plantillas que instalas en tu agente para que, cuando le pidas un diagrama, no te devuelva la típica maraña de cajas redondeadas grises.

Su autora, Cathryn Lavery, lo explica en el README sin adornos: cada vez que necesitaba un diagrama para un artículo, o peleaba media hora con Figma o se comía un resultado genérico que no pegaba con el resto de su web. Así que escribió el estándar de estilo y se lo dio al agente.

La frase que resume el proyecto está en la propia descripción del repositorio: no shadows, no Mermaid-slop. Ni sombras ni la papilla de Mermaid.

Qué genera exactamente

Un catálogo de tipos visuales, cada uno con su plantilla: arquitectura, diagrama de flujo, secuencia, máquina de estados, modelo de datos, línea de tiempo, calles (swimlane), cuadrantes, jerarquías por anidación, árboles, organigramas, Venn, pila de capas, pirámide y embudo, radar, ciclos con eje central, gráficos de barras y de líneas, Gantt, dispersión, procesos multiactor, arquitecturas de datos por niveles y matrices de permisos.

Un apunte de rigor: la cifra baila según dónde mires. La descripción del repositorio dice 29 tipos, el README dice 27 y en la galería he contado 28. No es grave, pero conviene saberlo antes de citar el número en ningún sitio.

Cada tipo sale en tres variantes —claro minimalista, oscuro minimalista y editorial completa— como HTML con SVG dentro, autocontenido: sin proceso de compilación, sin JavaScript y sin imágenes externas. Abres el fichero en el navegador y ahí está. La versión 2.3 añadió patrones semánticos —una cola, una traza de decisiones, un límite de confianza— que reutilizan el tipo más cercano en vez de inventarse uno nuevo, y animación opcional; la salida estática sigue siendo la predeterminada, que es lo correcto.

También hace el camino inverso: le das un diagrama existente en draw.io o en Mermaid y lo redibuja al formato, tamaño y nivel de detalle que le pidas.

Lo que de verdad lo diferencia: los 60 segundos de onboarding

Aquí está el motivo por el que esto está en tendencia y no es un repositorio más de plantillas.

Le dices al agente algo como "onboard diagram-design to https://tuweb.com". La skill entra en tu web, extrae la paleta dominante y la familia tipográfica, las asigna a los papeles que usa el sistema —papel, tinta, apagado, acento, enlace—, te enseña el cambio propuesto y, si lo apruebas, lo escribe en su fichero de estilo.

A partir de ahí todos los diagramas salen con el fondo de tu web, tu color de llamada a la acción como acento y tu tipografía en las etiquetas. Ese es el salto: no es "un diagrama bonito", es "un diagrama que parece de tu casa". Para quien publica contenido con regularidad, eso es la diferencia entre usarlo y no usarlo.

La regla de diseño que aplica por debajo también merece un comentario, porque es más sensata que la de la mayoría de generadores: reservar el color de acento para las dos cosas que el lector tiene que mirar primero y mantener la densidad baja. Traducido: menos elementos, no más.

Cómo instalarlo con Claude Code o Codex

Va por el sistema de plugins, así que son dos líneas.

En Claude Code:

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

En Codex:

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

Y hay dos detalles de mantenimiento que el README documenta y que te van a ahorrar un cabreo:

Las actualizaciones automáticas vienen desactivadas. Claude Code no las activa por defecto en los marketplaces de terceros, y con razón. Si quieres recibir mejoras, entra en /plugin, abre Marketplaces, selecciona el proyecto y activa la actualización automática. Si no lo haces, te quedas en la versión que instalaste sin enterarte.

Si vas a tocar el estilo, instálalo en modo editable. La guía de estilo vive en un fichero del propio paquete, así que una actualización puede pisarte los cambios. Lo que recomienda la autora, y me parece correcto, es clonar el repositorio y enlazar la skill desde tu carpeta:

git clone https://github.com/cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

Una vez instalado, el encargo típico se parece a esto:

Con la skill diagram-design, dibuja el flujo de alta de un cliente nuevo:
formulario web, verificación por correo, alta en el CRM y aviso al comercial.
Formato flowchart, variante editorial completa, y márcame en el color de
acento solo el paso donde hoy se pierde la gente.

Esa última frase es la que separa un diagrama útil de una decoración. Si no le dices qué es lo importante, el agente reparte el énfasis a partes iguales y no destaca nada.

Cuándo no te compensa

Sé claro contigo, porque no es la herramienta para todo el mundo:

• Si necesitas el diagrama dentro de un Word o un PowerPoint, la salida es HTML y SVG. Se puede exportar y se puede capturar, pero es un paso más. Para eso encaja mejor OfficeCLI, que trabaja directamente sobre los formatos de Office.
• Si lo que quieres es mapear un repositorio que no conoces, esto no lo hace: dibuja lo que tú le cuentas. Esa otra tarea la cubre Archify.
• Si tu equipo ya vive dentro de Mermaid integrado en la documentación, cambiar a HTML autocontenido te va a romper la cadena de publicación. Merece la pena solo si el aspecto te importa de verdad.
• Si no tienes una marca definida, el onboarding no tiene de dónde tirar. Sale la paleta por defecto, que es correcta, pero entonces la ventaja principal se te escapa.

Para quién sí, sin dudarlo: si escribes en un blog, preparas propuestas para clientes o documentas sistemas y quieres que los diagramas se parezcan entre ellos y a tu web, esto resuelve en dos minutos algo que llevas años resolviendo mal. Y si te interesa la línea de skills que se dedican a que lo que genera el agente no cante a plantilla, la vecina natural es Hallmark.

Preguntas frecuentes

¿Necesito saber programar para usar Diagram Design?

No. Necesitas tener instalado un agente (Claude Code, Codex o Pi) y saber pedirle las cosas por escrito. La instalación son dos órdenes copiadas tal cual.

¿Funciona con algo que no sea Claude Code?

Sí. El repositorio documenta la instalación en Codex, en Pi y en Claude Cowork a través del marketplace de la organización. La skill es la misma en todos: son ficheros compartidos, no una integración distinta por herramienta.

¿Los diagramas se pueden editar después?

Son HTML y SVG, así que sí: se editan con un editor de texto o con cualquier programa de vectores. No hay un formato propietario por medio ni hace falta la herramienta para volver a abrirlos.

¿Es gratis?

Sí, con licencia MIT. Lo que pagas es el consumo de tu agente, igual que con cualquier otra skill.

¿Qué pasa si mi web cambia de colores?

Vuelves a lanzar el onboarding apuntando a la web y la skill reescribe los valores de estilo. Si has instalado en modo editable, comprueba antes que no tengas cambios a mano que quieras conservar.