Everything you need to know about
Scenario Flow Planner

A free, browser-based tool for building mind maps, branching scenarios, flowcharts, org charts, and process diagrams. No sign-up, no server, completely private.

Launch App Free → Learn How To Use

Everything included, completely free

50+ templates, 8 diagram modes, rich node types, collaborative sharing — all in one file, zero cost.

🗂

7 Diagram Modes

Scenario, Mind Map, Logic Flowchart, Org Chart, Outline, Review, and Freeform Canvas. Switch modes instantly with no data loss.

📝

Rich Node Types

Standard nodes, sticky notes, review notes, shapes (15 types), org cards, image elements, video embeds, checklist nodes, and section frames.

🔗

Smart Connectors

5 curve types, 5 arrow styles, 3 dash patterns, auto-routing to nearest port, 8 port magnets per element, endpoint drag-to-reconnect.

📐

47 Built-in Templates

Scenario, mind map, logic, org chart, and 7 detailed compliance training templates covering harassment, GDPR, anti-bribery, whistleblowing, and more.

📷

Export Options

PNG (2× retina), SVG (connectors), JSON backup, Self-Contained JSON, Review JSON, and browser Print-to-PDF.

🔗

Shareable Links (No Server)

Click Share to generate a URL that encodes your entire diagram. Recipients open it in any browser — no account, no upload, fully private.

📱

Mobile Responsive

Fully responsive layout with a hamburger menu, collapsible sidebar, and touch pinch-to-zoom and pan support on iOS and Android.

🎨

Visual Customisation

Per-node colors, fonts, shapes, border styles, icons, banner images. Context toolbar for instant style changes. 12-color palette. Snap-to-grid.

💾

Auto-Save Locally

All data stays in your browser. Hit Save to store to localStorage. Export JSON for a portable backup you can load on any device.

🔍

Search & Find

Ctrl+F / ⌘F opens a find bar. Type to highlight matching nodes. Press Enter to cycle through results and centre each on screen.

80-Step Undo/Redo

Every action is reversible. Ctrl+Z to undo, Ctrl+Y or Ctrl+Shift+Z to redo. Up to 80 steps of history per session.

Presentation Mode

Full-screen canvas with all UI chrome hidden. Navigate nodes with ◀ ▶ on-screen buttons or ← → arrow keys. Press Esc to exit.

🤝

Collaboration (Passive)

Share a link with the full project encoded in the URL. Anyone who opens it can view and edit their own copy — no real-time sync needed for async review.

🔒

Lock Items

Lock any element to prevent accidental movement or resize. The quickbar lock/unlock button is visible on every selected item.

📋

Review & Comments

Add reviewer comments with severity levels (suggestion/minor/major/blocker) to any element. Filter to show only unresolved items. Export a review JSON.

🤖

AI Integration

Connect your own Claude, ChatGPT, or Gemini API key. Generate diagrams from a text prompt, expand a selected node with AI ideas, or summarise your map as an outline.

Six powerful diagram modes

Each mode is a different lens on the same canvas. Switch any time — your content stays.

🌿

Scenario

Branching decision trees with start, decision, action, outcome, and risk node types. Ideal for compliance training and e-learning.

🧠

Mind Map

Central topic with radiating branches. Tree-layout button auto-arranges branches. Best for brainstorming and ideation.

Logic / Flowchart

Proper flowchart symbols: process, decision, terminal, data I/O, database, document, cylinder. Auto-connects with elbow lines.

🏢

Org Chart

Hierarchical org cards with name, designation, department, photo, email, and phone. Auto-arrange in top-down, left-right, or right-left layout.

📋

Outline

Text-only outline view of all nodes. Indent/outdent to set hierarchy. Export as a plain-text outline file. Useful for structured writing.

🔴

Review

Overlay review notes and comments on any diagram. Track open/resolved status. Export a review report. Filter to show only unresolved items.

How to use Scenario Flow Planner

