Visual workflow graph editors

Visual Graph Editor Development

Use this skill when building or extending the interactive node-graph canvas, custom node components, port handles, edge routing, and step configuration panels of a visual workflow builder.

Nodes, Typed Ports & Connection Rules

1. Stable Identifiers Across the Graph:
   • Assign stable, unique IDs to every node (nodeId), port/handle (portId + direction input | output), and edge (edgeId binding sourceNodeId:sourcePortId -> targetNodeId:targetPortId).
   • When duplicating a subgraph or pasting nodes, mint fresh nodeId and edgeId values and update internal variable references within the cloned slice.
2. Real-Time Connection Validation (isValidConnection):
   • Validate candidate edges during drag and before committing to state:
     • Block self-loops (sourceNodeId === targetNodeId) and duplicate parallel edges between the same ports.
     • Enforce port direction (output -> input only) and port cardinality (e.g., single-target vs. multi-branch ports).
     • Enforce Port & Schema Compatibility: Highlight compatible target ports and reject incompatible data types or illegal control-flow wiring with immediate visual feedback.
     • Block unauthorized cycles unless the edge targets an explicit, bounded loop node.

Node Configuration Inspector & Expression Binding

• Synchronized Inspector Panel:
  • Selecting a node opens its schema-driven configuration form, showing available upstream outputs in scope (computed from ancestor nodes in the DAG) with type badges and autocomplete.
• Flag Broken Downstream References Immediately:
  • When a user deletes an upstream node, renames a step output, or disconnects an edge, detect and highlight any downstream node expressions that reference the missing output rather than letting them fail silently at runtime.
• Never Expose Raw Secrets on the Canvas:
  • Bind API keys, webhook tokens, and credentials through server-stored credential references (credentialId), never rendering or exporting plaintext secrets in node data.

Accessible & Keyboard-Operable Graph Editing

Pointer dragging must never be the only way to build or edit a workflow:

• Provide keyboard-operable alternatives to add steps ("Add step after…", slash/command palette), connect/disconnect nodes via dropdowns or keyboard handle selection, nudge or auto-layout nodes, and navigate between connected upstream/downstream nodes via arrow/tab keys.
• Surface validation errors both as visual badges on the offending node/edge and in an accessible error list that focuses and pans to the target node when clicked or activated via keyboard.

Checklist

• Do nodes, ports (sourcePortId, targetPortId), and edges use stable IDs with fresh IDs minted on duplication?
• Does connection validation enforce port direction, type compatibility, and cycle rules in real time?
• Does deleting or rewiring an upstream node immediately flag broken downstream variable references?
• Can users add, configure, connect, and inspect workflow steps using the keyboard without pointer drag-and-drop?