# data-model **Repository Path**: sprouting/data-model ## Basic Information - **Project Name**: data-model - **Description**: 一个可视化的数据库建模工具，支持 ER 图设计、表结构管理、关系链路追踪、SQL 生成、Mock 数据生成等功能。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-15 - **Last Updated**: 2026-06-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Data Model Designer (数据库建模工具) > 一个可视化的数据库建模工具，支持 ER 图设计、表结构管理、关系链路追踪、SQL 生成、Mock 数据生成等功能。 > > 参考项目：[pdmaner](https://gitee.com/robergroup/pdmaner)、[pgModeler](https://pgmodeler.io) --- ## 📋 目录 - [项目概述](#项目概述) - [技术选型](#技术选型) - [整体架构](#整体架构) - [核心功能模块](#核心功能模块) - [数据模型](#数据模型) - [开发路线图](#开发路线图) - [Demo 说明](#demo-说明) - [项目结构](#项目结构) - [开发指南](#开发指南) --- ## 项目概述 ### 痛点与需求 | 痛点 | 解决方案 | |------|----------| | 表关系线杂乱，难以追踪数据链路 | LiteGraph.js 可视化画布，支持逐级展开数据溯源 | | 字段冗余无法标记，历史字段难以管理 | 支持字段标记为"冗余"（虚线显示）、"已删除"（隐藏但保留） | | 外键管理混乱，创建时不自觉加外键 | 禁止创建外键，仅以逻辑关系线表示 | | 数据来源与流向不清晰 | 数据链路追踪：源头ID → 上级ID → 当前表 | | 多表共享字典值（性别、状态等）难以统一管理 | 全局枚举字典管理，一处定义多处引用 | | 数据库与 Java 模型不同步 | 以 Java 模型为准，数据库可新增字段，旧字段保留不处理 | | 表结构对比困难 | 提供类 Git Diff 的可视化对比界面 | | 缓存数据库（Redis）建模缺失 | 支持缓存数据库的键值结构建模 | ### 特色功能 - **数据链路追踪**：从当前字段逐级追溯到数据源头，形成完整链路 - **数据透视**：穿透多层查看数据来源与最终流向 - **模拟数据生成**：基于字段类型和枚举自动生成 Mock 数据 - **字段着色**：对特定字段可以单独标记颜色 - **SQL 智能生成**：自动生成 INSERT、UPDATE、DELETE、DDL 语句 - **对比合并**：类似 Git 冲突界面的表结构对比与合并 - **画布注释**：支持在画布上添加图片、备注等辅助信息 --- ## 技术选型 | 层级 | 技术 | 说明 | |------|------|------| | 桌面框架 | **Electron** | 跨平台桌面端，本地文件操作，交互可控 | | 前端框架 | **Vue 3 + Vite** | 响应式 UI，组合式 API | | 状态管理 | **Pinia** | 轻量级 Vue 状态管理 | | 画布引擎 | **LiteGraph.js** | 节点化图形编辑，用于 ER 关系图 | | 存储引擎 | **SQLite** (better-sqlite3) | 嵌入式数据库，本地存储 | | 样式 | **Tailwind CSS / PrimeVue** | UI 组件库 | | 构建 | **electron-vite** | Electron + Vite 一体化构建 | --- ## 整体架构 ``` ┌──────────────────────────────────────────────────────────┐ │ Electron Shell │ │ ┌────────────────────────────────────────────────────┐ │ │ │ Main Process │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────────────┐ │ │ │ │ │ File I/O │ │ SQLite │ │ Native Dialogs │ │ │ │ │ │ Manager │ │ Engine │ │ (Open/Save) │ │ │ │ │ └──────────┘ └──────────┘ └──────────────────┘ │ │ │ └──────────────────────┬─────────────────────────────┘ │ │ │ IPC │ │ ┌──────────────────────┴─────────────────────────────┐ │ │ │ Renderer Process │ │ │ │ ┌────────────────────────────────────────────────┐ │ │ │ │ │ Vue 3 Application │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │ │ │ │ │ │ │ Router │ │ Pinia │ │ Components │ │ │ │ │ │ │ └──────────┘ └──────────┘ └───────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ │ │ LiteGraph.js Canvas Engine │ │ │ │ │ │ │ │ ┌────────┐ ┌────────┐ ┌───────────┐ │ │ │ │ │ │ │ │ │ Table │ │ Rel- │ │ Annotation│ │ │ │ │ │ │ │ │ │ Node │ │ Line │ │ Node │ │ │ │ │ │ │ │ │ └────────┘ └────────┘ └───────────┘ │ │ │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ └────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────┘ ``` ### 分层说明 | 层 | 职责 | |----|------| | **Main Process** | 文件读写、SQLite 数据库操作、原生对话框、项目文件管理 | | **IPC Bridge** | 主进程与渲染进程通信，所有数据操作走 IPC | | **Vue App** | 界面渲染、路由管理、状态管理、用户交互 | | **Canvas Engine** | LiteGraph.js 节点图引擎，负责 ER 图的渲染与交互 | | **Storage** | 项目文件 (.dmm) 本质是 SQLite 数据库，包含所有元数据 | --- ## 核心功能模块 ### 1. 项目管理器 ``` 功能： ├── 新建项目 ├── 打开项目 (.dmm 文件) ├── 保存 / 另存为 ├── 最近项目列表 └── 项目设置 (数据库类型、命名规范等) ``` ### 2. 数据源管理器 (数据库分组) ``` 功能： ├── 添加数据库分组 (对应微服务/数据库) ├── 分组管理 (重命名、删除、排序) ├── 分组颜色标记 └── 每个分组独立命名空间 ``` ### 3. 表设计器 ``` 功能： ├── 表基本信息 (名称、注释、所属分组) ├── 字段管理 │ ├── 字段名、类型、长度、精度 │ ├── 主键标识 (不允许外键) │ ├── 是否可为空 │ ├── 默认值 │ ├── 注释说明 │ ├── 标记为"冗余" (虚线显示) │ ├── 标记为"已删除" (隐藏但保留) │ ├── 字段颜色标记 │ └── 枚举字典引用 ├── 索引管理 ├── 表注释/备注 ├── 模拟数据预览 └── SQL 预览 (DDL) ``` ### 4. ER 图画布 ``` 功能： ├── 基于 LiteGraph.js 的节点化画布 ├── 表节点拖拽、缩放、连线 ├── 关系线 (1:1, 1:N, N:M) ├── 关系线无外键 (纯逻辑关系) ├── 虚线标识冗余字段 ├── 画布缩放、导出 ├── 注释节点 (文字、图片) └── 数据链路高亮 ``` ### 5. 数据链路追踪 ``` 功能： ├── 选中字段 → 追溯数据来源 ├── 逐级展开上级表、源头表 ├── 链路可视化高亮 ├── 数据流向图 (当前表 → 下游表) ├── 源头 ID / 上级 ID 追踪 └── 点击关系线跳转到目标表 ``` ### 6. 全局字典管理 ``` 功能： ├── 枚举字典定义 (性别、状态、类型等) ├── 字典值管理 (编码、名称、颜色) ├── 字段引用字典 ├── 批量引用查看 └── 字典变更影响分析 ``` ### 7. SQL 生成器 ``` 功能： ├── DDL (CREATE TABLE, ALTER TABLE) ├── DML (INSERT, UPDATE, DELETE) ├── 关键字检测与警告 ├── 自定义 SQL 模板 └── SQL 格式化 ``` ### 8. 结构对比与合并 ``` 功能： ├── 两个项目/表结构对比 ├── 差异可视化 (类似 Git Diff) ├── 逐项选择采纳/拒绝 └── 生成迁移 SQL ``` ### 9. Mock 数据生成 ``` 功能： ├── 基于字段类型生成随机数据 ├── 枚举字段自动从字典取值 ├── 支持自定义规则 ├── 集成随机数生成器 └── 导出为 INSERT 语句 ``` --- ## 数据模型 ### 项目文件格式 (.dmm) 使用 SQLite 作为项目文件格式，所有数据存储在一个 `.dmm` 文件中。 ``` ┌─────────────────────────────────────────────────────────────────┐ │ .dmm 文件 (SQLite) │ ├─────────────────────────────────────────────────────────────────┤ │ ┌──────────────┐ ┌──────────────┐ ┌────────────────────────┐│ │ │ project │ │ db_groups │ │ tables ││ │ │──────────────│ │──────────────│ │────────────────────────││ │ │ id │ │ id │ │ id ││ │ │ name │ │ project_id │ │ db_group_id ││ │ │ version │ │ name │ │ name ││ │ │ description │ │ color │ │ comment ││ │ │ created_at │ │ sort_order │ │ color ││ │ │ updated_at │ │ db_type │ │ is_deleted ││ │ └──────────────┘ └──────────────┘ │ created_at ││ │ │ updated_at ││ │ ┌────────────────────────────────┐ └────────────────────────┘│ │ │ fields │ │ │ │────────────────────────────────│ ┌────────────────────────┐│ │ │ id │ │ relationships ││ │ │ table_id │ │────────────────────────││ │ │ name │ │ id ││ │ │ field_type (VARCHAR/INT/...) │ │ source_table_id ││ │ │ length │ │ target_table_id ││ │ │ precision │ │ source_field_id ││ │ │ nullable │ │ target_field_id ││ │ │ default_value │ │ rel_type (1:1/1:N/N:M)││ │ │ comment │ │ label ││ │ │ is_primary_key │ │ is_deleted ││ │ │ is_redundant │ └────────────────────────┘│ │ │ is_deleted │ │ │ │ color │ ┌────────────────────────┐│ │ │ enum_dict_id │ │ enum_dicts ││ │ │ sort_order │ │────────────────────────││ │ └────────────────────────────────┘ │ id ││ │ │ project_id ││ │ ┌────────────────────────────────┐ │ name ││ │ │ indices │ │ code ││ │ │────────────────────────────────│ │ description ││ │ │ id │ └────────────────────────┘│ │ │ table_id │ │ │ │ name │ ┌────────────────────────┐│ │ │ field_ids (JSON) │ │ enum_values ││ │ │ is_unique │ │────────────────────────││ │ │ index_type │ │ id ││ │ └────────────────────────────────┘ │ dict_id ││ │ │ label ││ │ ┌────────────────────────────────┐ │ value ││ │ │ canvas_state │ │ color ││ │ │────────────────────────────────│ │ sort_order ││ │ │ id │ └────────────────────────┘│ │ │ project_id │ │ │ │ node_positions (JSON) │ ┌────────────────────────┐│ │ │ zoom_level │ │ annotations ││ │ │ viewport_x │ │────────────────────────││ │ │ viewport_y │ │ id ││ │ └────────────────────────────────┘ │ project_id ││ │ │ content (text/image) ││ │ ┌────────────────────────────────┐ │ position_x ││ │ │ sql_templates │ │ position_y ││ │ │────────────────────────────────│ │ width ││ │ │ id │ │ height ││ │ │ project_id │ │ type (text/image) ││ │ │ name │ └────────────────────────┘│ │ │ content │ │ │ │ db_type │ │ │ └────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## 开发路线图 ### Phase 1: 设计文档 (当前) - [x] 整体架构设计 - [x] 数据模型定义 - [x] 功能模块规划 - [x] 技术选型确认 ### Phase 2: HTML Demo (`demo/` 文件夹) - [ ] Demo 首页/导航 - [ ] 表设计器页面 - [ ] ER 图画布页面 - [ ] 关系管理页面 - [ ] SQL 生成器页面 - [ ] 字典管理页面 - [ ] 数据链路追踪页面 ### Phase 3: 桌面端项目 (`electron-app/` 文件夹) - [ ] Electron + Vue 3 项目初始化 - [ ] LiteGraph.js 集成 - [ ] SQLite 存储层 - [ ] 项目管理模块 - [ ] 表设计器组件 - [ ] ER 图画布组件 - [ ] 关系管理组件 - [ ] SQL 生成器 - [ ] 字典管理 - [ ] 数据链路追踪 - [ ] 结构对比合并 - [ ] Mock 数据生成 --- ## Demo 说明 Demo 位于 `demo/` 目录，是纯 HTML/CSS/JS 的原型演示，用于验证交互设计和视觉效果。 **目标：** - 展示所有核心功能的 UI 界面 - 页面间可相互跳转导航 - 模拟核心交互流程 - 快速验证设计方案 **运行方式：** 直接用浏览器打开 `demo/index.html` --- ## 项目结构 ``` data-model/ ├── README.md # 项目文档 ├── 数据库建模.md # 需求文档 │ ├── demo/ # Phase 2: HTML Demo │ ├── index.html # 首页/导航 │ ├── css/ │ │ └── style.css # 共享样式 │ ├── js/ │ │ └── common.js # 共享工具函数 │ ├── table-designer.html # 表设计器 │ ├── er-diagram.html # ER 图画布 │ ├── relationship.html # 关系管理 │ ├── sql-generator.html # SQL 生成器 │ ├── data-dictionary.html # 字典管理 │ └── data-lineage.html # 数据链路追踪 │ └── electron-app/ # Phase 3: Electron 桌面应用 ├── package.json ├── electron/ │ ├── main.ts # Electron 主进程 │ ├── preload.ts # 预加载脚本 │ └── ipc/ # IPC 处理 └── src/ ├── main.ts # Vue 入口 ├── App.vue ├── router/ │ └── index.ts ├── stores/ │ ├── project.ts │ ├── table.ts │ └── canvas.ts ├── components/ │ ├── table/ │ ├── canvas/ │ ├── dictionary/ │ └── common/ ├── views/ │ ├── ProjectManager.vue │ ├── TableDesigner.vue │ ├── ErDiagram.vue │ ├── RelationshipManager.vue │ ├── SqlGenerator.vue │ ├── DataDictionary.vue │ └── DataLineage.vue ├── canvas/ │ ├── TableNode.ts # LiteGraph.js 表节点 │ ├── RelationLine.ts # 关系线 │ └── AnnotationNode.ts # 注释节点 ├── utils/ │ ├── sql-generator.ts │ └── mock-generator.ts └── types/ └── index.ts ``` --- ## 开发指南 ### 环境要求 - Node.js >= 18 - npm >= 8 ### Demo 开发 Demo 为纯静态 HTML，无需构建，直接在浏览器中打开即可。 ### Electron 应用开发 ```bash cd electron-app npm install npm run dev # 开发模式 npm run build # 构建发布 ``` ### 编码规范 1. **命名规范**：驼峰命名（camelCase），组件使用 PascalCase 2. **目录结构**：功能模块化，每个模块独立目录 3. **状态管理**：使用 Pinia，避免组件间直接 props 透传过多 4. **IPC 通信**：所有数据持久化操作走 IPC，渲染进程不直接操作文件 5. **关系线**：不允许创建真实外键，仅展示逻辑关系 6. **字段删除**：软删除（is_deleted 标记），保留历史 --- ## License MIT