chart-canvas

Chart Canvas MCP Server

通过 Model Context Protocol 为 AI 助手提供交互式可视化仪表板

直接根据 AI 对话创建精美的图表、示意图和表格。Chart Canvas 提供实时仪表板，可在你使用 Claude 等大模型时显示可视化内容。

演示

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

功能

✨ 多种图表类型：折线图、柱状图、散点图、饼图、表格和 Mermaid 示意图
🎨 交互式仪表板：支持拖放的网格布局，并实时更新
🔄 实时同步：更改会立即显示在浏览器中
📊 丰富的可视化内容：由 ECharts 和 Mermaid 提供支持
💾 通用数据源：直接查询 SQLite、CSV、Parquet、JSON 和 NDJSON 文件
⚡ 智能数据流：在服务端执行查询，数据保留在本地，不会发送给大模型
🔒 隐私至上：你的数据不会离开你的设备
🚀 轻松设置：只需一条命令即可开始
🌐 可用于生产环境：内置生产模式，提供优化后的构建版本

支持的数据源

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

• SQLite（.db、.sqlite、.sqlite3）— 关系型数据库
• CSV（.csv）— 逗号分隔值
• Parquet（.parquet）— 列式存储格式
• JSON（.json）— 对象数组形式的 JSON
• NDJSON（.jsonl、.ndjson）— 按行分隔的 JSON

隐私与性能：所有查询都使用 DuckDB 在你的设备本地执行。查询结果会在服务端转换为可视化内容——只有元数据（图表配置）会发送给大模型，你的实际数据绝不会发送。因此，整个过程快速、可扩展且安全私密。

快速开始

安装

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
Windows：%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 — Mermaid 示意图（流程图、时序图、甘特图等）

示例：

{
  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"]
}

removeVisualization

根据 ID 移除指定的可视化内容。

clearCanvas

移除画布上的所有可视化内容。

showCanvas

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

getDatabaseSchema

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

参数：

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

示例：

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

返回内容：格式化的架构信息，显示所有表、列、数据类型和约束。

queryAndVisualize

在 SQLite 数据库上执行 SQL 查询，并根据结果创建可视化图表。查询在服务端执行，且必须为只读查询（仅限 SELECT）。最多返回 10,000 行。

参数：

• 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 + Grid Layout
• 通信：通过实时轮询即时更新

开发

本地开发

# 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"
      ]
    }
  }
}

许可证

MIT © 2026 Martijn

链接

• NPM 包
• GitHub 仓库
• Model Context Protocol