Pular pro conteúdo

Drawio skill

Você pede o diagrama em português, o agente escreve a especificação em YAML e entrega o .drawio editável junto com a imagem pronta.

por bahayonghang

instalações
8.500
estrelas no GitHub
294
No skills.sh desde
janeiro de 2026
Licença
MIT

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

O que ela faz

Tudo passa por uma especificação em YAML que o agente escreve a partir do seu pedido, de um Mermaid, de um CSV ou de um .drawio que já existe. Um programa em Node lê esse YAML e gera o .drawio editável e um PNG de 300 dpi (ou SVG, sem o draw.io Desktop), sem depender de internet nem de servidor.

Cobre arquitetura de software e de nuvem, mapa de rede com sub-rede e VLAN, fluxograma, raias, organograma, UML, diagrama de banco e diagramas de agentes de IA e RAG. Também lê Terraform, Kubernetes, Docker Compose, SQL, OpenAPI e pipelines do GitHub e do GitLab, além de código em Python, JavaScript, Go e Rust.

Pra refazer uma imagem ou print, copia a estrutura e as cores do original. Tem temas, paletas pensadas pra daltônico e pra impressão em preto e branco, fórmulas em LaTeX e busca de ícones de nuvem, Kubernetes e Cisco. Antes de entregar, valida o arquivo e confere o PNG exportado.

Nas palavras de quem fez

Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org…

bahayonghang, no SKILL.md

Quando usar

  • Desenhar a arquitetura do seu app com cores por função
  • Montar o mapa de rede de um escritório ou de um servidor
  • Redesenhar um diagrama que só existe como imagem ou print
  • Converter um fluxograma em Mermaid pra draw.io
  • Gerar o diagrama de um projeto a partir do docker-compose ou do Terraform

Depois de instalar, é só pedir assim

  • /drawio cria a arquitetura do meu app: site em Next.js, banco Postgres, fila de e-mails e pagamento por API
  • /drawio replicate: refaz esse print de diagrama num .drawio editável
  • Transforma esse fluxograma em Mermaid num .drawio com uma paleta que funcione pra daltônico

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 Drawio 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 Drawio, 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 ter instalado?

Node 20 ou mais novo. Pra sair o PNG de 300 dpi, PDF ou JPG, precisa do draw.io Desktop; sem ele, a imagem sai em SVG. Não pede chave de API nem servidor MCP: o ajuste ao vivo no navegador, que usa MCP, é opcional.

Serve pra figura de artigo científico?

Não é o foco. Pra artigo, tese ou padrão IEEE, o mesmo autor tem outra skill, a drawio-academic-skills, com as regras de publicação. Esta é pra diagrama de trabalho.

Funciona no Codex e no Antigravity?

O trabalho é feito por um programa em Node chamado no terminal, então roda em agente que execute comandos. Algumas instruções usam ferramentas do Claude Code, como a pergunta de múltipla escolha pra escolher paleta.

Levar essa skill

1x drawioR$ 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/bahayonghang/drawio-skills

Aprenda a usar

Mais da loja bahayonghang

Ver a loja bahayonghang