基于 React 19, ReactFlow 和 Vite 构建的企业级 Netflix Conductor 工作流可视化设计器。
- 从零创建: 无需预先提供 JSON，通过空状态引导面板即可新建空白工作流或 AI 一键生成。
- 可视化建模: 支持 DAG 工作流的拖拽式设计，连接线默认使用清晰的折线样式。
- 智能布局: 支持复杂图表的自动布局 (TB/LR)，包括针对超大流程优化的"蛇形布局"。
- 运行态监控: 实时可视化执行状态，支持路径高亮和任务详情查看。
- 强大的搜索: 毫秒级任务搜索与高亮定位。
- AI 灵感辅助 (AI Copilot):
- 从零生成: 空画布下直接通过自然语言描述生成完整工作流。
- 对话建模: 通过自然语言描述直接生成 Conductor 流程草图。
- 智能提示: 在属性面板中基于上下文自动推荐参数配置 (JSONPath)。
- 企业级能力:
- TypeScript 全量类型定义 (WorkflowDef, TaskDef)
- 深色/浅色主题支持
- 只读模式 / 编辑模式切换
- 撤销/重做 & 智能剪贴板
- 命令式 API (ref) 支持程序化创建、保存、导出
npm install reactflow-uiimport { useRef } from 'react';
import { WorkflowIDE, WorkflowIDERef } from 'reactflow-ui';
import 'reactflow-ui/style.css';
function App() {
const ideRef = useRef<WorkflowIDERef>(null);
return (
<div style={{ height: '100vh' }}>
{/* 宿主应用可通过 ref 程序化新建工作流 */}
<button onClick={() => ideRef.current?.createBlankWorkflow('my_flow')}>新建</button>
<WorkflowIDE
ref={ideRef}
theme="dark"
onSave={(workflow) => console.log('保存:', workflow)}
onRequestImport={() => { /* 打开文件选择器 */ }}
/>
</div>
);
}不传 workflowDef 时，画布会显示引导面板，支持空白创建、AI 生成或导入 JSON。
详细集成步骤和 API 参考，请查阅 集成指南。
如果您希望参与本项目的开发或进行二次开发，请参考以下步骤。
- Node.js >= 18.0.0
- npm 或 yarn
本项目包含一个演示应用 (src/demo)，用于开发和调试 IDE 组件。
# 1. 克隆仓库
git clone https://github.com/yiyisf/reactflow-ui.git
cd reactflow-ui
# 2. 安装依赖
npm install
# 3. 启动开发服务器
npm run dev启动后访问 http://localhost:5173 即可看到演示页面。
打包生成用于发布的 ESM 和 UMD 文件：
npm run build产物将生成在 dist/ 目录下。
src/components/: IDE 核心组件 (设计器、属性面板等)。src/store/: 基于 Zustand 的状态管理。src/types/: TypeScript 类型定义 (Conductor 协议与 UI 状态)。src/demo/: 开发阶段使用的演示应用。src/WorkflowIDE.tsx: 组件库的主入口文件。
MIT