当Dify遇上可视化图表MCP（AntV），数据展示像呼吸一样简单

显示全部楼层

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">但很多时候，制作图表，尤其是想让 AI 动态生成图表，却不是一件轻松的事。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">今天的主角，就是一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队开源的mcp-server-chart。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">github地址：https://github.com/antvis/mcp-server-chart

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">这个神器目前已经支持超过 15 种我们常用的可视化图表类型，比如：

折线图、柱状图、饼图、面积图、条形图
直方图、散点图、矩阵树图、词云图、双轴图
雷达图、思维导图、网络图、流程图、鱼骨图

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">可以说，它几乎能满足我们日常工作中绝大多数场景的可视化需求。最棒的是，它会以图片链接的形式返回生成结果，方便你嵌入到任何需要的地方。

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.578px;margin-top: 0px;margin-bottom: 8px;font-size: 24px;padding-bottom: 12px;">1 MCP 工具初体验：让 AI 秒变图表大师

ingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;color: rgb(31, 35, 41);margin: 0px 0px 4px;word-break: break-all;min-height: 20px;">在支持mcp客户端中（如claude、cursor、cline、Cherry Studio）等中，加上一段简单的配置，就能让你的 AI 助手瞬间get到制作图表的超能力。

配置代码长这样：

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

以cherry studio为例，增加mcp-server-chart配置后就可以直接使用了。

比如我想让AI生成一个中国古代诗人名称的词云图，直接给出需求就行了。

调用了mcp中generate_word_cloud_chart工具，一张精美的词云图就出炉了：

整个过程，大模型就像一位经验丰富的设计师，不仅理解了你的需求，还自动帮你准备好了绘制图表所需的各种参数（比如图片的宽度、高度、标题等），最后给出了图片链接。

支持本地部署，可以用SSE方式运行：

如果不想在本地部署sse，可以在阿里魔搭社区中搜索mcp-server-chart，拿到url地址。

在这里可以获取这个mcp工具的sse地址，测试下来还是比较稳定的。

这样我们就可以方便的使用SSE方式连接MCP服务了。

2 dify+可视化图表MCP的玩法

Dify目前只支持SSE方式使用MCP服务，我要在Agent中调用，首先需要安装支持mcp策略的插件。

在插件市场搜索mcp_sse_agent并安装。

之前我写过不少关于 Dify 结合数据库和 ECharts 实现数据可视化的文章。

坦白说，其中最让人头疼的环节，莫过于如何把数据库查询出来的原始数据，转换成 ECharts能够理解的图表格式。

这个过程，无论是手写代码转换，还是让大模型来构造，都需要不少经验和技巧，一不小心就容易出错。

但是！有了mcp-server-chart这个 MCP 工具，事情就变得简单多了。

我们还是用之前的应用场景来演示：用户用自然语言提问，我们通过 Dify 工作流从数据库里查询数据，并生成图表。

整个流程中，前面的需求提炼、自然语言转 SQL 等步骤保持不变，但最关键的图表生成环节，就交给 MCP 工具来大显身手了！

如果你对我之前的文章比较熟悉，并且只想看重点，可以直接跳到 2.7 图文总结部分。

为了方便演示，我用 MySQL 数据库搭建了一些示例数据，大概是这个样子：

2.1 开始节点

默认配置，接收用户问题。

2.2 需求提炼

分析用户问题，判断用户是否需要生成图表，提取出SQL查询的需求。

输出如下：

sql_requirement: [精炼后的数据查询需求]
need_chart: [是/否]
chart_type: [推荐的Echarts图表类型或“无”]

大模型选择了DeepSeek V3。

提示词如下：

你是一名专业的数据需求提炼师。

