Add an Auto Arrange button to the Agent flow designer that automatically organizes all blocks/nodes into a clean, readable layout.
The button should provide two layout options:
- Arrange Horizontally: organize the agent flow from left to right.
- Arrange Vertically: organize the agent flow from top to bottom.
Suggested behavior
When the user selects an arrangement:
- Automatically align all blocks.
- Maintain the logical connections and sequence between nodes.
- Apply consistent spacing between blocks.
- Reduce overlapping blocks and crossing connector lines.
- Fit or center the newly arranged flow within the canvas.
- Allow the user to continue manually repositioning blocks afterward.
Example UI
Auto Arrange ▾
- ↔ Horizontal Layout
- ↕ Vertical Layout
Business value
As an agent grows and contains multiple tools, agents, guardrails, and other components, manually arranging the blocks can become difficult. An Auto Arrange feature would make complex agent flows easier to understand, maintain, troubleshoot, and present, while reducing manual canvas organization.
