离线图表服务器

Name: 离线图表服务器
Author: liukeyu800

作者：liukeyu8007 星标更新：2025-06-03

安装使用来源：spider==github.com

项目介绍

🚀 MCP Server Chart - 完全离线版本

一个完全离线的模型上下文协议（MCP）图表生成服务器，支持15种图表类型，并且可以在没有网络连接的情况下生成高质量的SVG图表。

✨ 主要特性

🌐 完全离线 -无需任何网络连接
📊 15种图表类型 -涵盖基础图表、统计图表、高级图表和关系图表
⚡ 即时响应 -平均生成时间<1毫秒
🪶 轻量级 -纯SVG生成，无外部依赖
🔌 兼容MCP -完全兼容模型上下文协议
🛡️ 数据安全 -所有数据都在本地处理，不会上传到云端
🎨 高质量输出 -Base64编码的SVG数据URL

📊 支持的图表类型

基础图表

📈 折线图 (line) - 显示数据趋势和变化
📊 柱状图 (bar/column) - 比较不同类别的数据
🥧 饼图 (pie) - 显示数据的比例和分布
📈 面积图 (area) - 显示数据变化趋势和累积效果

统计图表

📊 直方图 (Histogram) - 显示数据分布的频率
⚪ 散点图 (Scatter) - 显示两个变量之间的关系

高级图表

☁️ 词云图 (Word loud) - 可视化文本数据的重要性
🎯 雷达图 (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 1122

2. 示例服务器模式

# 启动演示服务器
node demo-server.js

然后访问：

📊 演示页面: http://localhost:3000/demo
📚 API 文档: http://localhost:3000/api
❤️ 健康检查: http://localhost:3000/health

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-types

MCP工具

该项目提供了以下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

预期输出：

🚀 正在测试所有图表类型...

📊 正在测试折线图...
   ✅ 成功！长度：798，时间：0ms
📊 正在测试柱状图...
   ✅ 成功！长度：1098，时间：0ms
...

📈 测试总结：
================
✅ 成功：14/14
❌ 失败：0/14

📊 性能统计：
   平均生成时间：0.14ms
   平均结果大小：1323字符

📦 部署

无网络环境部署

准备部署包

# 在有网络的环境中
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.js

Docker部署

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) - 模型上下文协议实现
工具定义 (src/index.ts) - MCP工具注册和处理
展示服务器 (demo-server.js) - HTTP API和演示页面

数据流

接收请求 - MCP客户端或HTTP请求
数据验证 - 检查图表类型和数据格式
SVG生成 - 根据类型生成相应的SVG图表
Base64编码 - 转换为DataURL格式
返回结果 - 可直接使用的图像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 Requests！

开发指南

分叉项目
创建功能分支（git checkout -b feature/AmazingFeature）
提交更改（git commit -m 'Add some AmazingFeature'）
推送到分支（git push origin feature/AmazingFeature）
打开Pull Request

📄 许可证

本项目采用MIT许可证 - 详情见LICENSE文件

🙏 致谢

AntV - 原始图表库灵感来源
Model Context Protocol - 协议规范
所有贡献者和用户

🎉 现在您可以在完全无网络的环境下使用MCP图表生成服务，支持全部15种图表类型！

如果您有任何问题或建议，请提交Issue。