屏幕截图 2026-10-17 104625.png

> 对话即出图，数据更鲜活

一个把「自然语言提问」直接变成「SQL 查询 + 可视化图表」的轻量级智能数据分析工具。

一、产品定位

智绘SQL 面向所有需要看数据、但不想写 SQL 的人。你只需要像聊天一样说出想问的问题，它就能：

  1. 读懂你的问题，结合数据库真实表结构自动生成 SQL；
  2. 连接你的数据库执行查询，返回真实数据；
  3. 基于查询结果自动生成 ECharts 图表，让数据直接变成可看的图。

整个过程不需要打开任何 BI 工具，也不需要等待数据团队排期。

二、它解决什么问题

传统方式的痛点 智绘SQL 的做法
提需求 → 排期 → 取数，链路动辄一两天 提问到出图，一次对话完成
非技术同事看不懂、也写不出 SQL 用中文描述需求，AI 负责写 SQL
拿到数据还要手工整理、做图 数据返回后自动生成图表配置
传统报表是固定的，临时问题追不上 每个问题都是一次即席查询

一句话概括：把「取数」这件事的门槛，从「会 SQL」降到「会提问」。

三、核心功能

1. 对话式取数（对话）

  • 输入自然语言问题，例如「上个月订单量趋势」「各产品销售额对比」「用户增长情况」；
  • 系统自动调用大模型生成 SQL，并展示生成的 SQL 语句，可一键复制；
  • 执行查询后返回数据表格，做到「SQL 可见、结果可查」，不是黑盒；
  • 内置推荐问题：连接数据库后，会自动根据你的表结构推荐几个可以问的问题，第一次使用也无从下手。

2. 智能图表生成（图表）

  • 数据返回后自动生成图表，无需手动配置坐标轴、系列、图例；

  • 支持在 7 种图表形态间随时切换：

    auto（自动推荐）/ line 折线 / bar 柱状 / area 面积 / scatter 散点 / pie 饼图 / radar 雷达；

  • 切换图表类型时会基于同一份数据重新生成配置，方便快速找到最合适的表达方式。

3. 表结构感知（查看表结构）

  • 连接数据库后可读取真实的表名、表注释与字段列表；
  • 支持多选表，批量导出表结构到 Excel，也可以一键全部导出；
  • 这份表结构会作为上下文传给大模型，保证生成的 SQL 用对表名和字段名——这是「生成准确 SQL」的关键前提。

4. 结果导出

  • 查询结果表格支持导出为 Excel（.xlsx），方便二次加工或直接汇报；
  • 表结构信息同样支持导出，便于交接与文档沉淀。

5. 数据源与密钥管理（设置）

  • API Key 配置：填写火山方舟（Ark）API Key，作为模型调用的凭证，保存后本地留存；
  • 数据库配置管理：新增、保存、删除多套数据库连接配置（类型 / 主机 / 端口 / 数据库名 / 用户名 / 密码），并可直接「使用」切换到某一套；
  • 配置持久化在浏览器本地（localStorage），下次打开无需重新填写。

6. 帮助

内置使用指南，说明从配置到出图的完整流程，降低首次上手成本。

四、工作原理

智绘SQL 的核心是两次大模型调用 + 一次数据库查询：

  1. 第一次调用：把「用户问题 + 真实表结构」交给大模型，让它只输出一条标准 SQL；

  2. 数据库查询：后端连接 MySQL / PostgreSQL 执行这条 SQL，拿到真实数据（不是模型编造的数据）；

  3. 第二次调用：把查询结果交给大模型，让它输出一份 ECharts 图表配置；

  4. 前端渲染：展示 SQL、结果表格与图表，并允许切换图表类型、导出数据。

    flowchart LR

    A[用户自然语言提问] --> B[拼接真实表结构]

    B --> C[大模型调用 1<br/>生成 SQL]

    C --> D[连接数据库执行查询]

    D --> E[真实结果数据]

    E --> F[大模型调用 2<br/>生成图表配置]

    C -.可复制.-> G[展示 SQL]

    D -.-> H[结果表格 / 导出 Excel]

    F --> I[ECharts 图表渲染]

设计上的两个关键取舍：

  • 只让模型写 SQL，不让模型编数据：数据永远来自你的数据库，模型只负责「翻译」和「表达」；
  • SQL 对用户完全透明：生成的语句始终展示出来，既方便核对，也方便直接拿去复用。

五、技术栈

层次 技术选型
前端框架 Next.js 14（App Router）+ React 18 + TypeScript
样式 Tailwind CSS（深色主题、玻璃拟态卡片）
图表 ECharts 5（echarts-for-react）
内容渲染 react-markdown
图标 lucide-react
数据导出 xlsx
服务端 Next.js Route Handlers（Node.js 运行时）
数据库驱动 mysql2、pg（另有 better-sqlite3、oracledb 依赖）
大模型 火山方舟 Ark · `doubao-1-5-pro-32k-250115`

六、快速上手

  1. 配置 API Key：进入「设置」，填入火山方舟 API Key 并保存；
  2. 配置数据库：在「设置」中新增一套数据库连接（MySQL 或 PostgreSQL），保存后点击「使用」；
  3. 开始提问：回到「对话」，输入你的问题，或直接点击系统推荐的问题；
  4. 看图与导出：查看生成的 SQL、数据表格与图表，按需切换图表类型或导出 Excel。

七、适用场景

  • 运营 / 市场：临时想看某个活动的转化、某段时间的订单趋势，不必走数据需求流程；
  • 产品经理：快速验证一个假设，用真实数据支撑判断；
  • 数据分析师：把重复的取数工作交给它，自己专注在更有价值的分析上；
  • 开发 / 测试：连上自己的库，快速查数据、核对数据、导出结果；
  • 教学演示：把「自然语言 → SQL → 可视化」这条链路完整地演示出来。

八、当前能力边界

为了准确，这里明确说明现状：

  • 已完整实现：对话式取数、SQL 生成与展示、MySQL / PostgreSQL 查询执行、图表自动生成与类型切换、表结构查看与导出、结果导出 Excel、API Key 与多数据源配置管理；
  • 已支持的数据源：MySQL、PostgreSQL（Schema 读取与查询执行均已实现）；
  • 依赖中已引入但暂未接入路由：SQLite、Oracle（驱动已在依赖中，接口层尚未实现，选择其他类型会返回「不支持的数据库类型」）；
  • 占位页面：查询历史目前为占位状态，尚未接入真实历史数据展示。

九、一句话总结

智绘SQL 把数据分析里最繁琐的两段——写 SQL 和 画图表——压缩成了一句话。

你只管提问，SQL 和图表交给它。