¿Qué es Diagram Design?
Diagram Design es una skill para agentes de Cathryn Lavery, publicada bajo su empresa LittleMight, que convierte una petición en lenguaje llano en un diagrama escrito como un único archivo HTML con SVG en línea. Cubre 45 tipos de diagrama, desde arquitectura, diagramas de flujo, de secuencia y de estados hasta cuadrantes, treemaps y dibujos axonométricos despiezados, cada uno en variantes minimal light, minimal dark y full-editorial. El estilo de la casa es fijo: líneas finas de 1px, sin sombras, un color de acento para las una o dos cosas que importan y todas las coordenadas sobre una cuadrícula de 4px.
Si le pides que se adapte a una web, el agente descarga la página de inicio, extrae la paleta y las fuentes, comprueba el contraste WCAG AA y escribe los tokens en una guía de estilo que leen todos los diagramas posteriores; los perfiles con nombre mantienen separadas las marcas de varios clientes. También redibuja archivos existentes de draw.io, Mermaid y Excalidraw, y exporta SVG para Figma o PNG para presentaciones.
Se instala con `npx skills add cathrynlavery/diagram-design` en cualquier host de Agent Skills, o como plugin para Claude Code, Codex, GitHub Copilot, Factory Droid, Qoder, Pi y Claude Cowork.
¿Merece la pena Diagram Design?
Diagram Design es la skill de diagramas a batir para cualquier cosa que pienses publicar, y el motivo se ve en su galería más que en su lista de funciones. El repositorio se creó en abril de 2026 y tiene unas 62.200 estrellas en GitHub; skills.sh cuenta 21.200 instalaciones mediante su CLI, sin incluir los marketplaces de plugins. No publica versiones etiquetadas, pero se mantiene a diario: el manifiesto del plugin llegó a la versión 2.6.136 el 27 de octubre de 2026.
Las reglas de diseño hacen el trabajo. La premisa de Lavery es que el modelo ya entiende el contenido y solo le falta gusto, así que la skill deja ese gusto por escrito: una densidad objetivo de 4 sobre 10, un color de acento reservado y una cuadrícula de 4px, con comprobaciones en CI de elementos superpuestos y recortados. La adaptación a la marca importa más de lo que parece. Cada diagrama posterior usa el fondo, el color de llamada a la acción y las fuentes de tu web, y la comprobación de contraste propone un valor más oscuro cuando un color de marca no pasa en etiquetas de 9 a 12px.
Los comandos de importación son la ventaja práctica para los equipos con diagramas antiguos. Un archivo de draw.io, Mermaid o Excalidraw se redibuja con uno de tres niveles de detalle (fiel hasta 24 nodos, equilibrado hasta 12, simplificado hasta 7), y cada importación termina con un registro de lo que se fusionó o se eliminó. El README es franco sobre el coste: el resultado depende del modelo, el mismo prompt puede maquetarse de forma distinta dos veces y no hay código fuente editable que revisar en un pull request. Para documentación de arquitectura que cambia en cada sprint, Mermaid sigue siendo mejor herramienta, como dice el propio README.
Hay algo de fricción incorporada. Una barrera en la primera ejecución se detiene a preguntar por la adaptación en cada proyecto nuevo, lo que va bien a una persona pero bloquea las ejecuciones desatendidas (el issue #262 propone una forma de evitarlo). La exportación a PNG necesita Playwright y Chromium, y los diagramas cargan fuentes de Google Fonts por defecto, la única solicitud de red que hacen, salvo que pidas fuentes del sistema. Frente a fireworks-tech-graph, que se centra en diagramas de arquitectura técnica, Diagram Design cubre muchos más tipos y les aplica la marca; anatomy profundiza más en una única forma isométrica e interactiva.
Dónde se gana su sitio
Una fundadora que escribe el blog semanal de su empresa
Añadir a los artículos diagramas que se parezcan al resto de la web en lugar de las típicas cajas redondeadas
Ejecuta la adaptación una vez con la URL del blog, pide después un cuadrante o una pirámide por artículo e inserta el HTML o el SVG exportado. Solo cuesta tokens del modelo y sustituye las sesiones de 30 minutos en Figma que describe Lavery.
Un arquitecto de soluciones en una consultora con varios clientes
Convertir los diagramas antiguos de draw.io de cada cliente en diapositivas con los colores de ese cliente
Guarda un perfil por cliente y pon un marcador `.diagram-design` en cada proyecto, y después ejecuta `/diagram-design:import-drawio file.drawio --size=slide-16x9 --detail=simplified --audience=executive`. El registro de fidelidad enumera lo que se condensó, y conviene revisarlo antes de que lo vea el cliente.
Un responsable de equipo de plataforma que documenta un sistema para un manual de ingeniería
Producir un diagrama de arquitectura cuidado para una página publicada del manual
Pide un diagrama de arquitectura o de secuencia con palabras sencillas y exporta SVG con `/export-diagram --svg-only`. Conserva el código Mermaid para los diagramas que el equipo edita en cada sprint; regenerar puede cambiar la maquetación y no hay nada que comparar con diff.
Antes de decidirte
- Puesta en marcha
- `npx skills add cathrynlavery/diagram-design` para cualquier host de Agent Skills, o `/plugin marketplace add cathrynlavery/diagram-design` y después `/plugin install diagram-design@diagram-design` en Claude Code para tener comandos slash y actualizaciones. La exportación a PNG necesita `pip install playwright && playwright install chromium`.
- Integraciones
- Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, Pi, Gemini CLI, Cline, Windsurf, Amp, Kiro, OpenCode y Claude Cowork. Importa draw.io, Mermaid y Excalidraw; exporta HTML, SVG y PNG en tamaños de diapositiva, documento, redes sociales e impresión.
- Datos y privacidad
- Sin servidor, cuentas, analítica ni telemetría, según la política de privacidad. Los archivos generados cargan Google Fonts por defecto, lo que envía a Google la dirección IP de quien los ve; la opción de fuentes del sistema elimina todas las solicitudes de red. La adaptación a la marca solo descarga la web que indiques. Licencia MIT.
- Coste a escala
- Gratuito para equipos de cualquier tamaño. El coste son los tokens del modelo por cada diagrama y redibujo; un equipo que lo adopte como estándar no paga nada más allá de los puestos de agente que ya tiene.
- Límites
- Unos 45 issues y pull requests abiertos, sobre todo nuevos tipos de diagrama y correcciones del importador de Mermaid y de los verificadores de maquetación. La calidad del resultado depende del modelo, y las ediciones de la guía de estilo instalada pueden sobrescribirse con las actualizaciones salvo que uses perfiles guardados o un clon editable.
Lo bueno
- 45 tipos de diagrama con un estilo editorial coherente
- Toma la paleta y las fuentes de tu web, con comprobación de contraste
- Redibuja archivos de draw.io, Mermaid y Excalidraw
- HTML autocontenido con SVG accesible; licencia MIT
Lo malo
- Sin código fuente editable que comparar con diff o arrastrar
- El mismo prompt puede producir maquetaciones distintas
- La barrera de estilo de la primera ejecución interrumpe las ejecuciones desatendidas
- La exportación a PNG necesita Playwright y Chromium
Ideal para
Redactores, fundadores e ingenieros que publican diagramas en artículos, presentaciones y documentación y quieren que encajen con su marca.
Alternativas a Diagram Design
Diagram Design: preguntas frecuentes
- ¿Merece la pena Diagram Design?
- Diagram Design da a los agentes el gusto que les falta, y sus diagramas parecen publicados y no generados, a cambio de un resultado que no puedes comparar con diff ni arrastrar. Le damos un 4.3 sobre 5.
- ¿Cuánto cuesta Diagram Design?
- Gratuito y de código abierto (MIT). Solo pagas el uso del modelo de tu agente.
- ¿Qué inconvenientes tiene Diagram Design?
- Sin código fuente editable que comparar con diff o arrastrar; el mismo prompt puede producir maquetaciones distintas; la barrera de estilo de la primera ejecución interrumpe las ejecuciones desatendidas; la exportación a PNG necesita Playwright y Chromium.
- ¿Para quién es Diagram Design?
- Redactores, fundadores e ingenieros que publican diagramas en artículos, presentaciones y documentación y quieren que encajen con su marca.
- ¿Cuánto cuesta Diagram Design para un equipo o en producción?
- Gratuito para equipos de cualquier tamaño. El coste son los tokens del modelo por cada diagrama y redibujo; un equipo que lo adopte como estándar no paga nada más allá de los puestos de agente que ya tiene.
- ¿Es Diagram Design seguro para los datos de la empresa?
- Sin servidor, cuentas, analítica ni telemetría, según la política de privacidad. Los archivos generados cargan Google Fonts por defecto, lo que envía a Google la dirección IP de quien los ve; la opción de fuentes del sistema elimina todas las solicitudes de red. La adaptación a la marca solo descarga la web que indiques. Licencia MIT.
- ¿Cuáles son las mejores alternativas a Diagram Design?
- Las alternativas más cercanas que hemos analizado son fireworks-tech-graph, Anatomy y Anthropic Skills.
Respuestas comprobadas el 28 oct 2026.