Building It Step By StepControls and MiniMap

Building It Step By Step

Controls and MiniMap

Learn how to enhance the workflow with a mini map and control buttons.


Getting Started

Navigate to the corresponding folder:

cd step-10-controls-minimap

Install the dependencies:

npm install

Then run the project:

npm run dev

Controls and MiniMap

When you open the application, you'll notice a mini map that visualizes the workflow, along with controls for zooming and fitting the workflow to the viewport. These components are part of the React Flow abstraction layer located in src/shared/lib/flows.