Get a complete diagram in under five minutes.

1

Choose a mode or load a template

Select Scenario, Mind Map, Logic, or Org from the top mode switcher. Then open the sidebar Templates section and choose a ready-made template — or start blank.

2

Add elements

Click the + button on the tool rail (left side) for the Quick Add menu — or use keyboard shortcuts: N for a node, T for a text box. Drag from the canvas to any empty area to create a node inline.

3

Connect elements

Hover over any element to see 8 blue port dots (N/S/E/W + 4 corners). Click any port dot and drag to another element's port dot to create a connector. Or press C for connector mode, click source, then target.

4

Edit content

Double-click any element to open the floating editor. Use the Content / Style / Size / Actions tabs. Changes apply instantly. The context toolbar above a selected element gives quick access to color, shape, font size, bold, and italic.

5

Style connectors

Hover or click any line to reveal the mini-toolbar: label, color, curve type (Bezier/Smooth/Straight/Elbow/Step), arrow end style, and dash style. Double-click a line to add or edit its label directly.

6

Save and share

Press 💾 Save to store locally. Click 🔗 Share to copy a shareable URL (no server needed). Use ↓ Export for a JSON backup or 📷 PNG for an image.

Tip: Use Ctrl+Z freely — you have 80 undo steps. Use Ctrl+F to search nodes by text. Press Esc to deselect everything and return to Select mode.

Node types and when to use them

Every element type is available from the Quick Add menu (+ button on the tool rail) or the sidebar Add Items section.

Node (default)
Decision
Outcome / Action
Risk / Warning
Sticky Note
Review Note
Shape (15 types)
Org Card
Image
Video Embed
Checklist Node
Section / Frame
Logic mode shapes: Rectangle (process) · Diamond (decision) · Oval (terminal/start/end) · Parallelogram (data I/O) · Cylinder (database) · Document · Trapezoid (manual input) · Circle (junction). Logic mode automatically uses elbow-style connectors to match standard flowchart conventions.

Keyboard shortcuts

Master these and you'll work 3× faster.

ActionShortcutNotes
Add nodeNPlaces at canvas centre
Add text boxTDashed-border text element
Select toolVReturns to pointer mode
Connector toolCClick source → click target
Draw / Pen toolDFreehand sketch; pick color & width
Laser pointerLGlowing dot for presenting
Edit selected itemEOpens floating editor
Delete selectedDelWorks on items and lines
UndoCtrl+Z80-step history
RedoCtrl+Y or Ctrl+Shift+Z
CopyCtrl+CCopies selected item
PasteCtrl+VPastes with 40px offset
Find / SearchCtrl+FEnter to cycle results
Multi-select addShift+click or Ctrl+clickAdds item to group
Deselect all / EscapeEscAlso exits connector mode
Zoom in+ or =Also scroll wheel
Zoom outAlso scroll wheel
Reset zoom0Returns to 100%
Presentation next / In presentation mode
Presentation prev / In presentation mode
Exit presentationEsc

50+ built-in templates

Every template loads instantly from the sidebar. Switch mode first to see the relevant template list.

📌 Scenario Templates (17)

Scenario

Blank Scenario

Four-node starter: start → decision → positive path + risky path.

Compliance

Workplace Harassment

Manager response to witnessed bullying. Correct vs. informal handling. Tribunal risk branch.

Compliance

Data Security Breach

Accidental customer data exposure. GDPR 72-hour notification pathway vs. informal cover-up.

Compliance

GDPR Subject Access Request

Full SAR handling flow. ICO complaint branch if ignored. 30-day deadline pathway.

Compliance

Anti-Bribery Gift Policy

Supplier gift over £50 threshold. Return & log vs. accept. Bribery Act 2010 consequences.

Compliance

Conflict of Interest

Procurement panel member discovers spouse owns a bidding company. Declare vs. proceed.

Compliance

Social Media NDA Breach

Employee posts confidential deal on LinkedIn. Immediate escalation vs. quiet handling.

