O que é Diagram Design?
O Diagram Design é uma skill de agente de Cathryn Lavery, publicada sob a empresa dela, LittleMight, que transforma um pedido em linguagem simples em um diagrama escrito como um único arquivo HTML com SVG inline. Ela cobre 45 tipos de diagrama, de arquitetura, fluxogramas, diagramas de sequência e de estado a quadrantes, treemaps e desenhos axonométricos explodidos, cada um nas variantes minimal light, minimal dark e full-editorial. O estilo da casa é fixo: traços finos de 1px, sem sombras, uma única cor de destaque para a uma ou duas coisas que importam e todas as coordenadas em uma grade de 4px.
Peça que ela faça o onboarding a partir de um site e o agente busca a página inicial, extrai a paleta e a pilha de fontes, verifica o contraste WCAG AA e grava os tokens em um guia de estilo que todo diagrama posterior lê; perfis nomeados mantêm separadas as marcas de vários clientes. Ela também redesenha arquivos existentes de draw.io, Mermaid e Excalidraw, e exporta SVG para o Figma ou PNG para slides.
Ela é instalada com `npx skills add cathrynlavery/diagram-design` em qualquer host de Agent Skills, ou como plugin para Claude Code, Codex, GitHub Copilot, Factory Droid, Qoder, Pi e Claude Cowork.
Diagram Design vale a pena?
O Diagram Design é a skill de diagramas a ser batida para qualquer coisa que você pretenda publicar, e o motivo está visível na sua galeria, não na sua lista de recursos. O repositório foi criado em abril de 2026 e tem cerca de 62.200 estrelas no GitHub; o skills.sh conta 21.200 instalações pela sua CLI, o que exclui os marketplaces de plugins. Ele não tem versões marcadas, mas é mantido diariamente: o manifesto do plugin chegou à versão 2.6.136 em 27 de outubro de 2026.
As regras de design fazem o trabalho. A premissa de Lavery é que o modelo já entende o conteúdo e só lhe falta bom gosto, então a skill coloca esse gosto por escrito: uma densidade-alvo de 4 em 10, uma cor de destaque reservada e uma grade de 4px, com verificações de CI para elementos sobrepostos e cortados. O onboarding de marca importa mais do que parece. Todo diagrama depois dele usa o fundo, a cor de chamada para ação e as fontes do seu site, e a verificação de contraste propõe um valor mais escuro quando uma cor da marca falha em rótulos de 9 a 12px.
Os comandos de importação são o ganho prático para equipes com diagramas antigos. Um arquivo draw.io, Mermaid ou Excalidraw é redesenhado em um de três níveis de detalhe (fiel até 24 nós, equilibrado até 12, simplificado até 7), e toda importação termina com um registro do que foi mesclado ou descartado. O README é franco sobre o custo: a saída depende do modelo, o mesmo prompt pode gerar layouts diferentes em duas execuções, e não há fonte editável para revisar em um pull request. Para documentação de arquitetura que muda a cada sprint, o Mermaid continua sendo a ferramenta melhor, como o próprio README diz.
Algum atrito é proposital. Uma barreira na primeira execução para e pergunta sobre o onboarding em cada projeto novo, o que serve a uma pessoa, mas bloqueia execuções sem supervisão (a issue #262 propõe uma forma de contornar isso). A exportação em PNG precisa de Playwright e Chromium, e os diagramas carregam fontes do Google Fonts por padrão, a única requisição de rede que fazem, a menos que você peça fontes do sistema. Ao lado do fireworks-tech-graph, voltado a diagramas de arquitetura técnica, o Diagram Design cobre muito mais tipos e aplica a marca a eles; o anatomy vai mais fundo em uma única forma isométrica e interativa.
Onde ele se destaca
Um fundador que escreve um blog semanal da empresa
Acrescentar aos posts diagramas que pareçam parte do site, e não caixas arredondadas genéricas
Rode o onboarding uma vez com a URL do blog, depois peça um quadrante ou uma pirâmide por post e incorpore o HTML ou o SVG exportado. Custa só tokens do modelo e substitui as sessões de 30 minutos no Figma que Lavery descreve.
Um arquiteto de soluções em uma consultoria que atende vários clientes
Transformar os diagramas antigos de draw.io de cada cliente em slides com as cores daquele cliente
Salve um perfil por cliente e coloque um marcador `.diagram-design` em cada projeto, depois rode `/diagram-design:import-drawio file.drawio --size=slide-16x9 --detail=simplified --audience=executive`. O registro de fidelidade lista o que foi condensado, e vale conferi-lo antes que o cliente veja.
Um líder de equipe de plataforma documentando um sistema para um manual de engenharia
Produzir um diagrama de arquitetura caprichado para uma página publicada do manual
Peça um diagrama de arquitetura ou de sequência em palavras simples e exporte SVG com `/export-diagram --svg-only`. Mantenha a fonte em Mermaid para os diagramas que a equipe edita a cada sprint; gerar de novo pode mudar o layout, e não há nada para comparar em diff.
Antes de decidir
- Configuração
- `npx skills add cathrynlavery/diagram-design` para qualquer host de Agent Skills, ou `/plugin marketplace add cathrynlavery/diagram-design` e depois `/plugin install diagram-design@diagram-design` no Claude Code para ter comandos de barra e atualizações. A exportação em PNG precisa de `pip install playwright && playwright install chromium`.
- Integrações
- Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, Pi, Gemini CLI, Cline, Windsurf, Amp, Kiro, OpenCode e Claude Cowork. Importa draw.io, Mermaid e Excalidraw; exporta HTML, SVG e PNG em tamanhos para slide, documento, redes sociais e impressão.
- Dados e privacidade
- Sem servidor, contas, analytics ou telemetria, segundo a política de privacidade. Os arquivos gerados carregam o Google Fonts por padrão, o que envia o endereço IP de quem visualiza ao Google; a opção de fontes do sistema elimina todas as requisições de rede. O onboarding de marca só busca o site que você indicar. Licença MIT.
- Custo em escala
- Gratuito para equipes de qualquer tamanho. O custo são tokens do modelo para cada diagrama e redesenho; uma equipe que o adote como padrão não paga nada além dos assentos de agente que já tem.
- Limites
- Cerca de 45 issues e pull requests abertos, a maioria pedindo novos tipos de diagrama e correções no importador de Mermaid e nos verificadores de layout. A qualidade da saída depende do modelo, e edições no guia de estilo instalado podem ser substituídas por atualizações, a menos que você use perfis salvos ou um clone editável.
O que é bom
- 45 tipos de diagrama em um estilo editorial consistente
- Extrai paleta e fontes do seu site, com verificação de contraste
- Redesenha arquivos de draw.io, Mermaid e Excalidraw
- HTML autocontido com SVG acessível; licença MIT
O que não é
- Sem fonte editável para comparar em diff ou arrastar
- O mesmo prompt pode produzir layouts diferentes
- A barreira de estilo na primeira execução interrompe execuções sem supervisão
- A exportação em PNG precisa de Playwright e Chromium
Ideal para
Escritores, fundadores e engenheiros que publicam diagramas em posts, apresentações e documentação e querem que eles combinem com a marca.
Alternativas ao Diagram Design
Diagram Design: perguntas frequentes
- Diagram Design vale a pena?
- O Diagram Design dá aos agentes o bom gosto que lhes falta, e seus diagramas parecem publicados, não gerados, ao preço de uma saída que você não consegue comparar em diff nem arrastar. Damos nota 4.3 de 5.
- Quanto custa Diagram Design?
- Gratuito e de código aberto (MIT). Você paga apenas o uso do modelo do seu agente.
- Quais são as desvantagens de Diagram Design?
- Sem fonte editável para comparar em diff ou arrastar; o mesmo prompt pode produzir layouts diferentes; a barreira de estilo na primeira execução interrompe execuções sem supervisão; a exportação em PNG precisa de Playwright e Chromium.
- Para quem Diagram Design é indicado?
- Escritores, fundadores e engenheiros que publicam diagramas em posts, apresentações e documentação e querem que eles combinem com a marca.
- Quanto custa Diagram Design para uma equipe ou em produção?
- Gratuito para equipes de qualquer tamanho. O custo são tokens do modelo para cada diagrama e redesenho; uma equipe que o adote como padrão não paga nada além dos assentos de agente que já tem.
- Diagram Design é seguro para dados da empresa?
- Sem servidor, contas, analytics ou telemetria, segundo a política de privacidade. Os arquivos gerados carregam o Google Fonts por padrão, o que envia o endereço IP de quem visualiza ao Google; a opção de fontes do sistema elimina todas as requisições de rede. O onboarding de marca só busca o site que você indicar. Licença MIT.
- Quais são as melhores alternativas ao Diagram Design?
- As alternativas mais próximas que analisamos são fireworks-tech-graph, Anatomy e Anthropic Skills.
Respostas verificadas em 28 de out. de 2026.