FlowSnap

A browser-based workflow capture tool.

FlowSnap is the ultimate browser-based companion for product managers, QA engineers, customer support specialists, and technical writers who need to build clear, beautiful, and professional process documentation. Whether you are creating User Guides, Standard Operating Procedures (SOPs), or User Acceptance Testing (UAT) scripts, FlowSnap simplifies the process. Instead of switching back and forth between screenshot utilities, paint programs, and document editors, you can capture screens, annotate key actions, refine text with AI assistance, and export complete guides—all within a single, integrated workflow panel. 🌟 Key Features 1. 📸 Advanced Capture Suite Capture exactly what you need with four versatile capture modes: Viewport Capture: Instantly grab a high-quality screenshot of the current visible page. Full-Page Stitched Capture: Scroll and stitch long scrolling pages automatically to capture entire dashboards or articles. Region Selection: Draw a crop rectangle directly on your active tab to capture only a specific component or area. Screen & Monitor Capture: Document system-level workflows by capturing any active application window or monitor stream (with automatic Windows taskbar cropping for cleaner screenshots). 2. 🎨 Interactive Canvas Editor Highlight important UI elements with built-in, vector-based markup tools: Rich Annotation Toolbox: Add arrows, lines, rectangles, circles, hand-drawn lines (pencil), and text boxes. Smart Heuristics Overlays: Detect buttons, dropdowns, inputs, and links from the webpage automatically, showing "magic-wand" overlays to place perfectly aligned shapes instantly. Typography Control: Choose fonts, sizes, opacity, colors, and format your text (Bold, Italic, Underline). Precise Control: Zoom in/out, pan, move, resize, and edit placed annotations with full Undo/Redo history support. 3. ✍️ Intelligent AI Copywriter & Wordings Stop typing repetitive text; FlowSnap writes the descriptions for you: Local Heuristic Wording: Uses structural data from target DOM elements (e.g. element labels, input types, buttons) to generate readable titles (e.g. "Click on Submit Button") and descriptions. OpenAI Integration: Connect your API key to transform raw steps into cohesive, publication-ready user guides, SOPs, or UAT documentation. Doc Types: Choose between User Guide, SOP, or UAT styles tailored for your target audience. 4. 🗂️ Drag-and-Drop Workflow Manager Organize and bulk-edit steps in FlowSnap's side panel: Drag-and-Drop Reordering: Easily rearrange steps using intuitive drag handles. Bulk Editing Controls: Toggle step numbering, include/exclude steps from the Table of Contents, or toggle AI writing optimization for multiple steps at once. Bulk Actions: Move or delete multiple steps concurrently to speed up editing. 5. 💾 Local Project Management & Auto-Save Keep your progress safe on your local drive: File System Access API: Export your workspace to a .flowsnap project file. Background Auto-Save: Automatically saves changes back to your local project file in the background (via remembered directory/file handles in IndexedDB) without asking for prompts. 6. 📤 Multiple Export Formats Download your completed documentation in the format that fits your needs: Markdown ZIP Archive: A ZIP file containing the markdown document (.md) formatted with a Table of Contents alongside all original screenshot images. Microsoft Word (.docx): A professionally styled document featuring an auto-generated Table of Contents, bookmark-linked headers, page numbers, footers, and properly scaled images. Portable Document Format (.pdf): A print-ready PDF generated with precise page-break splitting to prevent images from clipping awkwardly across page boundaries. 🛠️ How to Use FlowSnap Start Capture: Open the FlowSnap sidebar, name your document, and select a capture mode. Annotate Elements: Double-click any screenshot to open the Interactive Canvas. Draw markup arrows, highlight sections, or turn on the Magic Wand to overlay automatically scraped page elements. Refine Text: Edit step titles and descriptions manually or let the local rules and OpenAI generate polished documentation. Export: Click preview to review the output, and download your document as a PDF, Word file, or Markdown ZIP. 🔒 Permissions & Privacy Transparency FlowSnap is built with security and user privacy in mind. We only ask for the permissions necessary to run the tool locally: activeTab & <all_urls>: Required to capture screenshots and analyze DOM elements for magic-wand annotations on the webpages you choose to capture. sidePanel: Used to display FlowSnap's user interface alongside your browser tab, ensuring a seamless side-by-side workflow. scripting: Used to run safe, non-intrusive DOM scraper scripts to detect interactable elements for annotations. storage & unlimitedStorage: Used to store active drafts, steps, settings, and base64 screenshots locally on your computer.