Flow Studio Overview
Your complete orientation to Flow Studio — the visual workflow automation engine powering BizFirstAI. Learn what it is, how it is structured, and how to navigate from login to your first running workflow.
What Is Flow Studio?
Flow Studio is BizFirstAI's visual workflow designer. It lets business analysts and developers build, test, and monitor automated business processes without writing infrastructure code. You connect nodes on a canvas — each node performs one step of your process — and the platform executes them reliably in the cloud.
Visual Design
Drag nodes from a palette and connect them with edges. Design feels like drawing a flowchart, but every element is executable.
Real-Time Execution
Watch nodes turn green as they complete. SignalR streams live status from the backend directly to your canvas.
Guard Rails
Built-in rate limiting, PII detection, and content policy enforcement protect every node execution automatically.
Extensible
Bring your own nodes, expression engines, and guard engines. The platform is designed for deep customisation.
The Three-Level Hierarchy
Every workflow in Flow Studio lives inside a three-level container hierarchy. Understanding this structure is the foundation for navigating the dashboard.
Project
A top-level organisational container — for example, HR Onboarding or Invoice Processing. Projects group related workflows together and control tenant-level access.
Process (Workflow Definition)
The workflow blueprint — the graph of nodes and edges that defines the logic. Processes support versioning; you can have multiple published versions simultaneously.
ProcessThread (Instance)
A concrete, editable snapshot of a Process at a point in time. You design and execute a ProcessThread. Multiple threads can be derived from the same Process version.
The WorkflowApp State Machine
The React application root — WorkflowApp.tsx — manages a state machine that drives navigation. You will always be in one of these states:
| State | What You See | Trigger |
|---|---|---|
dashboard | Projects / Processes / Threads list | App launch, Back to Dashboard |
loading | Loading spinner while workflow data fetches | Opening a ProcessThread |
designer | Full canvas with toolbars and Observer Panel | Workflow data loaded successfully |
error | Error message with retry option | API failure during loading |
Three Designer Modes
Once inside the canvas, you work in one of three modes controlled by designerModeStore:
| Mode | Purpose | What Changes |
|---|---|---|
| Design | Build and edit the workflow graph | Nodes are draggable, editable; palette is active |
| Execution | Run the workflow and monitor results | Canvas is read-only; Observer Panel opens; status overlays appear on nodes |
| Evaluation Planned | Validate expressions and test config without running | Dry-run indicators; no actual execution |
Quick Start Checklist
Create a Project
From the dashboard, click New Project. Give it a name and description. Projects scope your work to a tenant and access group.
Create a Process
Inside the project, click New Process. Choose a blank canvas or start from a template. This creates your workflow definition.
Create a ProcessThread
Click New Instance. The thread is locked by default — click Lock for Editing to check it out for your session.
Design on the Canvas
Drag nodes from the left palette, connect them, configure properties in the right panel. The canvas auto-saves as you work.
Execute and Monitor
Switch to Execution Mode, click Run, and watch the Observer Panel for real-time status, logs, and node output.