WarehouseFlow v2 — Feature Reference

Everything you can do with WarehouseFlow

A visual canvas for designing, analyzing, and animating warehouse workflows. Build process flows, find optimal paths, and share them with your team.

📦 Open Builder →

Tutorial Steps

Path Algorithms

Canvas Themes

∞

Custom Nodes

CSV

Open Format

Canvas & Editing

🖱

Drag & Drop Nodes

Drag any element from the left palette onto the canvas. Nodes auto-size to their label — short labels stay compact, long ones wrap gracefully up to a max width.

CanvasNodes

↖

Multi-Select & Group Drag

Shift-click nodes to add them to a selection, or drag a box on the canvas to select a region. Drag any selected node to move the whole group together while preserving relative positions.

NewCanvas

🔗

Connect Mode

Switch to Connect mode (or press C) and click a source node then a target node to draw a directed edge. Duplicate edges are prevented automatically.

CanvasEdges

⟳

Organize Workflow

Click Organize in the header to automatically arrange all nodes into a reverse-S (boustrophedon) layout. Wide workflows fold into rows that scroll comfortably downward. Animated smooth transition.

NewLayout

✋

Pan & Zoom

Scroll to zoom. Use Pan mode or hold Space and drag to pan from any mode without losing your current tool. Zoom controls in the bottom-right corner.

CanvasNavigation

↩

Undo / Redo

Full undo/redo stack with up to 80 history steps. Every node move, edge creation, deletion, or property edit is captured. Ctrl+Z / Ctrl+Y shortcuts.

Canvas

Nodes & Edges

🧩

Custom Node Types

Add any emoji + label as a permanent node type via the Nodes page. Custom types appear in the palette immediately and persist in nodes.csv.

Nodes

📋

Node Attributes

Each node stores fixed attributes (Sq Ft, Capacity/hr, Cost, Workers) plus unlimited custom key-value fields. All attributes are saved to CSV and used by the Path Finder for aggregated route summaries.

NewNodes

✏️

Inline Editing

Click any node to open its properties in the right panel. Edit label, icon, type, notes, and all attributes without a modal popup. Changes apply on Apply Changes.

Nodes

⚖️

Edge Weights & Labels

Assign a numeric weight and a text label to any edge. Set the global unit (minutes, meters, cost…) in the Path tab. Weights render as badges on the edge midpoint and drive Dijkstra calculations.

NewEdges

Path Finder

⚡

Dijkstra (Weighted Shortest Path)

Finds the minimum-weight path between two nodes using Dijkstra's algorithm. Falls back to weight=1 on unweighted edges. Results highlighted in amber on the canvas.

NewPath Finder

〰

BFS (Fewest Hops)

Finds the path with the least number of node hops using breadth-first search, ignoring weights. Results shown in cyan. Both algorithms run simultaneously so you can compare them side by side.

NewPath Finder

🗺

Canvas Node Picker

Click 🖱 Pick Nodes from Canvas to select source and target by clicking nodes directly instead of using dropdowns. Right-click any node for Path From Here / Path To Here shortcuts.

NewPath Finder

📊

Route Summary

Each path result shows a summary table: hop count, total weight, nodes in path, and the sum of every numeric attribute (sq ft, cost, capacity, custom fields) across all nodes on the route.

NewPath Finder

Flow Animation

📦

Multi-Package Flow

Animates one emoji package per edge simultaneously across the entire network (or just the highlighted path). Particles are staggered so they don't all depart at the same time. Speed scales with edge weight.

NewAnimation

🎯

Single Package — Sequential

One package travels edge-by-edge from a chosen start node, pausing briefly at each stop, then loops. Set the start node via dropdown or canvas click. Uses visibility gating so the package appears and disappears cleanly.

NewAnimation

🌈

Branch Color Tones

When a workflow has multiple source nodes or branching paths, each branch gets a different hue-shifted emoji tint (gold, green, blue, purple, pink) via SVG color filters. A legend appears in the sidebar. Single-path networks use the natural emoji color.

NewAnimation

🎨

Custom Flow Emoji

Change the animated package emoji to anything: 🚚 🛒 👷 ✈️ 📋 — or any emoji you choose. Changing the emoji while animation is running restarts it with the new character instantly.

Animation

Themes & UI

🎨

6 Canvas Themes

