workflowStore Overview

Role in the System

The Flow Studio canvas is built on React Flow, but React Flow is not the source of truth. workflowStore is. All canvas state — which nodes exist, where they are positioned, how they are connected — lives in workflowStore. React Flow renders whatever workflowStore says.

Store Architecture

// workflowStore.ts (simplified)
import { create } from 'zustand';
import { historyMiddleware } from './history/historyMiddleware';

export interface WorkflowState {
    nodes         : WorkflowNode[];
    edges         : WorkflowEdge[];
    viewport      : Viewport;
    selectedNodes : string[];
    selectedEdges : string[];
    processId     : string | null;
}

export interface WorkflowActions {
    // Node mutations
    addNode    : (node: WorkflowNode) => void;
    updateNode : (id: string, patch: Partial<WorkflowNode>) => void;
    removeNode : (id: string) => void;
    moveNode   : (id: string, position: XYPosition) => void;
    selectNode : (id: string | null) => void;

    // Edge mutations
    addEdge    : (edge: WorkflowEdge) => void;
    updateEdge : (id: string, patch: Partial<WorkflowEdge>) => void;
    removeEdge : (id: string) => void;
    setEdgeLabel : (id: string, label: string) => void;

    // Viewport
    setViewport : (vp: Viewport) => void;
    fitView     : () => void;
    zoomIn      : () => void;
    zoomOut     : () => void;

    // Persistence
    loadWorkflow      : (processId: string) => Promise<void>;
    saveWorkflow      : () => Promise<void>;
    serializeWorkflow : () => SerializedWorkflow;
}

export const useWorkflowStore = create<WorkflowState & WorkflowActions>()(
    historyMiddleware(
        (set, get) => ({
            nodes: [], edges: [], viewport: defaultViewport,
            selectedNodes: [], selectedEdges: [], processId: null,
            // ... action implementations
        })
    )
);

What This Guide Covers