# Flowchart Editor 流程图编辑器

**Repository Path**: pcxadmin/flowchart

## Basic Information

- **Project Name**: Flowchart Editor 流程图编辑器
- **Description**: 基于 Vue 3 + TypeScript + Vite 从零实现的纯前端流程图可视化编辑器（不依赖任何第三方绘图库），支持多种图形绘制、智能连线、属性编辑、导入导出等完整能力。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-05
- **Last Updated**: 2026-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flowchart Editor · 流程图编辑器

基于 **Vue 3 + TypeScript + Vite** 从零实现的纯前端流程图可视化编辑器（不依赖任何第三方绘图库），支持多种图形绘制、智能连线、属性编辑、导入导出等完整能力。

> 打开页面后默认进入欢迎页，点击「开始绘制」即可进入编辑器画布。

---

## ✨ 技术栈

| 分类 | 技术/依赖 | 说明 |
| ---- | ---- | ---- |
| 框架 | **Vue 3.4**（`<script setup>` + Composition API） | 组件化、响应式状态 |
| 语言 | **TypeScript 5.6** | 全量类型约束（`src/types` 定义数据模型） |
| 构建 | **Vite 5.4** + `@vitejs/plugin-vue` | 开发服务器（端口 5174，自动开浏览器）、生产构建 |
| 类型校验 | **vue-tsc 2.1** | `npm run type-check` |
| 渲染 | **原生 SVG** | 图形、连线、箭头、网格全部通过 SVG 绘制 |
| 持久化 | JSON 序列化 / localStorage 校验 | 导出导入共享同一套数据格式 |

**运行时依赖仅 `vue` 一个**，绘图与交互完全自研，无 React Flow / Mermaid 等第三方库。

---

## 🚀 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器（http://localhost:5174，自动打开浏览器）
npm run dev

# 生产构建（输出到 dist/）
npm run build

# 本地预览构建产物
npm run preview

