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 através das ferramentas MCP. Você também pode usá-lo no Dify.

📋 Índice

• ✨ Funcionalidades
• 🤖 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

✨ Funcionalidades

Agora com suporte a 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 a observação das 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 a mediana, quartis e outliers.
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 as 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 relacionamentos 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 os relacionamentos de pessoal.
16. generate_path_map - Gera um path-map, usado para exibir resultados de planejamento de rotas para PDIs.
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 PDIs.
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 o fluxo e o 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 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 relacionamentos entre conjuntos, incluindo interseções, uniões e diferenças.
24. generate_violin_chart: Gera um gráfico 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, renderiza como uma tabela dinâmica (tabulação cruzada); caso contrário, renderiza 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 só suporta a geração de mapas dentro da China.

🤖 Uso

Para usar com Desktop APP, como Claude, VSCode, Cline, Cherry Studio, Cursor e assim por diante, 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"]
    }
  }
}

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

🎨 Uso de Habilidades

Se você estiver usando um IDE de IA com suporte a habilidades (como Claude Code), 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 que deseja. 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 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 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 do serviço de geração de gráficos personalizado 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 a serem desabilitadas	-	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 da 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 env VIS_REQUEST_SERVER.

• Método: POST
• Parâmetro: Que será passado para GPT-Vis-SSR para renderização. Como, { "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 geração da imagem do gráfico foi bem-sucedida.
  • 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 precisam 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 mini programa para gerar um identificador de serviço pessoal (clique no menu "Meu" 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 iniciou e conectou-se 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 "Meu Mapa" do mini programa 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 Veja as ✨ Funcionalidades.

🔨 Desenvolvimento

Instale as dependências:

npm install

Construa 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.