Compliance

Whistleblowing — Fraud

Suspected manager fraud. Report via protected channel (PIDA 1998) vs. do nothing.

Sales

Sales Pricing Objection

"Your price is too high." Explore value vs. discount first. Value-based close pathway.

Management

Performance Feedback

Manager using SBI model vs. vague criticism. Coaching plan vs. defensive breakdown.

Cybersecurity

Phishing Awareness

Suspicious IT support email. Report to security vs. click the link. Incident response.

Management

Workplace Conflict

Team members stop collaborating. Individual 1:1s vs. public confrontation.

🧠 Mind Map Templates (10)

Strategy

SWOT Analysis

Strengths, weaknesses, opportunities, threats with example sub-branches for each quadrant.

L&D

Course Design Map

Audience → objectives → modules → activities → assessment → measurement (Kirkpatrick).

Project

Project Kickoff Map

Goals, scope, timeline, team roles, budget, risks, dependencies, communication plan.

Analysis

Root Cause Analysis

Fishbone-style: people, process, tools, environment. Root causes → corrective actions.

Innovation

Brainstorm Board

HMW questions, wild ideas, constraints, experiments, MVP definition, next steps.

Stakeholders

Stakeholder Map

Power/interest grid with engagement strategies per quadrant.

⬡ Logic Flow Templates (10)

Process

Approval Workflow

Request → validation → manager approval → director escalation → approved or declined.

IT

Issue Escalation Flow

L1/L2/L3 severity triage → resolution → root cause analysis → ticket close.

HR

Employee Onboarding

Offer accepted → remote/on-site track → 30-60-90 day plan → probation review.

L&D

Content Review Process

Draft → ID review → revisions → design → QA → publish to LMS. Retest loop.

IT

Data Validation Flow

File format → schema validation → deduplication → load to data warehouse.

IT

Incident Response

Detect → severity assessment → mitigation → root cause analysis → close.

Export and sharing options

Get your diagram out in the format you need.

📷

PNG Export

Exports the full canvas as a high-resolution 2× retina PNG. Click 📷 PNG in the toolbar. Requires the html-to-image library to load (needs internet connection first time).

🖨️

Print to PDF

Use your browser's built-in Print dialog (Ctrl+P / ⌘P). The diagram fills the page with all UI chrome hidden. Works in all modern browsers.

📁

JSON Backup

Click ↓ Export for a portable .json file. Import it on any device with ↑ Import. This is the safest long-term backup format.

📦

Self-Contained JSON

Click ↓ Self-Contained to embed all remote image assets into the JSON as base64. The file is self-contained — opens offline with no broken images.

🔗

Share Link

Click 🔗 Share to copy a URL that encodes your entire project. No server required — the state is compressed into the URL hash using LZ compression. Share via email, Slack, or any messaging tool.

📋

Review Export

Click 📋 Review to export all reviewer comments with severity, status, and timestamps as a structured JSON file — ready for tracking in your project management tool.

About Share Links: The URL may be long (several thousand characters) for complex projects. Most modern browsers and link shorteners handle this fine. For very large projects with embedded base64 images, use Export JSON instead — base64 images are automatically stripped from share URLs to keep them manageable.

AI-powered features

Connect your own API key and let AI accelerate your diagramming.

Generate from Prompt

Describe your scenario, process, or topic in plain text. The AI creates a structured diagram with nodes and connections automatically placed on the canvas.

🔍

Expand a Node

Select any node and ask the AI to expand it with sub-ideas, consequences, action steps, or related branches. New nodes appear connected to the selected one.

📄

Summarise to Outline

Convert your entire diagram into a structured text outline — useful for turning a brainstorm or scenario into a document draft, course outline, or presentation deck.

🔑

Bring Your Own Key

Supports Claude (Anthropic), ChatGPT (OpenAI), and Gemini (Google). Your API key is stored only in your browser's localStorage — never sent to any server except the AI provider's own API.

