diagram-generator
Ajuda seu agente a criar e refinar diagramas a partir de descrições. É útil para visualizar fluxos de trabalho, arquiteturas, dados e planos de forma clara e organizada.
O que ela faz
Este agente cria diagramas visuais a partir de descrições em texto. Ele pode gerar vários tipos de diagramas, como fluxogramas, diagramas de sequência e mapas mentais, transformando suas ideias em imagens claras.
Quando usar
- ✓Quando você precisa visualizar um processo ou fluxo de trabalho.
- ✓Para organizar ideias complexas em um mapa mental.
- ✓Ao explicar a interação entre diferentes partes de um sistema.
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 no diagrama, e o agente escolhe a melhor forma de representar isso usando código especial. Depois, ele gera o código e mostra o diagrama visual.
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 zhaoxuya520/reverse-skill --skill diagram-generatorOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/zhaoxuya520/reverse-skill/main/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.
Gerador de Diagramas
AÇÃO NECESSÁRIA (Execute imediatamente após a leitura)
NOW: Confirme se a tarefa atual se enquadra no escopo desta habilidade.NOW: Leia../tool-index.md, valide a disponibilidade da ferramenta e o caminho real.NEXT: Chame o bootstrap quando a ferramenta estiver faltando, não adivinhe o caminho.ACT: Entre na primeira etapa do "fluxo de trabalho" e execute, não permaneça no estado de confirmação.
Propósito
Crie diagramas claros e editáveis a partir de entradas confusas ou estruturadas. Prefira primeiro o código-fonte do diagrama baseado em texto 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 um 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-fonte 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 diagrama
Use Mermaid, a menos que outra linguagem seja claramente melhor.
| O usuário quer | Preferir | Por quê |
|---|---|---|
| fluxo de processo, árvore de decisão, swimlane simples | Mermaid flowchart | legível e fácil de colar no Markdown |
| sequência de interações 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 PlantUML estilo C4 | escolha com base na fidelidade solicitada |
| fluxo ponderado/relação semelhante a 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 o código-fonte 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 processo 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 peça da esquerda para a direita; useflowchart LRpara arquitetura e pipelines. - Use subgrafos para swimlanes 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 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 significativo. - Em diagramas de sequência, declare participantes antes das mensagens. Use
actorpara humanos eparticipantpara sistemas.
…
Perguntas frequentes
Que tipos de diagramas ele pode criar?
Ele pode criar fluxogramas, diagramas de sequência, mapas mentais, organogramas, diagramas de estado, diagramas ER (entidade-relacionamento), diagramas de classe, gráficos de dependência, cronogramas (Gantt), jornadas de usuário, fluxos Sankey, gráficos de rede e outros modelos visuais.
Preciso saber programar para usar?
Não, você só precisa descrever o diagrama em linguagem natural. O agente cuida da parte técnica de gerar o código e a imagem.
Posso editar o diagrama depois?
Sim, o agente sempre fornece o código editável do diagrama, permitindo que você o refine ou modifique facilmente.
Detalhes
Descrição original do autor
generate, refine, validate, and render diagrams from natural language, notes, code snippets, schemas, tables, or existing diagram source. use for flowcharts, swimlanes, sequence diagrams, state diagrams, er diagrams, class diagrams, architecture/c4-style diagrams, dependency graphs, gantt charts, mind maps, user journeys, sankey-style flows, org charts, network graphs, and other visual models. sup
Popularidade
- Estrelas no GitHub
- 42 mil
- Posição no ranking
- #4759
- Licença
- MIT
- Atualizada em
- 22/09/2026
Comentários
- …
Mais skills deste repositório
competition-ad-certificate-abuse
Ajuda seu agente a analisar ataques a sistemas de certificados digitais. Ele investiga como certificados podem ser usados indevidamente para obter acesso.
zhaoxuya520/reverse-skill
competition-agent-cloud
Faz seu agente analisar desafios de segurança em sistemas de IA e nuvem. Ele investiga como prompts, ferramentas e a nuvem podem ser explorados.
zhaoxuya520/reverse-skill
competition-android-hooking
Ajuda seu agente a investigar aplicativos Android. Ele analisa como os aplicativos funcionam internamente e como podem ser modificados ou explorados.
zhaoxuya520/reverse-skill
competition-browser-persistence
Faz seu agente analisar como sites guardam informações no seu navegador. Ele investiga cookies e outros dados para entender como as sessões funcionam.
zhaoxuya520/reverse-skill
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