chart-visualizationdi AntV

Chart Visualization Skill.

Una skill per Claude Code e Codex per diagrammi e grafici: rende i dati come grafici a barre, linee, torta, radar, Sankey, mappe mentali e diagrammi di flusso tramite l'API AntV.

Diagrams & Data Visualization
Immagine grafico

Scarica OpenDesign Guida all'uso

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

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

Intestazione e titoli di sezione letti dal file upstream il 14/09/2026 · 3.736 caratteri in totale

01 Cosa fa

Cosa fa lo skill chart-visualization in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questo skill trasforma i dati dell'utente in grafici chiamando l'API di generazione grafici di AntV. Analizza i dati e la richiesta dell'utente per scegliere il tipo di grafico più adatto da un ampio catalogo (bar, line, pie, radar, sankey, mind-map, flow-diagram e altri), costruisce un corpo di richiesta JSON con i campi type e source richiesti, chiama l'API con curl e restituisce l'URL dell'immagine ottenuta come immagine Markdown.

Documenta il contratto di forma dei dati per ciascuno dei circa 20 tipi di grafico supportati oltre a parametri opzionali condivisi come theme, width, height e title, fornendo all'agente un riferimento concreto per costruire richieste valide invece di indovinare i formati.

Che cosa produce

Una risposta API JSON contenente un flag success e un URL immagine resultObj

Vedi l'esempio di prompt ↗

Come funziona

01
Scegliere il Tipo di Grafico
Analizza i dati e i requisiti dell'utente per scegliere il tipo di grafico più adatto.
02
Costruire il Corpo della Richiesta
Costruisci un corpo di richiesta JSON che segua la specifica dell'API.
03
Chiamare l'API
Usa lo strumento curl per chiamare l'API e generare l'immagine del grafico.
04
Restituire l'Immagine
Restituisci l'URL dell'immagine ottenuta in formato immagine Markdown.

02 Trova la tua applicazione

Quando usare la skill chart-visualization

Usa la skill chart-visualization in Claude Code o Codex quando il compito riguarda diagrammi e grafici di questo tipo. Applicabilità e limiti qui sotto sono tratti dal file della skill stessa.

Buona applicazione

Visualizzare le tendenze temporali con un grafico a linee, o le tendenze cumulative con un grafico ad area
Confrontare le categorie orizzontalmente con un grafico a barre o verticalmente con un grafico a colonne
Mostrare la composizione proporzionale con un grafico a torta o la quota gerarchica con una treemap
Mappare i flussi tra categorie con un diagramma sankey o la correlazione con uno scatter plot
Rappresentare strutture gerarchiche o ad albero con organigrammi o mappe mentali

Conosci i limiti

Richiede API AntVIl SKILL.md indica questa dipendenza; la skill non funziona senza di essa nel progetto.

Cosa fornire

Array di dati specifico per il graficoOgni tipo di grafico richiede una struttura di dati particolare, ad es. bar/column richiedono array {category, value, group?}, sankey richiede array {source, target, value}.
Parametri di visualizzazione opzionaliÈ possibile specificare theme, width, height, title, style.texture e, per i grafici ad assi, axisXTitle/axisYTitle per personalizzare l'output.

03 Dentro la skill

Le Regole che la Skill chart-visualization Fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

Campi Obbligatori
Ogni corpo di richiesta deve includere un campo type e un campo source impostato su "chart-visualization-skills".
Endpoint Fisso
I grafici vengono generati inviando una richiesta POST a un unico endpoint API fisso.
Dimensione Predefinita del Canvas
La larghezza del grafico è impostata di default a 600 e l'altezza a 400, salvo diversa indicazione.
Opzioni del Tema
Il tema è impostato di default su "default", ma può essere impostato su "academy" o "dark".
Stile della Texture
style.texture ha come valore predefinito "default", ma può essere impostato su "rough" per un aspetto disegnato a mano.
Impostazioni predefinite di impilamento
I grafici a barre hanno come valore predefinito stack: true, mentre i grafici a colonne hanno come valore predefinito group: true.
Formato di output
L'URL resultObj della risposta dell'API deve essere reso come immagine Markdown utilizzando il pattern .

04 Mettila al lavoro

Installa chart-visualization in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi chart-visualization a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per skills/chart-visualization/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna allo skill un primo compito su diagrammi e grafici

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Confrontare il tipo di grafico scelto con la guida alla selezione in base alle caratteristiche dei dati (serie temporale, confronto, proporzione, relazione, gerarchia)

In OpenDesign importi chart-visualization dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi lo selezioni nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
File della skill: skills/chart-visualization/SKILL.md Checksum del contenuto registrato alla verifica; commit 089b687
License: MIT Da LICENSE.
Stelle del repository: 489 Istantanea GitHub del 2026-09-14 per l'intero repository antvis/chart-visualization-skills, che contiene 2 skill in questo catalogo. Non è una valutazione né un conteggio di utilizzo per chart-visualization.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

步骤Quattro passaggi: analizzare i dati, costruire il corpo JSON, chiamare l'API con curl, generare l'immagine Markdown in output
图表选择指南Associa le caratteristiche dei dati (serie temporale, confronto, proporzione, relazioni, gerarchia) ai tipi di grafico
API 接口Descrive l'endpoint POST, i campi obbligatori e un esempio di richiesta/risposta curl
支持的图表类型Tabella che elenca tutti i tipi di grafico supportati, raggruppati per categoria
通用可选参数Parametri opzionali condivisi (theme, width, height, title, texture) e i relativi valori predefiniti
各图表 data 格式Forma esatta dei dati e campi opzionali richiesti per ciascun tipo di grafico

Descrizione della skill

Visualizza i dati sotto forma di grafici. Quando l'utente deve generare istogrammi, grafici a linee, grafici a torta, grafici a dispersione, grafici radar, diagrammi di Sankey, mappe mentali, diagrammi di flusso o altri tipi di grafici, richiama questa skill che utilizza il tool curl per chiamare l'API AntV e generare l'immagine del grafico

Descrizione front-matter da SKILL.md. Il file completo è di circa 3.736 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill chart-visualization

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Quali tipi di grafico può generare questa skill

Supporta un ampio catalogo che include 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.

In quale formato viene fornito l'output

L'API restituisce un oggetto JSON con un URL resultObj, che la skill genera poi come link a un'immagine Markdown.

Visualizzazione grafico

Esegui chart-visualization su un task reale di diagrammi e grafici.

Scarica OpenDesign, importa chart-visualization dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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