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

API Flow Visualizer

一个开源的API接口流程可视化编排组件，可视化编排变量赋值、IF逻辑和循环控制以及数据库操作等，最终生成可运行的PHP后端代码（适配PhalApi格式）。Github：https://github.com/yesapicn/api-flow-visualizer

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

在线演示Demo

示例截图：

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

示例截图：

变量打印：

数据库操作：

条件判断：

循环引用：

弹窗配置（以变量赋值为例）：

预览生成PHP代码：

核心特性

• o 可视化流程编排
• o 流程控制：开始节点、结束节点
• o 业务逻辑：变量赋值、IF选择器、循环、代码、打印变量
• o 数据库：新增数据、更新数据、查询数据、删除数据
• o 导入/导出 JSON数据，方便保存和重新编辑
• o 预览和生成PHP代码，基于PhalApi开源接口框架（可自行改造成自己的PHP框架）

运行

# npm安装
$ npm install

# 本地运行
$ npm run dev

# 打包成组件（生成dist目录）
$ npm run build:lib

快速使用

<!-- 引入打包后的文件 -->
<link href="./api-flow-visualizer.css" rel="stylesheet">
<script src="./api-flow-visualizer.umd.js"></script>

<!-- 可视化编排 -->
<div id="flow-editor"></div>

<script>
const EditorClass = window.ApiFlowVisualizer.default || window.ApiFlowVisualizer;
editor = new EditorClass({
  container: document.getElementById('flow-editor'),
  initialData: {},
  onSave: (json) => { console.log('保存的数据:', json); },
  onGenerateCode: (phpCode) => { console.log('生成的 PHP 代码:', phpCode); }
});
</script>

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

文档

API接口

class ApiFlowVisualizer {
  // 获取当前 JSON 数据
  getJson(): any;
  
  // 生成 PHP 代码
  generatePhpCode(): string;
  
  // 设置数据
  setData(json: any): void;
  
  // 销毁实例
  destroy(): void;
}

前端技术栈

• o ReactFlow
• o Ant Design
• o Node v18.20.4
• o React 18
• o TypeScript
• o Vite
• o ESLint
• o Prettier

项目结构

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编辑器。

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

贡献者

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

小彩蛋：我和Cursor一起结对编程的"工作照"。