chart-visualizationpar AntV

Chart Visualization Skill.

Un skill Claude Code et Codex pour les diagrammes et graphiques : génère des données sous forme de graphiques en barres, courbes, secteurs, radar, Sankey, cartes mentales et organigrammes via l'API AntV.

Diagrammes et visualisation de données
Image de graphique

Télécharger OpenDesign Voir le guide d'utilisation

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

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

Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 3 736 caractères au total

01 Ce qu'il fait

Ce que fait le Skill chart-visualization dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill transforme les données de l'utilisateur en graphiques en appelant l'API de génération de graphiques d'AntV. Il analyse les données et la demande de l'utilisateur pour choisir le type de graphique le plus adapté dans un vaste catalogue (barres, lignes, secteurs, radar, sankey, carte mentale, diagramme de flux, et plus), construit un corps de requête JSON avec les champs type et source requis, appelle l'API avec curl, et produit en sortie l'URL de l'image renvoyée sous forme d'image Markdown.

Il documente le contrat de forme des données pour chacun des environ 20 types de graphiques pris en charge, ainsi que les paramètres optionnels partagés comme theme, width, height et title, donnant à l'agent une référence concrète pour construire des requêtes valides plutôt que de deviner les formats.

Ce qu'il produit

Une réponse d'API JSON contenant un indicateur success et une URL d'image resultObj

Voir l'exemple de prompt ↗

Fonctionnement

01
Choisir le type de graphique
Analysez les données et les exigences de l'utilisateur pour choisir le type de graphique le plus adapté.
02
Construire le corps de la requête
Construisez un corps de requête JSON conforme à la spécification de l'API.
03
Appeler l'API
Utilisez l'outil curl pour appeler l'API et générer l'image du graphique.
04
Générer l'image
Générez l'URL de l'image renvoyée au format image Markdown.

02 Trouvez celui qui vous convient

Quand utiliser le skill chart-visualization

Utilisez le skill chart-visualization dans Claude Code ou Codex lorsque la tâche concerne des diagrammes et graphiques de ce type. La portée et les limites ci-dessous sont extraites du fichier du skill lui-même.

Bon choix

Visualiser des tendances temporelles avec un graphique en lignes, ou des tendances cumulées avec un graphique en aires
Comparer des catégories horizontalement avec un graphique à barres ou verticalement avec un graphique en colonnes
Montrer une composition proportionnelle avec un graphique circulaire ou une répartition hiérarchique avec un treemap
Cartographier des flux entre catégories avec un diagramme de Sankey ou une corrélation avec un nuage de points
Représenter des structures hiérarchiques ou arborescentes avec un organigramme ou une mind-map

Connaître les limites

Nécessite AntV APILe SKILL.md nomme cette dépendance ; le skill ne fonctionne pas sans elle dans votre projet.

Quoi fournir

Tableau de données spécifique au graphiqueChaque type de graphique attend une forme de données particulière, par ex. bar/column nécessitent des tableaux {category, value, group?}, sankey nécessite des tableaux {source, target, value}.
Paramètres d'affichage optionnelsTheme, width, height, title, style.texture, et pour les graphiques à axes axisXTitle/axisYTitle peuvent être fournis pour personnaliser le résultat.

03 Dans le skill

Règles que le skill chart-visualization donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Champs obligatoires
Chaque corps de requête doit inclure un champ type et un champ source défini sur "chart-visualization-skills".
Point de terminaison fixe
Les graphiques sont générés en envoyant une requête POST à un point de terminaison d'API unique et fixe.
Taille de canevas par défaut
La largeur du graphique est de 600 par défaut et la hauteur de 400, sauf indication contraire.
Options de thème
Le thème est "default" par défaut, mais peut être défini sur "academy" ou "dark".
Style de texture
style.texture est défini par défaut sur « default », mais peut être réglé sur « rough » pour un rendu dessiné à la main.
Empilement par défaut
Les graphiques à barres utilisent par défaut stack: true, tandis que les graphiques en colonnes utilisent par défaut group: true.
Format de sortie
L'URL resultObj de la réponse de l'API doit être rendue comme une image Markdown en utilisant le motif .

04 Mettez-le en pratique

Installer chart-visualization dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter chart-visualization à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour skills/chart-visualization/SKILL.md ; le dépôt peut documenter son propre chemin.

Confier à la skill une première tâche de diagrammes et graphiques

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Faire correspondre le type de graphique choisi au guide de sélection selon les caractéristiques des données (série temporelle, comparaison, proportion, relation, hiérarchie)

Dans OpenDesign, importez chart-visualization depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branche master
Fichier du skill: skills/chart-visualization/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 089b687
License: MIT D'après LICENSE.
Étoiles du dépôt: 489 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt antvis/chart-visualization-skills, qui contient 2 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'usage pour chart-visualization.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

步骤Quatre étapes : analyser les données, construire le corps JSON, appeler l'API avec curl, produire l'image Markdown
图表选择指南Associe les caractéristiques des données (série temporelle, comparaison, proportion, relations, hiérarchie) aux types de graphiques
API 接口Décrit le point de terminaison POST, les champs requis, et un exemple de requête/réponse curl
支持的图表类型Tableau listant tous les types de graphiques pris en charge, regroupés par catégorie
通用可选参数Paramètres optionnels partagés (theme, width, height, title, texture) et leurs valeurs par défaut
各图表 data 格式Forme exacte des données et champs optionnels requis pour chaque type de graphique individuel

Description du skill lui-même

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

Description front-matter de SKILL.md. Le fichier complet fait environ 3 736 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill chart-visualization

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quels types de graphiques ce skill peut-il générer

Il prend en charge un large catalogue incluant 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, et spreadsheet.

Sous quel format le résultat est-il fourni

L'API renvoie un objet JSON avec une URL resultObj, que le skill produit ensuite sous forme de lien image Markdown.

Chart Visualization

Exécuter chart-visualization sur une vraie tâche de diagrammes et graphiques.

Téléchargez OpenDesign, importez chart-visualization depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills