Claude Code ganha 27 diagramas editoriais com projeto de 116 dias
Skill de Cathryn Lavery gera diagramas em HTML e SVG, sem Figma, JavaScript ou imagens externas.
Quem pede ao Claude um diagrama costuma receber caixas arredondadas genéricas, sem relação com o site da empresa. Cathryn Lavery criou o diagram-design para resolver esse problema com uma skill do Claude Code que gera diagramas editoriais em HTML e SVG. O projeto nasceu em 2026-04-16 e já soma 5.791 estrelas e 394 forks no GitHub. Serve para quem precisa de arquitetura, fluxos ou gráficos com a identidade visual da própria marca, sem passar pelo Figma.
A skill gera arquivos estáticos e lê a identidade visual
O README lista 27 tipos de diagrama, enquanto a descrição oficial fala em 29. A versão mais recente aparece como 2.0 e acrescenta o tipo Loop, com um hub de memória compartilhada e linhas tracejadas que representam gravações de volta. A coleção inclui arquitetura, fluxograma, máquina de estados, modelo de dados, linha do tempo, swimlane, organograma, Venn, pirâmide, radar, Gantt, scatter plot, processo e matriz de segurança.
Cada tipo tem três variantes: minimal light, minimal dark e full-editorial. Os arquivos abrem diretamente no navegador. Não exigem etapa de build, JavaScript ou imagens externas.
A skill lê o site indicado pelo usuário e mapeia cores e fontes para os diagramas. O README promete uma adaptação de marca em 60 segundos. O próprio projeto recomenda densidade visual de 4/10 e reserva a cor de destaque para um ou dois elementos.
O código usa HTML e SVG autocontidos. O repositório identifica HTML como linguagem. Isso deixa o resultado fácil de abrir e editar localmente, mas limita a ferramenta a diagramas estáticos; quem precisa de interação em JavaScript, edição visual no Figma ou componentes dinâmicos não encontra esse fluxo aqui.
A instalação depende do Claude Code
A skill fica em skills/diagram-design/, não na raiz do repositório. Para instalar pelo caminho recomendado, o usuário clona cathrynlavery/diagram-design e cria um link simbólico em ~/.claude/skills/diagram-design. Depois, reinicia o Claude Code.
git clone [email protected]:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design
O Claude Code registra a skill como diagram-design e a aciona quando o usuário pede um diagrama. O projeto também pode ser instalado como plugin, mas o README alerta que alterações em references/style-guide.md não sobrevivem às atualizações do cache do plugin. Quem pretende personalizar o guia deve preferir o clone com link simbólico.
O diagrama final roda no navegador local. A geração depende do Claude Code, e a adaptação visual depende da leitura do site fornecido; o README não descreve outro serviço externo, servidor próprio ou banco de dados. A ferramenta não exige Figma para criar ou revisar as peças.
A licença MIT permite usar, modificar e redistribuir o código, desde que o aviso de copyright e a licença acompanhem a cópia. O projeto tinha 4 issues abertas no momento dos dados verificados e recebeu o último commit em 2026-08-11. Com 116 dias de existência, 5.791 estrelas e versão 2.0, o interesse cresceu rápido, mas a pouca idade ainda recomenda testar os tipos e adaptar o guia antes de adotá-lo como padrão de produção.
Fontes
Como fazemos: nossa equipe monitora diariamente os repositórios de código aberto em maior alta e produz esta cobertura com apoio de modelos de linguagem, sempre a partir de dados verificados na fonte primária — repositório, documentação oficial e ranking público. Os números de estrelas e a posição no ranking refletem o momento da coleta. Entenda o método.