chart-visualizationpor AntV

Chart Visualization Skill.

Un skill de Claude Code y Codex para diagramas y gráficos: renderiza datos como gráficos de barras, líneas, pastel, radar, Sankey, mapas mentales y diagramas de flujo mediante la API de AntV.

Diagrams & Data Visualization
Imagen de gráfico

Descargar OpenDesign Ver guía de uso

antvis/chart-visualization-skills · skills/chart-visualization/SKILL.mdSKILL.md

--- name: chart-visualization description: 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片 --- ## 步骤 ## 图表选择指南 ## API 接口 ## 支持的图表类型 ## 通用可选参数 ## 各图表 data 格式

Encabezados y materia preliminar leídos del archivo original el 14 de septiembre de 2026 · 3736 caracteres completos

01 Qué hace

Qué hace el skill chart-visualization en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill convierte los datos del usuario en gráficos llamando a la API de generación de gráficos de AntV. Analiza los datos y la solicitud del usuario para elegir el tipo de gráfico más adecuado dentro de un amplio catálogo (barras, líneas, circular, radar, sankey, mapa mental, diagrama de flujo y más), construye un cuerpo de solicitud JSON con los campos type y source requeridos, llama a la API con curl y devuelve la URL de la imagen resultante como una imagen en Markdown.

Documenta el contrato de forma de datos para cada uno de los aproximadamente 20 tipos de gráficos compatibles, además de parámetros opcionales compartidos como theme, width, height y title, ofreciendo al agente una referencia concreta para construir solicitudes válidas en lugar de adivinar los formatos.

Qué produce

Una respuesta de la API en formato JSON que contiene un indicador success y una URL de imagen en resultObj

Ver el ejemplo de prompt ↗

Cómo funciona

01
Elegir el tipo de gráfico
Analizar los datos y requisitos del usuario para elegir el tipo de gráfico más adecuado.
02
Construir el cuerpo de la solicitud
Construir un cuerpo de solicitud JSON que siga la especificación de la API.
03
Llamar a la API
Usar la herramienta curl para llamar a la API y generar la imagen del gráfico.
04
Mostrar la imagen
Mostrar la URL de la imagen devuelta en formato de imagen Markdown.

02 Encuentra tu caso de uso

Cuándo usar la skill chart-visualization

Usa la skill chart-visualization en Claude Code o Codex cuando el trabajo sean diagramas y gráficos de este tipo. El ajuste y los límites a continuación se toman del archivo propio de la skill.

Buen caso de uso

Visualizar tendencias de series temporales con un gráfico de líneas, o tendencias acumuladas con un gráfico de área
Comparar categorías horizontalmente con un gráfico de barras o verticalmente con un gráfico de columnas
Mostrar la composición proporcional con un gráfico circular o la proporción jerárquica con un treemap
Representar flujos entre categorías con un diagrama sankey o la correlación con un diagrama de dispersión
Renderizar estructuras jerárquicas o de árbol con organization-chart o mind-map

Conozca los límites

Requiere API de AntVEl SKILL.md nombra esta dependencia; la skill no funciona sin ella en tu proyecto.

Qué proporcionar

Matriz de datos específica del gráficoCada tipo de gráfico espera una forma de datos particular; por ejemplo, bar/column necesitan matrices {category, value, group?}, y sankey necesita matrices {source, target, value}.
Parámetros de visualización opcionalesSe pueden proporcionar theme, width, height, title, style.texture y, para gráficos de ejes, axisXTitle/axisYTitle para personalizar el resultado.

03 Dentro del skill

Reglas que el skill chart-visualization proporciona a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

Campos obligatorios
Todo cuerpo de solicitud debe incluir un campo type y un campo source configurado como "chart-visualization-skills".
Endpoint fijo
Los gráficos se generan mediante POST a un único endpoint fijo de la API.
Tamaño de lienzo predeterminado
El ancho del gráfico es 600 por defecto y la altura es 400 por defecto, salvo que se indique lo contrario.
Opciones de tema
El tema por defecto es "default", pero puede configurarse como "academy" o "dark".
Estilo de textura
style.texture es "default" de forma predeterminada, pero puede establecerse en "rough" para un aspecto dibujado a mano.
Valores Predeterminados de Apilado
Los gráficos de barras usan stack: true de forma predeterminada, mientras que los gráficos de columnas usan group: true de forma predeterminada.
Formato de salida
La URL resultObj de la respuesta de la API debe renderizarse como una imagen de Markdown usando el patrón .

04 Ponlo a trabajar

Instalar chart-visualization en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar chart-visualization a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/antvis/chart-visualization-skills --skill chart-visualization

Formato genérico de la CLI skills para skills/chart-visualization/SKILL.md; el repositorio puede documentar su propia ruta.

Asignar al Skill una Primera Tarea de Diagramas y Gráficos

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Please turn this monthly revenue data into a chart: [2025-01: 100, 2025-02: 150, 2025-03: 130]. I want to see the trend over time.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Compare el tipo de gráfico elegido con la guía de selección según las características de los datos (series temporales, comparación, proporción, relación, jerarquía)

En OpenDesign importe chart-visualization desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

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

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Rama master
Archivo de skill: skills/chart-visualization/SKILL.md Suma de comprobación del contenido registrada en verificación; commit 089b687
License: MIT De LICENSE.
Estrellas del repositorio: 489 Captura de GitHub tomada el 14-09-2026 para todo el repositorio antvis/chart-visualization-skills, que contiene 2 skills en este catálogo. No es una calificación ni un conteo de uso para chart-visualization.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

步骤Four steps: analyze data, build JSON body, call API with curl, output Markdown image
图表选择指南Maps data characteristics (time series, comparison, proportion, relations, hierarchy) to chart types
API 接口Describes the POST endpoint, required fields, and a curl request/response example
支持的图表类型Table listing all supported chart types grouped by category
通用可选参数Shared optional parameters (theme, width, height, title, texture) and their defaults
各图表 data 格式Exact data shape and optional fields required for each individual chart type

La descripción propia del Skill

"将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片"

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 3,736 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill chart-visualization

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

Qué tipos de gráficos puede generar este skill

Admite un amplio catálogo, incluyendo bar, column, waterfall, dual-axes, area, line, scatter, boxplot, histogram, violin, funnel, pie, liquid, word-cloud, organization-chart, mind-map, treemap, sankey, network-graph, venn, flow-diagram, fishbone-diagram, radar y spreadsheet.

En qué formato se entrega el resultado

La API devuelve un objeto JSON con una URL resultObj, que el skill luego entrega como un enlace de imagen en Markdown.

Chart Visualization

Ejecutar chart-visualization en una Tarea Real de Diagramas y Gráficos.

Descarga OpenDesign, importa chart-visualization desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills