Flowchart

Status: Work in Progress

An interactive flow chart builder in the browser.

Features

• 3 custom node types: Square, Circle, Triangle
• Drag & drop nodes on canvas
• Resizable nodes with drag handles
• Rotate nodes
• Editable labels (double-click to edit)
• Connect nodes with edges
• Delete nodes and edges (Delete/Backspace)
• Undo support (reverts to last state, not pixel by pixel)
• Save & load canvas to localStorage
• Dark mode
• Floating bottom toolbar with tooltips

Tech Stack

React 19, TypeScript, React Flow (@xyflow/react), Material UI, React Icons, Vite

Getting Started

npm install
npm run dev

Structure

• App.tsx - main logic, state management, undo
• storage.ts - save/load from localStorage
• Toolbar.tsx - bottom action buttons
• nodes/figures/ - components for Square, Circle, Triangle

Planned

• Redo support
• Custom node colors/styles
• Export as image (PNG/SVG)
• Keyboard shortcuts (Ctrl+Z, Ctrl+S)
• More shapes (diamond, hexagon)
• Minimap & zoom controls

Demo

Dark Mode

Light Mode