请仔细阅读用户的自然语言问题{{#context#}}，只保留与数据查询直接相关的核心需求。自动忽略与数据查询无关的内容（如生成图表、导出Excel、制作报表等）。

请判断用户是否需要用图表展示结果。如果需要，请根据问题内容推荐最合适的Echarts图表类型（如area、bar、column、dual-axes、fishbone-diagram、flow-diagram、histogram、line、mind-map、network-graph、pie、radar、scatter、treemap、word-cloud等）；如果不需要图表，请填写“无”。

请严格按照如下格式输出，不要有任何解释或多余内容：
sql_requirement: [精炼后的数据查询需求]
need_chart: [是/否]
chart_type: [推荐的Echarts图表类型或“无”]

2.3 参数提取器

把上一个节点的三个输出参数提取出来。

2.4 自然语言转SQL（ROOKIE_TEXT2DATA）

这个节点的核心功能就是把用户的自然语言转成SQL语句了。

输入为提取后的SQL语句需求，关联参数提取节点的sql_requirement。

数据库配置: 正确填写数据库类型、IP、端口、库名、用户名、密码。

大模型：我这里就用DeepSeek V3了。

提示词如下：

表名：boxoffice
字段说明：
-years：年份，int
-movie_name：电影名，string
-score：评分，float
-director：导演，string
-box_office：票房，int

注意事项：
-如有分组统计，请使用SUM、AVG等聚合函数，不要直接用原始字段。
-所有非聚合字段必须出现在GROUPBY中。
-只输出SQL语句，不要解释。

示例查询：
1.查询每个导演的总票房：SELECTdirector,SUM(box_office)FROMboxofficeGROUPBYdirector;
2.查询每年票房最高的电影：SELECTyears, movie_name,MAX(box_office)FROMboxofficeGROUPBYyears;

2.5 执行SQL（ROOKIE_EXCUTE_SQL）

此节点负责连接数据库，并执行上一步生成的SQL语句。

输入变量：上一节点返回的SQL语句。

数据库配置: 正确填写数据库类型、IP、端口、库名、用户名、密码。

输出变量：返回数据格式为文本。

2.6 条件分支

判断是否需要图表，给到不同的分支。

2.7 图文总结

如果需要生成图表，走这个节点。

Agent策略选择我们之前安装的插件【支持MCP工具的Agent】->ReAct（Support MCP Tools）。

MCP服务器配置如下，url换成你自己的。

可以用阿里魔搭社区的，也可以本地部署生成SSE的URL地址。

{
 "mcp-server-chart":{
   "url":"https://mcp.api-inference.modelscope.cn/f2fc4749880946/sse", 
   "headers":{},
   "timeout":60, 
   "sse_read_timeout":300
 }
}

2.8 文字总结

如果用户只是想查询数据，不需要图表，那么工作流就会走到这个相对简单的节点。它会根据数据库查询结果，用简洁的自然语言给出分析和意见。

2.9 回复节点

直接引用图文总结或文字总结的输出就好了。

2.10 测试

比如问一下各导演的票房占比，可以看到给出了分析结果和图片链接地址。

在测试一下折线图。

3 AntV插件的使用

除了MCP工具，在插件市场搜索antv可以看到蚂蚁集团提供的这个可视化工具插件。

和mcp server一样，也是支持了15种工具。

可以直接创建一个Agent，添加这些工具。

添加工具：

我们就可以随便用自然语言让大模型给出相应的图表了。

我让它生成了一个《三体》小说的人物词云图。

当然了，你也可以在工作流中调用这些工具。

和其他的生成图表的插件类似，给出对应的数据。

不过，这个插件可以更方便的调整图表的大小。自定义图表的宽和高。

我在之前文章里写过，技术的迭代日新月异，或许今天我们讨论的方法，明天就会有更优的实现。

没想到这么快就有了mcp-server-chart这样的 MCP 工具，在可视化方面又给开发者打开了新的思路。

这些“底层轮子”的不断涌现，无疑是一件大好事。

它们让我们能够从繁琐的、重复性的底层技术实现中解放出来，更专注于业务逻辑本身，更聚焦于如何创造真正的价值。

而且开源项目的魅力在于，如果现有的图表类型不满足你的特殊需求，完全可以在其基础上进行二次开发，增加自定义图表，满足更多元、更个性化的场景。

让我们一起期待，并积极拥抱这个充满无限可能的未来吧！