Dentro de Claude Code escribe /plugin marketplace add cathrynlavery/diagram-design y después /plugin install diagram-design@diagram-design. Luego abre /plugin, entra en Marketplaces, elige diagram-design y activa Enable auto-update, porque en marketplaces de terceros viene apagada. Para tu primer diagrama, descríbelo con palabras: qué piezas tiene, cómo se conectan y qué es lo más importante. La primera vez te preguntará si quieres usar el estilo de tu marca.
diagram-design es una skill para Claude Code que genera diagramas editoriales: archivos HTML con SVG autocontenido, sin sombras y con reglas de diseño escritas. La creó Cathryn Lavery, la publica con licencia MIT en GitHub y pasa de 38.000 estrellas. No es un producto de Anthropic: es un plugin de terceros.
Esta guía te lleva de cero a tu primer diagrama en cinco pasos. Lo único que necesitas antes es tener Claude Code instalado y abierto en la carpeta de tu proyecto.
Dentro de Claude Code escribe estos dos comandos, en este orden:
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
El primero registra el repositorio como marketplace. El segundo instala el plugin desde ahí. Si Claude Code te pide recargar, ejecuta /reload-plugins o abre una sesión nueva.
Este es el paso que casi todo el mundo se salta. Claude Code deja apagada la actualización automática en los marketplaces de terceros, así que si no la activas, las mejoras de la skill no te llegan solas.
A partir de ahí, Claude Code refresca el marketplace y el plugin en segundo plano al arrancar.
La primera vez que pidas un diagrama en un proyecto nuevo, la skill revisa si su guía de estilo sigue con los valores por defecto. Si es así, se detiene y te pregunta qué quieres hacer. Las opciones principales:
Para hacerlo en cualquier momento, el README lo resume en un pedido: onboard diagram-design to https://tusitio.com. Antes de guardar los colores, la skill comprueba que el texto tenga contraste suficiente sobre el fondo.
Si trabajas con varios clientes, puedes guardar cada marca como un perfil y marcar cada proyecto con el suyo, para no pisar un estilo con otro.
No hay comando especial: lo pides con palabras. Los ejemplos del README son de este tipo:
En español funciona igual: «Hazme un diagrama de arquitectura de mi app: frontend, backend, base de datos y caché con Redis».
La skill elige el tipo de diagrama, construye el HTML y lo guarda. El archivo se abre directo en el navegador: no necesita paso de compilación, ni JavaScript, ni imágenes externas.
Un consejo para que el resultado mejore desde el primer intento: di qué piezas hay, cómo se conectan y qué es lo más importante. La propia skill reserva el color de acento para 1 o 2 elementos, así que si tú le dices cuáles, no tiene que adivinarlo.
Si tienes diagramas viejos en draw.io, Mermaid o Excalidraw, la skill los redibuja con su sistema de diseño. Los comandos del README:
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
/diagram-design:import-mermaid README.md --diagram=all
/diagram-design:import-excalidraw whiteboard.excalidraw --size=slide-16x9 --detail=simplified
Los ajustes más útiles son el formato de salida (html, svg, png o html+png), el tamaño según el destino (por ejemplo doc-inline, slide-16x9 o social-square) y el nivel de detalle (simplified, balanced o faithful). También puedes pedirlo sin comando: «redibuja este archivo de Mermaid para mi presentación».