AI着实让人发狂！最近借助AI，我花了不到3天的时间，写了一款原生js实现的工作流编辑器，先上图：注意哦，这里是用原生js实现的，也就意味着我们可以轻松将它封装成Vue和React组件，在项目里使用。先总结一下实现这款可视化编辑器，AI的占比：
- UI界面，80% AI生成
- 功能逻辑实现，60% AI生成
- bug和问题修复，60% AI实现
- 架构和插件设计方案，50% AI实现
也就是说，但凡是懂点技术的人员，都可以借助AI，实现这个可视化流程编辑器需求的50% - 60%。这款可视化流程图，如果不借助AI实现，不借助VUE，REACT等框架，如果纯js生态来写，对于初中级研发来说简直就是灾难。功能详解接下来和大家介绍一下这款借助AI实现的工作流编辑器的功能模块。
2.1 节点管理
- 多种节点类型支持开始、输入、代码、条件、循环等多种节点类型
- 节点分类将节点按功能分为基础节点、处理节点、流程控制和集成节点
- 节点搜索支持通过关键词搜索节点
- 可视化图标每种节点类型配有独特的图标和颜色
2.2 画布操作
- 拖拽创建从左侧面板拖拽节点到画布创建新节点
- 节点移动画布中的节点可自由拖动位置
- 连线创建通过端点连接不同节点
- 连线样式支持多种连线样式（贝塞尔曲线、直线、流程图、状态机）
- 缩放控制支持画布的放大、缩小和重置
- 网格背景可配置的网格背景，支持调整网格大小和颜色
- 缩略图右下角实时显示画布缩略图，支持点击导航
2.3 属性配置
- 节点属性配置节点名称、描述、代码等基本属性
- 节点样式支持多种预设样式（默认、现代、扁平、圆角）
- 高级设置超时设置、重试机制、优先级、标签等
- 连接线属性配置连接线标签、颜色、线宽和样式
2.4 导出功能
- JSON 导出将工作流导出为 JSON 文件
- 元数据管理配置工作流名称、描述、版本和权限
更让我惊讶的是，AI竟然连节点和边的属性面板都自动帮我实现了，我们还能轻松设置边的样式，比如：
- 贝塞尔曲线
- 直线
- 流程图
- 状态机
具体demo如下：
同时还帮我实现了缩略图的功能：
虽然实现的有点粗糙，但是作为有技术在身的程序员，优化它简直是分分钟的事情。技术实现先和大家分享一下我设计的这款流程图编辑器的技术架构：
技术栈我采用了如下方案：
前端框架：纯 HTML5 + CSS3 + JavaScript (ES6+)
DOM 操作：原生 JavaScript
连线库：jsPlumb (v2.15.6)
样式管理：CSS3 自定义样式
图标：内联 SVG
数据结构分为节点和边的数据结构，下面是节点的数据结构：
接下来的是边的数据结构：
最后一个是整个流程图的数据结构：
数据结构部分也都是AI来实现的，我们只需要来纠错即可。整个原生流程图编辑器采用的是js插件的方式实现，所以我们可以低成本集成到vue和react项目中。AI编程的一些总结其实用AI实现这款编辑器整个过程还是挺顺利的，从效率上对研发人员简直是“大杀器”。接下来我总结几个客观的缺点和事实：
- 对于业务复杂度高的场景，比如复杂界面的多端适配，AI实现的还不是很友好，需要人为来限定详细的规则，AI才能理解并实现
- 不同的AI编程工具对语言的熟悉度有差异，所以在使用AI编程工具时，一定要结合自身的技术需求，来选择合适的编程工具和模型
- AI来生成大型工程时，缺乏“长记忆性”，所以不能把每一个功能细节都帮你实现，80%的AI编程功能更多的还是在UI和交互上来解决效率问题
- 你的提示词对AI生成的结果至关重要，但是不能给AI太详细的提示词和限制，不然AI生成的效果反而比只用少量提示词生成的效果好
- 现阶段，AI解决复杂业务问题的前提还是你得有比较扎实和深入的技术能力，否则AI只能帮你实现基础的场景
如果你对这款流程图实现感兴趣，欢迎在趣谈AI公众号留言反馈。
