vue3 基于AntV X6 流程图设计编辑器v2.0版本

编辑器系统功能操作说明书

文档信息

项目	内容
系统名称	AntV X6 流程编辑器
版本号	v1.2
编制日期	2026-05-25
文档类型	用户操作手册

1. 系统概述

1.1 系统简介

AntV X6 流程编辑器是一款基于 Vue 3 和 AntV X6 图形编辑引擎开发的专业流程图设计工具。系统支持拖拽式节点创建、丰富的节点样式定制、灵活的连线配置以及画布预览等功能，适用于业务流程设计、系统架构规划、流程梳理等场景。

1.2 技术架构

技术栈	说明
前端框架	Vue 3 (Composition API)
图形引擎	AntV X6
UI 组件库	Element Plus
状态管理	Pinia
构建工具	Vite
样式预处理器	SCSS

1.3 主要功能特性

✅ 拖拽式节点创建
✅ 多种内置节点类型（流程图、系统图）
✅ 丰富的行业图标库（12个分类，150+图标）
✅ 自定义图标上传
✅ 节点属性编辑（位置、尺寸、样式、字体）
✅ 画布网格配置
✅ 节点连接线编辑
✅ 连接线流动动画效果
✅ 节点部件管理
✅ 画布预览功能
✅ 中英文语言切换
✅ 数据保存与回显

2. 界面布局介绍

系统主界面采用经典的三栏式布局设计：

复制代码

┌─────────────────────────────────────────────────────────────┐
│                        顶部工具栏                              │
│  [Logo] AntV X6 流程编辑器    [预览] [保存] [回显] [中/EN]    │
├────────────┬────────────────────────────┬────────────────────┤
│            │                            │                    │
│  左侧面板   │        画布区域            │    右侧属性面板     │
│            │                            │                    │
│ ·图标上传   │    ·网格背景               │    ·节点属性       │
│ ·基础流程图 │    ·拖拽创建节点           │    ·节点部件       │
│ ·系统设计图 │    ·节点连接               │                    │
│ ·行业图标   │    ·选择编辑               │                    │
│ ·自定义图标 │                            │                    │
│            │                            │                    │
└────────────┴────────────────────────────┴────────────────────┘

2.1 布局尺寸说明

区域	默认宽度	高度
左侧面板	220px	100vh - 工具栏高度
画布区域	自适应（flex: 1）	100vh - 工具栏高度
右侧面板	280px	100vh - 工具栏高度
顶部工具栏	100%	56px

3. 顶部工具栏

顶部工具栏位于界面最上方，包含系统标识、主要操作按钮和语言切换功能。

3.1 功能按钮说明

按钮	图标	功能描述
预览	👁️	打开画布预览弹窗，展示当前编辑效果的只读视图
保存	💾	将当前画布数据保存到浏览器 sessionStorage
回显	↩️	从 sessionStorage 加载之前保存的画布数据
语言切换	🌐	在中文和英文之间切换界面语言

3.2 操作指南

保存操作

点击"保存"按钮
系统将画布数据序列化为 JSON 格式
数据存储到 sessionStorage
显示保存成功提示消息

回显操作

点击"回显"按钮
系统从 sessionStorage 读取数据
解析 JSON 并渲染到画布
显示回显成功提示消息

语言切换

点击语言切换按钮
界面所有文字在中文/英文之间切换
切换结果会保存到本地，下次打开自动应用

4. 左侧面板功能

左侧面板包含图标上传区域和节点图例调色板两大部分。

4.1 图标上传区域

位置: 左侧面板最上方

功能说明:

支持上传本地图片作为自定义图标
上传的图片会自动添加到"自定义图标"分组
支持的图片格式：PNG、JPG、SVG 等
图片大小限制：单张不超过 2MB

操作步骤:

点击"上传图标"按钮
在弹出的文件选择框中选择图片
图片上传成功后自动显示在下方网格中
上传的图标可以直接拖拽到画布使用

图标管理:

鼠标悬停在图标上时显示删除按钮
点击删除按钮可移除自定义图标
默认图标（服务器、数据库、云服务等）不可删除

