Diagrama animado
Escribes una pequeña descripción JSON (nodos en celdas de cuadrícula, pasos numerados, grupos); el renderizador lo coloca, verifica la disposición y renderiza 90 fotogramas en <nombre>.gif, <nombre>.mp4, <nombre>.png y <nombre>.check.json. Nunca escribes coordenadas.
$SKILL a continuación es la carpeta que contiene este archivo (${CLAUDE_SKILL_DIR} en Claude Code). Necesita Node ≥ 22, Google Chrome y ffmpeg. Una vez por máquina: npm install --prefix "$SKILL". Si está definido ANIMATED_DIAGRAM_RENDER_LOCK, cada render espera ese directorio de bloqueo, por lo que solo un Chrome renderiza a la vez.
Flujo de trabajo
1. Tema primero
Busca diagram-theme.json junto a donde vivirá el diagrama (render busca allí, luego en la carpeta de trabajo). Si no hay ninguno, configura uno antes de cualquier otra cosa. Pregunta al usuario cuál quiere:
node "$SKILL/scripts/cli.mjs" theme --preset machine-room-dark # o light, dark
node "$SKILL/scripts/cli.mjs" theme --brand "#E4572E,#17BEBB" --mode light
node "$SKILL/scripts/cli.mjs" theme --from-image logo.png --mode dark
node "$SKILL/scripts/cli.mjs" theme --check my-theme.json # verifica un tema editado a mano
Cada uno escribe diagram-theme.json (--out para cambiarlo) e imprime los colores con sus relaciones de contraste. Un tema que no supere el contraste (4.5:1 para cada color de texto sobre su fondo) o la regla de oscuridad es rechazado, proponiendo el color aprobado más cercano. Detalles: reference/theme-setup.md.
2. Contenido
A partir del tema o texto fuente del usuario, redacta los nodos y los pasos numerados, y muestra la lista de pasos en el chat:
1. Usuario → DNS: búsqueda DNS
2. DNS → Usuario: IP del edge más cercano (respuesta)
3. Usuario → Servidor edge: GET /logo.png
Espera a que el usuario lo confirme. Cada flecha es una afirmación: verifica cada una contra una fuente antes de renderizar.
3. El JSON
Elige la plantilla con reference/templates.md (flow-grid, comparison, stack o map) y escribe <tema>.json según reference/diagram-format.md. Comienza desde el ejemplo más cercano: examples/cdn.json (flow-grid), examples/cache-strategies.json (comparison), examples/web-stack.json (stack) o examples/anatomy-of-an-ai-app.json (map). Coloca los nodos solo por celda; offset es un ajuste de último recurso de unos pocos px.
Elige un mapa cuando el usuario quiera todo el sistema en una página en lugar de una sola ruta a través de él: de 12 a 25 nodos en hasta 6 zonas de color, con las palabras en una leyenda junto a la imagen. En un mapa, la ubicación lo decide todo: coloca el nodo que más flechas toca en el centro, con lo que habla al lado, y permite que la mayoría de los pasos unan vecinos. Dale un title corto y un subtitle.
4. Iconos
node "$SKILL/scripts/cli.mjs" icons # la biblioteca: usuario, portátil, teléfono, rack, torre, base de datos, caché, …
Si un nodo necesita un icono que la biblioteca no tiene, dibújalo siguiendo reference/icon-rulebook.md en ./diagram-icons/<nombre>.js junto al diagrama, luego revísalo a 2× junto a dos iconos existentes antes de usarlo:
node "$SKILL/scripts/cli.mjs" icon-sheet <nombre> laptop rack --out sheet.png
5. Renderizar
node "$SKILL/scripts/cli.mjs" render <tema>.json --out out/ # --theme <predefinido|archivo>, --style filled|line|duotone
Códigos de salida: 0 correcto · 2 la verificación falló (el PNG estático y <tema>.check.json se escriben, sin GIF) · 3 sin tema aún · 1 entrada incorrecta (los errores del diagrama o del tema se imprimen con sus rutas JSON).
En caso de salida 2, lee out/<tema>.check.json. Cada fallo tiene un code, los ids involucrados (ids de nodos, flechas de paso como s<indice>) y un detail. Corrige el JSON (mueve una celda, acorta una etiqueta, divide un paso, usa menos filas) y renderiza de nuevo — como máximo 3 rondas, o 6 para un mapa, donde mover un centro puede desenredar muchas flechas a la vez. Las correcciones por código están en reference/templates.md. Luego abre el PNG y míralo tú mismo: la verificación detecta colisiones, no un orden de lectura incómodo.
6. Informe
Proporciona al usuario las rutas del GIF, MP4 y PNG, el tamaño del GIF (presupuesto aproximado de 1 MB a 1080×1350, 3 MB para un póster) y el resumen de la verificación, incluyendo cualquier advertencia.