Workflow Designer

轻量化的思维导图式工作流可视化设计器

📋 简介

Workflow Designer 是一个轻量级、思维导图风格的 可视化工作流设计器。采用模块化设计，通过拖拽节点到画布上，像做思维导图一样设计工作流程。

纯前端应用，无需后端服务，导出 JSON 格式工作流定义。

✨ 特性

• 🎨 思维导图式设计 — 自由画布，拖拽节点，像画思维导图一样设计流程
• 🧩 8 种节点类型 — 开始、结束、动作、条件、子流程、等待、循环、注释
• 🔗 可视化连线 — 节点间拖拽连线，支持条件分支（真/假）
• 📝 Prompt Builder — 内置 Prompt 模板编辑器，支持 {{variable}} 变量插值
• 📑 多标签页 — 同时编辑多个工作流
• 🎯 自动布局 — 一键自动排列节点（Dagre 算法）
• 📤 导入/导出 — 导出 JSON 格式，方便版本控制和分享
• 🌙 暗色模式 — 支持亮色/暗色主题切换
• 💾 自动保存 — 浏览器 LocalStorage 自动持久化
• ⌨️ 快捷键 — Delete 删除节点，Ctrl+N 新建流程

🖥️ 技术栈

技术	说明
React 19	UI 框架
TypeScript	类型安全
Vite	构建工具
Tailwind CSS v4	样式
@xyflow/react v12	画布引擎 (React Flow)
Zustand	状态管理
Dagre	自动布局
Lucide React	图标库

🚀 快速开始

# 克隆仓库
git clone https://github.com/Electricitysheep/workflow-designer.git
cd workflow-designer

# 安装依赖
npm install

# 启动开发服务器
npm run dev

打开浏览器访问 http://localhost:5173

🏗️ 项目结构

workflow-designer/
├── src/
│   ├── components/
│   │   ├── canvas/CanvasTabs.tsx       # 标签页栏
│   │   ├── nodes/WorkflowNode.tsx      # 统一节点渲染（8种类型）
│   │   ├── palette/NodePalette.tsx     # 左侧节点面板
│   │   ├── panels/NodeConfigPanel.tsx  # 右侧属性编辑面板
│   │   └── toolbar/Toolbar.tsx        # 工具栏
│   ├── store/
│   │   ├── workflowStore.ts            # 工作流状态管理
│   │   └── tabStore.ts                 # 标签页状态管理
│   ├── types/index.ts                  # 类型定义 + 节点配置
│   ├── utils/
│   │   ├── layout.ts                   # Dagre 自动布局
│   │   ├── export.ts                   # 导入导出工具
│   │   └── validation.ts              # 工作流校验
│   ├── App.tsx                         # 主应用 + React Flow 画布
│   ├── main.tsx
│   └── index.css                       # Tailwind + 自定义样式

🧩 节点类型

节点	颜色	输入	输出	说明
开始	🟢 绿色	0	1	工作流起点
结束	🔴 红色	1	0	工作流终点
动作	🔵 蓝色	1	1	执行操作（API调用等）
条件	🟡 黄色	1	2	条件判断（真/假分支）
子流程	🟣 紫色	1	1	引用另一个工作流
等待	🌀 青色	1	1	延迟执行
循环	🟠 橙色	1	2	重复执行（循环体/完成）
注释	⚪ 灰色	0	0	文本说明
Prompt Builder	📝 粉色	动态	1	带变量插值的 Prompt 模板

📄 构建

npm run build

构建产物在 dist/ 目录。

📜 开源协议

MIT