4.2 节点图例调色板

左侧面板下方是节点图例调色板，包含十二个分组，提供丰富的行业图标供用户选择使用。

4.2.1 基础流程图

节点名称	形状	说明
开始	圆角矩形	流程起始节点
过程	矩形	普通处理步骤
可选过程	圆角矩形（较小）	表示可选的操作
决策	菱形	条件判断节点
数据	平行四边形	数据输入/输出
连接	圆形	连接点或中转

4.2.2 系统设计图

系统设计图分组提供预定义的系统架构图标：

图标名称	用途
Client	客户端/用户端
Http	HTTP 请求
Api	API 接口
Sql	数据库/SQL
Clound	云服务
Mq	消息队列

4.2.3 工业设计图标

工业设计图标分组提供20个工业制造相关的图标：

图标名称	用途
Factory	工厂
Warehouse	仓库
Conveyor	传送带
Assembly	装配
Machine	机器
Robot	机器人
CNC	CNC加工
Lathe	车床
Drill	钻孔
Press	冲压
Welding	焊接
Cutting	切割
Painting	喷涂
Packaging	包装
Quality	质量检测
Safety	安全
Maintenance	维护
Inspection	检测
Production	生产
Supply	供应链

4.2.4 电气设计图标

电气设计图标分组提供20个电气工程相关的图标：

图标名称	用途
Power	电源
Circuit	电路
Resistor	电阻
Capacitor	电容
Diode	二极管
Transistor	晶体管
Transformer	变压器
Battery	电池
Switch	开关
Fuse	保险丝
Motor	电机
Generator	发电机
Inverter	逆变器
Relay	继电器
Sensor	传感器
PLC	可编程逻辑控制器
HMI	人机界面
Terminal	端子
Ground	接地
Lightning	雷电/避雷

4.2.5 机械设计图标

机械设计图标分组提供8个机械零件相关的图标：

图标名称	用途
Gear	齿轮
Bearing	轴承
Screw	螺丝
Nut	螺母
Bolt	螺栓
Spring	弹簧
Cylinder	气缸
Piston	活塞

4.2.6 农业设计图标

农业设计图标分组提供8个农业相关的图标：

图标名称	用途
Tractor	拖拉机
Crop	农作物
Farm	农场
Barn	谷仓
Irrigation	灌溉
Harvest	收获
Greenhouse	温室
Livestock	畜牧

4.2.7 医疗设计图标

医疗设计图标分组提供16个医疗健康相关的图标：

图标名称	用途
Hospital	医院
Ambulance	救护车
Doctor	医生
Nurse	护士
Stethoscope	听诊器
Syringe	注射器
Pill	药丸
Heart	心脏
Brain	大脑
Bone	骨骼
DNA	DNA
Microscope	显微镜
ECG	心电图
Thermometer	温度计
Mask	口罩
Bed	病床

4.2.8 交通设计图标

交通设计图标分组提供16个交通运输相关的图标：

图标名称	用途
Car	汽车
Truck	卡车
Bus	公交车
Train	火车
Airplane	飞机
Ship	轮船
Bicycle	自行车
Motorcycle	摩托车
Taxi	出租车
Ambulance	救护车
Fire Truck	消防车
Helicopter	直升机
Boat	船
Subway	地铁
Traffic Light	红绿灯
Gas Station	加油站

4.2.9 建筑设计图标

建筑设计图标分组提供12个建筑施工相关的图标：

图标名称	用途
Building	建筑物
House	房屋
Skyscraper	摩天大楼
Castle	城堡
Bridge	桥梁
Tower	塔
Church	教堂
Mosque	清真寺
Tent	帐篷
Windmill	风车
Crane	起重机
Hammer	锤子
Brick	砖块
Blueprint	蓝图
Hard Hat	安全帽
Construction	施工

4.2.10 食品设计图标

食品设计图标分组提供16个食品饮料相关的图标：

图标名称	用途
Apple	苹果
Banana	香蕉
Orange	橙子
Grape	葡萄
Watermelon	西瓜
Strawberry	草莓
Cherry	樱桃
Peach	桃子
Pizza	披萨
Burger	汉堡
Hot Dog	热狗
Sushi	寿司
Coffee	咖啡
Cake	蛋糕
Ice Cream	冰淇淋
Wine	葡萄酒

4.2.11 零售设计图标

零售设计图标分组提供16个零售购物相关的图标：

图标名称	用途
Shopping	购物
Cart	购物车
Bag	购物袋
Credit Card	信用卡
Tag	价格标签
Store	商店
Gift	礼物
Coupon	优惠券
Ticket	门票
Receipt	收据
Price	价格
Wallet	钱包
Smartphone	智能手机
Headphones	耳机
Clothes	服装
Shoes	鞋子

4.2.12 教育设计图标

教育设计图标分组提供16个教育学习相关的图标：

图标名称	用途
Graduation	毕业典礼
Book	书籍
Pencil	铅笔
Pen	钢笔
School	学校
Teacher	教师
Student	学生
Classroom	教室
Blackboard	黑板
Grad Cap	毕业帽
Diploma	毕业证书
Library	图书馆
Calculator	计算器
Globe	地球仪
Microscope	显微镜
Atom	原子

4.2.13 自定义图标

用户上传的图标会显示在此分组中，支持：

拖拽到画布创建节点
搜索过滤
节点名称显示

4.3 图标布局规范

参数	说明
每行图标数量	2个
图标大小	90px × 62px
图标上下间隙	15px
图标图片大小	128px × 128px（自动缩放）

4.4 搜索功能

在图例调色板顶部有搜索框，支持：

按节点名称关键词搜索
实时过滤显示匹配的节点
搜索不区分大小写

5. 画布区域功能

画布是编辑器的主要工作区域，用于创建和编辑流程图。

5.1 画布背景

网格配置（在右侧属性面板中调整）:

设置项	说明	可选值
网格大小	网格间距	数字（默认10）
网格类型	网格显示样式	点状、固定点、网状
网格颜色	网格点/线颜色	颜色选择器
网格厚度	网格点大小	1-5
隐藏网格	显示/隐藏网格	勾选框

5.2 节点操作

创建节点

方式一：拖拽创建

从左侧面板拖拽节点/图标到画布
释放鼠标创建节点
节点自动放置在释放位置

方式二：stencil 拖放

在 stencil 区域选择需要的节点
拖拽到画布上
释放完成创建

拖拽限制说明:

仅图标节点可以拖拽到画布
面板空白区域、分组标题、搜索框等非图标区域无法触发拖拽

选择节点

单击节点: 选中单个节点，显示选中框
框选: 在画布空白处拖拽创建选择框
多选: 按住 Ctrl/Cmd 点击多个节点

移动节点

拖拽选中节点移动位置
移动时自动吸附网格

调整大小

选中节点后拖拽边框控制点
支持等比缩放和自由缩放

旋转节点

选中节点后拖拽旋转控制点
旋转角度以 15° 为单位吸附

5.3 连接线操作

创建连接

将鼠标悬停在节点边缘的连接点上
连接点变为高亮状态
拖拽连接到目标节点

编辑连接线

线型: 实线、虚线、点线等（通过属性面板设置）
样式: 线条颜色、宽度
拐角: 支持直角和圆角连接

6. 右侧属性面板

右侧属性面板用于编辑选中节点的各项属性，采用 Tab 切换设计。

6.1 Tab 切换

Tab 页	功能
节点属性	显示和编辑选中节点的详细属性
节点部件	显示画布上所有节点的列表

6.2 节点属性 Tab

当选中画布上的节点时，显示以下属性分组：

画布背景设置
节点位置信息
字体设置
节点属性（尺寸、旋转、背景色、边框等）

6.3 节点部件 Tab

显示画布上所有节点的列表，支持：

查看所有节点
单击选择节点
查看节点可见性状态
一键隐藏/显示节点
删除节点

7. 节点属性设置

7.1 画布背景设置

属性	说明	操作方式
背景颜色	画布背景色	颜色选择器
画布长度	画布宽度	只读显示
画布宽度	画布高度	只读显示

7.2 节点位置设置

属性	说明	取值范围
X坐标	节点左上角X位置	任意整数
Y坐标	节点左上角Y位置	任意整数
Z层级	节点上下层叠顺序	任意整数
可见性	节点是否显示	勾选框

7.3 字体设置

属性	可选值/范围	说明
字体内容	任意文本	节点显示的文字
字体类型	Arial、Times New Roman、微软雅黑、黑体、宋体	文字字体
字体大小	8-72	文字大小（像素）
水平对齐	左对齐、居中、右对齐	文字水平位置
垂直对齐	顶部、居中、底部	文字垂直位置
字体颜色	颜色选择器	文字颜色

7.4 节点样式设置

属性	可选值/范围	说明
节点宽度	≥20	节点宽度（像素）
节点高度	≥20	节点高度（像素）
旋转角度	0-360	节点旋转角度（度）
背景颜色	颜色选择器	节点填充色
圆角半径	≥0	节点圆角大小

7.5 边框设置

属性	可选值	说明
边框颜色	颜色选择器	边框线条颜色
边框宽度	数字	边框线条粗细
边框类型	实线、虚线、长虚线、点线、点划线	边框线条样式

8. 节点部件管理

节点部件面板提供画布上所有节点的统一管理视图。

8.1 功能说明

功能	图标	描述
显示节点列表	-	展示所有节点名称和ID
选择节点	单击	在画布中选中对应节点
切换可见性	👁️/🙈	显示/隐藏节点
删除节点	🗑️	从画布删除节点

8.2 操作指南

选择节点

在节点部件列表中单击某个节点
画布自动滚动到该节点位置
节点显示选中状态

切换可见性

点击可见性图标
节点在显示/隐藏之间切换
隐藏的节点在画布上不可见但仍存在

删除节点

点击删除图标
节点从画布上移除
连接该节点的线条也会一并删除

8.3 状态显示

状态	可见性图标	说明
显示中	👁️	节点在画布上可见
已隐藏	🙈	节点在画布上不可见

9. 连接线流动动画

9.1 功能说明

连接线流动动画功能允许用户为节点之间的连接线添加动态流动效果，使流程图更加生动直观。该功能适用于展示数据流向、流程执行顺序等场景。

9.2 动画效果

当开启流动动画时，连接线会呈现以下效果：

虚线样式: 连接线变为虚线形式（线段长度10px，间距5px）
流动效果: 虚线沿着连接线方向持续流动，形成动态效果
动画速度: 流动速度为每秒0.5秒一个周期，循环播放

9.3 操作指南

开启流动动画

在右侧属性面板的「节点边框」区域找到「连接线动画」选项
点击下拉选择框，选择「开启流动」
画布上所有连接线立即显示流动动画效果

关闭流动动画

在右侧属性面板的「节点边框」区域找到「连接线动画」选项
点击下拉选择框，选择「关闭流动」
画布上所有连接线恢复为实线显示

9.4 动画控制

选项	说明
关闭流动	连接线以实线显示，无动画效果
开启流动	连接线变为虚线并显示流动动画

9.5 注意事项

流动动画应用于画布上所有连接线，不支持单独设置某条连接线
新创建的连接线会自动继承当前的动画状态
动画状态会随着画布数据一起保存和回显

10. 预览功能

10.1 功能说明

预览功能提供一个只读的画布视图，用于展示最终的编辑效果。

10.2 打开预览

点击顶部工具栏的"预览"按钮
弹出预览模态框
显示当前画布的完整内容

10.3 预览界面布局

复制代码

┌─────────────────────────────────────────────────────────┐
│ [👁] 画布预览                               [-] [□] [×]  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│                                                         │
│              预览画布区域                                 │
│           （只读，不可编辑）                               │
│                                                         │
│                                                         │
└─────────────────────────────────────────────────────────┘

10.4 预览控制

按钮	功能
缩小	缩小预览视图
放大	放大预览视图
适应窗口	自动调整视图使画布适应窗口大小
关闭	关闭预览窗口

10.5 预览特点

预览画布与编辑画布数据同步
预览界面为只读，不可编辑
支持缩放和平移操作
显示网格背景

11. 快捷键操作

11.1 常用快捷键

快捷键	功能	说明
Ctrl/Cmd + C	复制	复制选中的节点/线条
Ctrl/Cmd + X	剪切	剪切选中的节点/线条
Ctrl/Cmd + V	粘贴	粘贴已复制/剪切的节点
Ctrl/Cmd + Z	撤销	撤销上一步操作
Ctrl/Cmd + Shift + Z	重做	重做已撤销的操作
Ctrl/Cmd + A	全选	选中画布上所有节点
Backspace/Delete	删除	删除选中的节点/线条
Ctrl/Cmd + 1	放大	将画布放大 10%
Ctrl/Cmd + 2	缩小	将画布缩小 10%

11.2 鼠标操作

操作	功能
鼠标滚轮	缩放画布（需按住 Ctrl/Cmd）
拖拽空白区域	平移画布视图
双击节点	编辑节点文字
拖拽节点	移动节点位置

11.3 提示

快捷键在 Mac 系统上使用 Cmd 键
快捷键在 Windows/Linux 系统上使用 Ctrl 键

12. 常见问题解答

Q1: 如何保存我的工作？

点击顶部工具栏的"保存"按钮，数据会自动保存到浏览器 sessionStorage。sessionStorage 的数据在关闭浏览器标签页后会清除，如需长期保存请手动导出数据。

Q2: 如何恢复之前的工作？

点击"回显"按钮，系统会从 sessionStorage 加载之前保存的数据。

Q3: 上传的图标无法显示怎么办？

确保图片格式为 PNG、JPG、SVG 等支持的格式
检查图片大小是否超过 2MB
尝试刷新页面后重新上传

Q4: 节点之间的连接线如何调整样式？

选中连接线（点击线条），在属性面板中调整边框类型、颜色、宽度等属性。

Q5: 如何隐藏不想显示的节点？

在右侧面板的"节点部件"Tab中，点击对应节点行右侧的可见性图标，可以切换节点的显示/隐藏状态。

Q6: 如何删除不需要的节点？

有以下几种方式：

选中节点后按 Delete/Backspace 键
在节点部件面板中点击删除图标
右键选择删除

Q7: 画布上的网格如何关闭？

在右侧属性面板中，取消"隐藏网格"选项的勾选即可隐藏网格。

Q8: 如何切换中英文界面？

点击顶部工具栏右侧的语言切换按钮，界面语言会在中文和英文之间切换。

Q9: 如何为连接线添加流动动画效果？

在右侧属性面板的「节点边框」区域找到「连接线动画」选项，选择「开启流动」即可为所有连接线添加流动动画效果。选择「关闭流动」则恢复为实线显示。

Q10: 左侧面板支持哪些行业图标分类？

系统提供12个行业图标分类，共150+图标：

基础流程图（6个）
系统设计图（6个）
工业设计图标（20个）
电气设计图标（20个）
机械设计图标（8个）
农业设计图标（8个）
医疗设计图标（16个）
交通设计图标（16个）
建筑设计图标（14个）
食品设计图标（16个）
零售设计图标（16个）
教育设计图标（16个）

Q11: 如何只拖拽图标而不拖拽整个面板？

系统默认只允许图标节点拖拽到画布。面板的空白区域、分组标题、搜索框等非图标区域无法触发拖拽操作，确保只有选中的图标可以拖入画布。

附录

A. 术语表

术语	英文	说明
节点	Node	流程图中的基本元素
连接线	Edge	节点之间的连线
调色板	Stencil	包含预定义图形的面板
画布	Canvas	编辑器的工作区域
属性面板	Property Panel	显示和编辑属性的区域

B. 浏览器兼容性

浏览器	支持版本
Chrome	80+
Firefox	75+
Safari	13+
Edge	80+

本文档最后更新于 2026-05-25

vue3 基于AntV X6 流程图设计编辑器v2.0版本