Diagrama pedido para um agente costuma sair igual: caixinha arredondada, seta cinza, bloco de Mermaid que serve para pensar e morre ali. Não é material de apresentação.
Estou usando a skill de diagramas da Cathryn Lavery e os resultados são sensacionais. O repositório é cathrynlavery/diagram-design, sob licença MIT, e a galeria com todos os exemplos está em cathrynlavery.github.io/diagram-design.
A imagem de capa deste post é um exemplo gerado pela skill: arquitetura de ponta a ponta, com fontes de dados, ingestão, armazenamento, transformação e visualização. Nada de sombra, nada de gradiente, nada de ícone genérico.
O que a skill entrega
A proposta do repositório é direta e está escrita no próprio README: “No shadows. No Mermaid slop.” Sem sombras, sem gambiarra de Mermaid.
Na prática, o que você recebe:
- 39 tipos de diagrama editorial (número conferido no repositório em 14/09/2026): arquitetura, fluxograma, sequência, ER, raia, linha do tempo, diagrama de Venn, organograma e por aí vai;
- Três variantes estáticas para cada tipo: minimal light, minimal dark e full-editorial;
- Saída em HTML autocontido, além de exportação para SVG (para levar ao Figma ou Illustrator), PNG e JSON de metadados;
- Sem etapa de build, sem JavaScript e sem dependência de imagem externa. O arquivo abre no navegador e funciona.
O detalhe do HTML autocontido é o que mais mudou meu fluxo. O diagrama vira um arquivo só, que eu mando por e-mail, abro em qualquer máquina e versiono junto com a documentação. Não depende de servidor, não depende de CDN, não quebra daqui a seis meses porque um serviço saiu do ar.
Tip
Se você já tem diagramas em Mermaid espalhados pela documentação, dá para pedir para a skill redesenhar o bloco. O README trata isso como caso de uso explícito: importar de Mermaid e redesenhar no design system dela.
Animação, quando faz sentido
A galeria tem exemplos com animação, e eles funcionam bem em apresentação: aquele diagrama que se monta enquanto você fala.
O que me convenceu foi a decisão de projeto: o estático continua sendo o padrão. O movimento é opcional, pensado para explicações que têm ordem, e existe em modos separados (none, reveal, step, loop). Quem tem prefers-reduced-motion ligado no sistema recebe automaticamente o quadro final completo, sem animação.
É acessibilidade tratada como requisito, não como item de backlog. Isso é raro em ferramenta visual.
Instalando no Claude Code
No Claude Code são dois comandos:
/plugin marketplace add cathrynlavery/diagram-design/plugin install diagram-design@diagram-designO repositório também documenta instalação para Codex, GitHub Copilot, Factory Droid, Pi e Kiro. Para exportar PNG é preciso Python 3 com Playwright; para o resto, navegador e nada mais.
E quem não usa ferramenta de programação?
Essa é a parte que mais gerou dúvida quando publiquei isso no LinkedIn.
Você não precisa de terminal. Dá para importar a skill no Claude Web ou no Claude Cowork, pela função Gerenciar Habilidades → Importar.
O pulo do gato é o formato: a importação espera um arquivo .zip com a skill dentro. Baixar o repositório inteiro não resolve, é preciso empacotar a pasta da skill. Existem utilitários web que baixam uma subpasta do GitHub já compactada, e foi um deles que indiquei no post original.
Note
Vale o aviso de sempre: skill importada é código de terceiro rodando com o seu contexto. Antes de importar qualquer coisa, olhe o conteúdo do SKILL.md e da pasta de assets. Nesse caso a licença é MIT e o repositório é público, o que facilita a conferência.
Uma alternativa que apareceu nos comentários
Nos comentários do post original apareceu o archify como opção parecida: também MIT, também gerando HTML autocontido, com SVG, PNG e WebM animado.
Ainda não testei. Anotei aqui porque parece seguir a mesma linha: transformar descrição de sistema em diagrama que dá para mostrar, em vez de diagrama que dá para entender só quem desenhou.
Por que isso importa para quem trabalha com agentes
Diagrama bom é infraestrutura de comunicação. Quando o agente devolve um artefato visual que sobrevive à reunião, some a etapa chata de reconstruir tudo no Figma só para poder mostrar.
É o mesmo raciocínio que me levou a manter a coleção de Agent Skills aberta: uma skill boa não é a que faz mais coisa, é a que faz o agente tomar a decisão certa sem você repetir a instrução toda vez. A diagram-design acerta nisso. Ela não ensina o modelo a desenhar, ela dá a ele um sistema visual para obedecer.
Se o que você quer é um rascunho em trinta segundos no meio de uma call, o Napkin AI resolve. Para o diagrama que vai para a documentação, para o deck ou para o post, essa skill entrega outro nível de acabamento.
Testem.
Publicado originalmente no LinkedIn em 19/08/2026.
