本文档提供了 Langflow 架构的详细概述，解释了其系统如何设计、如何交互以及其实现背后的技术决策。有关 Langflow 的更高级别介绍，请参阅 Langflow 概述。
Langflow 是 LangChain 的一个开源 UI，它使用户能够通过可视化界面构建、修改和部署复杂的语言处理工作流。该系统分为前端和后端组件，并通过 RESTful API 连接。
Langflow 使用 React 前端，通过 RESTful API 与 FastAPI 后端进行通信。该架构围绕使用 GenericNode 组件的可视化流程构建以及基于图的后端系统进行执行。
来源
后端使用 FastAPI，并为服务使用依赖注入。主应用程序在 main.py 中创建，并通过 lifespan 管理进行初始化和清理。
来源
服务使用 FastAPI 的依赖注入系统作为依赖项注入。主要服务包括 SettingsService、DatabaseService 和存储服务。
| 服务类 | 依赖函数 | 目的 |
|---|---|---|
Settings(BaseSettings) | get_settings_service() | 来自环境变量/文件的配置 |
DatabaseService(Service) | get_db_service() | 异步数据库操作 |
LocalStorageService | get_storage_service() | 文件存储管理 |
QueueService | get_queue_service() | 后台任务处理 |
来源
Langflow 支持多种数据库后端，默认使用 SQLite，生产部署则使用 PostgreSQL。数据库层使用 SQLModel（基于 SQLAlchemy 构建）实现，并支持异步操作。
来源
前端围绕使用 @xyflow/react 和 GenericNode 组件的可视化流程编辑器展开。状态管理使用 Zustand stores，特别是 useFlowStore。
来源
前端使用具有特定接口和状态管理模式的专用 Zustand stores
| Store 函数 | State Interface (状态接口) | 关键操作 |
|---|---|---|
useFlowStore | FlowStoreType | setNodes、setEdges、onConnect、buildFlow |
useFlowsManagerStore | FlowsManagerStoreType | setCurrentFlow、takeSnapshot、undo、redo |
useTypesStore | TypesStoreType | 组件类型定义和模板 |
useAlertStore | AlertStoreType | setSuccessData、setErrorData、setNoticeData |
来源
前端通过结构化的 API 客户端与后端通信
来源
可视化编辑器围绕 ReactFlow 画布中的 GenericNode 组件构建。 PageComponent 协调流程编辑体验。
来源
流程执行通过 buildUtils 中的 buildFlowVertices 函数协调，并实时更新流程 store。
来源
组件系统通过 APIClassType 接口和模板系统，将前端节点渲染与后端组件定义连接起来。
来源
reactflowUtils 模块提供了用于流操作、验证和数据处理的核心工具，这些工具连接了可视化编辑器与后端执行。
来源
数据库层使用 SQLModel 和异步会话以及依赖注入进行数据库操作。
来源
应用程序启动通过 FastAPI 的 lifespan 上下文管理器和特定的初始化函数进行管理。
来源
配置通过 Settings 类使用 Pydantic 设置管理，支持环境变量和验证。
来源
系统包含用于代码编辑和流程管理的专用模态框，具备验证和错误处理能力。
来源
Langflow 的架构设计为模块化、可扩展且易于维护。前端和后端组件的分离允许独立开发和扩展。组件系统可以轻松集成各种 LLM 工具和服务，而流编辑器则提供了直观的界面，无需编写代码即可构建复杂的流程。
面向服务的后端架构易于添加新功能和维护现有功能，而前端的状态管理方法则实现了响应式和交互式的用户体验。