Skip to content

Diagram Components Overview

Node and edge building blocks from @workflowbuilder/ui.

The building blocks Workflow Builder uses to render nodes and edges on the canvas. They are composed inside React Flow node and edge templates rather than used standalone, so these pages focus on structure and usage.

  • NodePanel - Node container with Root, Header, Content, and Handles slots.
  • Edge - Edge label rendering with hover and selected states.
  • NodeAsPortWrapper - Turns a whole node into a connection port.
  • NodeDescription - Textual content block inside a node.
  • NodeIcon - Icon block inside a node.