AntV G6 Graphpor antvis

AntV G6 Graph Skill.

Crea vistas interactivas de redes y jerarquías existentes a partir de datos de nodos y aristas.

Visualización de grafos
Redes
AntV

Revisión de la fuente · AntV G6 GraphSKILL.md

Tarea Visualización de grafos Produce • JavaScript de vista de grafo de G6 configurado para un conjunto de datos de relaciones proporcionado • Una elección de diseño y de codificación visual para nodos, aristas y grupos • Comportamientos de exploración explícitos, como zoom, arrastre o selección Antes de empezar Una aplicación que use @antv/g6 v5, un contenedor de grafo en el navegador y acceso a la red si se necesita el servicio de recuperación de referencias documentado. Verifica las API con la versión instalada.

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

01 Qué hace

AntV G6 Graph: explora datos conectados

Una guía de vistas de grafo con G6 v5 con datos explícitos de nodos y aristas, configuración declarativa, advertencias de migración y recuperación de referencias específicas de cada tarea.

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

El método de trabajo

AntV G6 Graph se centra en visualizar datos conectados: redes, árboles, jerarquías, mapas mentales y otras estructuras de nodos y aristas. El skill analizado se dirige a G6 v5 y organiza el grafo mediante configuración declarativa de datos, diseño, apariencia, comportamientos y plugins. Su pregunta central es cómo debe mostrarse y explorarse una estructura de relaciones.

La entrada combina advertencias concretas de migración a v5 con un servicio remoto de recuperación de referencias para temas especializados. Distingue G6 de los gráficos estadísticos de G2 y de los editores de diagramas de X6. Una imagen de nodos y aristas puede parecerse al lienzo de un editor, pero mostrar una red existente es una tarea distinta de permitir que los usuarios construyan y guarden un flujo de trabajo.

Entregables esperados

JavaScript de vista de grafo de G6 configurado para un conjunto de datos de relaciones proporcionado
Una elección de diseño y de codificación visual para nodos, aristas y grupos
Comportamientos de exploración explícitos, como zoom, arrastre o selección

Ver el brief de ejemplo

Del brief a la revisión

01
Valida los datos de relaciones
Identifica cada nodo con un ID único y asegúrate de que los extremos de las aristas se refieran a los nodos previstos. Separa las etiquetas y los atributos visuales de la relación en sí.
02
Elige la vista
Haz coincidir la estructura con un diseño de fuerzas, árbol, jerarquía, radial u otro adecuado. Recupera la referencia de G6 pertinente cuando los detalles de configuración excedan el archivo de entrada.
03
Configura G6 v5
Usa las convenciones documentadas de datos, estilo, comportamiento y renderizado para la versión de destino, en lugar de mezclar configuración de v4 recordada de memoria.
04
Inspecciona el grafo
Comprueba en el navegador real las etiquetas renderizadas, las relaciones entre extremos, la legibilidad del diseño y las interacciones previstas. Revisa las zonas densas o desconectadas, no solo una muestra ordenada.

02 Cuándo usarlo

Cuándo usarlo

Una aplicación que use @antv/g6 v5, un contenedor de grafo en el navegador y acceso a la red si se necesita el servicio de recuperación de referencias documentado. Verifica las API con la versión instalada.

Buen encaje

Exploración de relacionesÚtil para presentar entidades y sus vínculos cuando la propia estructura de la red es el tema de la interfaz.
Vistas de árbol y jerarquíaLa fuente dirige las solicitudes de árboles, mapas mentales, diagramas de espina de pescado y jerarquías a guías de diseño especializadas.
Trabajo de migración de G6Sus diferencias explícitas en datos, etiquetas, comportamientos y opciones de diseño son relevantes al revisar código antiguo de G6.

Límites que conviene comprobar

