Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Excalidraw Diagram Generator skill
O Claude transforma uma descrição em português num arquivo .excalidraw com caixas, setas e cores, pronto pra abrir e ajustar no Excalidraw.
- instalações
- 31,7 mil
- estrelas no GitHub
- 40,4 mil
- No skills.sh desde
- fevereiro de 2026
- Licença
- MIT
Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
Você descreve o que quer ver e o Claude escolhe o tipo de diagrama, separa as etapas, as pessoas ou as partes envolvidas e liga tudo com setas. Faz fluxograma, mapa mental, diagrama de relação, arquitetura de sistema, fluxo de dados, swimlane por área, classes, sequência e banco de dados.
Sai um arquivo .excalidraw, um JSON que você arrasta pro excalidraw.com ou abre na extensão do VS Code e edita à mão. Segue regras de leitura: até uns 20 elementos, espaço entre as caixas, a fonte manuscrita do Excalidraw e cor fixa por tipo. Pedido grande demais vira proposta de dividir em vários.
Pra arquitetura em nuvem, pode usar bibliotecas de ícones da AWS, do Google Cloud e outras, baixadas do libraries.excalidraw.com. Scripts em Python separam a biblioteca em ícones e põem cada um no lugar, com as setas. Sem biblioteca, usa caixas e cores.
Nas palavras de quem fez
Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a…
Quando usar
- Desenhar o funil de vendas ou o processo de atendimento pro time
- Mostrar pro cliente como a automação dele vai funcionar
- Fazer o mapa mental de um curso ou de um lançamento
- Separar quem faz o quê num processo entre áreas (swimlane)
- Documentar a estrutura de um sistema ou de um banco de dados
Depois de instalar, é só pedir assim
- Faz um fluxograma do meu atendimento no WhatsApp: o lead chega, qualifica, recebe a proposta e fecha ou entra no follow-up
- Cria um mapa mental do meu curso de tráfego pago com os 6 módulos
- Desenha a arquitetura do meu site: Next.js, banco Postgres, pagamento e envio de e-mail
Segurança
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.
- Gen Agent Trust HubPassou
- SocketPassou
- SnykPassou
Perguntas
Como instalar a Excalidraw Diagram Generator no Claude Code?
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 Generator, 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.
Precisa de conta ou de chave de API?
Não. A skill não chama nenhum serviço: escreve o arquivo, que abre no excalidraw.com direto no navegador. O Python só entra se você quiser usar bibliotecas de ícones.
O que ela não faz?
Não põe imagem dentro do diagrama, não percebe sozinha quando uma caixa fica em cima da outra e simplifica as curvas. Os ícones de nuvem dependem de você baixar a biblioteca antes; sem ela, o diagrama sai com formas simples.
Roda no Codex e no Antigravity?
Sim. Ela vem do awesome-copilot, a coleção do GitHub pro Copilot, mas é um SKILL.md comum e funciona em qualquer agente que leia skills, Claude Code incluído.
Levar essa skill
1x excalidraw-diagram-generatorR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/github/awesome-copilot
Aprenda a usar
- Claude Design: como usar, até no plano grátis
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.
Na mesma prateleira
Ver as 1.414 skills do corredorGoogle Labs
design-
As telas que você já desenhou no Stitch viram um DESIGN.md que faz as próximas telas saírem com a mesma cara.Oficial64,7 mil instalações, grátismd shadcn-
O Claude escolhe, instala e ajusta os componentes do shadcn/ui no seu projeto, com as cores da sua marca, modo escuro e acessibilidade.OficialAuditada53,4 mil instalações, grátisui alchaincyf
huashu-
Protótipo, apresentação ou vídeo em HTML com cara de estúdio de design, partindo de três caminhos visuais que você escolhe antes de tudo.50,3 mil instalações, grátisdesign nextlevelbuilder
ckm:
O Claude cuida da parte visual do negócio: logo, papelaria da marca, banners no tamanho de cada rede, ícones, apresentações e posts.32,5 mil instalações, grátisdesign stitch-
Você descreve a tela do seu jeito e o Claude pede ao Stitch uma versão caprichada, coerente com o resto do projeto, e baixa o HTML e a imagem.Oficial25,1 mil instalações, grátisdesign ibelick
baseline-
As telas que o Claude faz saem limpas e consistentes, sem gradiente roxo, brilho e animação sobrando, e cada problema achado na revisão vem com a correção.Auditada24,2 mil instalações, grátisui taste-
Um DESIGN.md com regras exatas de cor, fonte e layout pro Google Stitch gerar telas que não parecem feitas por IA.OficialAuditada20,2 mil instalações, grátisdesign Expo
expo-
O Claude decide primeiro se vale animar e depois escreve a animação do jeito que não engasga, nem em Android de três anos atrás.OficialAuditada15,4 mil instalações, grátisanimation
Mais da loja GitHub
Ver a loja GitHubGitHub
git-
Faz commits no padrão Conventional Commits, analisando o diff e escrevendo a mensagemOficialAuditada47,3 mil instalações, grátiscommit multi-
Cria Dockerfiles multi-stage otimizados para qualquer linguagem ou frameworkOficialAuditada29,7 mil instalações, grátisstage- dockerfile documentation-
Escreve documentação de software de alta qualidade seguindo o framework DiátaxisOficialAuditada27,8 mil instalações, grátiswriter prd
Gera PRDs para sistemas e recursos com IA: resumo executivo, histórias de usuário e requisitos técnicosOficialAuditada24,1 mil instalações, grátisrefactor
Refatora código com precisão cirúrgica para melhorar a manutenção sem mudar o comportamentoOficialAuditada22,3 mil instalações, grátisjava-
Reúne boas práticas para desenvolver aplicações com Spring BootOficialAuditada21,3 mil instalações, grátisspringboot create-
Cria o README.md do projeto analisando o código, com estrutura e formatação profissionaisOficialAuditada19,1 mil instalações, grátisreadme gh-
Uma mudança grande vira uma pilha de PRs pequenos, um em cima do outro, que o revisor lê camada por camada e que entram em ordem.OficialAuditada18,7 mil instalações, grátisstack playwright-
Gera testes Playwright a partir de um cenário, explorando o site no navegador pelo MCP do PlaywrightOficialAuditada18,2 mil instalações, grátisgenerate- test github-
Você conta o problema em português e o Claude abre a issue no GitHub já no modelo certo, com tipo, etiqueta e responsável.Oficial17,5 mil instalações, grátisissues conventional-
Gera mensagens de commit no padrão Conventional Commits a partir de um template em XMLOficial17,1 mil instalações, grátiscommit postgresql-
Orienta o uso de recursos exclusivos do PostgreSQL, como JSONB e tipos avançados, e a otimização de consultasOficialAuditada16,5 mil instalações, grátisoptimization