Chart

Servidor MCP Chart

Um servidor Model Context Protocol para gerar gráficos usando AntV. Podemos usar este servidor MCP para geração de gráficos e análise de dados.

Este é um servidor MCP baseado em TypeScript que fornece capacidades de geração de gráficos. Ele permite criar vários tipos de gráficos por meio de ferramentas MCP. Você também pode usá-lo no Dify.

📋 Sumário

• ✨ Recursos
• 🤖 Uso
• 🎨 Uso de Habilidades
• 🚰 Executar com transporte SSE ou Streamable
• 🎮 Opções de CLI
• ⚙️ Variáveis de Ambiente
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 Implantação Privada
• 🗺️ Registros de Geração
• 🎛️ Filtragem de Ferramentas
• 🔨 Desenvolvimento
• 📄 Licença

✨ Recursos

Agora são suportados mais de 26 gráficos.

1. generate_area_chart: Gera um gráfico area, usado para exibir a tendência dos dados sob uma variável independente contínua, permitindo observar as tendências gerais dos dados.
2. generate_bar_chart: Gera um gráfico bar, usado para comparar valores entre diferentes categorias, adequado para comparações horizontais.
3. generate_boxplot_chart: Gera um boxplot, usado para exibir a distribuição dos dados, incluindo mediana, quartis e valores atípicos.
4. generate_column_chart: Gera um gráfico column, usado para comparar valores entre diferentes categorias, adequado para comparações verticais.
5. generate_district_map - Gera um district-map, usado para mostrar divisões administrativas e distribuição de dados.
6. generate_dual_axes_chart: Gera um gráfico dual-axes, usado para exibir a relação entre duas variáveis com unidades ou intervalos diferentes.
7. generate_fishbone_diagram: Gera um diagrama fishbone, também conhecido como diagrama de Ishikawa, usado para identificar e exibir as causas raiz de um problema.
8. generate_flow_diagram: Gera um flowchart, usado para exibir as etapas e a sequência de um processo.
9. generate_funnel_chart: Gera um gráfico funnel, usado para exibir a perda de dados em diferentes estágios.
10. generate_histogram_chart: Gera um histogram, usado para exibir a distribuição dos dados dividindo-os em intervalos e contando o número de pontos de dados em cada intervalo.
11. generate_line_chart: Gera um gráfico line, usado para exibir a tendência dos dados ao longo do tempo ou de outra variável contínua.
12. generate_liquid_chart: Gera um gráfico liquid, usado para exibir a proporção dos dados, representando visualmente porcentagens na forma de esferas preenchidas com água.
13. generate_mind_map: Gera um mind-map, usado para exibir processos de pensamento e informações hierárquicas.
14. generate_network_graph: Gera um grafo network, usado para exibir relações e conexões entre nós.
15. generate_organization_chart: Gera um gráfico organizational, usado para exibir a estrutura de uma organização e as relações de pessoal.
16. generate_path_map - Gera um path-map, usado para exibir resultados de planejamento de rotas para POIs.
17. generate_pie_chart: Gera um gráfico pie, usado para exibir a proporção dos dados, dividindo-os em partes representadas por setores que mostram a porcentagem de cada parte.
18. generate_pin_map - Gera um pin-map, usado para mostrar a distribuição de POIs.
19. generate_radar_chart: Gera um gráfico radar, usado para exibir dados multidimensionais de forma abrangente, mostrando múltiplas dimensões em um formato semelhante a um radar.
20. generate_sankey_chart: Gera um gráfico sankey, usado para exibir fluxo e volume de dados, representando o movimento de dados entre diferentes nós em um formato estilo Sankey.
21. generate_scatter_chart: Gera um gráfico de dispersão scatter, usado para exibir a relação entre duas variáveis, mostrando pontos de dados como pontos dispersos em um sistema de coordenadas.
22. generate_treemap_chart: Gera um treemap, usado para exibir dados hierárquicos, mostrando dados em formas retangulares onde o tamanho dos retângulos representa o valor dos dados.
23. generate_venn_chart: Gera um diagrama venn, usado para exibir relações entre conjuntos, incluindo interseções, uniões e diferenças.
24. generate_violin_chart: Gera um gráfico de violino violin, usado para exibir a distribuição dos dados, combinando características de boxplots e gráficos de densidade para fornecer uma visão mais detalhada da distribuição dos dados.
25. generate_word_cloud_chart: Gera uma word-cloud, usada para exibir a frequência de palavras em dados textuais, com tamanhos de fonte indicando a frequência de cada palavra.
26. generate_spreadsheet: Gera uma spreadsheet ou tabela dinâmica para exibir dados tabulares. Quando os campos 'rows' ou 'values' são fornecidos, é renderizado como uma tabela dinâmica (tabulação cruzada); caso contrário, é renderizado como uma tabela regular.

