Chart

Serveur MCP Chart

Un serveur Model Context Protocol pour générer des graphiques en utilisant AntV. Nous pouvons utiliser ce serveur MCP pour la génération de graphiques et l'analyse de données.

Ceci est un serveur MCP basé sur TypeScript qui fournit des capacités de génération de graphiques. Il vous permet de créer différents types de graphiques via les outils MCP. Vous pouvez également l'utiliser dans Dify.

📋 Table des matières

• ✨ Fonctionnalités
• 🤖 Utilisation
• 🎨 Utilisation des compétences
• 🚰 Exécution avec transport SSE ou Streamable
• 🎮 Options CLI
• ⚙️ Variables d'environnement
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 Déploiement privé
• 🗺️ Enregistrements générés
• 🎛️ Filtrage des outils
• 🔨 Développement
• 📄 Licence

✨ Fonctionnalités

Plus de 26 graphiques sont désormais pris en charge.

1. generate_area_chart : Génère un graphique area, utilisé pour afficher la tendance des données sous une variable indépendante continue, permettant d'observer les tendances globales des données.
2. generate_bar_chart : Génère un graphique bar, utilisé pour comparer des valeurs entre différentes catégories, adapté aux comparaisons horizontales.
3. generate_boxplot_chart : Génère un boxplot, utilisé pour afficher la distribution des données, y compris la médiane, les quartiles et les valeurs aberrantes.
4. generate_column_chart : Génère un graphique column, utilisé pour comparer des valeurs entre différentes catégories, adapté aux comparaisons verticales.
5. generate_district_map - Génère un district-map, utilisé pour afficher les divisions administratives et la distribution des données.
6. generate_dual_axes_chart : Génère un graphique dual-axes, utilisé pour afficher la relation entre deux variables avec des unités ou des plages différentes.
7. generate_fishbone_diagram : Génère un diagramme fishbone, également connu sous le nom de diagramme d'Ishikawa, utilisé pour identifier et afficher les causes profondes d'un problème.
8. generate_flow_diagram : Génère un flowchart, utilisé pour afficher les étapes et la séquence d'un processus.
9. generate_funnel_chart : Génère un graphique funnel, utilisé pour afficher la perte de données à différentes étapes.
10. generate_histogram_chart : Génère un histogram, utilisé pour afficher la distribution des données en les divisant en intervalles et en comptant le nombre de points de données dans chaque intervalle.
11. generate_line_chart : Génère un graphique line, utilisé pour afficher la tendance des données dans le temps ou une autre variable continue.
12. generate_liquid_chart : Génère un graphique liquid, utilisé pour afficher la proportion des données, représentant visuellement les pourcentages sous forme de sphères remplies d'eau.
13. generate_mind_map : Génère un mind-map, utilisé pour afficher les processus de pensée et les informations hiérarchiques.
14. generate_network_graph : Génère un graphe network, utilisé pour afficher les relations et les connexions entre les nœuds.
15. generate_organization_chart : Génère un graphique organizational, utilisé pour afficher la structure d'une organisation et les relations entre le personnel.
16. generate_path_map - Génère un path-map, utilisé pour afficher les résultats de planification d'itinéraires pour les POI.
17. generate_pie_chart : Génère un graphique pie, utilisé pour afficher la proportion des données, en les divisant en parties représentées par des secteurs montrant le pourcentage de chaque partie.
18. generate_pin_map - Génère un pin-map, utilisé pour montrer la distribution des POI.
19. generate_radar_chart : Génère un graphique radar, utilisé pour afficher des données multidimensionnelles de manière complète, montrant plusieurs dimensions dans un format de type radar.
20. generate_sankey_chart : Génère un graphique sankey, utilisé pour afficher le flux et le volume des données, représentant le mouvement des données entre différents nœuds dans un format de type Sankey.
21. generate_scatter_chart : Génère un nuage de points scatter, utilisé pour afficher la relation entre deux variables, montrant les points de données comme des points dispersés sur un système de coordonnées.
22. generate_treemap_chart : Génère un treemap, utilisé pour afficher des données hiérarchiques, montrant les données sous forme rectangulaire où la taille des rectangles représente la valeur des données.
23. generate_venn_chart : Génère un diagramme venn, utilisé pour afficher les relations entre les ensembles, y compris les intersections, les unions et les différences.
24. generate_violin_chart : Génère un tracé violin, utilisé pour afficher la distribution des données, combinant les caractéristiques des boîtes à moustaches et des tracés de densité pour fournir une vue plus détaillée de la distribution des données.
25. generate_word_cloud_chart : Génère un word-cloud, utilisé pour afficher la fréquence des mots dans les données textuelles, avec des tailles de police indiquant la fréquence de chaque mot.
26. generate_spreadsheet : Génère un spreadsheet ou un tableau croisé dynamique pour afficher des données tabulaires. Lorsque les champs « rows » ou « values » sont fournis, il s'affiche sous forme de tableau croisé dynamique (tabulation croisée) ; sinon, il s'affiche sous forme de tableau régulier.

[!NOTE] L'outil de génération de graphiques de visualisation géographique ci-dessus utilise le service AMap et ne prend actuellement en charge que la génération de cartes en Chine.

🤖 Utilisation

