# db-flow

**Repository Path**: elfbobo_admin_admin/db-flow

## Basic Information

- **Project Name**: db-flow
- **Description**: dbflow是一个数据库可视化图表管理应用
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-03
- **Last Updated**: 2025-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#  dbflow

## 简介

dbflow 是一个数据库可视化图表管理应用，使用vue-flow（React Flow的vue版本）开发实现

## 开发

项目是基于 vitesse-nuxt 构建 ts 应用（nuxt3 + vue3 + element-plus + unocss），node要求 node 20.19+ 或 22.12+ 及以上

- 安装

```sh
pnpm install
```

- 运行

```sh
pnpm run dev
```

- 打包

```sh
pnpm run generate
```

- Lint with [ESLint](https://eslint.org/)

```sh
pnpm run lint
```

## 功能

- 支持数据库相关数据表的可视化图表管理
- 支持自动布局、拖拽、缩放、连线（删改）等

## 页面

- 首次进入（自动布局）

![初始化](./docs/images/init.png)

- 选中表

![数据表](./docs/images/table.png)

- hover表（鼠标hover状态）

![表hover](./docs/images/table-hover.png)

- 选中线

![关系线](./docs/images/relation.png)

- 编辑线

![线编辑](./docs/images/relation-edit.png)

## 附录

- 本项目由Anthony Fu (antfu) 的启动模板vitesse-nuxt构建，[详见 https://github.com/antfu/vitesse-nuxt](https://github.com/antfu/vitesse-nuxt)
- Vue Flow文档：https://vueflow.dev/guide/
- React Flow官网：https://reactflow-cn.js.org/learn/state-management