Draw Io skill

O Claude desenha e arruma diagramas do draw.io, alinha caixas e setas pelo código e entrega o PNG pronto pra slide ou documento.

por davila7

instalações: 842
estrelas no GitHub: 32,9 mil
No skills.sh desde: janeiro 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.

davila7
draw-io
O Claude desenha e arruma diagramas do draw.io, alinha caixas e setas pelo código e entrega o PNG pronto pra slide ou documento.Auditada842 instalações, grátis

O que ela faz

Ensina o Claude a criar e editar arquivos .drawio direto no XML: acha o elemento pelo texto, ajusta posição, largura e altura e alinha as caixas pelo centro. Depois converte pra PNG em resolução dobrada e fundo transparente com o comando drawio.

Segue regras de acabamento: tudo com rótulo, seta atrás das caixas e longe dos textos, margem de 30 px dentro dos quadros de agrupamento, fonte maior pra ler no PDF e legenda pros símbolos. Antes de entregar, confere o PNG numa lista de verificação.

Pra arquitetura na nuvem, traz um script em Python que acha, pelo nome do serviço, o código do ícone oficial da AWS no draw.io, numa lista que vem junto. E sugere dividir sistema complexo em vários diagramas, do panorama geral até o fluxo de dados.

Nas palavras de quem fez

draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.

davila7, no SKILL.md

Quando usar

Desenhar a arquitetura de um sistema na AWS
Arrumar um diagrama com seta passando por cima do texto
Gerar a imagem de um fluxo pra slide ou proposta
Explicar um sistema em etapas, do geral ao detalhe

Depois de instalar, é só pedir assim

Desenha em draw.io a arquitetura do meu app: site, API no Lambda e banco no DynamoDB, com os ícones da AWS
Esse diagrama.drawio tem seta em cima dos rótulos, arruma e exporta o PNG
Divide esse sistema em três diagramas: visão geral, componentes e fluxo de dados

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 Draw Io 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 Draw Io, 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 gerar o PNG, sim: o draw.io de computador, que traz o comando drawio. O script de busca de ícones da AWS pede Python. Só editar o .drawio não pede nada.

Precisa de conta paga?

Não. O draw.io é grátis e a skill não chama nenhum serviço pago.

O que ela não faz?

Não edita o .drawio.png gerado, só o .drawio de origem. E parte das regras foi pensada pra slides em Quarto e texto em japonês, então vale ajustar fonte e largura se o seu caso for outro.

Levar essa skill

1x draw-ioR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/davila7/claude-code-templates

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.