Privacy note: Your API key and diagram content are sent directly from your browser to the AI provider's API (Anthropic, OpenAI, or Google). Nothing passes through any intermediate server. You can clear your key at any time from the AI panel.

Frequently asked questions

Can I draw freehand on the canvas?
Yes. The Draw / Pen tool on the left tool rail (shortcut D) lets you sketch freehand in any of six colors and a 1–14px stroke width. The eraser removes individual strokes, and your drawings pan, zoom and save with the project. There is also a Laser Pointer (shortcut L) that shows a glowing dot while presenting without leaving a permanent mark.
Can I change the colors or theme of my mind map?
Yes. Open the theme picker (🎨) to choose a Canvas Theme (Grid, Paper, Big Dots, Mint, Blueprint or Plain), toggle dark mode, or apply a one-click Node Color Palette — Classic, Pastel, Vibrant, Ocean, Forest, Sunset or Slate — which recolors every node in a coordinated sequence.
Can I crop or adjust images?
Yes. Select an image node and click the crop button (⛶) in its quickbar to open Crop & Adjust. You can zoom, drag to reposition, switch between fit and fill, and tune brightness, contrast, saturation and grayscale with a live preview.
Can I turn my mind map into slides or a document?
Yes. Click the ✦ Output button to convert your map into a Slide Outline, Agenda, Project Plan, Checklist or Summary Brief, then copy the text or download it as a .txt file. You can also export to PowerPoint (PPTX) and Word (.doc) directly from the toolbar.
Is Scenario Flow Planner completely free?
Yes, 100% free with no limits, no ads, and no account required. The entire app runs in your browser as a single HTML file.
Do I need an internet connection?
After the first load (which fetches CDN libraries), the app works offline. Your data never leaves your device. The PNG export and GIF search features require internet to load their respective libraries/APIs.
How do I save my work?
Click 💾 Save to store to browser localStorage (persists across sessions on the same device and browser). Click ↓ Export to download a JSON file you can import on any device. The 🔗 Share button creates a URL containing your full project — bookmark it or share it.
Can multiple people edit the same diagram at the same time?
True real-time collaboration requires a server — which this app intentionally does not use. The best workflow for team collaboration: one person edits, uses Share to generate a URL, sends it to collaborators, they open their own copy and make changes, then share their URL back. It's async but fully functional without any infrastructure.
How many nodes can the canvas hold?
There is no hard limit. Practical performance depends on your device. Most projects work smoothly up to a few hundred nodes. Very large diagrams (500+ nodes) may see some rendering lag on older hardware.
Can I import from Miro, Lucidchart, or other tools?
Not directly — each tool uses a proprietary format. You can import images from any tool via the asset panel, or paste structured text and use the AI feature to generate a diagram from it.
Can I embed images inside nodes?
Yes. In the floating editor (double-click a node), go to the Content tab and paste a Node Image URL. Click 📷 Browse to search and pick from the built-in image library. The image appears as a banner at the top of the node card.
How do I add icons or emojis to nodes?
Double-click a node to open the editor, go to Content tab, and type any emoji in the Icon / Emoji field. It appears before the node title. You can also use it from the sidebar Add Items section's icon picker.
What happens to my data if I clear my browser cache?
Data stored via the Save button (localStorage) will be lost if you clear site data. Always export a JSON backup before clearing your browser. Share links are self-contained — they don't depend on localStorage.
Is there a mobile app?
No dedicated mobile app, but the web app is fully responsive. Open it in Safari (iOS) or Chrome (Android), tap the browser menu and choose "Add to Home Screen" to install it as a Progressive Web App — it will open full-screen like a native app.
Can I use my own AI API key?
Yes. Click the 🤖 AI button in the toolbar, select your provider (Claude, ChatGPT, or Gemini), and enter your API key. It's stored only in your browser — never sent to any intermediate server. You can use it to generate diagrams from prompts, expand nodes, or summarise your map.
How do I print or export as PDF?
Press Ctrl+P (or ⌘P on Mac) to open your browser's print dialog. All UI chrome is automatically hidden for print. Choose "Save as PDF" as the destination. For best results use Chrome or Edge. Alternatively, use the 📷 PNG button for a raster image export.

