Chart

Servidor MCP Chart

Un servidor de Protocolo de Contexto de Modelo para generar gráficos usando AntV. Podemos usar este servidor MCP para generación de gráficos y análisis de datos.

Este es un servidor MCP basado en TypeScript que proporciona capacidades de generación de gráficos. Permite crear varios tipos de gráficos a través de herramientas MCP. También puedes usarlo en Dify.

📋 Tabla de Contenidos

• ✨ Características
• 🤖 Uso
• 🎨 Uso de Habilidades
• 🚰 Ejecutar con transporte SSE o Streamable
• 🎮 Opciones de CLI
• ⚙️ Variables de Entorno
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 Despliegue Privado
• 🗺️ Registros de Generación
• 🎛️ Filtrado de Herramientas
• 🔨 Desarrollo
• 📄 Licencia

✨ Características

Ahora se admiten más de 26 gráficos.

1. generate_area_chart: Genera un gráfico area, utilizado para mostrar la tendencia de datos bajo una variable independiente continua, permitiendo observar las tendencias generales de los datos.
2. generate_bar_chart: Genera un gráfico bar, utilizado para comparar valores entre diferentes categorías, adecuado para comparaciones horizontales.
3. generate_boxplot_chart: Genera un boxplot, utilizado para mostrar la distribución de datos, incluyendo la mediana, cuartiles y valores atípicos.
4. generate_column_chart: Genera un gráfico column, utilizado para comparar valores entre diferentes categorías, adecuado para comparaciones verticales.
5. generate_district_map - Genera un district-map, utilizado para mostrar divisiones administrativas y distribución de datos.
6. generate_dual_axes_chart: Genera un gráfico dual-axes, utilizado para mostrar la relación entre dos variables con diferentes unidades o rangos.
7. generate_fishbone_diagram: Genera un diagrama fishbone, también conocido como diagrama de Ishikawa, utilizado para identificar y mostrar las causas raíz de un problema.
8. generate_flow_diagram: Genera un flowchart, utilizado para mostrar los pasos y la secuencia de un proceso.
9. generate_funnel_chart: Genera un gráfico funnel, utilizado para mostrar la pérdida de datos en diferentes etapas.
10. generate_histogram_chart: Genera un histogram, utilizado para mostrar la distribución de datos dividiéndolos en intervalos y contando el número de puntos de datos en cada intervalo.
11. generate_line_chart: Genera un gráfico line, utilizado para mostrar la tendencia de los datos a lo largo del tiempo u otra variable continua.
12. generate_liquid_chart: Genera un gráfico liquid, utilizado para mostrar la proporción de datos, representando visualmente porcentajes en forma de esferas llenas de agua.
13. generate_mind_map: Genera un mind-map, utilizado para mostrar procesos de pensamiento e información jerárquica.
14. generate_network_graph: Genera un gráfico network, utilizado para mostrar relaciones y conexiones entre nodos.
15. generate_organization_chart: Genera un gráfico organizational, utilizado para mostrar la estructura de una organización y las relaciones de personal.
16. generate_path_map - Genera un path-map, utilizado para mostrar resultados de planificación de rutas para POIs.
17. generate_pie_chart: Genera un gráfico pie, utilizado para mostrar la proporción de datos, dividiéndolos en partes representadas por sectores que muestran el porcentaje de cada parte.
18. generate_pin_map - Genera un pin-map, utilizado para mostrar la distribución de POIs.
19. generate_radar_chart: Genera un gráfico radar, utilizado para mostrar datos multidimensionales de manera integral, mostrando múltiples dimensiones en un formato similar a un radar.
20. generate_sankey_chart: Genera un gráfico sankey, utilizado para mostrar el flujo y volumen de datos, representando el movimiento de datos entre diferentes nodos en un formato estilo Sankey.
21. generate_scatter_chart: Genera un gráfico de dispersión scatter, utilizado para mostrar la relación entre dos variables, mostrando puntos de datos como puntos dispersos en un sistema de coordenadas.
22. generate_treemap_chart: Genera un treemap, utilizado para mostrar datos jerárquicos, mostrando datos en formas rectangulares donde el tamaño de los rectángulos representa el valor de los datos.
23. generate_venn_chart: Genera un diagrama venn, utilizado para mostrar relaciones entre conjuntos, incluyendo intersecciones, uniones y diferencias.
24. generate_violin_chart: Genera un gráfico de violín violin, utilizado para mostrar la distribución de datos, combinando características de diagramas de caja y gráficos de densidad para proporcionar una vista más detallada de la distribución de datos.
25. generate_word_cloud_chart: Genera una word-cloud, utilizada para mostrar la frecuencia de palabras en datos textuales, con tamaños de fuente que indican la frecuencia de cada palabra.
26. generate_spreadsheet: Genera una spreadsheet o tabla dinámica para mostrar datos tabulares. Cuando se proporcionan los campos 'rows' o 'values', se renderiza como una tabla dinámica (tabulación cruzada); de lo contrario, se renderiza como una tabla regular.