Pour l'utiliser avec Desktop APP, comme Claude, VSCode, Cline, Cherry Studio, Cursor, etc., ajoutez la configuration du serveur MCP ci-dessous. Sur système Mac :

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

Sur système Windows :

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

Vous pouvez également l'utiliser sur aliyun, modelscope, glama.ai, smithery.ai ou d'autres avec le protocole HTTP, SSE.

🎨 Utilisation des compétences

Si vous utilisez un IDE IA avec prise en charge des compétences (comme Claude Code), vous pouvez utiliser la compétence chart-visualization pour sélectionner automatiquement le meilleur type de graphique et générer des visualisations.

Vous pouvez ajouter la compétence depuis https://github.com/antvis/chart-visualization-skills en utilisant :

npx skills add antvis/chart-visualization-skills

Ensuite, fournissez vos données ou décrivez la visualisation souhaitée. La compétence choisira intelligemment parmi plus de 25 types de graphiques et générera le graphique pour vous.

🚰 Exécution avec transport SSE ou Streamable

Exécution directe

Installez le package globalement.

npm install -g @antv/mcp-server-chart

Exécutez le serveur avec l'option de transport de votre choix :

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Vous pouvez alors accéder au serveur à l'adresse :

• Transport SSE : http://localhost:1122/sse
• Transport Streamable : http://localhost:1122/mcp

Déploiement Docker

Entrez dans le répertoire docker.

cd docker

Déployez en utilisant docker-compose.

docker compose up -d

Vous pouvez alors accéder au serveur à l'adresse :

• Transport SSE : http://localhost:1123/sse
• Transport Streamable : http://localhost:1122/mcp

🎮 Options CLI

Vous pouvez également utiliser les options CLI suivantes lors de l'exécution du serveur MCP. Options de commande en exécutant le CLI avec -H.

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ Variables d'environnement

Variable	Description	Défaut	Exemple
VIS_REQUEST_SERVER	URL du service de génération de graphiques personnalisé pour le déploiement privé	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	Identifiant de service pour les enregistrements de génération de graphiques	-	your-service-id-123
DISABLED_TOOLS	Liste séparée par des virgules des noms d'outils à désactiver	-	generate_fishbone_diagram,generate_mind_map

📠 Déploiement privé

MCP Server Chart fournit un service de génération de graphiques gratuit par défaut. Pour les utilisateurs ayant besoin d'un déploiement privé, ils peuvent essayer d'utiliser VIS_REQUEST_SERVER pour personnaliser leur propre service de génération de graphiques.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Vous pouvez utiliser le projet AntV GPT-Vis-SSR pour déployer un service HTTP dans un environnement privé, puis transmettre l'adresse URL via l'environnement VIS_REQUEST_SERVER.

• Méthode : POST
• Paramètre : Qui sera transmis à GPT-Vis-SSR pour le rendu. Par exemple, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
• Retour : L'objet de retour du service HTTP.
  • success : boolean Indique si l'image du graphique a été générée avec succès.
  • resultObj : string L'URL de l'image du graphique.
  • errorMessage : string Lorsque success = false, renvoie le message d'erreur.

[!NOTE] La solution de déploiement privé ne prend actuellement pas en charge la génération de graphiques de visualisation géographique, y compris 3 outils : geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Enregistrements générés

Par défaut, les utilisateurs doivent enregistrer les résultats eux-mêmes, mais nous fournissons également un service pour consulter les enregistrements de génération de graphiques, ce qui nécessite que les utilisateurs génèrent un identifiant de service pour eux-mêmes et le configurent.

Utilisez Alipay pour scanner et ouvrir le mini-programme afin de générer un identifiant de service personnel (cliquez sur le menu « Mon » ci-dessous, entrez dans la page « Mes services », cliquez sur le bouton « Générer », puis cliquez sur le bouton « Copier » après le succès) :

Ensuite, vous devez ajouter la variable d'environnement SERVICE_ID à la configuration du serveur MCP. Par exemple, la configuration pour Mac est la suivante (pour les systèmes Windows, ajoutez simplement la variable env) :

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

Après avoir mis à jour la configuration du serveur MCP, vous devez redémarrer votre application cliente IA et vérifier à nouveau si vous avez démarré et connecté le serveur MCP avec succès. Ensuite, vous pouvez essayer de générer la carte à nouveau. Après la génération réussie, vous pouvez aller sur la page « Mes cartes » du mini-programme pour consulter vos enregistrements de génération de cartes.

🎛️ Filtrage des outils

Vous pouvez désactiver des outils de génération de graphiques spécifiques en utilisant la variable d'environnement DISABLED_TOOLS. Cela est utile lorsque certains outils ont des problèmes de compatibilité avec votre client MCP ou lorsque vous souhaitez limiter les fonctionnalités disponibles.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

Noms d'outils disponibles pour le filtrage Voir ✨ Fonctionnalités.

🔨 Développement

Installez les dépendances :

npm install

Construisez le serveur :

npm run build

Démarrez le serveur MCP :

npm run start

Démarrez le serveur MCP avec le transport SSE :

node build/index.js -t sse

Démarrez le serveur MCP avec le transport Streamable :

node build/index.js -t streamable

📄 Licence

MIT@AntV.