Flow Mapper
Visual thinking app with infinite canvas, node and edge editing, dual themes, real-time autosave.
A single-page infinite canvas tool for diagramming and visual thinking. Draw shapes, connect them with bendable lines, organize into groups, and export as PNG or JSON with full light/dark theme support.
- HTML5 Canvas 2D
- Vanilla JavaScript (977 const, 262 function, 403 class)
- jQuery
- GSAP
- Tailwind CSS
- Local Storage
- Google Fonts (Fraunces, Inter, JetBrains Mono)
Flow Mapper is a browser-based visual thinking canvas built as a single HTML file with Canvas 2D rendering. You sketch nodes (labels, rectangles, circles, diamonds, images, etc.), draw connections between them with customizable routing and waypoints, and organize everything into grouped layers. The app stores work in localStorage with autosave and supports named projects so you can juggle multiple diagrams.
The editor runs live on an infinite zoomable plane. Hit-testing for shapes and lines uses rectangle and waypoint intersection. Resizing anchors to 9 origins (Figma-style), property inspector with scrubbable inputs (drag labels to adjust values), and a full command palette for keyboard-driven workflows. Line waypoints are editable via Alt+click, and jump-arcs prevent visual clutter when lines cross.
Notable polish: responsive grid that collapses sidebars on mobile, keyboard shortcuts for every action, theme toggle (amber/warm light mode, burnt orange dark mode), layer locking, context menus, PNG export at arbitrary scales (tiled for limits), and a cheatsheet overlay. Uses jQuery for DOM and GSAP for smooth animations on toasts and UI transitions.
- Infinite zoomable canvas with grid snapping and 9-point anchor origins
- Flexible shapes (8 primitives), bendable lines with waypoints and jump-arc anti-crossing
- Grouping, locking, layer hierarchy, and z-order control (front/back)
- Figma-style scrubbable numeric inputs + command palette (Ctrl+K) for power users
- Light and dark themes with editorial typography (Fraunces + Inter) and noise texture overlay