Implementation:Infiniflow Ragflow UseGraphStore Zustand

Knowledge Sources	RAGFlow
Domains	Frontend_Architecture, State_Management
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete tool for managing agent workflow graph state in the visual editor provided by RAGFlow's Zustand store.

Description

The useGraphStore is a Zustand store with immer and devtools middleware that manages the entire visual graph state. It defines the RAGFlowNodeType interface (id, data with label/name/form, position, parentId) and provides 70+ methods for node/edge CRUD, form updates, and DSL conversion.

Usage

Imported and used in the agent canvas editor React components.

Code Reference

Source Location

Repository: ragflow
File: web/src/pages/agent/store.ts
Lines: L122-659

Signature

interface RAGFlowNodeType {
    id: string;
    data: {
        label: Operator;
        name: string;
        form: Record<string, unknown>;
    };
    position: { x: number; y: number };
    parentId?: string;
}

const useGraphStore = create<State>()(
    devtools(
        immer((set, get) => ({
            nodes: [] as RAGFlowNodeType[],
            edges: [] as Edge[],
            setNodes: (nodes) => set({ nodes }),
            setEdges: (edges) => set({ edges }),
            onConnect: (connection) => { /* add edge */ },
            updateNodeForm: (nodeId, values, path?) => { /* update form */ },
            // 70+ additional methods
        }))
    )
);

Import

import useGraphStore from '@/pages/agent/store';

I/O Contract

Inputs

Name	Type	Required	Description
User interactions	UI events	Yes	Drag, drop, connect, form edits in canvas editor

Outputs

Name	Type	Description
nodes	RAGFlowNodeType[]	Current graph nodes
edges	Edge[]	Current graph edges
DSL	JSON	Serialized workflow for backend

Usage Examples

import useGraphStore from '@/pages/agent/store';

function AgentEditor() {
    const { nodes, edges, setNodes, onConnect, updateNodeForm } = useGraphStore();

    // Update a node's form values
    updateNodeForm('node-1', { temperature: 0.7 }, ['llm_setting']);

    // Connect two nodes
    onConnect({ source: 'node-1', target: 'node-2' });
}

Related Pages

Implements Principle

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment