Principle:Infiniflow Ragflow Graph State Management
| Knowledge Sources | |
|---|---|
| Domains | Frontend_Architecture, State_Management, Agent_Systems |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
A frontend state management pattern using Zustand to maintain the visual graph editor state for agent workflow design.
Description
Graph State Management provides the reactive state layer for the visual canvas editor where users design agent workflows. The useGraphStore Zustand store manages nodes (operator components), edges (data flow connections), and their visual positions. It provides 70+ methods for graph manipulation including node creation, edge connection, form updates, DSL serialization, and undo/redo. The store integrates with ReactFlow for visual rendering.
Usage
Used in the agent canvas editor page. The store is the single source of truth for the visual graph and is serialized to DSL for backend persistence.
Theoretical Basis
The store follows unidirectional data flow:
- State: Immutable snapshots of nodes and edges managed by Zustand with immer middleware
- Actions: Store methods that produce new state via immer patches
- Rendering: ReactFlow reads state and renders the visual graph
- Serialization: Graph state is converted to DSL JSON for backend storage and execution