No es un flujo de trabajo de editor de diagramasElige la guía del editor X6 cuando el requisito principal sea crear nodos conectados, puertos y un estado de diagrama editable.
No son gráficos estadísticosEste skill excluye explícitamente los gráficos de G2 y las tablas dinámicas de S2; un diseño de grafo no sustituye la codificación de un gráfico cuantitativo.
Comprobaciones de versión y entorno de ejecuciónLa fuente se dirige a v5. Sus restricciones y ejemplos son material de referencia, no una prueba de que se haya probado un proyecto concreto o una versión anterior.

Aporta estos datos

Entidades y vínculosProporciona los identificadores de los nodos, los extremos de las aristas, las etiquetas y cualquier relación de grupo significativa.
Tarea de exploraciónExplica si los lectores necesitan inspeccionar una red, seguir una jerarquía, identificar grupos o examinar conexiones seleccionadas.
Restricciones del proyectoIndica la versión de G6 instalada, el contenedor del grafo, el tamaño de datos esperado y las interacciones requeridas en el navegador.

03 Decisiones importantes

Decisiones que importan

Primero los datos, después el diseño
Una red de aspecto plausible puede ser incorrecta si los identificadores o los extremos son incoherentes. El contrato de datos explícito permite inspeccionar esos errores.
Los detalles de migración son visibles
La ubicación de las etiquetas y la configuración de comportamientos cambiaron entre generaciones de API; la fuente señala esas diferencias en lugar de tratar todos los ejemplos de G6 como intercambiables.
Recuperación de referencias específicas
La entrada asigna una tarea, como contraer y expandir o dar estilo a los nodos, a una consulta de referencia concreta, en lugar de exigir todas las funciones del grafo a la vez.

04 Ejemplo de brief

Prueba un brief concreto

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

Revisa la configuración

Obtén el directorio del skill antv-g6-graph del repositorio y configura por separado el entorno de ejecución de G6 para tu proyecto. El ejemplo de CDN de la entrada es una carga en tiempo de ejecución, no un comando de instalación del skill verificado.

Archivo fuente original

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

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa antv-g6-graph para crear una vista de solo lectura de una red de dependencias a partir de los nodos y aristas proporcionados. Verifica cada extremo, revisa la versión de G6 instalada y explica la elección del diseño. Añade solo los comportamientos de zoom, arrastre y selección necesarios para inspeccionar las dependencias. Consulta las referencias de v5 pertinentes en lugar de copiar opciones de v4, e informa de las comprobaciones en ejecución por separado de las suposiciones no probadas.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada arista renderizada corresponde a extremos de entrada válidos.
El diseño y las etiquetas hacen legible la estructura real de las relaciones.
Los comportamientos configurados funcionan en el entorno de ejecución de G6 instalado, sin opciones heredadas no admitidas.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y 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 fijada de la fuente enlazada a continuación. El comportamiento y los requisitos del origen pueden cambiar.

Propietario de la fuente: antvis
Repositorio: antvis/chart-visualization-skills
Archivo del skill: skills/antv-g6-graph/SKILL.md
Licencia: MIT
Instantánea revisada: 2026-10-07 · a105fa12a9fa

Resumen editorial de la fuente

Una guía de vistas de grafo con G6 v5 con datos explícitos de nodos y aristas, configuración declarativa, advertencias de migración y recuperación de referencias específicas de cada tarea.

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

06 Preguntas antes de empezar

Preguntas antes de empezar

¿En qué se diferencia de G2?

Aquí G6 se usa para entidades conectadas y diseños de grafos. La fuente excluye explícitamente los casos de uso de gráficos estadísticos de G2.

¿Debo usarlo para crear un lienzo de flujo de trabajo editable?

Si los requisitos principales son la creación de nodos, los puertos de conexión, los plugins de editor y el estado guardado del diagrama, la fuente asigna esa tarea a X6.

¿Contiene el skill todas las referencias de la API de G6?

No. Incluye patrones críticos y un servicio de recuperación para obtener documentación más detallada sobre diseño, estilo, eventos, comportamientos y plugins.

OpenDesign

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

Mantén juntos tu brief, el material de origen 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