chart-visualizationpor AntV

Chart Visualization Skill.

Uma skill de Claude Code e Codex para diagramas e gráficos: renderiza dados como gráficos de barras, linhas, pizza, radar, Sankey, mapas mentais e fluxogramas através da API AntV.

Diagrams & Data Visualization
Imagem de gráfico

Baixar OpenDesign Ver guia de uso

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

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

Cabeçalhos de seção e metadados lidos do arquivo original em 14/09/2026 · 3.736 caracteres no total

01 O que faz

O que o Skill chart-visualization Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Este skill transforma dados do usuário em gráficos chamando a API de geração de gráficos da AntV. Ele analisa os dados e a solicitação do usuário para escolher o tipo de gráfico mais adequado em um amplo catálogo (barra, linha, pizza, radar, sankey, mapa mental, diagrama de fluxo e outros), constrói um corpo de requisição JSON com os campos type e source necessários, chama a API com curl e retorna a URL da imagem resultante como uma imagem em Markdown.

Ele documenta o contrato de formato de dados para cada um dos aproximadamente 20 tipos de gráfico suportados, além de parâmetros opcionais compartilhados como theme, width, height e title, dando ao agente uma referência concreta para construir requisições válidas em vez de adivinhar formatos.

O que ele produz

Uma resposta de API em JSON contendo um indicador de sucesso e uma URL de imagem resultObj

Veja o exemplo de prompt ↗

Como funciona

01
Escolher o Tipo de Gráfico
Analise os dados e os requisitos do usuário para escolher o tipo de gráfico mais adequado.
02
Construir o Corpo da Requisição
Construa um corpo de requisição JSON que siga a especificação da API.
03
Chamar a API
Use a ferramenta curl para chamar a API e gerar a imagem do gráfico.
04
Exibir a Imagem
Exiba a URL da imagem retornada no formato de imagem Markdown.

02 Encontre o ideal para você

Quando Usar a Skill chart-visualization

Use a skill chart-visualization no Claude Code ou Codex quando o trabalho envolve diagramas e gráficos deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Visualizando tendências de série temporal com um gráfico de linhas, ou tendências cumulativas com um gráfico de área
Comparando categorias horizontalmente com um gráfico de barras ou verticalmente com um gráfico de colunas
Mostrando composição proporcional com um gráfico de pizza ou participação hierárquica com um treemap
Mapeando fluxos entre categorias com um diagrama sankey ou correlação com um gráfico de dispersão
Renderizando estruturas hierárquicas ou em árvore com organization-chart ou mind-map

Conheça os Limites

Requer AntV APIO SKILL.md menciona esta dependência; a skill não funciona sem ela no seu projeto.

O Que Fornecer

Array de dados específico do gráficoCada tipo de gráfico espera um formato de dados específico, por exemplo, bar/column precisam de arrays {category, value, group?}, sankey precisa de arrays {source, target, value}.
Parâmetros de exibição opcionaisTheme, width, height, title, style.texture e, para gráficos de eixo, axisXTitle/axisYTitle podem ser fornecidos para personalizar a saída.

03 Dentro da skill

Regras que a Skill chart-visualization Fornece ao Claude Code e Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Campos Obrigatórios
Todo corpo de requisição deve incluir um campo type e um campo source definido como "chart-visualization-skills".
Endpoint Fixo
Os gráficos são gerados por meio de POST para um único endpoint de API fixo.
Tamanho Padrão do Canvas
A largura do gráfico é 600 por padrão e a altura é 400 por padrão, salvo se substituídos.
Opções de Tema
O tema padrão é "default", mas pode ser definido como "academy" ou "dark".
Estilo de Textura
style.texture tem como padrão "default", mas pode ser definido como "rough" para um visual desenhado à mão.
Padrões de Empilhamento
Gráficos de barras têm stack: true como padrão, enquanto gráficos de colunas têm group: true como padrão.
Formato de Saída
A URL resultObj da resposta da API deve ser renderizada como uma imagem Markdown usando o padrão .

04 Coloque em prática

Instalar chart-visualization no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar chart-visualization ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formulário genérico da CLI skills para skills/chart-visualization/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Diagramas e Gráficos

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Compare o tipo de gráfico escolhido com o guia de seleção para as características dos dados (série temporal, comparação, proporção, relação, hierarquia)

No OpenDesign importe o chart-visualization a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Arquivo da skill: skills/chart-visualization/SKILL.md Checksum de conteúdo registrado na verificação; commit 089b687
License: MIT De LICENSE.
Estrelas do repositório: 489 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório antvis/chart-visualization-skills, que contém 2 skills neste catálogo. Não é uma avaliação ou contagem de uso para chart-visualization.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

EtapasQuatro etapas: analisar dados, construir o corpo JSON, chamar a API com curl, gerar imagem Markdown
Guia de Seleção de GráficosMapeia características dos dados (série temporal, comparação, proporção, relações, hierarquia) para tipos de gráficos
Endpoint da APIDescreve o endpoint POST, os campos obrigatórios e um exemplo de requisição/resposta curl
Tipos de Gráficos SuportadosTabela listando todos os tipos de gráficos suportados, agrupados por categoria
Parâmetros Opcionais ComunsParâmetros opcionais compartilhados (theme, width, height, title, texture) e seus padrões
Formato de Dados de Cada GráficoFormato exato dos dados e campos opcionais exigidos para cada tipo de gráfico individual

A Descrição da Própria Skill

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

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 3.736 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill chart-visualization

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Quais tipos de gráficos essa skill pode gerar

Ela suporta um amplo catálogo, incluindo 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 e spreadsheet.

Em que formato o resultado é entregue

A API retorna um objeto JSON com uma URL resultObj, que a skill então gera como um link de imagem Markdown.

Chart Visualization

Execute chart-visualization em uma Tarefa Real de Diagramas e Gráficos.

Baixe OpenDesign, importe chart-visualization do seu link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills