ZGI Workflow UI
Workflow UI
A React Flow-based canvas system for building, inspecting, and shipping draggable AI workflows. Use this page as the frontend contract for node cards, ports, edge labels, toolbar behavior, MiniMap, and validation states.
Component
Workflow UI
Enterprise policy workflow
React Flow canvas · 6 draggable nodes · 7 selectable edges
Canvas
Drag nodes, click edges or labels, and watch the inspector update.
Installation
Install the canvas runtime and use the ZGI node contract.
React Flow owns canvas physics. ZGI owns the node grammar, panel layout, semantic icon tones, and inspector behavior.
pnpm add @xyflow/react lucide-reactimport '@xyflow/react/dist/style.css';Keep the package setup minimal. Add custom behavior in the workflow page, not inside shared shadcn primitives.
Usage
Document the workflow as reusable product grammar.
Preview first
Show the interactive canvas before rules so engineers can validate drag, selection, and side-panel behavior.
Code second
Keep the setup snippet near the preview. Frontend should not dig through a long marketing page to find imports.
Rules after behavior
Node palette, colors, edge grammar, and state rules become the implementation checklist.
Node palette rules
A lighter node menu makes the canvas feel better.
The node palette is a utility surface, not the main product object. Keep it compact, quiet, and fast to scan so users can focus on building the workflow.
Hierarchy
Do not compete with canvas nodes. The list item is smaller, flatter, and less saturated than a workflow node card.
Density
Use 40px rows with 28px icon tiles. This keeps 12-16 tools visible without turning the menu into a dashboard.
Selection
Use a thin warm border and pale fill for the active item. Blue stays reserved for primary actions and canvas selection.
Component anatomy
Rules frontend should copy
Icon color system
Pair every icon with a semantic pastel background.
Use a two-token pair for each node type: a low-saturation background for the tile and a stronger foreground for the icon. Choose by workflow meaning first, not by visual variety.
Contrast target
Foreground should be strong enough to read at 14-16px icon size; background should stay below active-state emphasis.
Selection separation
Icon tone describes node type. Selection is always border, focus ring, or row fill, never a different icon color.
Scale rule
Reuse the same semantic pair on palette rows, MiniMap hints, and small node badges to build memory.
Component standards
Workflow UI should be read one component at a time.
Each component has the same structure: role, visual style, interaction rule, states, and implementation checks. Frontend should be able to copy one component contract without reading the whole page.
Canvas object
Node card
The node card is the smallest executable object on the canvas.
Purpose
Help users identify what the step does, where data enters, and what the next configurable action is.
Design style
Use a white 16px card, 40px header row, 28px semantic icon tile, compact subtitle, and visible input/output rows only when needed.
Interaction
Click selects the node, drag moves it, hover exposes only lightweight affordances, and preview mode locks movement.
Implementation standards
Width: 180-240px depending on density.
Selected state uses ZGI Blue border and soft ring only.
Do not put long prompts or descriptions inside the card.