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:

Terminal
cd step-10-controls-minimap

Install the dependencies:

Terminal
npm install

Then run the project:

Terminal
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.