Pular para o conteúdo
Skillpedia
Imagens e ícones48 mil · #2842

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

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/diagram-generator/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/diagram-generator/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
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-generator

Ou 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.md
Conteú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

  1. Identifique a intenção do usuário, o público e o material de origem.
  2. Escolha a família e a linguagem do diagrama usando a tabela de decisão abaixo.
  3. Normalize entidades, relacionamentos, rótulos, estados, ramificações e informações de tempo/ordem antes de escrever o código do diagrama.
  4. Gere código de diagrama conciso e legível.
  5. Valide a sintaxe mentalmente e, ao criar arquivos, execute scripts/render_diagram.py.
  6. 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 Assumptions apó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, mindmap ou journey.
  • Para fluxogramas, use flowchart TD, a menos que o usuário solicite da esquerda para a direita; use flowchart LR para 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.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub
48 mil
Posição no ranking
#2842
Licença
MIT
Atualizada em
15/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas