Chart MCP Server

oficial

Un servidor del Protocolo de Contexto de Modelo para generar gráficos visuales usando AntV.

Documentación

Servidor MCP Chart

Un servidor del Protocolo de Contexto de Modelo (MCP) 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. Te 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
📠 Despliegue Privado
🗺️ Registros de Generación
🎛️ Filtrado de Herramientas
🔨 Desarrollo
📄 Licencia

✨ Características

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

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

Ingresa al directorio 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 del servicio de generación de gráficos personalizado 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. Como, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
Retorno: El objeto de retorno del servicio HTTP.
- success: boolean Si la generación de la imagen del gráfico fue exitosa.
- 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, incluye 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 sí 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" abajo, ingresa a la página "Mis Servicios", haz clic en el botón "Generar" y haz clic en el botón "Copiar" después del é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 las ✨ Características.

🔨 Desarrollo

Instalar dependencias:

npm install

Construir el servidor:

npm run build

Iniciar el servidor MCP:

npm run start

Iniciar el servidor MCP con transporte SSE:

node build/index.js -t sse

Iniciar el servidor MCP con transporte Streamable:

node build/index.js -t streamable

📄 Licencia

MIT@AntV.