Feature List (Grouped by Audience & General Usability)
- Core Drawing & Diagramming Add, move, resize, rotate basic shapes (rectangles, circles, triangles, lines, stars, polygons, arrows, etc.) Add, move, resize, rotate SVG icons (expand library for industry, education, business, etc.) Add, move, resize, rotate images (upload or drag-and-drop) Add text labels and annotations Pencil/freehand drawing tool Eraser tool Select/move multiple objects (group/ungroup) Delete objects
- Canvas & Navigation Zoom in/out Pan/move canvas (drag background) Snap to grid and alignment guides Fit to screen/reset view
- User Experience & Accessibility Auto-save and auto-load Visual save status indicator Undo/redo Keyboard shortcuts (copy, paste, delete, undo, redo, zoom, etc.) Tooltips and contextual help Responsive/mobile-friendly UI
- Export, Import, and Sharing Export as PNG, SVG, PDF Import/export project files (JSON) Shareable link (optional, if backend is added) Print support
- Customization & Libraries Shape library (expandable, categorized) SVG/icon library (expandable, categorized) Color palette and style presets Layer management (bring to front/back, lock/unlock)
- Landing Page & Onboarding Attractive landing page with: Tool overview and screenshots Audience-specific use cases “Get Started” button Quick demo or video FAQ and support/contact info Onboarding tour for new users Implementation Plan (Phased Approach)
Phase 1: Foundation & Usability [x] Core shapes, SVGs, text, and image support [x] Move, resize, rotate, delete [x] Auto-save/load, clear canvas, save status indicator [x] Responsive UI [ ] Landing page with tool overview and “Get Started” [ ] Undo/redo [ ] Keyboard shortcuts for basic actions
Phase 2: Drawing & Navigation Tools [ ] Pencil/freehand tool [ ] Eraser tool [ ] Zoom in/out [ ] Pan/move canvas [ ] Snap to grid and alignment guides [ ] Fit to screen/reset view
Phase 3: Libraries & Customization [ ] Expand shape library (arrows, polygons, flowchart symbols, etc.) [ ] Expand SVG/icon library (education, business, engineering, etc.) [ ] Add image upload/drag-and-drop [ ] Color palette and style presets [ ] Layer management
Phase 4: Export, Import, and Sharing [ ] Export as PNG, SVG, PDF [ ] Import/export project files (JSON) [ ] Print support [ ] (Optional) Shareable link/collaboration
Phase 5: User Experience Polish [ ] Tooltips and contextual help [ ] Onboarding tour for new users [ ] FAQ and support/contact on landing page
Example Roadmap Table
| Phase | Features |
|---|---|
| 1 | Landing page, core shapes/SVGs/text, move/resize/rotate, auto-save/load, clear, undo/redo, keyboard shortcuts |
| 2 | Pencil, eraser, zoom, pan, snap to grid, fit to screen |
| 3 | Expanded shape/SVG/image libraries, color/style presets, layer management |
| 4 | Export/import (PNG, SVG, PDF, JSON), print, sharing |
| 5 | Tooltips, onboarding, FAQ/support |
Next Steps Start with the landing page and onboarding. Iteratively add drawing/navigation tools and expand libraries. Polish UX and add export/import/sharing.