AntV X6 Editorpor antvis

AntV X6 Editor Skill.

Crea una interfaz para elaborar diagramas conectados, no solo para ver una red que ya existe.

Editores de diagramas
Interfaces de nodos
AntV

Revisión de la fuente · AntV X6 EditorSKILL.md

Tarea Editores de diagramas Produce • JavaScript de editor de diagramas X6 con nodos y aristas con estilo • Un conjunto deliberado de plugins de editor e interacciones de lienzo • Comportamiento de conexión, encuadre y serialización opcional adecuado al editor Antes de empezar Usa la API documentada de @antv/x6 v3, con un lienzo en el navegador y los plugins necesarios. Obtener referencias adicionales requiere acceso a la red. Comprueba los ejemplos con la versión que tengas instalada.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

AntV X6 Editor: crea un lienzo de diagramas

Una guía de editor de diagramas X6 v3 que cubre la construcción imperativa de nodos y aristas, la configuración explícita de plugins, la separación de gestos y la consulta de referencias especializadas.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El método de trabajo

AntV X6 Editor está pensado para herramientas de diagramas interactivos, como editores de diagramas de flujo, DAG, entidad-relación, linaje y organigramas. La entrada analizada se dirige a X6 v3 y describe un enfoque imperativo: crear el grafo, añadir nodos y aristas y, después, registrar los plugins de editor necesarios para las operaciones previstas.

Su aportación distintiva es el comportamiento del editor. Selección, historial, portapapeles, teclado, stencil, arrastrar y soltar, transformaciones y exportación requieren una configuración explícita; el desplazamiento del lienzo y el comportamiento de conexión pertenecen a otra capa de configuración. La fuente también remite a referencias detalladas para la serialización y las tareas específicas de puertos. No convierte un flujo dibujado en un proceso de negocio ejecutable.

Entregables esperados

JavaScript de editor de diagramas X6 con nodos y aristas con estilo
Un conjunto deliberado de plugins de editor e interacciones de lienzo
Comportamiento de conexión, encuadre y serialización opcional adecuado al editor

Ver el briefing de ejemplo

Del briefing a la revisión

01
Define la tarea de edición
Enumera los objetos del diagrama que las personas pueden crear, mover, seleccionar, conectar y eliminar. Decide qué operaciones del editor son realmente necesarias antes de activar plugins.
02
Construye el modelo de nodos y aristas
Crea el grafo y añade las formas y conexiones necesarias. Consulta la guía específica sobre puertos, nodos HTML personalizados o estructuras anidadas cuando esas funciones estén dentro del alcance.
03
Registra las capacidades del editor
Importa y registra los plugins que usa la implementación. Mantén las opciones del constructor, como el desplazamiento y la conexión, separadas de las clases de plugin.
04
Revisa la sesión de edición
Prueba los gestos de selección, desplazamiento, zoom y arrastre para detectar conflictos, encuadra el contenido y verifica cualquier ruta prometida de guardado/carga o exportación en lugar de dar por hecho que existe.

02 Cuándo usarlo

Cuándo usarlo

Usa la API documentada de @antv/x6 v3, con un lienzo en el navegador y los plugins necesarios. Obtener referencias adicionales requiere acceso a la red. Comprueba los ejemplos con la versión que tengas instalada.

Buen encaje

Interfaces para crear flujos de trabajoÚtil cuando los usuarios necesitan construir o modificar un diagrama de nodos y aristas, y no solo inspeccionar un grafo existente.
Editores de diagramas de dominioLa fuente incluye rutas para requisitos de ER, linaje, DAG, UML y organigramas.
Depuración de la interacción del editorSus reglas de registro de plugins y de modificadores de entrada ayudan a aislar operaciones ausentes y gestos que compiten entre sí.

Límites que conviene comprobar

