【源码】基于 Vue 和 antvx6 2.0 的流程图设计系统

项目简介

本项目是基于 Vue 和 antv/x6 2.0 开发的流程图设计系统，参照了 ProcessOn 的部分功能，提供丰富的流程图设计工具与功能，便于用户创建和编辑各类流程图。

项目的主要特性和功能

工具栏功能

• 支持将普通节点和泳道节点拖拽到画布。
• 具备撤回、重做操作。
• 可导出为 PDF、PNG、JPEG、JSON 格式，也能导入 JSON 文件。
• 有全屏和自动布局（横向、纵向）功能。
• 提供功能键提示信息。
• 支持多节点上下左右居中对齐，可设置节点水平和垂直等间距。
• 可设置节点层级（存在瑕疵）。
• 能搜索节点名称并定位到该节点。

右侧弹窗

通过插槽注入，后续可添加业务功能或作为节点属性面板。

右键菜单功能

• 聚合复制、拷贝、粘贴操作。
• 支持删除、全选操作。
• 有锁定（存在瑕疵）和解锁功能。
• 可进行宽高匹配和导出图片操作。

底部悬浮工具

• 小地图可打开收起。
• 能定位到画布拥有节点的中心。
• 支持画布大小自由缩放和全览功能。
• 具备全屏功能。

节点相关

• 采用扩展性高的自定义节点，用 Vue 文件编写，展示自定义内容。
• 选中单个节点时，按任意键进入编辑状态，点击回车、其他节点或空白画布取消编辑状态。
• 选中节点四周有加号，点击可拷贝当前节点粘贴到对应方向。

边相关

• 连线有动画效果。
• 连线可通过右侧抽屉编辑描述。

安装使用步骤

1. 确保系统已安装 Node.js 和 npm 包管理器，以及 Vue 和 Vue CLI 开发环境。
2. 解压下载的项目源码文件，打开终端或命令行工具，进入项目目录。
3. 运行 npm install 命令安装项目依赖项。
4. 运行 npm run serve 命令启动项目。
5. 在浏览器中打开指定的 URL 地址，进入项目主页面，即可按照界面提示进行流程图设计和编辑操作。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】