[!NOTE] A ferramenta de geração de gráficos de visualização geográfica acima usa o serviço AMap e atualmente suporta apenas a geração de mapas dentro da China.

🤖 Uso

Para usar com Desktop APP, como Claude, VSCode, Cline, Cherry Studio, Cursor, entre outros, adicione a configuração do servidor MCP abaixo. No sistema Mac:

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

No sistema Windows:

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

Você também pode usá-lo no aliyun, modelscope, glama.ai, smithery.ai ou outros com protocolo HTTP, SSE.

🎨 Uso de Habilidades

Se você estiver usando uma IDE de IA com suporte a habilidades (como Claude Code), você pode usar a habilidade chart-visualization para selecionar automaticamente o melhor tipo de gráfico e gerar visualizações.

Você pode adicionar a habilidade de https://github.com/antvis/chart-visualization-skills usando:

npx skills add antvis/chart-visualization-skills

Em seguida, forneça seus dados ou descreva a visualização desejada. A habilidade escolherá inteligentemente entre mais de 25 tipos de gráficos e gerará o gráfico para você.

🚰 Executar com transporte SSE ou Streamable

Executar diretamente

Instale o pacote globalmente.

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

Execute o servidor com sua opção 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

Então você pode acessar o servidor em:

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

Implantação com Docker

Entre no diretório docker.

cd docker

Implante usando docker-compose.

docker compose up -d

Então você pode acessar o servidor em:

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

🎮 Opções de CLI

Você também pode usar as seguintes opções de CLI ao executar o servidor MCP. Opções de comando executando a CLI com -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

⚙️ Variáveis de Ambiente

Variável	Descrição	Padrão	Exemplo
VIS_REQUEST_SERVER	URL personalizada do serviço de geração de gráficos para implantação privada	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	Identificador de serviço para registros de geração de gráficos	-	your-service-id-123
DISABLED_TOOLS	Lista separada por vírgulas de nomes de ferramentas para desabilitar	-	generate_fishbone_diagram,generate_mind_map

📠 Implantação Privada

MCP Server Chart fornece um serviço gratuito de geração de gráficos por padrão. Para usuários com necessidade de implantação privada, eles podem tentar usar VIS_REQUEST_SERVER para personalizar seu próprio serviço de geração de gráficos.

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

Você pode usar o projeto do AntV GPT-Vis-SSR para implantar um serviço HTTP em um ambiente privado e, em seguida, passar o endereço URL através da variável de ambiente VIS_REQUEST_SERVER.

• Método: POST
• Parâmetro: Que será passado para GPT-Vis-SSR para renderização. Por exemplo, { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
• Retorno: O objeto de retorno do serviço HTTP.
  • success: boolean Se a imagem do gráfico foi gerada com sucesso.
  • resultObj: string A URL da imagem do gráfico.
  • errorMessage: string Quando success = false, retorna a mensagem de erro.

[!NOTE] A solução de implantação privada atualmente não suporta a geração de gráficos de visualização geográfica, incluindo 3 ferramentas: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Registros de Geração

Por padrão, os usuários são obrigados a salvar os resultados por conta própria, mas também fornecemos um serviço para visualizar os registros de geração de gráficos, que exige que os usuários gerem um identificador de serviço para si mesmos e o configurem.

Use o Alipay para escanear e abrir o miniprograma para gerar um identificador de serviço pessoal (clique no menu "Minha conta" abaixo, entre na página "Meus Serviços", clique no botão "Gerar" e clique no botão "Copiar" após o sucesso):

Em seguida, você precisa adicionar a variável de ambiente SERVICE_ID à configuração do servidor MCP. Por exemplo, a configuração para Mac é a seguinte (para sistemas Windows, basta adicionar a variável env):

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

Após atualizar a configuração do Servidor MCP, você precisa reiniciar seu aplicativo cliente de IA e verificar novamente se você iniciou e conectou ao Servidor MCP com sucesso. Então você pode tentar gerar o mapa novamente. Após a geração bem-sucedida, você pode ir para a página "Meus Mapas" do miniprograma para visualizar seus registros de geração de mapas.

🎛️ Filtragem de Ferramentas

Você pode desabilitar ferramentas específicas de geração de gráficos usando a variável de ambiente DISABLED_TOOLS. Isso é útil quando certas ferramentas têm problemas de compatibilidade com seu cliente MCP ou quando você deseja limitar a funcionalidade disponível.

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

Nomes de ferramentas disponíveis para filtragem Consulte ✨ Recursos.

🔨 Desenvolvimento

Instale as dependências:

npm install

Compile o servidor:

npm run build

Inicie o servidor MCP:

npm run start

Inicie o servidor MCP com transporte SSE:

node build/index.js -t sse

Inicie o servidor MCP com transporte Streamable:

node build/index.js -t streamable

📄 Licença

MIT@AntV.