Xandrov StudioAtlas of shipped systems
← The territory/ I. AI-Native Products/ № 03 — Workflow Graph
Dossier № 03 / 19 — AI-Native Products — Product R&D · Visual tooling

Workflow Graph

Operations, drawn the way people actually think about them.

File
№ 03 / 19
Territory
AI-Native Products
Classification
Product R&D · Visual tooling
Status
Working build
§ 01 Context

Operations exist in two forms: the mental model — a flowchart in someone's head — and the tool model — a linear list in a spreadsheet or checklist app. The gap between them is a constant friction point. A team aligned on a workflow in a meeting walks back to a tool that forces them into sequential, list-like thinking.

Workflow Graph collapses that gap. It's a canvas where operational flows take their natural shape: nodes for steps, edges for dependencies, branches for conditions. Structure stays visual and spatial — the way teams conceive operations — and persists, so the design evolves as process gets refined.

§ 02 The problem

Building a workflow tool means solving several mechanism problems at once. Nodes and edges must be easy to create and modify. Layout has to adapt as the graph grows. State needs to track position, connections, and semantics. Persistence has to be reliable per user. And all of this must feel immediate, not laborious.

The AI layer adds another constraint: it should help draft and refine flows, but without becoming autopilot. Teams need to stay in control of the source of truth — the canvas itself — while getting assistance where it accelerates thinking.

§ 03 The approach

The frontend runs on Next.js with TypeScript. React Flow powers the canvas — nodes, edges, layout, and drag-drop interaction are handled by a proven graph library rather than built from scratch. This constraint decision freed up the novelty budget for the AI layer itself.

Persistence lives in Supabase, keyed per user, so each person's workflow library stays private and inaccessible to others. The UI shell uses Radix for component primitives and Tailwind for styling — this combination delivers an accessible, clean interface without custom CSS work. Forms are built with React Hook Form and validated with Zod, catching structural errors before data persists to the database.

The Gemini API provides the assist layer. When a user describes a workflow in natural language — a multi-step approval process, say, or an incident response flow — Gemini can propose a node-and-edge structure as a starting point. But the key constraint is that it never overwrites the user's graph. Every suggestion appears as a draft the user can accept, ignore, or modify. The canvas remains the source of truth, and the human stays the decision-maker.

Operations live in people's heads as flowcharts but in their tools as lists.

§ 04 Decisions that mattered
D1
React Flow, not a custom canvas
Edge routing and node layout are solved problems. The novelty budget went to the AI assist layer instead of re-implementing graph rendering.
D2
AI as assistant, not autopilot
Gemini proposes structures; the canvas stays the source of truth. Teams retain full control over what the workflow becomes.
D3
Supabase for per-user persistence
Each user's graph library is stored privately in Postgres, keyed by user ID. No multi-user synchronization layer adds complexity at this stage.
D4
Radix and Tailwind for the shell
A solid component library and utility CSS mean the UI is clean and accessible without custom styling work.
D5
Zod validation on forms
Structure validation ensures the graph data is well-formed before it persists, catching errors early.
§ 05 Where it stands

The system is a working build. Graphs persist reliably per user. Node creation, editing, deletion, and layout repositioning are stable. The Gemini assist layer generates structure suggestions when invoked — users review, accept, modify, or discard each suggestion without affecting their existing graph. The next development phase targets multi-user collaboration, conflict resolution, and version history to track workflow changes over time.

Next.jsReact FlowSupabaseRadix + TailwindGemini
§ 06 — Sanitization record

No client names, real usage metrics, or performance benchmarks are included in this dossier. The build itself is internal work at the studio; user adoption patterns, failure modes, and refinement workflows are still emerging and not disclosed. Database schemas and API responses are withheld for security.

Have a system like this worth building?

Fixed scope, quoted after one working session, first output inside two weeks. Read by a person within one working day.