[!NOTE] La herramienta de generación de gráficos de visualización geográfica anterior utiliza el servicio AMap y actualmente solo admite la generación de mapas dentro de China.

🤖 Uso

Para usar con Desktop APP, como Claude, VSCode, Cline, Cherry Studio, Cursor, etc., agrega la configuración del servidor MCP a continuación. En sistema Mac:

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

En sistema Windows:

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

También puedes usarlo en aliyun, modelscope, glama.ai, smithery.ai u otros con protocolo HTTP o SSE.

🎨 Uso de Habilidades

Si estás usando un IDE de IA con soporte de habilidades (como Claude Code), puedes usar la habilidad chart-visualization para seleccionar automáticamente el mejor tipo de gráfico y generar visualizaciones.

Puedes agregar la habilidad desde https://github.com/antvis/chart-visualization-skills usando:

npx skills add antvis/chart-visualization-skills

Luego proporciona tus datos o describe la visualización que deseas. La habilidad elegirá inteligentemente entre más de 25 tipos de gráficos y generará el gráfico por ti.

🚰 Ejecutar con transporte SSE o Streamable

Ejecutar directamente

Instala el paquete globalmente.

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

Ejecuta el servidor con tu opción de transporte preferida:

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

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

Luego puedes acceder al servidor en:

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

Despliegue con Docker

Entra en el directorio de docker.

cd docker

Despliega usando docker-compose.

docker compose up -d

Luego puedes acceder al servidor en:

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

🎮 Opciones de CLI

También puedes usar las siguientes opciones de CLI al ejecutar el servidor MCP. Opciones de comando ejecutando cli con -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 de Entorno

Variable	Descripción	Predeterminado	Ejemplo
VIS_REQUEST_SERVER	URL personalizada del servicio de generación de gráficos para despliegue privado	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	Identificador de servicio para registros de generación de gráficos	-	your-service-id-123
DISABLED_TOOLS	Lista separada por comas de nombres de herramientas a deshabilitar	-	generate_fishbone_diagram,generate_mind_map

📠 Despliegue Privado

MCP Server Chart proporciona un servicio gratuito de generación de gráficos por defecto. Para usuarios con necesidad de despliegue privado, pueden intentar usar VIS_REQUEST_SERVER para personalizar su propio servicio de generación de gráficos.

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

Puedes usar el proyecto de AntV GPT-Vis-SSR para desplegar un servicio HTTP en un entorno privado, y luego pasar la dirección URL a través de la variable de entorno VIS_REQUEST_SERVER.

• Método: POST
• Parámetro: Que se pasará a GPT-Vis-SSR para renderizar. Por ejemplo, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
• Retorno: El objeto de retorno del servicio HTTP.
  • success: boolean Si se generó la imagen del gráfico exitosamente.
  • resultObj: string La URL de la imagen del gráfico.
  • errorMessage: string Cuando success = false, devuelve el mensaje de error.

[!NOTE] La solución de despliegue privado actualmente no admite la generación de gráficos de visualización geográfica, incluyendo 3 herramientas: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Registros de Generación

Por defecto, se requiere que los usuarios guarden los resultados ellos mismos, pero también proporcionamos un servicio para ver los registros de generación de gráficos, que requiere que los usuarios generen un identificador de servicio para ellos mismos y lo configuren.

Usa Alipay para escanear y abrir el mini programa para generar un identificador de servicio personal (haz clic en el menú "Mi" a continuación, entra en la página "Mis Servicios", haz clic en el botón "Generar", y haz clic en el botón "Copiar" después de tener éxito):

A continuación, necesitas agregar la variable de entorno SERVICE_ID a la configuración del servidor MCP. Por ejemplo, la configuración para Mac es la siguiente (para sistemas Windows, solo agrega la variable env):

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

Después de actualizar la configuración del Servidor MCP, necesitas reiniciar tu aplicación cliente de IA y verificar nuevamente si has iniciado y conectado al Servidor MCP exitosamente. Luego puedes intentar generar el mapa nuevamente. Después de que la generación sea exitosa, puedes ir a la página "Mi Mapa" del mini programa para ver tus registros de generación de mapas.

🎛️ Filtrado de Herramientas

Puedes deshabilitar herramientas específicas de generación de gráficos usando la variable de entorno DISABLED_TOOLS. Esto es útil cuando ciertas herramientas tienen problemas de compatibilidad con tu cliente MCP o cuando deseas limitar la funcionalidad disponible.

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

Nombres de herramientas disponibles para filtrar Consulta ✨ Características.

🔨 Desarrollo

Instala dependencias:

npm install

Compila el servidor:

npm run build

Inicia el servidor MCP:

npm run start

Inicia el servidor MCP con transporte SSE:

node build/index.js -t sse

Inicia el servidor MCP con transporte Streamable:

node build/index.js -t streamable

📄 Licencia

MIT@AntV.