diagram-generator
Faz seu agente criar e entender diagramas a partir de texto ou código. Ajuda a visualizar processos complexos, como fluxos de trabalho ou arquiteturas. Facilita a compreensão de sistemas.
O que ela faz
Este agente cria diagramas visuais a partir de descrições em texto. Ele pode gerar fluxogramas, diagramas de arquitetura, fluxos de dados e mais, transformando suas ideias em imagens claras e editáveis.
Quando usar
- ✓Transformar anotações em um fluxograma visual.
- ✓Criar um diagrama de arquitetura para um relatório.
- ✓Desenhar um caminho de ataque de segurança.
Exemplo do que pedir para a IA
“Crie um fluxograma mostrando o processo de login de um usuário, incluindo sucesso e falha.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Você descreve o que quer ver no diagrama em texto simples. O agente escolhe a melhor forma de desenhar (usando linguagens como Mermaid ou Graphviz) e gera o código para o diagrama, que pode ser visualizado ou editado.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill diagram-generatorOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/diagram-generator/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Suporte upstream incluído
Arquivos de suporte são incluídos em caminhos relativos à skill. Veja UPSTREAM-NOTICE.md para suas fontes fixadas, licenças, hashes e alterações de importação.
Gerador de Diagramas
Quando Usar
- Transformar análises textuais em visuais Mermaid/Graphviz/PlantUML.
- Produzir diagramas de caminhos de ataque ou arquitetura para relatórios.
Propósito
Criar diagramas claros e editáveis a partir de entradas confusas ou estruturadas. Prefira a fonte do diagrama baseada em texto primeiro, para que o resultado possa ser revisado, versionado e refinado. Renderize para arquivos apenas quando o usuário solicitar uma imagem/PDF ou quando um artefato para download ajudar materialmente.
Fluxo de trabalho padrão
- Identifique a intenção do usuário, o público e o material de origem.
- Escolha a família e a linguagem do diagrama usando a tabela de decisão abaixo.
- Normalize entidades, relacionamentos, rótulos, estados, ramificações e informações de tempo/ordem antes de escrever o código do diagrama.
- Gere código de diagrama conciso e legível.
- Valide a sintaxe mentalmente e, ao criar arquivos, execute
scripts/render_diagram.py. - Retorne o código do diagrama mais uma breve nota sobre as suposições. Ao gerar arquivos, inclua links para os arquivos de saída.
Não peça esclarecimentos em excesso. Se a solicitação for subespecificada, faça suposições razoáveis e rotule-as brevemente.
Tabela de decisão de linguagem de diagramas
Use Mermaid, a menos que outra linguagem seja claramente melhor.
| O usuário quer | Prefira | Por quê |
|---|---|---|
| fluxo de processo, árvore de decisão, raia simples | Mermaid flowchart | legível e fácil de colar no Markdown |
| sequência de interações de sistema/usuário | Mermaid sequenceDiagram ou PlantUML sequence | Mermaid para documentação; PlantUML para formalidade UML |
| ciclo de vida, máquina de estados, transições | Mermaid stateDiagram-v2 ou PlantUML state | sintaxe de transição compacta |
| esquema de banco de dados, entidades, relacionamentos | Mermaid erDiagram | notação ER portátil |
| modelo de classe/interface/objeto | Mermaid classDiagram ou PlantUML class | Mermaid para documentação; PlantUML para UML detalhada |
| cronograma do projeto | Mermaid gantt | sintaxe de linha do tempo concisa |
| hierarquia, ideias, notas | Mermaid mindmap | bom padrão para mapas de ideias |
| jornada do cliente/produto | Mermaid journey | notação de jornada integrada |
| histórico do git | Mermaid gitGraph | notação git integrada |
| grafo de dependência, grafo de pacotes, rede grande | Graphviz DOT | melhores motores de layout para grafos densos |
| arquitetura com camadas, clusters, limites | Mermaid flowchart com subgrafos, clusters Graphviz ou estilo C4 PlantUML | escolha com base na fidelidade solicitada |
| relacionamento ponderado de fluxo/estilo Sankey | Mermaid sankey-beta quando suportado, caso contrário SVG ou Graphviz | o suporte do Mermaid pode variar por renderizador |
| visual personalizado onde as linguagens de origem não se encaixam bem | SVG | controle preciso sobre layout e estilo |
Política de saída
- Sempre forneça código editável, a menos que o usuário solicite explicitamente apenas uma imagem.
- Padrão para um único diagrama melhor. Ofereça alternativas apenas quando genuinamente úteis.
- Prefira sintaxe estável e simples em vez de recursos sofisticados que podem não renderizar em versões mais antigas do Mermaid/PlantUML.
- Use rótulos curtos. Divida textos longos em notas fora do diagrama quando necessário.
- Evite IDs de nó ambíguos. Use IDs ASCII e rótulos legíveis por humanos.
- Preserve a terminologia do usuário, mas padronize a capitalização dentro de um diagrama.
- Para diagramas técnicos, inclua limites como cliente, serviço, banco de dados, fila, API externa e operador/usuário quando eles forem implícitos.
- Para diagramas de processos de negócios, distinga o caminho feliz, pontos de decisão, falhas, novas tentativas e etapas manuais quando presentes.
- Para diagramas criados a partir de texto incerto, inclua uma seção
Assumptionsapós o código.
Regras de geração do Mermaid
Consulte references/diagram-patterns.md para modelos compactos.
Regras gerais do Mermaid:
- Comece com a diretiva de diagrama correta, por exemplo
flowchart TD,sequenceDiagram,erDiagram,gantt,mindmapoujourney. - Para fluxogramas, use
flowchart TD, a menos que o usuário solicite da esquerda para a direita; useflowchart LRpara arquitetura e pipelines. - Use subgrafos para raias ou camadas de arquitetura. Nomeie subgrafos com rótulos legíveis.
- Mantenha os IDs dos nós estáveis e apenas em ASCII, por exemplo
ingest_service[Ingest Service]. - Coloque entre aspas os rótulos que contêm pontuação que provavelmente confundirá o analisador.
- Use diamantes de decisão para ramificação:
decision{Condition?}. - Use rótulos de aresta consistentes:
-- yes -->,-- no -->,-. async .->ou== critical ==>apenas quando significativos.
…
Perguntas frequentes
Que tipos de diagramas este agente pode criar?
Ele pode criar vários tipos, como fluxogramas, diagramas de sequência, diagramas de estado, diagramas de entidade-relacionamento, mapas mentais, diagramas de Gantt e mais.
O que significa 'diagrama editável'?
Significa que o agente fornece o código que gera o diagrama. Você pode copiar esse código e editá-lo diretamente para fazer alterações, em vez de ter que redesenhar tudo.
O que é Mermaid ou Graphviz?
São linguagens de marcação que descrevem como um diagrama deve ser desenhado. O agente usa essas linguagens para criar o código do diagrama a partir da sua descrição.
Detalhes
Descrição original do autor
Generate, refine, validate, and render diagrams from natural language, notes, code, schemas, or existing diagram sources: flowcharts, swimlanes, attack-path graphs, data-flow diagrams, architecture, and state machines.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #2842
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
ios-icon-gen
Faz seu agente gerar ícones para aplicativos iOS. Ele usa símbolos da Apple ou ícones de outras fontes para criar os arquivos corretos.
affaan-m/ECC
algorithmic-art
Ajuda seu agente a criar arte usando código, gerando imagens únicas. É útil quando você quer arte original feita por computador.
anthropics/skills
canvas-design
Ajuda seu agente a criar artes visuais bonitas em arquivos. É útil quando você pede um pôster, uma arte ou qualquer design estático.
anthropics/skills