图转自然语言编辑器 (Graph-to-NL Editor)
一个基于 Web 技术的可视化图形编辑器，支持拖拽创建自定义元件、连线编辑属性，并将图形一键导出为结构化的自然语言描述。
功能特性
- 拖拽式画布编辑 — 从侧边栏拖拽节点到画布，支持缩放、平移、多选
- 自定义节点类型 — 内置电阻、与门，支持自定义模块（可定义多输入/输出端口及名称）
- 属性连线 — 带方向箭头，支持为连线添加元数据（增益、信号类型、延迟、权重、条件等）
- 双击编辑属性 — 双击节点/连线弹出属性面板进行编辑
- 自然语言导出 — 一键将当前图转换为人类可读的自然语言描述（基于规则模板，离线可用）
- 复制/粘贴 — 支持 Ctrl+C/V 复制粘贴节点
- 撤销操作 — 支持 Ctrl+Z 撤销上一步操作
- 右键框选 — 长按右键画虚线半透明方框批量选中节点和连线
- JSON 导入/导出 — 保存和加载图数据
- 调试模式 — 内置实时日志面板，方便排查问题
技术栈
| 类别 | 技术 |
|---|---|
| 前端框架 | React + TypeScript |
| 构建工具 | Vite |
| 画布引擎 | React Flow (@xyflow/react) |
| UI 组件 | Ant Design + TailwindCSS |
| 状态管理 | Zustand |
| 桌面打包 | Electron + electron-builder |
快速开始
环境要求
- Node.js >= 18
- npm >= 9
安装与运行
# 进入项目目录
cd graph-editor
# 安装依赖
npm install
# 启动开发服务器
npm run dev
开发服务器启动后，浏览器访问 http://localhost:5174/ 即可使用。
Windows 一键启动
双击项目根目录下的 启动开发服务器.bat 脚本，自动启动开发服务器并打开浏览器。
打包为 Windows .exe
npm run electron:build
打包产物位于 release/ 目录。
项目结构
connector/
├── graph-editor/
│ ├── src/
│ │ ├── components/ # UI 组件
│ │ │ ├── Canvas.tsx # 画布主组件
│ │ │ ├── Sidebar.tsx # 侧边栏
│ │ │ ├── PropertyPanel.tsx # 属性编辑面板
│ │ │ ├── CustomModuleNode.tsx # 自定义模块节点
│ │ │ ├── ResistorNode.tsx # 电阻节点
│ │ │ ├── AndGateNode.tsx # 与门节点
│ │ │ └── CustomEdge.tsx # 自定义连线
│ │ ├── store/ # 状态管理
│ │ │ └── graphStore.ts # Zustand 图数据存储
│ │ ├── utils/ # 工具函数
│ │ │ └── nlg.ts # 图转自然语言转换逻辑
│ │ ├── types/ # 类型定义
│ │ │ └── graph.ts # 图数据结构定义
│ │ └── App.tsx # 应用入口
│ ├── electron/ # Electron 打包配置
│ └── package.json
└── 启动开发服务器.bat
使用说明
- 添加节点 — 从左侧面板拖拽元件到画布
- 连线 — 从节点的输出端口拖拽到另一个节点的输入端口
- 编辑属性 — 双击节点或连线，在弹出的面板中编辑
- 自定义端口 — 在节点属性中添加/删除/重命名输入输出端口
- 导出描述 — 点击顶部"导出描述"按钮，查看自然语言描述
- 复制描述 — 在描述弹窗中点击"复制"按钮，一键复制到剪贴板
- 保存/加载 — 使用"导出 JSON"和"导入 JSON"保存和恢复图数据
快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl+C |
复制选中节点 |
Ctrl+V |
粘贴节点 |
Ctrl+Z |
撤销上一步操作 |
Delete |
删除选中节点/连线 |
| 右键长按拖拽 | 框选多个元素 |
已知限制
- 撤销功能最多保留 50 步操作历史
- 自定义模块默认带有 1 个输入和 1 个输出端口
- 自然语言导出基于规则模板，不支持自由语义理解