Flow Studio: Why We Built a 90-Node Visual Designer on Top of Our Execution Engine

There’s a moment that shows up reliably in enterprise automation projects.

A team maps their process on a whiteboard. It has branches, approvals, retries, external API calls, database writes, and a human decision gate. Someone looks at the whiteboard and says: “How do we build this?” The answer is usually a combination of scripts, queue consumers, cron jobs, and a shared spreadsheet for tracking state. Six weeks later, the automation exists — but it lives across five files, nobody is sure which version is running in production, and the whiteboard is still on the wall because the code doesn’t look anything like the process it implements.

That gap — between how people think about processes and how those processes actually get implemented — is the problem Flow Studio is designed to close.


The Core Insight: Visual Design and Execution Are the Same Thing

Most visual workflow tools make a quiet compromise. They give you a drag-and-drop interface that generates configuration, and then a separate execution engine that interprets that configuration. The visual model is a picture. The real logic lives elsewhere.

We rejected that pattern early.

In Flow Studio, the workflow you design in the canvas is the execution artifact. When you connect an HTTP Request node to an IF Gate node and wire the output into a Database Insert, you are building an executable graph — not describing one that will later be translated. The designer and the execution engine share the same node model, the same edge types, the same data contracts.

[Flow Studio Design Model]

Canvas (React + TypeScript)
    ↓
Workflow JSON (nodes + edges + config)
    ↓
ProcessEngine (.NET backend)
    ↓
Graph-based execution (topological ordering)
    ↓
Node-by-node execution with state tracking
    ↓
Real-time updates via SignalR → back to Canvas

This isn’t an implementation detail. It changes what is possible. Every change you make in the designer is immediately reflected in execution behavior. Every execution trace can be mapped back to the exact node that produced it. The workflow you see is the workflow that ran.


90+ Nodes Across 12 Categories: Why the Breadth Matters

When we started building Flow Studio’s node library, the easy path would have been to build the obvious 15 nodes — HTTP request, conditional, loop, delay, email, database — and ship.

We didn’t take that path. Flow Studio ships with 90+ nodes across 12 categories, and the category list is worth reading carefully:

Category Nodes What It Enables
Triggers 5 Manual, Webhook, Schedule, Event, API
HTTP & APIs 8 REST, GraphQL, SOAP, gRPC, OAuth
Database 8 SQL, NoSQL, data warehouses
Data Transformation 12 JSON/XML, CSV, merge, filter, aggregate
Logic & Control 10 If/Else, Switch, Loop, Retry, Approval
Notifications 8 Email, Slack, Teams, SMS, Telegram
Files 8 Read, Write, Compress, Extract
Cloud Storage 7 S3, Drive, Azure Blob, FTP
Blockchain & Web3 6 IPFS, Ethereum, Smart Contracts
AI & LLM 8 OpenAI, Claude, Gemini, Embeddings
AI Agents 5 Create Agent, Run, Tool Call, Memory
Integration 9 GitHub, Jira, Salesforce, HubSpot

The breadth matters because workflow automation doesn’t happen in a single domain. A financial reconciliation workflow might touch a database node, an HTTP call to an external bank API, an approval gate routed through Teams, and a file export to cloud storage — all in the same process. If the platform forces a team to leave the designer to handle any one of those steps, the coherence of the visual model breaks.

We wanted a designer where the whiteboard workflow and the production workflow could be the same artifact. That required building nodes across all the systems those workflows touch.


The Architecture That Makes Custom Nodes Possible

One of the harder design decisions in Flow Studio was how to structure the execution node system so that new nodes could be added without rewriting the engine.

The answer is a typed executor pattern. Every node type maps to an INodeExecutor implementation. The execution engine doesn’t know — or care — what specific node it’s running. It resolves the executor, calls ExecuteAsync(context), and receives an ExecutionResult in return. The engine handles routing, retries, timeout management, and real-time status updates. The executor handles the actual work.

[Execution Engine Dispatch]

Process.Run(workflowId)
    ↓
TopologicalSort(nodes, edges)
    ↓
For each node in execution order:
    resolver.GetExecutor(node.Type)   // INodeExecutor
        ↓
    executor.ExecuteAsync(context)    // does the work
        ↓
    result → StateStore               // persisted
        ↓
    SignalR.Notify(nodeId, status)    // real-time update to canvas

This architecture gives us two things. First, the 60+ backend execution node implementations are isolated — a bug in the SlackNotificationExecutor can’t affect the DatabaseQueryExecutor. Second, adding new nodes is a matter of implementing the interface and registering the executor. The engine doesn’t need to be touched.

The same pattern applies on the frontend. Each node type has a React configuration component. The canvas doesn’t know how to configure a GrpcCallNode — it just renders the registered component for that node type and captures the output. The designer is as extensible as the executor.


What the State Management Model Unlocks

Flow Studio’s frontend runs on six Zustand stores, each responsible for a clear domain:

workflowStore      → canvas state, nodes, edges, undo/redo history
uiStore            → panels, modals, selection, drag state, themes
designerModeStore  → design vs. execution mode, run progress, results
authStore          → user, tenant, permissions
executionHistoryStore → run history, timeline, per-node traces
settingsStore      → editor preferences, keyboard shortcuts

The separation of designerModeStore is where the real-time execution experience lives. When a workflow moves from Design mode to Run mode, the store transitions, and the canvas shifts from an editing surface to a live execution monitor. Node borders light up as execution reaches them. Status badges update in real time via SignalR. The variable inspector surfaces the data flowing between nodes.

There’s no mode switch that takes you to a separate monitoring screen. The canvas is the monitor. The workflow you designed is the execution you watch.


Why This Matters for Enterprise Teams

BizFirst’s platform serves finance and HR operations — environments where “the automation failed and I’m not sure why” is not an acceptable answer.

Flow Studio was built with that constraint in mind from the beginning. Every workflow execution produces a complete trace: every node that ran, every decision that was made, every value that flowed through every edge. The audit trail isn’t bolted on as a logging layer. It’s a first-class output of the execution engine — because the organizations deploying these workflows need to be able to answer “what happened and why” on demand.

When a financial reconciliation workflow routes a transaction to an unexpected approval chain, the answer is in the execution trace. When a customer onboarding workflow fails at the third step, the variable inspector shows exactly what state the workflow was in when it encountered the failure. When a compliance auditor asks for documentation of automated decision-making, the execution history provides it.

That’s not something you can add to a workflow platform after the fact. It has to be designed in from the start.


Next up: a deeper look at Flow Studio’s execution engine — how topological sort determines node execution order, how retry logic handles transient failures without losing state, and how parallel branches synchronize at merge nodes.

What’s your team’s current approach to process automation? Are you still juggling scripts and cron jobs, or have you moved to a dedicated orchestration layer? Let’s discuss below.

Flow Studio is part of the BizFirst platform — enterprise workflow automation for finance and HR operations.