Dify MCP 实战三

结果别再堆字了！用 AntV 插件打造图表可视化工具

在之前dify插件市场检索mcp的时候，发现了一个图表可视化插件 AntV ，很早之前我了解到echarts，功能比较单一，只支持3种图表，看了下就没有深入研究。

antv 是什么？

国内目前主流的图表可视化方案有三家：

• ** ECharts ** ：百度开源，后贡献给 Apache，生态丰富
• ** AntV ** ：蚂蚁集团推出，图表系统性最强，支持 F2/G2/G6 等多种可视化引擎
• ** VChart ** ：字节跳动推出，偏向 BI 场景，支持 vtable

本次体验的 mcp-server-chart 是 AntV 官方发布的图表生成服务， ** 支持自然语言 → 图表 ** ，并通过 MCP 协议对接 AI 应用平台（如 Dify、Cherry Studio 等）。

https://github.com/antvis/mcp-server-chart

https://marketplace.dify.ai/plugins/antv/visualization

从github上看，目前已经支持了25种图表，从release的记录可以看到，5月19日发布v0.3以后，一直在迭代中，目前已经更新到了v0.7.1。

Antv mcp-server-chart 的使用

在 Cherry / Cline 中使用 mcp-server-chart 非常简单，比如我们在cline中使用（cherry studio同理）,配置下 mcp-server-chart 就可以了

{  
  "mcpServers":{  
    "mysql":{  
      "disabled":true,  
      "timeout":60,  
      "type":"stdio",  
      "command":"uvx",  
      "args":[  
        "--from",  
        "mysql-mcp-server",  
        "mysql_mcp_server"  
      ],  
      "env":{  
        "MYSQL_HOST":"10.255.200.214",  
        "MYSQL_PORT":"3306",  
        "MYSQL_USER":"dev",  
        "MYSQL_PASSWORD":"123456",  
        "MYSQL_DATABASE":"platform"  
      }  
    },  
    "mcp-server-chart":{  
      "timeout":60,  
      "type":"stdio",  
      "command":"npx",  
      "args":[  
        "-y",  
        "@antv/mcp-server-chart"  
      ]  
    }  
  }
}

结合我之前使用的mysql工具，就可以用自然语言出图表了

整个流程非常的丝滑。

MCP Server Chart 默认提供免费的图表生成服务，也就是上图中的图片地址。对于需要私有部署的用户，可以尝试使用 VIS_REQUEST_SERVER 来自定义自己的图表生成服务。

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

dify + AntV使用

在dify中使用有两种方案：

• 通过在线mcp服务使用
• 直接当成工具使用

使用在线mcp服务

https://modelscope.cn/mcp/servers/@antvis/mcp-server-chart

在魔搭社区，我们可以生成一个24小时有效的mcp服务（这点非常赞）

然后我们直接复制到dify中配置

• 创建一个工作流
• 添加 Agent 节点
• 选择 ReAct 模式
• 添加 AntV 的在线mcp配置
• 一句话提示词 你是一个数据分析专家，请根据用户输入的数据，分析并使用mcp-server-chart生成合适的图表
• 输入数据执行

图片直接返回的url，点击查看对应的内容

使用 `AntV` 工具

安装插件以后

• 1 使用官方的Agent策略，不带mcp
• 通过 2、3、4 添加相应的mcp工具
• 添加指令和查询

指令： 你是一个数据分析专家，请根据用户输入的数据，使用工具生成柱状图，中文回复

• 在输入的时候，告知要统计什么，并给数据
• 效果还不错

数据库+ `AntV`

安装数据库查询插件，然后填写好对应的数据库信息（也可以在使用的时候填写）

在 Agent 中添加sql查询。

在实际体验中sql查询并组装成图标的功能不不太好用，

• 数据库查询插件必须自己输入sql，你得在Agent之前用LLM生成sql
• 非mcp的方式，需要靠提示词来组织流程

prometheus+ `AntV`

在dify插件市场有个Prometheus查询的插件，安装以后，可以通过

• 和mysql一样，需要提供具体的查询语句

后记

• dify中原生并没有支持mcp，mcp的支持是通过外部扩展来的
• 必须使用在线mcp服务，
- • 使用魔搭这种现成的mcp server，对应的服务需要提供外网访问端点，安全性不可控
- • 使用内网搭建的mcp server
• 图文混排功能时好时坏，这个需要注意点，提示词得好好的斟酌下
• 用习惯了cline和cherry studio ，用dify感觉好笨

下一篇预告：DIFY MCP 工具链整合实战

我们已经把 Dify 调通 MCP 工具，也发布了 MCP 服务，并支持图表生成。

下一篇，我们来实战一个完整的多工具链路调度的 Agent 任务！

antv 是什么？​

Antv mcp-server-chart 的使用​

dify + AntV使用​

使用在线mcp服务​

使用 AntV 工具​

数据库+ AntV ​

prometheus+ AntV ​

后记​

下一篇预告：DIFY MCP 工具链整合实战​