Workflows are the core building blocks of Sim Studio, representing directed acyclic graphs (DAGs) of interconnected blocks that define AI agent behaviors and automation logic. A workflow consists of blocks (individual processing units), edges (connections between blocks), and optional subflows (loop/parallel containers for complex control flow). This page provides an overview of workflow architecture, state management, and the visual editing system.
For information about workflow execution mechanics, see Workflow Execution Engine. For details on real-time collaboration features, see Collaborative Editing. For persistence and deployment, see State Persistence and Deployment & Versioning.
A workflow is represented by the WorkflowState interface, which contains all the information needed to render, execute, and persist a workflow.
| Component | Type | Description |
|---|---|---|
blocks | Record<string, BlockState> | Dictionary of block configurations keyed by block ID |
edges | Edge[] | Array of connections between blocks |
loops | Record<string, Loop> | Dictionary of loop containers keyed by loop ID |
parallels | Record<string, Parallel> | Dictionary of parallel containers keyed by parallel ID |
lastSaved | number | Timestamp of last modification |
Sources: apps/sim/stores/workflows/workflow/types.ts10-23 apps/sim/stores/workflows/workflow/store.ts106-113
Each block in a workflow contains configuration, layout, and output metadata:
Key Fields:
subBlocks: Configuration parameters for the block (e.g., API endpoint, model selection). apps/sim/stores/workflows/workflow/types.ts133outputs: Declared output fields that other blocks can reference via {{blockName.output}}. apps/sim/stores/workflows/workflow/types.ts134data.parentId: Reference to parent loop/parallel container (if nested). apps/sim/stores/workflows/workflow/types.ts109-110locked: Protection flag preventing editing by non-admins. apps/sim/stores/workflows/workflow/types.ts141Sources: apps/sim/stores/workflows/workflow/types.ts101-142 apps/sim/stores/workflows/workflow/store.ts205-220
Sim Studio uses a multi-store Zustand architecture to separate concerns and optimize rendering performance.
Sources: apps/sim/stores/workflows/registry/store.ts45-47 apps/sim/stores/workflows/workflow/store.ts115-117 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:93-104
Stores the complete state of the currently active workflow, including all blocks, edges, and subflow configurations. It provides utility functions like getUniqueBlockName and prepareBlockState for managing workflow integrity. apps/sim/stores/workflows/workflow/store.ts13-21
Key Actions:
batchAddBlocks(): Add multiple blocks atomically, remapping IDs and names if necessary. apps/sim/stores/workflows/workflow/store.ts205-224updateNodeDimensions(): Syncs ReactFlow measured dimensions back to the store for layout persistence. apps/sim/stores/workflows/workflow/store.ts124-153batchUpdatePositions(): Efficiently update multiple block positions during drag or layout operations. apps/sim/stores/workflows/workflow/store.ts195-203Sources: apps/sim/stores/workflows/workflow/store.ts115-230 apps/sim/stores/workflows/utils.ts113-204
The workflow editor uses ReactFlow for the interactive canvas, with custom node and edge components designed for AI orchestration.
Sources: apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:5-14, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx:55-56, apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx:31-40
Sim Studio implements real-time collaborative editing using a Socket.io-based operation queue with optimistic updates and server confirmation.
The useCollaborativeWorkflow hook provides high-level functions that wrap store mutations with operation queue emission. It handles complex event listeners for moves, parent updates, and diff operations. apps/sim/hooks/use-collaborative-workflow.ts60-140
Key Features:
useOperationQueue to manage outgoing changes, track pending operations, and handle confirmation/failure status. apps/sim/hooks/use-collaborative-workflow.ts172-179workflow-operation events via onWorkflowOperation to apply changes from other users. apps/sim/hooks/use-collaborative-workflow.ts144-147currentWorkflowId to prevent cross-workflow state pollution. apps/sim/hooks/use-collaborative-workflow.ts182-190Sources: apps/sim/hooks/use-collaborative-workflow.ts60-190 apps/sim/stores/operation-queue/store.ts97-101 apps/sim/app/workspace/providers/socket-provider.tsx148-160
Workflows can be executed via the REST API or directly from the UI, with state persisted in normalized database tables for high performance.
The system provides endpoints for fetching and updating workflow structure and execution logic.
loadWorkflowState in the registry store handles the transition to a specific workflow, fetching its state from the API. apps/sim/stores/workflows/registry/store.ts73-93getWorkflowStateContract to retrieve the graph structure, then populates useWorkflowStore and useSubBlockStore. apps/sim/stores/workflows/registry/store.ts96-156emitSubblockUpdate and emitVariableUpdate to ensure consistency across clients. apps/sim/app/workspace/providers/socket-provider.tsx79-92Sources: apps/sim/stores/workflows/registry/store.ts73-191 apps/sim/app/workspace/providers/socket-provider.tsx72-108
Workflows are the fundamental abstraction in Sim Studio, implemented as:
WorkflowState. apps/sim/stores/workflows/workflow/types.ts10-23WorkflowStore) and parameters (SubBlockStore). apps/sim/stores/workflows/workflow/store.ts115-117For execution mechanics, see Workflow Execution Engine. For deployment and versioning, see Deployment & Versioning.
Refresh this wiki