# sql-flow

**Repository Path**: scedm/sql-flow

## Basic Information

- **Project Name**: sql-flow
- **Description**: 一个基于 Vue 3 + TypeScript 的 SQL 表字段血缘关系可视化工具，用于展示数据库中表和字段之间的血缘关系（数据流向）
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-22
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: SQL, editor

## README

# SQL Flow - 表字段血缘关系可视化工具

一个基于 Vue 3 + TypeScript 的 SQL 表字段血缘关系可视化工具，用于展示数据库中表和字段之间的血缘关系（数据流向）。

## 功能特性

- **SQL 编辑器**: 左侧 SQL 编辑器支持 MySQL 语法高亮和实时解析
- **实时可视化**: 编辑 SQL 后实时更新血缘图
- **多语句支持**: 支持多条 SQL 语句（用分号分隔）
- **MySQL 解析**: 完整支持 MySQL 语法解析
- **错误处理**: SQL 语法错误时显示红色波浪线 + Toast 提示
- **可视化展示**: 直观展示表字段之间的血缘关系，左到右分层布局
- **画布操作**: 支持鼠标滚轮缩放、拖动画布、重置视图
- **字段连线**: 字段级别的血缘关系连线，支持多种类型
- **交互高亮**: 悬停和选中字段时高亮相关连接线
- **高性能**: 支持 100+ 表的关系展示，操作响应时间 <1 秒

## 技术栈

- **Vue 3** + Composition API
- **TypeScript** - 类型安全
- **Vite** - 构建工具
- **Pinia** - 状态管理
- **D3.js** - SVG 布局和渲染
- **CodeMirror 6** - SQL 编辑器
- **node-sql-parser** - SQL 解析
- **Vitest** - 单元测试

## 快速开始

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 运行测试
npm run test

# 运行测试（单次）
npm run test:run

# 运行测试（覆盖率）
npm run test:coverage

# 代码检查
npm run lint
```

## 测试覆盖率

```
------------------|---------|----------|---------|---------|
File              | % Stmts | % Branch | % Funcs | % Lines |
------------------|---------|----------|---------|---------|
All files         |   80.43 |    61.18 |      80 |   82.11 |
data             |     100 |      100 |     100 |     100 |
 services         |   81.66 |    60.66 |   85.71 |   83.79 |
  layoutEngine.ts |    92.4 |    52.94 |    87.5 |    92.1 |
  sqlParser.ts    |   78.51 |    61.17 |      84 |   81.27 |
 stores           |   72.82 |    54.16 |   71.42 |   72.94 |
  lineageStore.ts |   72.82 |    54.16 |   71.42 |   72.94 |
------------------|---------|----------|---------|---------|
```

> 测试覆盖率 > 80% ✓

## 项目结构

```
src/
├── components/
│   ├── SqlEditor.vue         # SQL 编辑器 + 血缘图分栏布局
│   ├── LineageCanvas.vue     # 主画布组件
│   ├── TableNode.vue         # 表节点组件
│   └── ConnectionLine.vue    # 连接线组件
├── composables/
│   └── useZoomPan.ts         # 缩放/平移逻辑
├── stores/
│   └── lineageStore.ts       # Pinia 状态管理
├── services/
│   ├── layoutEngine.ts       # D3 布局引擎
│   └── sqlParser.ts          # MySQL SQL 解析器
├── types/
│   └── lineage.ts            # TypeScript 类型定义
└── data/
    └── mockData.ts           # 模拟数据
```

## 使用说明

### SQL 编辑器

左侧 SQL 编辑器支持以下操作：

1. **编写 SQL**: 输入 INSERT ... SELECT 语句
2. **实时解析**: 编辑 SQL 后自动解析并更新血缘图
3. **多语句支持**: 用分号分隔多条语句
4. **语法高亮**: MySQL 语法高亮显示
5. **错误提示**: 语法错误时显示红色波浪线和 Toast 提示

### 支持的 SQL 语句

- `INSERT INTO ... SELECT` - 从源表插入目标表
- `CREATE TABLE AS SELECT` - 从查询创建表
- 包含 JOIN 的复杂查询
- 包含聚合函数的查询 (SUM, COUNT, AVG, etc.)
- 包含表达式的转换 (CONCAT, CAST, etc.)

## 键盘快捷键

| 快捷键 | 功能 |
|--------|------|
| `+` / `=` | 放大 |
| `-` | 缩小 |
| `0` | 适应屏幕 |
| `Escape` | 取消选择 |

## 连接线类型

| 类型 | 颜色 | 说明 |
|------|------|------|
| Direct | 蓝色 | 字段直接映射 |
| Transformation | 紫色 (虚线) | 字段经过转换 |
| Aggregation | 橙色 (点划线) | 聚合操作 |
| Join | 绿色 | 表连接关系 |

## 扩展性

项目支持以下未来功能扩展：

- **更多数据库支持**: 可扩展 sqlParser 支持其他数据库方言
- **数据库连接**: 可实现数据提供者接口连接真实数据库
- **主题定制**: 可自定义布局算法和样式
- **导出功能**: 可添加导出为图片、PDF 等功能

## License

MIT