Crie diagramas profissionais com IA
O design de diagramas, desenvolvido por Cathryn Lavery, inclui 29 tipos diferentes de diagramas editoriais preparados para a ferramenta de codificação apoiada por inteligência artificial Claude Code. Esta biblioteca apresenta diagramas complexos diretamente usando HTML e gráficos vetoriais escaláveis (SVG) em vez de ferramentas de diagramação padrão.
Atualizações
- 26 de outubro de 2026: Estrelas 58,061 → 61,113.
- 19 de outubro de 2026: Estrelas 54,882 → 58,061.
- 14 de outubro de 2026: Estrelas 51,670 → 54,882.
- 12 de outubro de 2026: Estrelas 48,430 → 51,670.
O que você ganha
- Oferece 27 tipos diferentes de diagramas de qualidade editorial
- Produz visuais limpos usando HTML e SVG
- Cria rapidamente designs adequados à identidade da sua marca
Instalação
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
# Pi: register the checkout as a local package
pi install ~/code/diagram-design
# Claude Code: symlink the inner skill
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-designSe você não programa
Diga a Claude Code ou qualquer assistente de IA que você usa para analisar a arquitetura ou fluxo de trabalho do meu projeto atual. Em seguida, peça para ele criar um diagrama HTML e SVG limpo, escolhendo aquele que melhor se adapta ao tópico que estou explicando entre os 27 tipos visuais diferentes na biblioteca de design de diagramas. Especifique que o design faça referência ao meu site para que seja compatível com as cores e a linguagem visual da minha marca.
Repositório: https://github.com/cathrynlavery/diagram-design. Baseie-se nas instruções oficiais no arquivo README deste repositório para a instalação e execução.
Antes de começar, verifique em qual sistema operacional estamos e se as ferramentas necessárias (ex: Python, Node.js, Git, Docker) estão instaladas. Instale as que faltarem passo a passo de acordo com este sistema.
Crie uma pasta nova e vazia para trabalhar. Não toque em arquivos fora desta pasta e não exclua nada. Antes de executar cada comando, diga o que você vai fazer em uma frase.
Diga-me o que devo ver na tela ao final de cada etapa. Se ocorrer um erro, colarei a mensagem de erro para você exatamente como ela é, e vamos corrigi-la juntos.
Termos relacionados do glossário
Links
A TreScout não desenvolveu esta ferramenta · nós a encontramos nas tendências do GitHub e a apresentamos. Esta página descreve o repositório em 2026-08-13: A contagem de estrelas e o nosso texto são daquele dia, o repositório pode ter mudado desde então. Consulte o link do repositório para ver o estado atual. O texto de apresentação foi preparado com IA a partir da própria documentação do repositório e esta página foi traduzida automaticamente do original em turco · a versão turca é a que vale.