Dark grid (default), Plain black, Plain white, White grid, Black grid, and High-contrast (amber edges). Theme is saved to localStorage and restored on next visit. Edge colors automatically adapt to light/dark backgrounds.

NewUI

◧

Collapsible Sidebar Sections

Every sidebar section (Mode, Theme, Elements, Workflow) has a collapse toggle. The sidebar itself can be minimized to a 42px icon rail. The right panel also collapses to a sliver. All states persist across sessions.

NewUI

📐

Responsive Layout

5 responsive breakpoints: wide monitor (1440px+), standard desktop, small laptop (900–1023px), tablet landscape (768–899px — right panel overlays canvas), tablet portrait (600–767px — sidebar rows horizontally), and mobile (<600px).

NewUI

🗺

Minimap

A minimap in the bottom-left corner shows an overview of the entire workflow. Node colors match their type (green=inbound, blue=storage, amber=outbound…). Click anywhere on the minimap to pan the canvas to that location.

Canvas

Save, Export & Share

💾

CSV Persistence

Workflows are saved as plain CSV files on the server — no database required. Every node's position, attributes, and custom fields are stored. The format is human-readable and can be edited in any spreadsheet app.

Storage

🕓

Automatic Versioning

Every time you save over an existing workflow, the previous version is automatically snapshotted into a /versions/ subfolder. Browse and restore any version from the History tab in the right panel.

NewStorage

🔗

Shareable Read-Only URL

Click Share to get a URL like /workflow/name.csv that renders a fully interactive read-only view of the workflow — pan, zoom, minimap — with a banner indicating view-only mode. No login required.

NewShare

⬇

Export PNG / SVG / CSV

Export the current canvas as a high-resolution PNG (2× retina), a raw SVG, or download the workflow CSV. PNG and SVG capture the live canvas including path highlights and theme colors.

NewExport

Keyboard Shortcuts

UndoCtrlZ

RedoCtrlY

Temporary pan (hold)SpaceDrag

Delete selectedDelete

Cancel / back to selectEsc

Add to selectionShiftClick

Box selectDrag

Zoom in / outScroll

Right-click context menuRight Click

Tutorial next step→

CSV File Format

Column	Type	Description
id	`string`	Unique node identifier (auto-generated, e.g. `n1k3j2`)
type	`string`	Node type key matching a type in `nodes.csv` (e.g. `receiving`)
icon	`string`	Single emoji character displayed in the node box
label	`string`	Display label. Long labels wrap automatically; max width 280px
x	`number`	Canvas X position in logical pixels (saved on every move)
y	`number`	Canvas Y position in logical pixels (saved on every move)
notes	`string`	Optional annotation shown as a ✎ badge on the node
sq_ft	`number`	Square footage — aggregated in path summaries
capacity	`number`	Units per hour — aggregated in path summaries
cost	`number`	Operating cost — aggregated in path summaries
workers	`number`	Headcount — aggregated in path summaries
attrs	`JSON`	Custom fields as a JSON object e.g. `{"temp_zone":"cold","zone":"A"}`. Numeric values are auto-aggregated.

Edge columns: id, from, to, weight, label

What's Built

✓

Dynamic node sizing with text wrapping

Nodes auto-size to content using SVG getBBox measurement

✓

Multi-node selection + group drag

Shift-click, box select, move groups preserving relative positions

✓

Dijkstra + BFS path finder side by side

With canvas pick mode, right-click shortcuts, and attribute aggregation

✓

Emoji flow animation with branch color tones

Single sequential + multi-parallel modes, stream color assignment

✓

Organize workflow (S-layout)

Topological sort → boustrophedon row packing → smooth animation → fit to screen

✓

6 canvas themes with per-theme edge colors

Persisted to localStorage, arrowheads update to match

✓

Collapsible sidebar + panel minimize

5-breakpoint responsive layout from wide monitor to mobile

✓

Automatic workflow versioning

Snapshots on every save, restore from History tab

✓

Shareable read-only URLs + PNG/SVG export

No login required for viewers

✓

Interactive tutorial with spotlight

10-step tour, reopenable via ? button, persisted dismiss state

○

Node groups / subflows

Collapse a set of nodes into a single group node

○

Edge routing (curved / orthogonal)

Non-straight edge paths to avoid overlapping nodes

Everything you can do with WarehouseFlow

Ready to map your warehouse?