mcp-server-chart-offline
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-server-chart-offlinecreate a pie chart showing market share by product"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
🚀 MCP Server Chart - 完全离线版本
一个完全离线的 Model Context Protocol (MCP) 图表生成服务器,支持 15 种图表类型,无需网络连接即可生成高质量的 SVG 图表。
✨ 主要特性
🌐 完全离线 - 无需任何网络连接
📊 15种图表类型 - 涵盖基础图表、统计图表、高级图表和关系图表
⚡ 即时响应 - 平均生成时间 < 1ms
🪶 轻量级 - 纯 SVG 生成,无外部依赖
🔌 MCP 兼容 - 完全兼容 Model Context Protocol
🛡️ 数据安全 - 所有数据本地处理,不上传云端
🎨 高质量输出 - Base64 编码的 SVG data URL
Related MCP server: mcp-plots
📊 支持的图表类型
基础图表
📈 折线图 (line) - 显示数据趋势和变化
📊 柱状图 (bar/column) - 比较不同类别的数据
🥧 饼图 (pie) - 显示数据占比和分布
📈 面积图 (area) - 显示数据变化趋势和累积效果
统计图表
📊 直方图 (histogram) - 显示数据分布频率
⚪ 散点图 (scatter) - 显示两个变量之间的关系
高级图表
☁️ 词云图 (word-cloud) - 可视化文本数据的重要性
🎯 雷达图 (radar) - 多维数据对比分析
🗂️ 树状图 (treemap) - 层次化数据的面积展示
📊 双轴图 (dual-axes) - 同时展示两个不同量级的数据系列
关系图表
🧠 思维导图 (mind-map) - 展示概念之间的层次关系
🕸️ 网络图 (network-graph) - 显示节点和连接关系
🔄 流程图 (flow-diagram) - 展示步骤和流程
🐟 鱼骨图 (fishbone-diagram) - 因果关系分析图
🚀 快速开始
安装依赖
npm install构建项目
npm run build运行方式
1. MCP 服务器模式
# 默认 stdio 模式
node build/index.js
# SSE 模式(可通过 HTTP 访问)
node build/index.js --transport sse --port 1122
# Streamable 模式
node build/index.js --transport streamable --port 11222. 演示服务器模式
# 启动演示服务器
node demo-server.js然后访问:
📊 演示页面: http://localhost:3000/demo
📚 API 文档: http://localhost:3000/api
❤️ 健康检查: http://localhost:3000/health
MCP 客户端配置
在您的 MCP 客户端配置文件中添加:
{
"mcpServers": {
"mcp-server-chart-offline": {
"command": "node",
"args": [
"/path/to/mcp-server-chart/build/index.js"
],
"cwd": "/path/to/mcp-server-chart"
}
}
}📋 使用示例
基础图表
折线图
{
"type": "line",
"data": [
{ "time": 2020, "value": 100 },
{ "time": 2021, "value": 120 },
{ "time": 2022, "value": 150 },
{ "time": 2023, "value": 180 }
]
}柱状图
{
"type": "bar",
"data": [
{ "category": "产品A", "value": 100 },
{ "category": "产品B", "value": 120 },
{ "category": "产品C", "value": 80 }
]
}饼图
{
"type": "pie",
"data": [
{ "category": "苹果", "value": 40 },
{ "category": "橙子", "value": 30 },
{ "category": "香蕉", "value": 30 }
]
}高级图表
词云图
{
"type": "word-cloud",
"data": [
{ "text": "JavaScript", "value": 50 },
{ "text": "Python", "value": 40 },
{ "text": "React", "value": 35 }
]
}雷达图
{
"type": "radar",
"data": [
{ "category": "技能A", "value": 80 },
{ "category": "技能B", "value": 70 },
{ "category": "技能C", "value": 90 }
]
}关系图表
流程图
{
"type": "flow-diagram",
"data": [
{ "name": "开始", "step": "start" },
{ "name": "处理", "step": "process" },
{ "name": "决策", "step": "decision" },
{ "name": "结束", "step": "end" }
]
}🔧 API 接口
REST API
生成单个图表
POST /api/generate-chart
Content-Type: application/json
{
"type": "line",
"data": [{"time": 2020, "value": 100}],
"width": 400,
"height": 300
}批量生成图表
POST /api/generate-charts
Content-Type: application/json
{
"charts": [
{"type": "line", "data": [...]},
{"type": "bar", "data": [...]}
]
}获取支持的图表类型
GET /api/chart-typesMCP 工具
项目提供以下 MCP 工具:
generate_line_chart- 生成折线图generate_column_chart- 生成柱状图generate_area_chart- 生成面积图generate_pie_chart- 生成饼图generate_bar_chart- 生成条形图generate_histogram_chart- 生成直方图generate_scatter_chart- 生成散点图generate_word_cloud_chart- 生成词云图generate_radar_chart- 生成雷达图generate_treemap_chart- 生成树状图generate_dual_axes_chart- 生成双轴图generate_mind_map- 生成思维导图generate_network_graph- 生成网络图generate_flow_diagram- 生成流程图generate_fishbone_diagram- 生成鱼骨图
🧪 测试
快速测试
node simple-test.js全面测试
node test-all-charts.js预期输出:
🚀 Testing all chart types in offline mode...
📊 Testing line chart...
✅ Success! Length: 798, Time: 0ms
📊 Testing bar chart...
✅ Success! Length: 1098, Time: 0ms
...
📈 Test Summary:
================
✅ Successful: 14/14
❌ Failed: 0/14
📊 Performance Stats:
Average generation time: 0.14ms
Average result size: 1323 characters📦 部署
无网络环境部署
准备部署包
# 在有网络的环境中
git clone <repository>
cd mcp-server-chart
npm install
npm run build
# 打包整个项目目录
tar -czf mcp-server-chart-offline.tar.gz .在目标环境部署
# 解压到目标环境
tar -xzf mcp-server-chart-offline.tar.gz
cd mcp-server-chart
# 直接运行(不需要 npm install)
node build/index.jsDocker 部署
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY build/ ./build/
COPY demo.html ./
COPY demo-server.js ./
EXPOSE 3000
CMD ["node", "demo-server.js"]🎯 性能指标
指标 | 数值 |
支持图表类型 | 15 种 |
平均生成时间 | < 1ms |
平均输出大小 | ~1.3KB |
内存占用 | < 50MB |
网络依赖 | 0 |
启动时间 | < 2s |
🔍 技术架构
核心组件
图表生成器 (
src/utils/generate-offline.ts) - 纯 JavaScript SVG 生成MCP 服务器 (
src/server.ts) - Model Context Protocol 实现工具定义 (
src/index.ts) - MCP 工具注册和处理演示服务器 (
demo-server.js) - HTTP API 和演示页面
数据流程
接收请求 - MCP 客户端或 HTTP 请求
数据验证 - 检查图表类型和数据格式
SVG 生成 - 根据类型生成对应的 SVG 图表
Base64 编码 - 转换为 data URL 格式
返回结果 - 可直接使用的图片 URL
🛠️ 开发
项目结构
mcp-server-chart/
├── src/
│ ├── index.ts # MCP 工具定义
│ ├── server.ts # MCP 服务器实现
│ └── utils/
│ ├── constants.ts # 图表类型映射
│ ├── generate.ts # 主生成函数
│ ├── generate-offline.ts # 离线生成实现
│ └── ...
├── build/ # 编译输出
├── demo.html # 演示页面
├── demo-server.js # 演示服务器
├── test-all-charts.js # 测试脚本
├── OFFLINE_USAGE.md # 离线使用文档
└── package.json添加新图表类型
在
src/utils/constants.ts中添加映射在
src/utils/generate-offline.ts中实现生成函数在
src/index.ts中注册 MCP 工具添加测试用例
构建命令
npm run build # 编译 TypeScript
npm run start # 启动 MCP 服务器
npm run test # 运行测试🤝 贡献
欢迎提交 Issue 和 Pull Request!
开发指南
Fork 项目
创建功能分支 (
git checkout -b feature/AmazingFeature)提交更改 (
git commit -m 'Add some AmazingFeature')推送到分支 (
git push origin feature/AmazingFeature)打开 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 详见 LICENSE 文件
🙏 致谢
AntV - 原始图表库灵感
Model Context Protocol - 协议规范
所有贡献者和用户
🎉 现在您可以在完全无网络的环境下使用所有 15 种图表类型的 MCP 图表生成服务了!
如有问题或建议,请提交 Issue。
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseCqualityFmaintenanceAn MCP server for generating customizable data visualizations using QuickChart.io, supporting multiple chart types and Chart.js configuration.Last updated2254160MIT
- AlicenseAqualityDmaintenanceA MCP server for data visualization. It exposes tools to render charts (line, bar, pie, scatter, heatmap, etc.) from data and returns plots as either image/text/mermaid diagram.Last updated24MIT
- FlicenseAqualityDmaintenanceAn MCP server that enables LLMs to generate high-quality SVG charts using matplotlib, supporting various plot types like line, bar, and heatmaps. It provides flexible configuration for dimensions and axis scales, returning either raw SVG content or paths to saved image files.Last updated9
- Flicense-qualityAmaintenanceAn MCP server for generating offline charts using Apache ECharts SVG SSR and rsvg-convert, optimized for Kylin ARM64 with 64KB page size.Last updated
Related MCP Connectors
Educational MCP server with 17 math/stats tools, visualizations, and persistent workspace
MCP server for generating rough-draft project plans from natural-language prompts.
An MCP server giving access to Grafana dashboards, data and more.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/liukeyu800/mcp-server-chart-offline'
If you have feedback or need assistance with the MCP directory API, please join our Discord server