Free Online Flowchart and Mind Map Creator Tool

Overview

A robust, high-performance, single-file browser-based application for creating professional flowcharts and mind maps. The tool leverages the HTML5 Canvas API or SVG DOM manipulation to provide a fluid, interactive visual canvas. It is built for speed, utility, and immediate visual organization.

Core Features

• Drag-and-Drop Canvas: Smooth interaction for creating nodes (rectangles, circles, diamonds) and connecting them with dynamic lines.
• Dynamic Connectors: Lines that intelligently snap to node edges and maintain connection even when nodes are dragged.
• Styling Controls: Change node colors, border weights, and text labels directly through a contextual properties panel.
• Zoom & Pan: Infinite-feel panning and smooth zooming using mouse scroll and drag.
• Export Engine: One-click export to PNG (raster) or SVG (vector) formats.
• Keyboard Shortcuts: Support for Delete (remove selected), Ctrl+C/V (copy/paste), and Undo/Redo operations.

UI Layout

• Header: Minimalist navigation containing tool controls (Clear Canvas, Export, Help) and a simple title.
• Left Sidebar: A tool palette for adding new shapes (Node Types) and generic styling toggles.
• Main Canvas: A wide-open, clean workspace with a subtle grid background for alignment.
• Properties Panel: A floating, right-aligned modal that appears when a specific node is selected, allowing for text editing, color picking, and shape changes.

Design & Aesthetics

• Color Palette: A vibrant, light-mode-only scheme. White backgrounds, soft gray grids (#F8F9FA), slate blue accents (#2563EB) for primary actions, and clean white nodes with soft drop shadows (0 4px 6px -1px rgb(0 0 0 / 0.1)).
• Typography: Sans-serif fonts (Inter or system-stack) with high legibility.
• Transitions: Smooth CSS transitions for node selection, hover states on buttons, and modal fade-ins.

Technical Implementation & Constraints

• Single-File Architecture: All HTML, CSS, and Vanilla JavaScript are bundled into a single file.
• Sandboxed Execution (Critical):
  • The application MUST operate without localStorage, sessionStorage, or cookies.
  • All state data must be held in-memory in a JavaScript object.
  • Users must be prompted to export their work to avoid data loss.
• Interactivity: Use standard mouse/pointer events (mousedown, mousemove, mouseup) to handle dragging nodes. Use SVG lines (<line> or <path>) for connections.
• No External Dependencies (Unless CDN): Use standard CDN links for icons (e.g., Lucide or FontAwesome) and fonts (Google Fonts). Do not use build-heavy frameworks (React/Vue).
• Modals: All alerts, confirmations, or property editing must be handled via custom DOM elements (divs) rendered within the page, not native browser alerts.
• Responsiveness: Use CSS Flexbox/Grid for layout. The canvas must resize to fit the viewport dynamically.