Skip to main content

Source: docs/manual/flow-builder.md

This page is generated by site/scripts/sync-manual-docs.mjs.

Visual Flow Builder

The visual flow builder is Cruvero's graph authoring and execution surface for flow workflows.

Source: cmd/ui/frontend/src/pages/FlowBuilderV2Page.tsx, cmd/ui/frontend/src/components/flow-v2/*, internal/graph/*

Overview​

Flow Builder V2 is a React Flow-based editor with execution timeline, result drawer, template gallery, command palette, validation focusing, and optional collaboration transport.

Primary routes:

  • /flows/builder
  • /flows/builder/:id
  • /flows/builder-v2
  • /flows/builder-v2/:id

All builder routes require editor role.

Core Capabilities​

  • Visual node and edge authoring on canvas.
  • Palette-driven node insertion and quick-edit operations.
  • Inline rename and guarded delete confirmations.
  • Validation issue navigation from UI to canvas nodes.
  • Execution timeline with node-level drill-in.
  • Result drawer with node execution outputs.
  • Version diff overlay for current graph state.
  • Template gallery for reusing flow scaffolds.
  • Keyboard shortcut reference and command palette.

Subflow and Collaboration Features​

  • Subflow breadcrumb navigation with drill-in/drill-out behavior.
  • Optional live collaboration provider via websocket when:
    • CRUVERO_FLOW_COLLAB_ENABLED=true
    • CRUVERO_FLOW_COLLAB_WS_URL is set
    • a workflow id route is present.
  • Presence bar and follow mode for connected collaborators.

Execution and Debugging​

  • Runtime execution state streams into timeline and node states.
  • Completion focus automatically centers latest executed node.
  • Debug/result drawer can be toggled without leaving canvas context.