No es un motor de ejecución de flujos de trabajoEl alcance documentado es la edición de diagramas. La ejecución de negocio, la persistencia en servidor y la validación de dominio requieren una implementación aparte.
No es G6 ni G2La exploración de redes de G6 y los gráficos estadísticos de G2 tienen finalidades y API distintas; sus patrones de renderizado no deben mezclarse en este editor.
Supuestos de ejecución específicos de la fuenteLa entrada prescribe convenciones de v3, salida JavaScript y gestión del contenedor para su flujo de trabajo. Valida esos supuestos en el paquete instalado y en el entorno de alojamiento, en lugar de presentarlos como restricciones universales de la biblioteca.

Aporta estos datos

Esquema del diagramaIndica los tipos de nodo, las relaciones permitidas, los requisitos de puertos y los datos iniciales del diagrama.
Operaciones de ediciónIndica si los usuarios necesitan selección, deshacer, portapapeles, un stencil, redimensionado, acciones de teclado o exportación.
Entorno de la aplicaciónProporciona la versión de X6 instalada, el contenedor del lienzo, las interacciones de la página circundante y los requisitos de persistencia.

03 Decisiones importantes

Decisiones que importan

Las capacidades son explícitas
Registrar solo los plugins necesarios deja ver la diferencia entre un diagrama mostrado y un editor operativo.
Cada gesto tiene su función
La fuente usa modificadores para evitar que el desplazamiento, el zoom y la selección por recuadro compitan por la misma entrada.
Edición y persistencia son cosas distintas
Que un diagrama se vea no demuestra que el estado de edición pueda guardarse y restaurarse. La serialización es una referencia y una verificación aparte.

04 Ejemplo de brief

Prueba un briefing concreto

El briefing de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa la fuente completa del Skill antv-x6-editor como guía e instala por separado el entorno de ejecución del proyecto. No se ha verificado ningún comando de instalación universal de Skills a partir de esta entrada.

Archivo fuente original

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

Empieza con un solo entregable

Adapta el alcance, el material de partida y las restricciones de este briefing antes de ejecutar el skill.

Briefing de ejemplo

Usa antv-x6-editor para prototipar un editor de flujos de aprobación con los tipos de nodo y las conexiones permitidas que se faciliten. Inspecciona primero nuestra versión de X6. Implementa selección y deshacer con registro explícito de plugins, gestos de desplazamiento y zoom separados, y deja fuera del alcance la ejecución de negocio. Si se incluye el guardado/carga de JSON, sigue la referencia de serialización y demuestra un ciclo completo de ida y vuelta; no afirmes que hay persistencia en backend.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada operación de editor utilizada tiene la capacidad requerida importada y registrada.
El desplazamiento, el zoom, la selección y la manipulación de nodos no compiten por el mismo gesto.
Cualquier operación de serialización o exportación prometida se demuestra en el proyecto real.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Que aparezca en este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales o dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada a continuación. El comportamiento y los requisitos de origen pueden cambiar.

Propietario de la fuente: antvis
Repositorio: antvis/chart-visualization-skills
Archivo del skill: skills/antv-x6-editor/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · a105fa12a9fa

Resumen editorial de la fuente

Una guía de editor de diagramas X6 v3 que cubre la construcción imperativa de nodos y aristas, la configuración explícita de plugins, la separación de gestos y la consulta de referencias especializadas.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Por qué no usar G6 para el mismo diagrama?

La fuente distingue el lienzo editable de X6 y su API de creación imperativa del flujo de visualización de grafos de G6. Elige según la interacción que necesiten los usuarios, no solo según el aspecto de la imagen.

¿Se configuran igual el desplazamiento y la selección?

No. La entrada separa las opciones de interacción del constructor de plugins como Selection, que deben registrarse antes de usar sus métodos.

¿Añadir nodos requiere una llamada aparte a graph.render?

La guía de X6 v3 analizada indica que la adición de nodos y aristas se renderiza automáticamente y advierte de que no se tome graph.render de G6. Comprueba la API instalada al integrarlo.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu briefing, el material de partida y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño