流程编排画布

企业服务数据服务案例ID：246645

lhc

8 年经验· 北京三维天地软件股份有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

基于 Vue 3 + AntV X6 的可视化流程编排工具，支持拖拽建节点、端口连线、属性实时编辑、撤销重做、本地持久化与 JSON/PNG 导入导出。界面参考 draw.io / ProcessOn 的轻量精致风格。

技术栈
层技术
框架 Vue 3.5 + TypeScript + Vite
状态 Pinia（Graph ↔ Store 双向同步，localStorage 自动持久化）
画布 AntV X6 3.x（Dnd / Selection / MiniMap / History / Keyboard / Clipboard / Snapline）
UI ant-design-vue 4.x（按需引入，CSS-in-JS）
功能特性
画布交互

从左侧节点库拖拽创建节点（开始 / 审批 / 条件判断 / 通知 / 结束）
端口拖拽连线，条件节点双出口（通过 / 拒绝），拖拽全程实时预览
规则校验：禁止自连、禁止结束节点出线、目标为开始节点拦截、同端口组合防重
框选多选、Ctrl+A 全选、方向键微调（Shift 加速）、吸附线对齐
缩放（Ctrl+滚轮 / 工具栏 / 快捷键）、适应画布、小地图导航
编辑体验

右侧属性面板：选中即编辑（名称 / 描述 / 类型字段 / 连线标签与颜色）
双击节点 / 连线打开编辑弹窗
节点卡片：类型色徽章、渐变底色、hover 抬升、选中蓝色光晕、端口淡显点亮
连线：平滑曲线、锐角箭头、标签胶囊（分支标签按语义着色）
工程能力

撤销 / 重做（History）、复制 / 剪切 / 粘贴（跨会话剪贴板）
Ctrl+S 保存（输入框内也生效）、未保存状态指示
导出 PNG 图片 / 导入导出 JSON / 预览流程定义
右键菜单（节点置顶、画布全选等，自适应视口）
localStorage 自动持久化，刷新不丢失