cathrynlavery/diagram-design
É uma habilidade (skill) que você instala no Claude Code para ensinar o agente a desenhar diagramas com cara de peça de design, não de caixinha genérica de IA: fluxogramas, diagramas de arquitetura, linhas do tempo, matrizes 2x2, gráficos, 29 tipos ao todo. A criadora, Cathryn Lavery, fundadora da BestSelf Co., fez para si mesma depois de cansar de perder 30 minutos no Figma toda vez que precisava de um esquema para o próprio site. O porém: quem desenha continua sendo o Claude, ela só entrega o manual de estilo, a qualidade final depende de como você pede e de revisão humana antes de ir para uma apresentação importante.
O que é, em uma frase honesta
Diagram Design não é um programa que você abre, é um pacote de instruções e modelos que o Claude Code carrega e passa a seguir à risca sempre que alguém pede um diagrama. Dentro do pacote há 29 arquétipos organizados em famílias, fluxo e lógica (arquitetura, fluxograma, sequência, máquina de estados), dados e hierarquia (organograma, árvore, diagrama de Venn), posicionamento e análise (matriz 2x2 de consultoria, radar, pirâmide), linha do tempo (Gantt, cronograma, flywheel), arquitetura corporativa e gráficos de dados. Cada um sai em três roupagens: minimalista claro, minimalista escuro e editorial completo.
A regra de ouro é uma paleta de cores enxuta, três fontes fixas, nada de sombra, cantos quase retos e uma grade de coordenadas disciplinada, tudo pensado para fugir do visual "óbvio de IA" que ferramentas como o Mermaid (a biblioteca de diagramas em caixinha que virou padrão em documentação técnica) costumam produzir. Tem também um modo de "onboarding de marca": aponta para o site de alguém e, em cerca de 60 segundos, a skill lê a paleta de cores e as fontes daquele site e usa isso nos diagramas seguintes.
Para que serve na prática
Instala-se de três jeitos: clonando o repositório e criando um atalho (symlink) para a pasta de skills do Claude Code, pelo sistema de plugins do próprio Claude Code, ou, para quem usa o Codex da OpenAI, por um comando de instalação equivalente. Depois de instalado, o pedido é em linguagem natural, dentro da própria sessão de trabalho: "desenha a arquitetura desse sistema", "faz uma linha do tempo do projeto", "compara essas quatro opções num quadrante". O Claude devolve um arquivo HTML autocontido com o desenho em SVG (formato vetorial que não perde qualidade em qualquer tamanho), sem JavaScript, sem imagem externa, sem passo de build, abre direto no navegador clicando duas vezes.
Para quem precisa do arquivo em PNG ou SVG separado para colar num slide, existe um comando que exporta usando Playwright (ferramenta de automação de navegador), o que exige instalar Python à parte. Um índice HTML dentro do próprio repositório funciona como vitrine: mostra os 29 tipos lado a lado nas três variações para você escolher antes de pedir.
Quando faz sentido pra você que lidera
O ganho é tempo e consistência visual sem contratar designer: qualquer pessoa do time que use Claude Code produz um diagrama de arquitetura, um roadmap ou uma matriz de decisão com a mesma cara, porque a regra de estilo está codificada na skill, não na memória de quem desenha. Isso importa em due diligence, documentação técnica ou material para investidor, onde um diagrama capenga em caixinha cinza denuncia pressa. Os poréns que pesam na sua cadeira: isso só existe dentro do Claude Code (ou Codex), então pressupõe que seu time já usa um agente de codificação no dia a dia, não é uma ferramenta que você entrega para alguém de marketing sem contexto técnico.
É projeto jovem, criado em abril de 2026, mantido por uma única pessoa como efeito colateral de outro negócio, sem contrato de suporte. E por mais caprichado que seja o resultado, ele ainda sai de um agente de IA seguindo regras: vale olhar antes de embutir num deck de board ou material público, principalmente em diagramas com muita informação técnica onde um erro de leitura do agente pode virar erro no desenho.
Por que está no mapa
O repositório nasceu com 13 tipos de diagrama e em poucos meses dobrou para 29, passando de 3,8 mil estrelas, sinal de que resolveu uma dor real e comum: o visual entregue por padrão pelos agentes de IA em diagramas é reconhecidamente feio e genérico, e isso incomoda gente que se importa com a marca. Representa também um padrão maior que vale entender: a "skill" (habilidade instalável) virou a forma mais leve de especializar um agente genérico em uma tarefa específica, sem treinar modelo nenhum, é regra de negócio e estilo em texto, versionada como código. E há um detalhe que importa para quem lidera: Cathryn Lavery não é engenheira de formação, é fundadora da BestSelf Co.
(empresa que ela construiu, vendeu para um fundo de private equity em 2022 e recomprou em 2024); ela usou o Claude Code para construir e publicar uma ferramenta de desenvolvedor com acabamento profissional sozinha. É um exemplo concreto de fundador de negócio virando construtor de software com agente de IA, sem equipe de engenharia por trás.
Valeu pelo feedback. Isso ajuda a afiar a biblioteca.