Diagrama animado
Você escreve uma pequena descrição JSON (nós em células de grade, passos numerados, grupos); o renderizador faz o layout, verifica o layout e renderiza 90 quadros em <nome>.gif, <nome>.mp4, <nome>.png e <nome>.check.json. Você nunca escreve coordenadas.
$SKILL abaixo é a pasta que contém este arquivo (${CLAUDE_SKILL_DIR} no Claude Code). Precisa de Node ≥ 22, Google Chrome e ffmpeg. Uma vez por máquina: npm install --prefix "$SKILL". Se ANIMATED_DIAGRAM_RENDER_LOCK estiver definido, cada renderização aguarda esse diretório de bloqueio, para que apenas um Chrome renderize por vez.
Fluxo de trabalho
1. Tema primeiro
Procure por diagram-theme.json ao lado de onde o diagrama será salvo (o render verifica lá, depois a pasta de trabalho). Se não houver, configure um antes de qualquer outra coisa. Pergunte qual o usuário deseja:
node "$SKILL/scripts/cli.mjs" theme --preset machine-room-dark # ou 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 um tema editado manualmente
Cada um escreve diagram-theme.json (--out para mudar o local) e exibe as cores com suas taxas de contraste. Um tema que falhe no contraste (4.5:1 para cada cor de texto sobre seu fundo) ou na regra de modo escuro é recusado, com a cor mais próxima aprovada sugerida. Detalhes: reference/theme-setup.md.
2. Conteúdo
A partir do tópico ou texto fonte do usuário, elabore os nós e os passos numerados, e mostre a lista de passos no chat:
1. Usuário → DNS: consulta DNS
2. DNS → Usuário: IP de borda mais próximo (resposta)
3. Usuário → Servidor de borda: GET /logo.png
Aguarde o usuário confirmar. Cada seta é uma afirmação: verifique cada uma contra uma fonte antes de renderizar.
3. O JSON
Escolha o template com reference/templates.md (fluxo em grade, comparação, pilha ou mapa) e escreva <tópico>.json conforme reference/diagram-format.md. Comece a partir do exemplo mais próximo: examples/cdn.json (fluxo em grade), examples/cache-strategies.json (comparação), examples/web-stack.json (pilha) ou examples/anatomy-of-an-ai-app.json (mapa). Posicione os nós apenas por célula; offset é um ajuste de último recurso de alguns pixels.
Escolha um mapa quando o usuário quiser o sistema inteiro em uma página, em vez de um único caminho através dele: 12 a 25 nós em até 6 zonas de cor, com as palavras em uma legenda ao lado da imagem. Em um mapa, o posicionamento decide tudo: coloque o nó que mais setas tocam no centro, com o que ele se comunica ao lado, e deixe a maioria dos passos conectar vizinhos. Dê um title curto e um subtitle.
4. Ícones
node "$SKILL/scripts/cli.mjs" icons # a biblioteca: usuário, laptop, telefone, rack, torre, banco de dados, cache, …
Se um nó precisar de um ícone que não está na biblioteca, desenhe-o seguindo reference/icon-rulebook.md em ./diagram-icons/<nome>.js ao lado do diagrama e depois revise-o em 2× ao lado de dois ícones existentes antes de usar:
node "$SKILL/scripts/cli.mjs" icon-sheet <nome> laptop rack --out sheet.png
5. Renderizar
node "$SKILL/scripts/cli.mjs" render <tópico>.json --out out/ # --theme <preset|arquivo>, --style filled|line|duotone
Códigos de saída: 0 ok · 2 a verificação falhou (a imagem estática e <tópico>.check.json são escritos, sem GIF) · 3 nenhum tema ainda · 1 entrada inválida (os erros do diagrama ou do tema são impressos com seus caminhos JSON).
No código 2, leia out/<tópico>.check.json. Cada falha tem um code, os ids envolvidos (ids de nós, setas de passo como s<índice>) e um detail. Corrija o JSON (mova uma célula, encurte um rótulo, divida um passo, use menos linhas) e renderize novamente — no máximo 3 rodadas, ou 6 para um mapa, onde mover um hub pode desembaraçar muitas setas de uma vez. As correções por código estão em reference/templates.md. Em seguida, abra o PNG e veja você mesmo: a verificação detecta colisões, não ordem de leitura estranha.
6. Relatório
Forneça ao usuário os caminhos do GIF, MP4 e PNG, o tamanho do GIF (orçamento de cerca de 1 MB em 1080×1350, 3 MB para um pôster) e o resumo da verificação, incluindo quaisquer avisos.