Excalidraw skill

Explicação de processo ou de sistema vira um diagrama limpo, que abre editável no excalidraw.com, com a imagem em SVG ou PNG pronta pra usar.

por agents365-ai

instalações: 4.600
estrelas no GitHub: 91
No skills.sh desde: maio de 2026
Licença: Sem licença declarada

Atualizada no GitHub em 16 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

agents365-ai
excalidraw
Explicação de processo ou de sistema vira um diagrama limpo, que abre editável no excalidraw.com, com a imagem em SVG ou PNG pronta pra usar.4.600 instalações, grátis

O que ela faz

Escreve o desenho como um arquivo .excalidraw e escolhe o formato pela relação da ideia: fluxograma, arquitetura, sequência, mapa mental ou raias. Segue regras próprias de tamanho de fonte e espaçamento, e uma paleta fixa de cores por função, como entrada, dado, decisão e erro.

Exporta de dois jeitos. Pelo Kroki, que só precisa do curl e devolve SVG. Ou por um programa local, o excalidraw-brute-export-cli, que usa o Firefox e gera PNG e SVG. Também puxa ícones prontos das bibliotecas da comunidade, como os de AWS e de rede, com um script em Python que vem junto.

Com o PNG exportado, olha a imagem e corrige texto cortado, caixa sobreposta e seta atravessando forma. Então mostra pra você e aplica cada ajuste pedido no mesmo arquivo. Passadas cinco rodadas, sugere terminar no excalidraw.com, onde o arquivo abre editável.

Nas palavras de quem fez

Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex…

agents365-ai, no SKILL.md

Quando usar

Explicar pra um cliente como funciona o fluxo de venda ou de atendimento
Desenhar a arquitetura de um sistema com várias partes conversando
Montar o mapa mental de um curso, conteúdo ou planejamento
Mostrar o passo a passo de um processo com decisões no meio

Depois de instalar, é só pedir assim

/excalidraw desenha o fluxo do meu funil: anúncio, página, checkout e e-mail de boas-vindas
/excalidraw faz um mapa mental com os módulos do meu curso
/excalidraw mostra como meu site conversa com o banco e com o gateway de pagamento

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

Perguntas

Como instalar a Excalidraw 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, 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 instalar alguma coisa?

Pra SVG, só o curl, que já vem no Mac e no Linux; o arquivo vai pro serviço kroki.io pra virar imagem. Pra PNG, precisa do excalidraw-brute-export-cli pelo npm e do Firefox pelo Playwright e, no Mac, de um ajuste único no programa que a skill ensina.

Ela entra sozinha quando eu peço um diagrama?

Não. Vem marcada pra rodar só quando chamada pelo nome, com /excalidraw. Não exporta PDF nem cobre imagem colada dentro do desenho, e pra diagrama técnico preciso, UML rigoroso ou ícone oficial de fornecedor a própria skill indica o drawio.

Roda no Codex e no Antigravity?

Instala nos dois pelo npx skills add. Como tudo é arquivo JSON e comando de terminal, roda em agente que execute comando; a conferência visual do PNG pede um modelo que leia imagem.

Levar essa skill

1x excalidrawR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/agents365-ai/365-skills

Aprenda a usar

Proposta Comercial de Site: modelo que fecha
Como montar uma proposta comercial de criação de site que o cliente aprova no WhatsApp: por que mostrar o site pronto vende mais que PDF de 15 páginas.