SiteMap & Product Mapping Tool

A visual tool for quickly mapping out websites, product flows, and app architectures. Ideal for teams or freelancers who want to plan site structure, user journeys, or feature relationships. without the hassle of clunky diagrams or endless spreadsheets.

Build a visual mapping tool inspired by octopus.do:

Infinite, zoomable canvas

Drag-and-drop nodes for pages/features

Connect nodes to show hierarchy or flow

Color-coded frames for grouping

Editable node titles, descriptions, colors, and icons

Section frames to organize modules or sections

Sidebar with map/project list and quick add

Top bar: project name, export/share, undo/redo, zoom controls

Export to PNG, PDF, or CSV

Responsive design, touch-friendly

• Infinite Canvas: Pan and zoom to map out any size site or product.

Drag & Drop Nodes: Add, edit, move, and connect nodes to visualize structure and flows.

Frames & Sections: Group related nodes and color-code for easy organization.

Smart Connections: Draw lines between nodes for clear relationships.

Sidebar Navigation: Manage projects and maps, quick add, and easy switching.

Export & Share: Export maps for documentation or share with team members.

Undo/Redo & Autosave: Never lose your work, and quickly fix mistakes.

Responsive: Works well on desktop, tablet, and view-only mobile.

Clean, minimal UI with white and light gray backgrounds.

Bold accent colors (yellow, blue) for highlights and frames.

Rounded corners and line icons for a modern look.

All controls and actions are straightforward, with no clutter.

Dragging or zooming lags: Optimize redraws and use efficient libraries.

Connections overlap or look messy: Auto-route lines and space nodes apart.

Export not complete: Always fit the map to view before exporting.

Edits don’t sync: Confirm real-time/collab setup is active and saving changes.

Touch or mobile issues: Ensure all buttons and nodes are large enough for tapping.