# 类型检查
npm run type-check
```

---

## 🏗️ 项目结构

```
flowchart/
├── index.html                    # 入口 HTML
├── vite.config.ts                # Vite 配置（@ 别名指向 src，端口 5174）
├── tsconfig.json / tsconfig.node.json
├── src/
│   ├── main.ts                   # 应用启动，注册全局错误处理
│   ├── App.vue                   # 欢迎页 + 编辑器入口切换
│   ├── types/index.ts            # 核心数据模型（节点/连线/图形类型枚举）
│   ├── composables/
│   │   └── useFlowEditor.ts      # ★ 核心状态管理（Composable）
│   ├── components/
│   │   ├── FlowEditor.vue        # ★ 编辑器主组件（事件编排与快捷键）
│   │   ├── FlowCanvas.vue        # 画布容器（网格、框选、平移缩放）
│   │   ├── FlowNode.vue          # 单个节点（拖动/缩放/旋转/端口）
│   │   ├── FlowEdge.vue          # 单条连线（端点重连/拖拽/标签）
│   │   ├── Toolbar.vue           # 顶部工具栏
│   │   ├── ShapeLibrary.vue      # 左侧图形库（分类/搜索/拖拽）
│   │   ├── PropertyPanel.vue     # 右侧属性面板
│   │   └── Minimap.vue           # 右下角缩略图
│   ├── utils/
│   │   ├── shapeDefs.ts          # ★ 图形模板定义（68+ 种图形）
│   │   ├── router.ts             # ★ 连线路由算法（正交/贝塞尔/直线）
│   │   └── exportUtils.ts        # ★ JSON/PNG/SVG 导入导出
│   └── styles/main.css
└── dist/                         # 构建产物
```

### 架构设计

- **单一状态源**：`useFlowEditor` 保存 `FlowData { nodes, edges, viewport }`，所有组件通过 props 下发、事件上传，父组件统一派发编辑命令。
- **数据模型清晰**：`ShapeType`（图形类型枚举）+ `ShapeCategory`（大类）+ `ShapeTemplate`（模板）+ `FlowNodeData` / `FlowEdgeData`（实例）完全分离。
- **自研连线路由**：`router.ts` 实现正交折线（自动拐弯）、贝塞尔曲线、直线三种路径算法。
- **可持久化**：数据结构即 JSON 文件格式，可无损导入导出。

![界面](img/ScreenShot_2026-08-05_134747_166.png)
---

## 🎯 功能总览 & 使用说明

### 1. 启动页 / 欢迎页
- 打开应用先看到欢迎界面：名称、功能卡片、快速操作提示。
- 「**开始绘制**」进入空白画布；「**加载示例**」直接进入编辑器。

### 2. 图形库（左侧面板）
- 按 6 大分类展示：**基础图形 · 流程图 · 泳池/泳道 · E-R 关系图 · UML 图 · 网络拓扑图**，共约 68 种图形。
- 顶部搜索框可按名称/类型过滤图形。
- **使用方式**：用鼠标**拖拽图形**到画布空白处即可创建节点（自动进入文字编辑状态）。
- 从图形库拖入「直线 / 箭头」进入连线模式：依次**点击两个节点**创建连线。

### 3. 节点编辑
- **选择**：单击选中 / `Ctrl`+单击多选 / 左键拖拽框选 / `Ctrl+A` 全选。
- **移动**：按住节点拖动（分组/容器内节点会联动）。
- **缩放**：拖拽节点四角 + 边中间的控制点调整大小（最小 30px）。
- **旋转**：拖动节点旋转手柄，或在属性面板滑块调整 0–360°。
- **文本**：双击或新建后直接输入；亦可在属性面板文本区编辑（支持换行）。
- **样式**：工具栏/属性面板调整填充色、描边色、线宽、实线/虚线/点线、透明度、字号、字体、字色、字重。

### 4. 连线 / 连线编辑
- **创建连线**：从节点边缘 **输入/输出端口** 拖出，连接到另一节点；或将端口拖到空白处弹出「选择连接图形」快速补节点+自动连线。
- **路由方式**：选中连线后可在 **正交 / 贝塞尔曲线 / 直线** 三种方式间切换（工具栏 `┼ ∿ ／` 或属性面板）。
- **箭头**：独立控制起点 / 终点箭头开关。
- **标签**：双击连线输入标签文字。
- **拖拽路由点**：拖动连线中间控制点自定义路径形状。
- **重连端点**：拖动连线端点的圆点可重新连接其它节点。

### 5. 多选批量操作
选中 2 个及以上节点后，工具栏/右键菜单出现：
- **对齐**：左 / 水平居中 / 右 / 顶 / 垂直居中 / 底。
- **匹配尺寸**：宽度 / 高度 / 宽高（以首节点为准）。
- 选中 3 个及以上：**水平 / 垂直平均分布**。
- **分组**：组合为一组（整体移动）、取消组合。
- **层级**：置于顶层 / 置于底层。

### 6. 容器（逻辑分组）
- 画布中有「容器」图形时，将普通节点拖入容器范围内会自动纳入该容器（**隶属关系自动计算**），拖动容器时内部节点跟随移动。

### 7. 视图操作
- **缩放**：滚轮、工具栏 `+ / −`；范围 10%–500%。
- **平移**：右键按住拖动画面。
- **适应视图**：一键居中缩放全部内容（`⤢`）。
- **网格开关**：工具栏 `⊞` 切换辅助网格显示/隐藏。
- **缩略图**：右下角 Minimap 实时预览，点击/拖动可快速跳转定位。

### 8. 撤销 / 重做
- 历史记录上限 **100 步**；`Ctrl+Z` 撤销、`Ctrl+Shift+Z` / `Ctrl+Y` 重做。

### 9. 剪贴板
- `Ctrl+C` 复制选中、`Ctrl+X` 剪切、`Ctrl+V` 粘贴（粘贴位置偏移 20px，内部连线一并还原）。

### 10. 导入 / 导出（工具栏右侧）
- **导出 JSON**：下载当前流程图数据文件（`flowchart-<时间戳>.json`）。
- **导入 JSON**：选择本地 `.json` 文件恢复流程图。
- **导出 PNG**：渲染为高清位图（2 倍缩放），白底。
- **导出 SVG**：输出矢量图，可无损放大/二次编辑。

### 11. 右键菜单
画布/节点上单击右键弹出快捷菜单：复制、剪切、粘贴、删除、组合/取消组合、对齐、分布、层级、全选。

### 12. 状态栏
底部实时显示 **节点数 / 连线数 / 缩放比例 / 选中元素数**，并给出常用操作提示。

---

## 🎹 快捷键一览

| 快捷键 | 功能 |
| ---- | ---- |
| `Delete` / `Backspace` | 删除选中元素 |
| `Ctrl + Z` | 撤销 |
| `Ctrl + Shift + Z` / `Ctrl + Y` | 重做 |
| `Ctrl + C` / `Ctrl + X` / `Ctrl + V` | 复制 / 剪切 / 粘贴 |
| `Ctrl + A` | 全选 |
| `Ctrl` + 单击 | 多选/加选节点 |
| `Esc` | 取消操作 / 清除选择 |
| 滚轮 | 画布缩放 |
| 右键按住拖动 | 平移画布 |

---

## 🧠 核心实现要点

- **图形模板**（`shapeDefs.ts`）：每种图形定义类型、分类、默认尺寸、默认文本、默认样式与 SVG 示意图标。
- **连线路由**（`router.ts`）：
  - 正交路由：根据相对方位选择出口方向，计算中点拐弯并简化共线路径。
  - 贝塞尔：按源目标偏移生成三次贝塞尔控制点。
- **导出**（`exportUtils.ts`）：遍历节点/连线生成独立 SVG 字符串（含箭头 marker），PNG 通过 `Image → Canvas → toBlob` 导出。
- **状态同步**：`onChange` 回调 + 深度 `watch`，任何编辑实时外发数据，便于后续接入自动保存。
- 数据校验（`validateFlowData`）保证导入时数据结构正确。

---

## 📌 备注

- 项目内已包含 `dist/` 构建产物，可静态部署。
- `App.vue` 预留了 `flowchart-last-session`（localStorage）自动恢复接口并做合法性校验，当前版本未启用完整自动保存。
- 图形库中「直线 / 箭头」类型的默认尺寸高度极小（2px），其本质是连线快捷入口而非孤立图形。

欢迎使用与二次开发，如有问题可基于 `useFlowEditor` 与各组件接口自由扩展。