AntV X6 Editorpor antvis

AntV X6 Editor Skill.

Crie uma interface para criar diagramas conectados, e não apenas para visualizar uma rede que já existe.

Editores de diagramas
Interfaces de nós
AntV

Revisão da fonte · AntV X6 EditorSKILL.md

Tarefa Editores de diagramas Produz • JavaScript de editor de diagramas X6 com nós e arestas estilizados • Um conjunto deliberado de plugins de editor e interações de canvas • Comportamento de conexão, enquadramento e serialização opcional adequado ao editor Antes de começar Use a API documentada do @antv/x6 v3, com um canvas de navegador e os plugins necessários. Buscar referências adicionais exige acesso à rede. Confira os exemplos com a versão instalada.

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

01 Funcionalidades

AntV X6 Editor: crie um canvas de diagramas

Um guia de editor de diagramas X6 v3 que cobre a construção imperativa de nós e arestas, a configuração explícita de plugins, a separação de gestos e a consulta a referências especializadas.

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

A abordagem de trabalho

O AntV X6 Editor é voltado a ferramentas interativas de diagramas, como editores de fluxogramas, DAGs, entidade-relacionamento, linhagem e organogramas. A entrada capturada tem como alvo o X6 v3 e descreve uma abordagem imperativa: criar o grafo, adicionar nós e arestas e, em seguida, registrar os plugins de editor necessários para as operações pretendidas.

Seu diferencial é o comportamento do editor. Seleção, histórico, área de transferência, teclado, stencil, arrastar e soltar, transformações e exportação exigem configuração explícita; o movimento panorâmico do canvas e o comportamento de conexão pertencem a outra camada de configuração. A fonte também encaminha tarefas de serialização e específicas de portas para referências detalhadas. Ela não transforma um fluxo desenhado em um processo de negócio executável.

Entregas esperadas

JavaScript de editor de diagramas X6 com nós e arestas estilizados
Um conjunto deliberado de plugins de editor e interações de canvas
Comportamento de conexão, enquadramento e serialização opcional adequado ao editor

Ver o briefing de exemplo

Do briefing à revisão

01
Defina a tarefa de edição
Liste os objetos do diagrama que as pessoas podem criar, mover, selecionar, conectar e remover. Decida quais operações do editor são realmente necessárias antes de ativar plugins.
02
Construa o modelo de nós e arestas
Crie o grafo e adicione as formas e conexões necessárias. Consulte a orientação específica sobre portas, nós HTML personalizados ou estruturas aninhadas quando esses recursos estiverem no escopo.
03
Registre os recursos do editor
Importe e registre os plugins usados pela implementação. Mantenha as opções do construtor, como panning e connecting, separadas das classes de plugin.
04
Verifique a sessão de edição
Teste os gestos de seleção, panorâmica, zoom e arrastar para detectar conflitos, enquadre o conteúdo e verifique qualquer caminho prometido de salvar/carregar ou de exportação, em vez de presumir que ele existe.

02 Quando usar

Quando usar

Use a API documentada do @antv/x6 v3, com um canvas de navegador e os plugins necessários. Buscar referências adicionais exige acesso à rede. Confira os exemplos com a versão instalada.

Boa opção

Interfaces de criação de fluxos de trabalhoÚtil quando os usuários precisam construir ou modificar um diagrama de nós e arestas, e não apenas inspecionar um grafo existente.
Editores de diagramas de domínioA fonte inclui caminhos para requisitos de ER, linhagem, DAG, UML e organograma.
Depuração de interações do editorSuas regras de registro de plugins e de teclas modificadoras ajudam a isolar operações ausentes e gestos concorrentes.

Limites a verificar

Não é um mecanismo de execução de fluxos de trabalhoO escopo documentado é a edição de diagramas. Execução de negócio, persistência no servidor e validação de domínio exigem implementação separada.
Não é G6 nem G2A exploração de redes do G6 e os gráficos estatísticos do G2 têm finalidades e APIs diferentes; seus padrões de renderização não devem ser misturados neste editor.
Premissas de execução específicas da fonteA entrada prescreve convenções da v3, saída em JavaScript e tratamento do contêiner para seu fluxo de trabalho. Valide essas premissas no pacote instalado e no ambiente de hospedagem, em vez de apresentá-las como restrições universais da biblioteca.

Traga estes insumos

Esquema do diagramaForneça os tipos de nós, as relações permitidas, os requisitos de portas e os dados iniciais do diagrama.
Operações de ediçãoInforme se os usuários precisam de seleção, desfazer, área de transferência, stencil, redimensionamento, ações de teclado ou exportação.
Ambiente da aplicaçãoInforme a versão instalada do X6, o contêiner do canvas, as interações da página ao redor e os requisitos de persistência.

03 Decisões importantes

Decisões que importam

Os recursos são explícitos
Registrar apenas os plugins necessários deixa visível a diferença entre um diagrama exibido e um editor operacional.
Cada gesto tem uma função
A fonte usa teclas modificadoras para evitar que panorâmica, zoom e seleção por área disputem a mesma entrada.
Criação e persistência são coisas diferentes
Um diagrama visível não é prova de que o estado de edição possa ser salvo e restaurado. A serialização é uma referência e uma verificação à parte.

04 Exemplo de briefing

Experimente um briefing focado

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

Revise a configuração

Use a fonte completa da Skill antv-x6-editor como orientação e instale o runtime do projeto separadamente. Nenhum comando universal de instalação de Skill foi verificado a partir desta entrada.

Arquivo de origem upstream

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

Use a API documentada do @antv/x6 v3, com um canvas de navegador e os plugins necessários. Buscar referências adicionais exige acesso à rede. Confira os exemplos com a versão instalada.

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 antv-x6-editor para prototipar um editor de fluxo de aprovação com os tipos de nós e as conexões permitidas fornecidos. Inspecione primeiro a nossa versão do X6. Implemente seleção e desfazer com registro explícito de plugins, gestos separados de panorâmica e zoom, e deixe a execução de negócio fora do escopo. Se salvar/carregar JSON estiver incluído, siga a referência de serialização e demonstre um ciclo completo de ida e volta; não afirme que há persistência no backend.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Toda operação de editor usada tem o recurso necessário importado e registrado.
Panorâmica, zoom, seleção e manipulação de nós não disputam o mesmo gesto.
Qualquer operação de serialização ou exportação prometida é demonstrada no projeto real.

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

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos do upstream podem mudar.

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

Resumo editorial da fonte

Um guia de editor de diagramas X6 v3 que cobre a construção imperativa de nós e arestas, a configuração explícita de plugins, a separação de gestos e a consulta a referências especializadas.

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

06 Perguntas antes de começar

Dúvidas antes de começar

Por que não usar o G6 para o mesmo diagrama?

A fonte distingue o canvas editável e a API de criação imperativa do X6 do fluxo de visualização de grafos do G6. Escolha pela interação de que os usuários precisam, não apenas pela aparência do desenho.

Panorâmica e seleção são configuradas da mesma forma?

Não. A entrada separa as opções de interação no nível do construtor de plugins como o Selection, que precisam ser registrados antes de seus métodos serem usados.

Adicionar nós exige uma chamada separada a graph.render?

A orientação capturada para o X6 v3 diz que a adição de nós e arestas é renderizada automaticamente e alerta contra pegar graph.render emprestado do G6. Confira a API instalada ao integrar.

OpenDesign

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

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

Baixar OpenDesign Explorar skills de design