# Habilidades del Agente de Visualización de Gráficos
> Transforme conjuntos de datos complejos en gráficos visuales intuitivos con las Habilidades de Visualización de Gráficos AntV, que ofrecen más de 26 tipos de gráficos y generación impulsada por IA. Comience a crear historias de datos impactantes sin esfuerzo.
- Canonical: https://nanoskill.ai/es/skills/chart-visualization-skills
- Markdown: https://nanoskill.ai/es/skills/chart-visualization-skills.md
- Author: antvis
- Published: 2026-06-09T05:00:00.000Z
- Updated: 2026-07-25T04:33:38.870Z
- Language: es
- Source type: github
- Popularity signal: 523
## Sources
- https://github.com/antvis/chart-visualization-skills
## Install
```shell
npx skills add https://github.com/antvis/chart-visualization-skills
```
## About
Las Habilidades de Visualización de Gráficos AntV ofrecen un conjunto profesional de soluciones de visualización diseñadas para transformar conjuntos de datos complejos en gráficos visuales intuitivos de manera eficiente y precisa. Iniciadas por Ant Group, esta colección de habilidades permite a los usuarios navegar todo el flujo de trabajo, desde el diseño de gráficos y la exploración interactiva hasta el análisis de datos en profundidad, reduciendo significativamente la barrera de creación gracias a especificaciones de diseño inteligentes y una rica biblioteca de componentes. Proporciona un sólido soporte para informes diarios, paneles dinámicos y análisis interactivos sofisticados, haciendo que los datos sean visibles y comprensibles.
El conjunto incluye habilidades especializadas como "visualización-de-gráficos" para generar más de 26 tipos de gráficos, "creador-de-infografías" para transformar texto en infografías visuales atractivas con más de 50 plantillas, y "visualización-de-texto-narrativo" para convertir datos no estructurados en informes semánticamente ricos utilizando la Sintaxis T8. Estas capacidades se mejoran aún más con la integración de IA, agilizando y automatizando la generación y optimización de visualizaciones, permitiendo a los analistas centrarse más en descubrir conocimientos e impulsar decisiones empresariales.
Los desarrolladores también pueden aprovechar habilidades dedicadas como "experto-antv-s2" para tablas de análisis cruzado multidimensional, "gráfico-antv-g6" para generar visualizaciones de gráficos G6 v5, y "gráfico-antv-g2" para crear gráficos estadísticos G2 v5. Estas herramientas proporcionan código preciso y ejecutable siguiendo las mejores prácticas, cubriendo funcionalidades principales, varios algoritmos de diseño, tipos de componentes e interacciones. Las habilidades se pueden integrar en proyectos Node.js a través de CLI o API, ofreciendo flexibilidad para diferentes necesidades de desarrollo.
## Key features
- **Generación integral de gráficos**: Acceda a más de 26 tipos de gráficos inteligentes para diversas necesidades de visualización de datos, incluidas series temporales, comparaciones, relaciones y datos geográficos.
- **Creación de infografías impulsada por IA**: Genere hermosas infografías a partir de contenido de texto utilizando más de 50 plantillas, transformando la información en un lenguaje visual perceptible con símbolos intuitivos.
- **Visualizaciones estructuradas de texto narrativo**: Convierta datos no estructurados en informes narrativos semánticamente ricos utilizando la sintaxis T8, un lenguaje similar a Markdown para narrativas de datos con anotaciones de entidades y minigráficos.
- **Tablas de análisis cruzado multidimensional**: Utilice AntV S2 Expert para desarrollar tablas dinámicas, hojas de tabla y celdas personalizadas, ofreciendo orientación integral para el análisis de datos multidimensional.
- **Generación avanzada de gráficos y diagramas estadísticos**: Genere código preciso de gráficos G6 para redes, árboles y diagramas de flujo, y código de gráficos G2 para visualizaciones estadísticas como gráficos de barras, líneas y circulares, siguiendo las mejores prácticas.
## Use cases
- **Crear informes diarios y paneles dinámicos**: Transforme rápidamente conjuntos de datos complejos en gráficos visuales intuitivos para informes diarios y paneles dinámicos, permitiendo una toma de decisiones eficiente basada en datos.
- **Desarrollar herramientas de análisis interactivo sofisticadas**: Aproveche el sólido conjunto de herramientas de AntV para construir aplicaciones de análisis interactivo avanzadas, proporcionando capacidades de exploración y visualización de datos en profundidad.
- **Generar visualizaciones optimizadas por IA**: Agilice y automatice la generación y optimización de visualizaciones de datos con capacidades de IA integradas, permitiendo a los analistas concentrarse en los conocimientos.
- **Transformar datos en infografías atractivas**: Convierta datos, información y conocimiento en infografías visualmente atractivas utilizando una variedad de plantillas para comunicar ideas complejas de manera clara y memorable.
## Result preview
Explore un informe de visualización de datos profesional impulsado por IA potenciado por esta Habilidad.
## Result walkthrough
### Instalar
Agregue la Habilidad de Visualización de Gráficos AntV a su agente de IA.
### Describir
Describa el área temática que desea visualizar, incluyendo objetivos, público objetivo y tipos o estilos de gráficos preferidos.
### Optimizar Visualizaciones
La Habilidad genera gráficos y paneles optimizados para claridad, diseño y conocimientos.
## Skill definition
# Habilidades de Visualización de Gráficos
Convirtiendo datos en un lenguaje visual para un mejor pensamiento.
## Descripción general
En la era de la toma de decisiones basada en datos, la visualización y el análisis de datos eficientes y precisos son fundamentales. AntV ofrece un conjunto profesional de soluciones de visualización, proporcionando un robusto kit de herramientas y un conjunto completo de habilidades para todo el flujo de trabajo—desde el diseño de gráficos y la exploración interactiva hasta el análisis profundo de datos. Permite a los usuarios transformar rápidamente conjuntos de datos complejos en gráficos visuales intuitivos, reduciendo significativamente la barrera de creación mediante especificaciones de diseño inteligentes y una rica biblioteca de componentes. Ya sea para informes diarios, paneles dinámicos o análisis interactivos sofisticados, AntV ofrece un soporte confiable. Al integrar capacidades de IA, estas herramientas agilizan y automatizan aún más la generación y optimización de visualizaciones. Esto permite a los analistas centrarse más en descubrir información y tomar decisiones empresariales, haciendo que los datos sean realmente visibles y comprensibles.
> [!WARNING]
> Este proyecto solo fusiona código generado por IA.
>
> **Cómo contribuir:**
> 1. Envía un issue describiendo el problema claramente
> 2. Asígnalo a @copilot con tus requisitos
## Uso
Agrega este marketplace a Claude Code:
```bash
/plugin marketplace add antvis/chart-visualization-skills
```
O puedes instalar directamente las habilidades para tus múltiples agentes:
```bash
npx skills add antvis/chart-visualization-skills
```
## Habilidades Disponibles
- 📊 **chart-visualization**: Una habilidad integral de generación de gráficos impulsada por AntV que proporciona más de 26 tipos de gráficos para visualización inteligente de datos.
`Chart Visualization` selecciona inteligentemente el tipo de gráfico más apropiado entre más de 26 opciones disponibles, extrae parámetros según especificaciones detalladas y genera imágenes de gráficos de alta calidad. Cubre series temporales, comparaciones, partes de un todo, relaciones, visualizaciones geográficas, jerárquicas, estadísticas y especializadas.
- 🎨 **infographic-creator**: Crea infografías atractivas basadas en el contenido de texto proporcionado. Úsalo cuando los usuarios soliciten crear infografías.
`Infographic Creator` utiliza AntV Infographic para transformar datos, información y conocimiento en un lenguaje visual perceptible. Combina el diseño visual con la visualización de datos, ofreciendo más de 50 plantillas que incluyen listas, secuencias, jerarquías, comparaciones, relaciones y gráficos. Comprime información compleja con símbolos intuitivos para ayudar a las audiencias a comprender y recordar rápidamente los puntos clave.
- 🖼️ **icon-retrieval**: Busca y recupera cadenas SVG de iconos de una biblioteca de iconos. Devuelve hasta 5 iconos coincidentes por defecto (personalizable).
`Icon Search` ayuda a los usuarios a encontrar iconos apropiados para diversos casos de uso, incluyendo infografías, desarrollo web, diseño y más. Busca por palabras clave para descubrir iconos disponibles y recuperar sus cadenas SVG directamente. Cada búsqueda devuelve hasta 5 iconos coincidentes por defecto (personalizable mediante el parámetro topK) con sus URLs y el contenido SVG completo.
- 📝 **narrative-text-visualization**: Genera visualizaciones estructuradas de texto narrativo a partir de datos utilizando la Sintaxis T8.
`Narrative Text Visualization` (T8) transforma datos no estructurados en informes narrativos semánticamente ricos utilizando la Sintaxis T8, un lenguaje declarativo similar a Markdown para crear narrativas de datos con anotaciones de entidades. Es amigable con los LLM y agnóstico al framework, funcionando sin problemas con HTML, React y Vue. Perfecto para crear informes de análisis de datos, resúmenes y documentos de insights con entidades como métricas, valores, tendencias y dimensiones correctamente etiquetadas. Las características incluyen mini gráficos integrados, estilo estandarizado y formato profesional. Soporta fuentes de datos auténticas y proporciona una renderización ligera y agnóstica a la tecnología.
- 📋 **antv-s2-expert**: Asistente de desarrollo de tablas de análisis cruzado multidimensional S2. Úsalo cuando los usuarios necesiten ayuda con tablas dinámicas S2, hojas de tabla o cualquier desarrollo relacionado con @antv/s2.
`AntV S2 Expert` ayuda a los usuarios a desarrollar con el motor de tablas de análisis cruzado multidimensional S2. Proporciona orientación integral sobre el motor principal `@antv/s2`, los bindings de framework `@antv/s2-react` y `@antv/s2-vue`, los componentes de análisis avanzado `@antv/s2-react-components` y el renderizado del lado del servidor `@antv/s2-ssr`. Cubre tablas dinámicas, hojas de tabla, celdas personalizadas, temas, eventos, interacciones, ordenamiento, totales, tooltips, filas/columnas congeladas, iconos, paginación y más.
- 🕸️ **antv-g6-graph**: Generador de código de visualización de grafos G6 v5. Úsalo cuando los usuarios necesiten generar grafos G6: grafos de red, árboles, diagramas de flujo, mapas mentales y cualquier visualización de datos relacionales o estructurados en grafos con la biblioteca G6.
`AntV G6 Graph` genera código preciso y ejecutable de G6 v5 siguiendo las mejores prácticas. Cubre la inicialización básica del grafo, estructuras de datos (nodos, aristas, combos), más de 10 algoritmos de layout (force, dagre, circular, grid, mindmap, fishbone, etc.), todos los tipos integrados de nodo/arista/combo, gestión de estados, más de 15 comportamientos (drag-canvas, zoom-canvas, click-select, lasso, etc.), más de 10 plugins (minimap, tooltip, toolbar, legend, timebar, etc.), desarrollo de elementos personalizados, transformaciones y animación. Las barreras de seguridad integradas previenen errores comunes de migración de v4 a v5, como el uso de constructores obsoletos `G6.Graph()`, APIs `graph.data()` o configuración de comportamientos basada en Modo.
- 📈 **antv-g2-chart**: Generador de código de gráficos G2 v5. Úsalo cuando los usuarios necesiten generar gráficos G2: gráficos de barras, líneas, circulares, de dispersión, de áreas, mapas de calor y cualquier visualización de datos estadísticos con la biblioteca G2.
`AntV G2 Chart` genera código preciso y ejecutable de G2 v5 siguiendo las mejores prácticas del Modo Spec. Cubre más de 30 tipos de gráficos (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge, y más), transformaciones de datos (stackY, dodgeX, binX, fold, etc.), sistemas de coordenadas (cartesian, polar, theta, radial), escalas, interacciones (brush, slider, legend filter), componentes (axis, legend, tooltip, annotation) y composiciones de múltiples vistas. Las barreras de seguridad integradas previenen errores comunes de migración de v4 a v5, como el uso de APIs encadenadas obsoletas, nombres de paleta inválidos o la referencia a `d3` en el código del usuario.
**Resultados de la Evaluación**
El enfoque de Harness Engineering ha sido rigurosamente probado en 174 casos de prueba de generación de gráficos, demostrando mejoras significativas sobre los métodos de referencia:
| **Modelo** | **G2** | **G6** |
| :---: | :---: | :---: |
| qwen3-coder-480b-a35b-instruct | ✨ 98.2% +17.7% | 94.8% +15.6% |
| Kimi-K2.5 | 97.7% +17.2% | 96.9% +17.7% |
| GLM-5.1 | 93.6% +13.1% | 92.8% +13.6% |
| DeepSeek-V3.2 | 90.8% +10.3% | ✨ 97.9% +18.7% |
| Context7 Línea base | 80.5% | 79.2% |
Los resultados muestran que Harness Engineering permite a los LLM alcanzar una precisión casi lista para producción (hasta 98.2%), superando significativamente el enfoque de línea base de Context7.
> [!TIP]
> Más habilidades llegarán pronto.
## Uso de la Biblioteca
Puede usarse como una biblioteca en tus proyectos Node.js con `CLI` y `API`.
### Uso de CLI
También proporcionamos una herramienta CLI llamada `antv` para un uso fácil en tu terminal. Instálala globalmente:
```bash
npm install -g @antv/chart-visualization-skills
```
**Recuperar o listar habilidades por consulta**:
```bash
# Recuperar habilidades por consulta (solo metadatos)
antv retrieve "bar chart" --library g2 --topk 10
# Recuperar habilidades con contenido markdown completo (restricciones principales añadidas automáticamente)
antv retrieve "bar chart" --library g2 --content
# Recuperar habilidades y mostrar como JSON
aantv retrieve "bar chart" --library g2 --output json
# Obtener una habilidad por su ID exacta
antv get g2-mark-interval-basic --library g2
# Listar todas las habilidades disponibles
antv list --library g2 --category core
# Listar habilidades y mostrar como JSON
antv list --output json
# Mostrar información de la habilidad (restricciones principales de SKILL.md)
antv info --library g2
# Mostrar información de la habilidad como JSON
antv info --library g2 --output json
```
**Uso del comando**:
```
Usage: antv [options] [command]
CLI tool for AntV chart visualization skills retrieval
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
retrieve [options] Search for skills matching a query
get [options] Get a skill by its exact ID
list [options] List all available skills
info [options] Show skill info from SKILL.md
help [command] display help for command
Options for retrieve:
--library Filter by library (e.g. g2, g6)
--topk Number of results to return (default: 7)
--content Include markdown content body in results; core constraints (SKILL.md Section 1-2) are always prepended as the first result
--output Output format: json | text (default: "text")
```
> Nota: `--content` siempre antepone las restricciones principales de la biblioteca (Secciones 1 y 2 de SKILL.md, hasta el marcador ``) como el primer resultado, asegurando que el modelo reciba las reglas esenciales junto con los documentos de referencia.
### Uso de la API
```typescript
import { retrieve } from '@antv/chart-visualization-skills';
// Metadata only (no content)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });
// With full markdown content (core constraints auto-prepended as first result)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });
// With content but without core constraints
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });
```
```typescript
retrieve(query: string, options?: RetrieveOptions): Skill[]
interface RetrieveOptions {
library?: string; // Library filter, e.g. 'g2' or 'g6'
topK?: number; // Number of results (default: 7)
content?: boolean; // Include markdown content body (default: false)
includeInfo?: boolean; // Prepend SKILL.md core constraints (default: same as content)
}
```
| Opción | Tipo | Predeterminado | Descripción |
| :--- | :--- | :--- | :--- |
| `library` | `string` | all | Filtro de biblioteca (`g2` o `g6`) |
| `topK` | `number` | `7` | Número de resultados |
| `content` | `boolean` | `false` | Incluir cuerpo del contenido markdown |
| `includeInfo` | `boolean` | igual que `content` | Anteponer restricciones principales de SKILL.md (Secciones 1-2) como primer resultado |
> Notas:
> - La recuperación por defecto devuelve objetos de resultado ligeros sin el campo `content`.
> - `content: true` devuelve el cuerpo del contenido markdown (los metadatos del frontmatter se excluyen).
> - Cuando `includeInfo` es verdadero (el valor por defecto cuando `content: true`), el bloque de restricciones principales — SKILL.md hasta `` — se inyecta como el primer elemento (con id prefijado `__info__`), asegurando que el modelo siempre vea las reglas esenciales.
```typescript
import { info } from '@antv/chart-visualization-skills';
const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }
```
```typescript
info(library?: string): SkillInfo | undefined
interface SkillInfo {
name: string;
description: string;
content: string; // Full SKILL.md body (after frontmatter)
constraintsContent: string; // SKILL.md body up to marker; injected by retrieve when includeInfo: true
}
```
| Parámetro | Tipo | Predeterminado | Descripción |
| :--- | :--- | :--- | :--- |
| `library` | `string` | `'g2'` | Biblioteca de la que obtener información (`g2` o `g6`) |
## Licencia
Licencia MIT - consulta el archivo [LICENSE](LICENSE) para más detalles.
## FAQ
### ¿Qué son las habilidades de visualización de gráficos AntV?
Las habilidades de visualización de gráficos AntV son un conjunto de herramientas y capacidades impulsadas por AntV, diseñadas para ayudar a los usuarios a visualizar y analizar datos de manera eficiente y precisa. Incluyen funciones para la generación de gráficos, creación de infografías, visualización de texto narrativo y desarrollo especializado de gráficos y diagramas estadísticos.
### ¿Cuántos tipos de gráficos admite la habilidad de visualización de gráficos?
La habilidad de visualización de gráficos ofrece más de 26 tipos de gráficos para la visualización inteligente de datos, cubriendo una amplia gama de representaciones de datos que incluyen series temporales, comparaciones, relaciones y datos geográficos.
### ¿Puedo crear infografías con estas habilidades?
Sí, la habilidad de creación de infografías te permite crear hermosas infografías basadas en contenido de texto dado. Utiliza AntV Infographic y ofrece más de 50 plantillas para transformar datos en un lenguaje visual perceptible.
### ¿Qué es la visualización de texto narrativo (sintaxis T8)?
La visualización de texto narrativo (T8) transforma datos no estructurados en informes narrativos semánticamente ricos utilizando la sintaxis T8, un lenguaje declarativo similar a Markdown. Está diseñada para crear narrativas de datos con anotaciones de entidades, minigráficos y formato profesional, adecuada para informes de análisis y documentos de perspectivas.
### ¿Cómo ayudan las habilidades de visualización de gráficos AntV con el análisis multidimensional?
La habilidad antv-s2-expert actúa como un asistente de desarrollo para el motor S2 de tablas de análisis cruzado multidimensional. Proporciona orientación integral para trabajar con tablas dinámicas, hojas de tabla, celdas personalizadas y otras funciones de @antv/s2.
### ¿Existen herramientas para generar gráficos y diagramas estadísticos específicos?
Sí, la habilidad antv-g6-graph genera código G6 v5 para visualizaciones de grafos como grafos de red, grafos de árbol y diagramas de flujo. La habilidad antv-g2-chart genera código G2 v5 para gráficos estadísticos como gráficos de barras, gráficos de líneas, gráficos circulares y diagramas de dispersión, siguiendo las mejores prácticas.