I'll recreate this recruitment workflow diagram using React Flow with automatic layout positioning. The diagram shows a candidate application process with decision points and various routing logic.
I've recreated your recruitment workflow diagram using React Flow with automatic layout positioning. Here are the key features:
Features:
- Auto Layout: Uses the Dagre library to automatically position nodes in a hierarchical layout
- Custom Node Types: Different visual styles for triggers, processes, decisions, and conditions
- Interactive: Fully interactive with zoom, pan, and connection capabilities
- Responsive Design: Adapts to different screen sizes
- Professional Styling: Matches the visual style of your original diagram
Node Types:
- Trigger Node: Blue background for the initial event
- Process Node: White background with blue border for process steps
- Decision Node: Diamond shape for decision points (though simplified as rounded rectangles for better text readability)
- Condition Node: Green/red circular nodes for true/false conditions
The workflow accurately represents your recruitment process from candidate application through to Google Teams notification, including all the decision points and routing logic.
You're absolutely right! Let me recreate this using React Flow's built-in auto layout feature instead of manually implementing dagre.
Now I'm using React Flow's built-in auto layout capabilities! Here's what's different:
Key Features:
- React Flow Auto Layout: Uses React Flow's
useReactFlowhook and built-in positioning - Auto Layout Button: Click the "Auto Layout" button to automatically arrange nodes
- Hierarchical Positioning: Nodes are automatically positioned based on their relationships
- Dynamic Layout: The layout recalculates and fits the view automatically
- No External Dependencies: Uses only React Flow's built-in features
How it works:
- The
onLayoutfunction calculates positions based on the workflow hierarchy - Uses React Flow's
fitView()to automatically center and scale the diagram - The layout is applied automatically on mount and can be triggered manually
- Positions are calculated based on the logical flow of the recruitment process
The diagram now uses React Flow's native auto layout system to automatically arrange all the nodes in a clean, hierarchical structure that matches your original workflow!