
Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
O diagrama sai num arquivo do Excalidraw e mostra o raciocínio pela forma, com exemplos reais dentro, em vez de um monte de caixinhas com nome.
por coleam00
Atualizada no GitHub em 1º de março de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Gera arquivos .excalidraw, o formato do Excalidraw, pra mostrar fluxos, arquiteturas e conceitos. A regra da skill é que o diagrama argumente: se você tirar o texto, a forma ainda tem que contar a história. Por isso cada ideia ganha um padrão visual próprio, como leque, funil, linha do tempo, ciclo ou comparação lado a lado.
Em diagrama técnico, o agente pesquisa os nomes reais (eventos, métodos, formatos de dados) e coloca exemplos concretos dentro, como trecho de código e JSON de verdade. Diagrama grande é montado por seções: um resumo do fluxo, regiões agrupadas e o detalhe dentro de cada uma.
Depois de gerar, ele renderiza o diagrama em PNG, olha a imagem e corrige texto cortado, seta perdida e espaçamento torto, em duas a quatro voltas. As cores ficam todas num arquivo só, o color-palette.md, que você edita pra deixar os diagramas com a cara da sua marca.
Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.
Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.
Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Excalidraw Diagram, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.
O arquivo o agente escreve sozinho. A conferência, que a skill trata como obrigatória, usa um script de render que precisa do uv (gerenciador de Python) e do Chromium do Playwright, instalados uma vez com uv sync e uv run playwright install chromium. Não pede chave de API nem conta paga.
O comando de render aponta pra pasta .claude/skills/excalidraw-diagram, que é onde o Claude Code guarda skills. Em outro agente, o caminho muda, e a revisão só funciona se o agente conseguir abrir e enxergar o PNG gerado.
Dá. Todas as cores (preenchimento, contorno, texto e fundo dos exemplos de código) saem do arquivo references/color-palette.md. Troque as cores ali e todos os diagramas seguintes vêm no seu padrão.
1x excalidraw-diagramR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/coleam00/excalidraw-diagram-skill
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.