摘要：大家好，我是徐小夕。8年+程序员，曾任职多家上市公司，4年架构经验，打造过上亿用户规模的如软件产品，目前全职创业，创业项目主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”。
嗨，大家好，我是徐小夕。
8年+程序员，曾任职多家上市公司，4年架构经验，打造过上亿用户规模的如软件产品，目前全职创业，创业项目主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”。
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实现的工作流编辑器的功能模块。
JSON 导出将工作流导出为 JSON 文件元数据管理配置工作流名称、描述、版本和权限更让我惊讶的是，AI竟然连节点和边的属性面板都自动帮我实现了，我们还能轻松设置边的样式，比如：
贝塞尔曲线直线流程图状态机具体demo如下：
同时还帮我实现了缩略图的功能：
虽然实现的有点粗糙，但是作为有技术在身的程序员，优化它简直是分分钟的事情。
技术实现
先和大家分享一下我设计的这款流程图编辑器的技术架构：
技术栈我采用了如下方案：
前端框架：纯 HTML5 + CSS3 + JavaScript (ES6+)
DOM 操作：原生 JavaScript
连线库：jsPlumb (v2.15.6)
样式管理：CSS3 自定义样式
图标：内联 SVG
数据结构分为节点和边的数据结构，下面是节点的数据结构：
{ id: "node-1", // 节点唯一标识 type: "code", // 节点类型 position: { // 节点位置 x: 100, y: 200 }, data: { // 节点数据 name: "代码节点", // 节点名称 code: "console.log('Hello World');", // 代码内容（仅代码节点） description: "", // 节点描述 timeout: 5000, // 超时设置（毫秒） retryCount: 0, // 重试次数 retryDelay: 1000, // 重试延迟（毫秒） enabled: true, // 是否启用 priority: "medium", // 优先级 tags: , // 标签 style: "default" // 节点样式 }}接下来的是边的数据结构：
{ source: "node-1", // 源节点 ID target: "node-2", // 目标节点 ID label: "条件成立", // 连接线标签 style: { // 连接线样式 stroke: "#5c6bc0", // 线条颜色 strokeWidth: 2, // 线宽 connector: "Bezier" // 连接器类型 }}最后一个是整个流程图的数据结构：
{ metadata: { // 工作流元数据 name: "我的工作流", // 工作流名称 description: "", // 工作流描述 version: "1.0.0", // 版本号 permission: "private", // 权限设置 createdAt: "2023-05-16T05:34:49.000Z" // 创建时间 }, nodes: [ ... ], // 节点数组 connections: [ ... ], // 连接线数组 backgroundSettings: { // 背景设置 type: "grid", // 背景类型（grid/solid） color: "#ffffff", // 背景颜色 gridSize: 20, // 网格大小 gridColor: "#e0e0e0" // 网格颜色 }}数据结构部分也都是AI来实现的，我们只需要来纠错即可。
整个原生流程图编辑器采用的是js插件的方式实现，所以我们可以低成本集成到vue和react项目中。
AI编程的一些总结
其实用AI实现这款编辑器整个过程还是挺顺利的，从效率上对研发人员简直是“大杀器”。接下来我总结几个客观的缺点和事实：
对于业务复杂度高的场景，比如复杂界面的多端适配，AI实现的还不是很友好，需要人为来限定详细的规则，AI才能理解并实现不同的AI编程工具对语言的熟悉度有差异，所以在使用AI编程工具时，一定要结合自身的技术需求，来选择合适的编程工具和模型AI来生成大型工程时，缺乏“长记忆性”，所以不能把每一个功能细节都帮你实现，80%的AI编程功能更多的还是在UI和交互上来解决效率问题你的提示词对AI生成的结果至关重要，但是不能给AI太详细的提示词和限制，不然AI生成的效果反而比只用少量提示词生成的效果好现阶段，AI解决复杂业务问题的前提还是你得有比较扎实和深入的技术能力，否则AI只能帮你实现基础的场景来源：趣谈前端
