Building a Procedure Builder for Approval Flows

The client had different approval procedures for each business process. Traditionally, each procedure was implemented as a different system flow, which made delivery and maintenance slow.

The Challenge

Custom-building every procedure did not scale. Every new process required new implementation work and separate logic. As procedure count increased, engineering became a bottleneck.

The Solution

We created a platform/system where users can build their own procedure flow using reusable nodes: form node (Data Entry), approval node, and notification node.

Interactive Demo: Basic Procedure Flow

This simple demo shows the base flow we use in the builder: Data Entry -> Approval -> Notify. Nodes are draggable to mimic canvas interaction.

Architecture and Builder Behavior

The workflow canvas is implemented with React Flow. The builder stores states plus transitions, and each node has configurable metadata such as label, description, assignments, and completion rules. Data Entry nodes include attached form schema, approval nodes handle decision paths, and notify nodes handle read/notification steps.

Guardrails We Added

To keep flows valid, we added connection rules and save-time checks: one outgoing edge per handle, reject-path conventions for approval, and warnings for disconnected states before save.

Results

Instead of building separate systems per procedure, the team now delivers through one builder platform. Procedure setup became faster, changes became easier for users, and engineering effort shifted from repetitive implementation to platform improvements.