掘金 人工智能 05月15日 10:28
推荐一款宝藏MCP Server—mcp-server-chart, 从此再也不发愁绘制图表啦!
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文介绍了如何使用MCP(Model Calling Protocol)工具,特别是AntV团队开发的mcp-server-chart,来快速生成可视化图表。通过结合VSCode、Cline插件和DeepSeek-V3-0324大模型,用户可以利用mcp-server-chart绘制各种图表,例如人物关系图和基于高德地图数据的条形图。文章详细阐述了环境搭建、配置和案例测试,展示了其强大的图表生成能力。同时,文章也指出了未来优化的方向,例如增强用户对图表格式的控制。

💡 MCP是AI Agent与外部世界交互的关键,mcp-server-chart是基于MCP开发的图表生成工具,可以快速生成可视化图表。

⚙️ 环境搭建方面,文章介绍了使用VSCode、Cline插件和NodeJs,并配置DeepSeek-V3-0324的API Key。通过配置MCP配置文件,可以接入mcp-server-chart和其他MCP服务。

📊 案例测试展示了mcp-server-chart的强大功能。例如,通过提示词生成《甄嬛传》人物关系图,以及结合高德地图数据生成条形图,验证了其生成图表的能力。

📈 尽管mcp-server-chart功能强大,但仍有优化空间。文章指出,希望未来可以增加用户控制图表格式的选项,以满足更个性化的需求。

前言

能调用外部工具是大模型从聊天机器人进化成AI Agent的关键,而MCP工具的出现完美解决了这一问题。MCP借助大模型Function Calling的基本能力,凭借快速高效的开发规范,迅速成为2025年人工智能大模型领域最值得关注的热点。 笔者分享过MCP从入门到开发实战的系列文章,感兴趣大家可以点个关注~(更多免费工具和教程分享可关注我的同名微信公众号:大模型真好玩)

MCP提供的统一调用规范,涵盖接口定义、异常处理、方法参数、返回值等方面,结合Anthropic公司开发的标准化SDK,开发者们可以快速开发MCP Server并分享出来,其它任何想使用同样功能的开发者都可以通过大模型客户端访问,无需额外的适配工作。

MCP Server层出不穷,极大的便利了我们的工作实践。笔者从今天开始也会分享自己工作实践中遇到的好用的MCP Server,今天将给大家分享由阿里Antv团队开发的图表生成MCP Server——mcp-server-chart, 通过大模型对话即可帮你快速生成可视化图表,从此再也不用发愁工作报告中的图表绘制啦!

一、环境搭建

1.1 VsCode+Cline+NodeJs环境安装

本次分享我们使用VsCode中的Cline插件作为MCP 客户端。AntV团队开发的mcp-server-chart文档推荐使用npx方式接入MCP服务端,所以还需要安装NodeJs。大模型的客户端大模型API也是关键步骤,我这里使用的是DeepSeek-V3-0324的API Key。相关软件的安装和配置这里不再赘述,大家可阅读我的文章不写一行代码! VsCode+Cline+高德地图MCP Server 帮你搞定和女友的出行规划(附原理解析), 包含详细的安装过程。

1.2 Cline接入mcp-server-chart

    点击Cline中的MCP Servers按钮, 点击Installed, 点击Configure MCP Servers打开MCP配置文件。

    在MCP配置文件中的mcpServers选项中加入mcp-server-chart配置,这里除了mcp-server-chart还包含了我以前加入的高德地图的mcp serveramap-maps,接下来会使用这两个mcp结合完成数据可视化的案例开发。完整的配置文件如下:
{  "mcpServers": {    "amap-maps": {      "command": "cmd",      "args": [        "/c",        "npx",        "-y",        "@amap/amap-maps-mcp-server"      ],      "env": {        "AMAP_MAPS_API_KEY": "你注册的高德地图API Key"      },      "disabled": false,      "autoApprove": [        "maps_geo",        "maps_around_search",        "maps_search_detail"      ]    },    "mcp-server-chart": {      "command": "cmd",      "args": [        "/c",        "npx",        "-y",        "@antv/mcp-server-chart"      ]    }  }}

Cline中查看mcp-server-chart暴露的工具函数,可以看到mcp-server-chart支持包括条形图,饼图,折线图,流程图在内多达十几种图表的绘制。

二、案例测试

这里通过两个案例体会一下mcp-server-chart强大的图表生成能力:

2.1 绘制网络图

第一个案例使用提示词【请帮我绘制甄嬛传中人物关系图】检验mcp-server-chart的图表生成能力,Cline插件中的DeepSeek-V3-0324模型经过分析后使用mcp-server-chart中的generate_network_graph函数来绘制,执行结果如下,根据笔者“嬛学家”的身份,证明绘制效果相当不错~

2.2 根据高德地图统计信息绘制条形图

虽然mcp-server-chart生成的人物关系图足够炫酷,但在日常的工作报告中我们往往需要结合更实际数据生成相应的图表。为进一步检测mcp-server-chart和大模型的能力,我们使用提示词【帮我统计永丰地铁站到北京南站、北京北站、北京丰台站,北京清河站的距离并绘制条形图】,让大模型可以通过结合高德地图amap-mapsmcp-server-chart两种mcp server完成图表绘制。执行结果如下,可以看到Cline和DeepSeek-V3-0324准确分析了任务,并串行调用了高德地图的maps_distance函数工具和Chart的generate_bar_chart工具生成条形图,也达到了不错效果。

三、未来优化

虽然mcp-server-chart绘制图表的能力足够强大,但经过测试还是发现了可以优化的地方,比如我在高德地图案例中提出了对图表的修改建议:【我希望横轴表示站点,纵轴表示距离,重新绘制柱状图】,但mcp-server-chart图表工具并没有根据提示词内容进行修改,下一步希望开发者可以增加工具函数或者相应的参数,可以实现用户控制图表生成格式的相应需求。

综合来说,mcp-server-chart是一款便捷强大的可视化图表生成工具,依托阿里AntV团队深厚的可视化技术底蕴,相信在不久的将来优化后的mcp-server-chart+大模型会成为大家图表生成的利器!

本次MCP Server的推荐就到这里啦,未来笔者会分享更多自己工作实践中遇到的好用的MCP Server,感兴趣大家点个关注吧~(更多免费工具和教程分享可关注我的同名微信公众号:大模型真好玩)

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

MCP mcp-server-chart 图表生成 AI工具 可视化
相关文章