刚刚，我用Cursor做了新开源项目！API可视化编排，1.5天全搞定！

摘要：我和AI结对编程的开源项目，只花了1.5天！一个开源的API流程可视化编排组件，帮助开发者直观地可视化编

我和AI结对编程的开源项目，只花了1.5天！

一个开源的 API 流程可视化编排组件，帮助开发者直观地可视化编排和管理 API 工作流逻辑，最终生成可支持的PHP代码。

本项目 99.9%的代码由AI（Cursor编辑器）编写，可能是首个使用AI开发的开源前端项目。

示例截图：

YesApi接口工作流可视化编排 Demo：https://www.yesapi.cn//api-flow/demo.html

示例截图：

变量打印：

数据库操作：

条件判断：

循环引用：

TODO：npm 包使用的方式待提供。

文档API接口class ApiFlowVisualizer {// 获取当前 JSON 数据getJson: any;// 生成 PHP 代码generatePhpCode: string;// 设置数据setData(json: any): void;// 销毁实例destroy: void;} 前端技术栈api-flow-visualizer/./src├── App.css├── App.tsx├── components│ ├── ApiFlowVisualizer.tsx # 对外组件封装│ ├── FlowEditor.tsx # 可视化编辑器│ ├── PhpCodeEngine.tsx # PHP代码生成引擎│ └── nodes # 可视化节点，节点卡版 + 节点配置弹窗│ ├── …… # 中间省略│ ├── StartNode.tsx # 开始节点卡片│ ├── StartNodeConfig.tsx # 开始节点配置│ ├── VarNode.tsx│ └── VarNodeConfig.tsx├── index.css├── index.ts├── main.tsx├── types.ts└── vite-env.d.ts 项目开发计划

站在巨人的肩膀上开源和创作：功能参考模仿扣子coze工作流业务逻辑编排、落地应用果创云YesApi低代码开发平台、AI开发 Cursor编辑器。

• 20250517：历时1.5天，完成第一版MVP开源，用AI完成框架搭建以及核心基础功能的开发；• TODO：npm包的打包方式• TODO：循环体的可视化编排，支持画布嵌套以及PHP代码生成引擎的调整；• TODO：IF判断节点的可视化编排，支持画布嵌套以及PHP代码生成引擎的调整；• TODO：数据库操作联动动态的数据库表和表字段数据；

感谢为本项目做出贡献的AI和开发者！