Chart Canvas MCP

图表画布MCP服务器

通过模型上下文协议为AI助手提供交互式可视化仪表板

直接从您的AI对话中创建漂亮的图表、示意图和表格。Chart Canvas提供了一个实时仪表板，在您使用Claude等LLM时显示可视化效果。

演示


观看 YouTube上的完整演示 查看Chart Canvas的实际效果！

特性

✨ 多种图表类型：折线图、条形图、散点图、饼图、表格和美人鱼图\ 🎨 交互式仪表盘：拖放网格布局，实时更新\ 🔄 实时同步：更改会立即显示在浏览器中\ 📊 丰富的可视化：由ECharts和Mermaid提供技术支持\ 💾 通用数据源：直接查询SQLite、CSV、Parquet、JSON和NDJSON文件\ ⚡ 智能数据流：在服务器端执行查询-数据保持在本地，从不发送到LLM\ 🔒 隐私第一：您的数据永远不会离开您的机器\ 🚀 轻松设置：一个开始命令\ 🌐 生产就绪：内置生产模式，优化构建

支持的数据源

Chart Canvas可以查询和可视化多种文件格式的数据：

• SQLite (.db, .sqlite, .sqlite3)-关系数据库
• CSV文件 (.csv)-逗号分隔值
• 镶木地板 (.parquet)-列式存储格式
• JSON (.json)JSON对象数组
• NDJSON (.jsonl, .ndjson)-换行符分隔的JSON

隐私与性能：所有查询都使用DuckDB在您的计算机上本地执行。查询结果被转换为服务器端的可视化——只有元数据（图表配置）被发送到LLM，而不是您的实际数据。这使得它快速、可扩展且私密。

快速开始

安装

npm install -g @gluip/chart-canvas-mcp

或者直接与npx一起使用（无需安装）：

npx @gluip/chart-canvas-mcp

配置

添加到您的MCP客户端配置中（例如，Claude Desktop）：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json\ 视窗: %APPDATA%/Claude/claude_desktop_config.json

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

用法

1. 启动您的MCP客户端（例如，Claude Desktop）
2. 服务器将在端口3000上自动启动
3. 使用 showCanvas 在浏览器中打开仪表板的工具
4. 让AI创建可视化！

示例提示

"Show me a line chart comparing sales data for 2023 and 2024"

"Create a pie chart showing market share by region"

"Draw a flowchart for the user authentication process"

"Make a table with team member information"

"Show me the database schema for my SQLite database"

"Query the athletes table and show the top 10 with most personal records"

"Create a chart showing sales trends from the database grouped by region"

MCP工具

addVisualization

在画布上创建图表、示意图和表格。

支持的类型:

• line -多系列折线图
• bar -用于比较的条形图
• scatter -数据分布散点图
• pie -带标签的饼图
• table -带标题的数据表
• flowchart -美人鱼图（流程图、序列图、甘特图等）

示例:

{
  type: "line",
  title: "Monthly Sales",
  series: [
    { name: "2023", data: [[1, 120], [2, 132], [3, 101]] },
    { name: "2024", data: [[1, 220], [2, 182], [3, 191]] }
  ],
  xLabels: ["Jan", "Feb", "Mar"]
}

remove可视化

按ID删除特定可视化。

clearCanvas

从画布中删除所有可视化效果。

showCanvas

在默认浏览器中打开仪表板。

Getdatabaseschema

在编写查询之前，检查SQLite数据库的结构以了解可用的表和列。

参数:

• databasePath -SQLite数据库文件的路径（例如。， ./data/mydb.sqlite 或绝对路径）

示例:

{
  databasePath: "/path/to/database.db";
}

退货：显示所有表、列、数据类型和约束的格式化架构。

queryAndVisualize

在SQLite数据库上执行SQL查询，并根据结果创建可视化。查询在服务器端执行，并且必须是只读的（仅限SELECT）。最多10000行。

参数:

• databasePath -SQLite数据库文件的路径
• query -SQL SELECT查询（只读）
• visualizationType -图表类型： line, bar, scatter, pie，或 table
• columnMapping （表格可选）-将列映射到图表轴：

- xColumn -X轴列（图表需要） - yColumns -Y轴列阵列（图表需要） - seriesColumn -将数据分组为单独系列的列（可选） - groupByColumn -备选分组列（可选）

• title -可视化的可选标题
• description -可选描述
• useColumnAsXLabel -如果为true，则使用X列值作为标签而不是数字

示例:

{
  databasePath: "./data/sales.db",
  query: "SELECT region, SUM(revenue) as total FROM sales GROUP BY region",
  visualizationType: "bar",
  columnMapping: {
    xColumn: "region",
    yColumns: ["total"]
  },
  title: "Revenue by Region",
  useColumnAsXLabel: true
}

安全：只允许使用SELECT和WITH（CTE）查询。INSERT、UPDATE、DELETE、DROP和其他修改操作被阻止。

建筑

• 后端：Node.js+TypeScript+Express+MCP SDK
• 前端：Vue 3+ECharts+Mermaid+网格布局
• 沟通：实时轮询以获取即时更新

发展

本地开发

# Clone repository
git clone https://github.com/gluip/chart-canvas.git
cd chart-canvas

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

# Development mode (backend + frontend separate)
# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

# Production mode (single server)
cd backend
npm run build:all
npm run start:prod

本地开发的MCP配置

{
  "mcpServers": {
    "chart-canvas": {
      "command": "/path/to/node",
      "args": [
        "/path/to/chart-canvas/backend/node_modules/.bin/tsx",
        "/path/to/chart-canvas/backend/src/index.ts"
      ]
    }
  }
}

许可证

麻省理工学院©2026 Martijn

链接

• 模型上下文协议