Purpose-built for compliance and L&D teams

The most detailed compliance scenario templates in any free diagramming tool.

⚖️

Legal references built in

Compliance templates include references to GDPR Articles 33–34, Bribery Act 2010, PIDA 1998, Fraud Act 2006, and Employment Tribunal procedures.

🎓

E-learning ready

Branching scenario mode is designed to mirror SCORM-style decision trees. Export as JSON and import into your authoring tool, or use the presentation mode for direct delivery.

🔴

Stakeholder review workflow

Use Review Notes and Comments to gather SME feedback directly on the diagram. Filter to unresolved comments. Export a review report for sign-off tracking.

📊

Logic flow validation

Use Logic mode to map actual policy workflows — approval chains, escalation trees, exception handling — then validate them with subject matter experts before publishing.

Latest features — the newest update

Drawing, presenting, theming, layers and image editing — all free, no sign-up required.

✏️

Freehand Draw & Eraser

Sketch directly on the canvas with the Draw / Pen tool (shortcut D). Pick from six pen colors and a 1–14px width slider. The eraser removes individual strokes. Drawings pan and zoom with the canvas and save with your project.

🔦

Laser Pointer

A glowing red dot (shortcut L) follows your cursor while presenting, drawing attention without leaving any permanent mark — ideal for live walkthroughs and remote demos.

🎨

Canvas Themes

Switch the whole canvas look from the 🎨 theme picker: Grid, Paper, Big Dots, Mint, Blueprint, or Plain — plus a full dark mode. Your choice is remembered across sessions.

🌈

Node Color Palettes

One click recolors every node in a coordinated sequence. Choose Classic, Pastel, Vibrant, Ocean, Forest, Sunset, or Slate to instantly restyle a whole mind map to match your brand or mood.

Image Crop & Adjust

Select an image node and click the crop button to zoom, drag-to-reposition, toggle fit/fill, and fine-tune brightness, contrast, saturation and grayscale with a live preview. Hide the caption for a clean photo tile.

Layer Ordering

Control stacking from the context toolbar: bring to front, bring forward, send backward, or send to back. Overlapping nodes, shapes and images sit exactly where you want them.

Smart Output — Map to Document

Click ✦ Output to convert your map into a Slide Outline, Agenda, Project Plan, Checklist, or Summary Brief. Copy the text or download it as a .txt — turn a brainstorm into a deck or doc in seconds.

Text Alignment & Lock

Align node text left, center, or right from the context toolbar, and lock any element to prevent accidental moves or resizes. Multi-select with Shift+click to move groups together.

Shaped-Node Text Fit

Apply a clip-path shape — diamond, hexagon, star, triangle, arrow, parallelogram, trapezoid or document — and the text now centers and auto-shrinks to stay neatly inside the shape, never spilling outside.

Also available: Gantt chart mode with dependencies and milestones, a searchable Template Gallery (50+ templates), Decision Matrix nodes, FreeMind (.mm) & OPML import, PowerPoint (PPTX) and Word (.doc) export, node status indicators, and 80-step undo/redo.
About external template sources: Sites like XMind, MindMeister, and Miro require a login and use proprietary formats that cannot be fetched directly. The best workflow: download a .mm file from FreeMind's site or search GitHub for .mm files, then use ⬇ .mm Import (toolbar) or the Gallery's "Import .mm / OPML" card to bring it in.
About real-time collaboration: True simultaneous editing requires a WebSocket server — this app deliberately has no server. The best async workflow: use 🔗 Share to send a URL containing the full diagram. The recipient opens it, makes changes, and shares their URL back. No accounts, no infrastructure.