AntV G6 Graphpor antvis

AntV G6 Graph Skill.

Crie visualizações interativas de redes e hierarquias existentes a partir de dados de nós e arestas.

Visualização de grafos
Redes
AntV

Revisão da fonte · AntV G6 GraphSKILL.md

Tarefa Visualização de grafos Produz • JavaScript de visualização de grafo em G6 configurado para um conjunto de dados de relacionamentos fornecido • Uma escolha de layout e de codificação visual para nós, arestas e grupos • Comportamentos explícitos de exploração, como zoom, arrastar ou selecionar Antes de começar Um aplicativo que use @antv/g6 v5, um contêiner de grafo no navegador e acesso à rede, caso o serviço de recuperação de referências documentado seja necessário. Verifique as APIs na versão instalada.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

AntV G6 Graph: explore dados conectados

Um guia de visualização de grafos com G6 v5, com dados explícitos de nós e arestas, configuração declarativa, alertas de migração e recuperação de referências por tarefa.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

O AntV G6 Graph é voltado à visualização de dados conectados: redes, árvores, hierarquias, mapas mentais e outras estruturas de nós e arestas. A skill analisada tem como alvo o G6 v5 e organiza o grafo por meio de configuração declarativa de dados, layout, aparência, comportamentos e plugins. Sua pergunta central é como uma estrutura de relacionamentos deve ser exibida e explorada.

A entrada combina alertas concretos de migração para a v5 com um serviço remoto de recuperação de referências para tópicos especializados. Ela distingue o G6 dos gráficos estatísticos do G2 e dos editores de diagramas do X6. Uma imagem de nós e arestas pode lembrar a tela de um editor, mas exibir uma rede existente é diferente de permitir que usuários construam e salvem um fluxo de trabalho.

Entregas esperadas

JavaScript de visualização de grafo em G6 configurado para um conjunto de dados de relacionamentos fornecido
Uma escolha de layout e de codificação visual para nós, arestas e grupos
Comportamentos explícitos de exploração, como zoom, arrastar ou selecionar

Ver o briefing de exemplo

Do briefing à revisão

01
Valide os dados de relacionamento
Identifique cada nó com um ID único e garanta que as extremidades das arestas se refiram aos nós pretendidos. Separe rótulos e atributos visuais do relacionamento em si.
02
Escolha a visualização
Associe a estrutura a um layout de força, árvore, hierarquia, radial ou outro adequado. Recupere a referência relevante do G6 quando os detalhes de configuração forem além do arquivo de entrada.
03
Configure o G6 v5
Use as convenções documentadas de dados, estilo, comportamento e renderização da versão-alvo, em vez de misturar configurações da v4 lembradas de memória.
04
Inspecione o grafo
Verifique os rótulos renderizados, as relações entre extremidades, a legibilidade do layout e as interações pretendidas no ambiente de execução real do navegador. Revise as partes densas ou desconectadas, e não apenas uma amostra organizada.

02 Quando usar

Quando usar

Um aplicativo que use @antv/g6 v5, um contêiner de grafo no navegador e acesso à rede, caso o serviço de recuperação de referências documentado seja necessário. Verifique as APIs na versão instalada.

Bom encaixe

Exploração de relacionamentosÚtil para apresentar entidades e suas ligações quando a própria estrutura da rede é o assunto da interface.
Visualizações de árvore e hierarquiaA fonte encaminha pedidos de árvore, mapa mental, espinha de peixe e hierarquia para orientações de layout especializadas.
Trabalho de migração do G6As diferenças explícitas em dados, rótulos, comportamentos e opções de layout são relevantes ao revisar código antigo do G6.

Limites a verificar

Não é um fluxo de editor de diagramasEscolha a orientação do editor X6 quando o requisito principal for criar nós conectados, portas e estado de diagrama editável.
Não é para gráficos estatísticosEsta skill exclui explicitamente gráficos do G2 e tabelas dinâmicas do S2; um layout de grafo não substitui a codificação de um gráfico quantitativo.
Verificações de versão e ambiente de execuçãoA fonte tem como alvo a v5. Suas restrições e exemplos são material de referência, não prova de que um projeto específico ou uma versão mais antiga tenha sido testado.

Traga estas entradas

Entidades e ligaçõesForneça identificadores de nós, extremidades das arestas, rótulos e quaisquer relações de grupo relevantes.
Tarefa de exploraçãoExplique se os leitores precisam inspecionar uma rede, seguir uma hierarquia, identificar grupos ou examinar conexões selecionadas.
Restrições do projetoInforme a versão instalada do G6, o contêiner do grafo, o volume de dados esperado e as interações necessárias no navegador.

03 Decisões importantes

Decisões que importam

Dados antes do layout
Uma rede visualmente plausível ainda pode estar errada se os identificadores ou as extremidades forem inconsistentes. O contrato de dados explícito torna esses erros inspecionáveis.
Detalhes de migração visíveis
O posicionamento de rótulos e a configuração de comportamentos mudaram entre as gerações da API; a fonte destaca essas diferenças em vez de tratar todo exemplo do G6 como intercambiável.
Recuperação de referências focada
A entrada associa uma tarefa, como recolher e expandir ou estilizar nós, a uma consulta de referência específica, em vez de exigir todos os recursos do grafo de uma vez.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Obtenha o diretório da skill antv-g6-graph no repositório e configure separadamente o ambiente de execução do G6 no seu projeto. O exemplo de CDN da entrada é um carregamento em tempo de execução, não um comando verificado de instalação da skill.

Arquivo de origem upstream

https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g6-graph/SKILL.md

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use o antv-g6-graph para criar uma visualização somente leitura de uma rede de dependências a partir dos nós e arestas fornecidos. Verifique todas as extremidades, inspecione a versão instalada do G6 e explique a escolha do layout. Adicione apenas os comportamentos de zoom, arrastar e seleção necessários para inspecionar as dependências. Consulte as referências relevantes da v5 em vez de copiar opções da v4 e relate as verificações de execução separadamente das suposições não testadas.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Cada aresta renderizada corresponde a extremidades de entrada válidas.
O layout e os rótulos tornam legível a estrutura real dos relacionamentos.
Os comportamentos configurados funcionam no ambiente de execução instalado do G6, sem opções legadas não compatíveis.

O OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam inclusas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão de origem fixada e vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Proprietário da fonte: antvis
Repositório: antvis/chart-visualization-skills
Arquivo da skill: skills/antv-g6-graph/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · a105fa12a9fa

Resumo editorial da fonte

Um guia de visualização de grafos com G6 v5, com dados explícitos de nós e arestas, configuração declarativa, alertas de migração e recuperação de referências por tarefa.

Resumo original do OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Em que isto difere do G2?

O G6 é usado aqui para entidades conectadas e layouts de grafo. A fonte exclui explicitamente os casos de uso de gráficos estatísticos do G2.

Devo usá-lo para criar uma tela de fluxo de trabalho editável?

Se os requisitos principais forem criação de nós, portas de conexão, plugins de editor e estado de diagrama salvo, a fonte separa essa tarefa no X6.

A skill contém todas as referências da API do G6?

Não. Ela inclui padrões críticos e um serviço de recuperação para documentação mais detalhada de layout, estilo, eventos, comportamentos e plugins.

OpenDesign

Abra espaço para a próxima iteração do design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design