Pular pro conteúdo

Excalidraw Diagram skill

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

instalações
8.500
estrelas no GitHub
5.110
No skills.sh desde
março de 2026
Licença
Sem licença declarada

Atualizada no GitHub em 1º de março de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

O que ela faz

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.

Nas palavras de quem fez

Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, or concepts.

coleam00, no SKILL.md

Quando usar

  • Explicar o seu método ou produto num desenho pra post ou aula
  • Mostrar a arquitetura de um sistema pra quem não é técnico
  • Ilustrar um vídeo do YouTube com um fluxo que ensina
  • Comparar o antes e o depois de um processo

Depois de instalar, é só pedir assim

  • Faz um diagrama em Excalidraw mostrando como o lead sai do anúncio, passa pela página de vendas e chega no checkout
  • Desenha a arquitetura desse projeto em Excalidraw, com exemplos reais das chamadas de API
  • Cria um diagrama que explique a diferença entre skill, MCP e plugin

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
  • SnykAlerta

Perguntas

Como instalar a Excalidraw Diagram 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, 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 que precisa pra funcionar?

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.

Funciona no Codex e no Antigravity?

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á pra usar as cores da minha marca?

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.

Levar essa skill

1x excalidraw-diagramR$ 0,00

TotalR$ 0,00

A skill sai aqui mesmo, na hora. Seus dados eu uso pra falar com você sobre o MazyOS.

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/coleam00/excalidraw-diagram-skill

Aprenda a usar