Diagrama feito por IA costuma sair torto: caixas sobrepostas, setas que cruzam tudo, cores aleatórias. O diagram-design é uma skill aberta que ensina o seu agente de IA a desenhar diagrama do jeito que um designer faria, e você instala uma vez só.
Skill é um pacote de instruções que o agente consulta quando a tarefa pede. Com o diagram-design instalado, basta descrever o que você quer, como o fluxo de atendimento da sua loja ou o cronograma de um projeto, e o agente escolhe o tipo de diagrama e monta o desenho.
O resultado é um arquivo só, em HTML com SVG, que abre em qualquer navegador e respeita as cores e a fonte da sua marca. Este guia mostra como instalar, quais tipos existem, como pedir bem e como transformar o diagrama em imagem para a apresentação ou o post.
Onde funciona
A skill foi feita para os agentes de programação mais usados hoje. O repositório cita Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid e Pi, e o README também lista Gemini CLI, Cline, Windsurf, Amp, Kiro e OpenCode.
A skill é gratuita e de código aberto (licença MIT, que permite usar e modificar à vontade). O agente onde você instala pode ser pago, como é o caso do Claude Code e do Codex: o custo é do agente, não da skill.
Como instalar
No terminal, dentro da pasta do seu projeto, rode:
npx skills add cathrynlavery/diagram-design
O npx vem junto com o Node.js; se o comando não for reconhecido, instale o Node.js antes. Depois disso, abra o agente normalmente: ele passa a enxergar a skill e a usá-la quando você pedir um diagrama.
Repositório oficial, com a lista completa e exemplos: github.com/cathrynlavery/diagram-design.
Os tipos de diagrama
São mais de 40 tipos (o próprio repositório fala em 44 numa parte e 45 em outra). Alguns dos mais úteis no dia a dia:
- Fluxograma: o passo a passo de um processo, com decisões do tipo "sim ou não".
- Gantt (cronograma): tarefas de um projeto distribuídas no tempo.
- Sequência: quem fala com quem, em que ordem (cliente, atendente, sistema).
- Arquitetura: as peças de um sistema e como se conectam.
- ER: as tabelas de um banco de dados e a relação entre elas.
- Kanban: colunas de "a fazer, fazendo, feito".
- Venn: o que dois ou três grupos têm em comum.
- Sankey: de onde vem e para onde vai um fluxo (dinheiro, visitas, estoque).
- Espinha de peixe: as causas possíveis de um problema.
- Cascata, Wardley, UML, mapa de calor e dispersão, para casos mais técnicos.
Organograma não aparece como tipo próprio, mas uma hierarquia de time sai bem com os tipos de árvore e de arquitetura. Se você não souber qual escolher, descreva o que quer mostrar e deixe o agente decidir.
Como pedir bem
Descreva o conteúdo, não o desenho. O agente sabe desenhar; o que ele não sabe é o seu processo.
Exemplo de pedido:
Faz um fluxograma do atendimento da minha loja pelo WhatsApp: cliente manda mensagem, a gente pergunta se é pedido novo ou dúvida. Pedido novo vai para o vendedor; dúvida sobre entrega vai para a logística; o resto o atendente responde. Usa as cores #0F172A e #F97316 e a fonte Inter.
Três detalhes que fazem diferença:
- Liste as etapas e as decisões. Cada "se isso, então aquilo" vira um losango no fluxograma.
- Informe cores e fonte. Passe o código da cor (o hexadecimal, tipo
#F97316) e o nome da fonte da sua marca. - Peça ajuste em linguagem normal. "Aumenta o texto", "junta essas duas caixas", "troca para cronograma" funcionam como pedido de revisão.
Exportar como imagem
O arquivo HTML abre no navegador e já serve para mostrar na tela. Para colocar numa apresentação ou num post, peça ao agente para exportar em PNG. A exportação usa o Playwright, uma ferramenta gratuita que abre o navegador por trás e tira a foto do diagrama; se ela não estiver instalada, o agente avisa e instala.
Também dá para abrir o HTML no navegador e tirar um print, se você só precisa de uma imagem rápida.
Por que confiar
O projeto passou de 52 mil estrelas no GitHub e esteve entre os mais em alta da plataforma em 12 de outubro de 2026. Estrela não garante qualidade, mas mostra que muita gente testou e achou útil.
Fatos conferidos em github.com/cathrynlavery/diagram-design em 12/10/2026.