ProjectFlow/User Guide
Back to app

ProjectFlow User Guide

Welcome! ProjectFlow is a Gantt-chart project planner that works the way you'd expect Microsoft Project to: a task spreadsheet on the left, a visual timeline on the right, and automatic scheduling that keeps everything in sync as you make changes. This guide walks through everything you can do with it.

No account, no install, no setup — everything lives in your browser and saves automatically as you go.

Table of Contents

The Basics

When you open ProjectFlow, you'll see a sample project already loaded so you can poke around before building your own. The screen is split into three areas:

  1. Top bar — your project's name (click it to rename) and a live summary (task count, how many are on the critical path, overall % complete).
  2. Task grid (left) — a spreadsheet of every task: ID, name, start/end dates, duration, % complete, predecessors, and assigned resources.
  3. Gantt chart (right) — the same tasks drawn as bars along a timeline, scrolling in sync with the grid.

Everything you do in one side is instantly reflected in the other.

The Toolbar

Button What it does
New Clears everything and starts a fresh, empty project. Asks for confirmation first.
Import Loads a project from an .xml (MS Project format) or .csv file.
Export Downloads your current project as .xml or .csv.
Add Task Inserts a new task after whatever's selected (or at the end, if nothing's selected).
Delete Removes the selected task(s) — and any of their subtasks. Asks for confirmation.
Indent Makes the selected task a subtask of the one above it.
Outdent Promotes the selected task back up a level.
Critical Path Toggles red highlighting on tasks that directly determine your project's finish date.
Resources Opens the dialog for managing your pool of people/roles.
Day / Week / Month Changes how zoomed-in the Gantt chart timeline is.

Delete, Indent, and Outdent are only clickable when you've got at least one task selected.

Working with Tasks

Selecting a task — just click its row. The row highlights, and its bar on the Gantt chart gets a blue outline so you can spot it at a glance.

Adding a task — click Add Task. It's inserted right after your current selection, inheriting its indent level and picking up right where the previous task's timeline left off. If nothing's selected, it's added to the end of the list.

Deleting a task — select it and click Delete. If it has subtasks underneath it, they're removed too, and any other task that depended on it has that reference cleaned up automatically so you're never left with a dangling predecessor.

Organizing with Indent / Outdent — this is how you build the outline structure of your project (phases containing tasks, tasks containing sub-tasks). Select a task and click Indent to tuck it under the task above it — it becomes a subtask, and the parent automatically turns into a "summary" task: a folder icon, bold text, and a bar that rolls up the dates and % complete of everything underneath it. Outdent reverses this.

Milestones — give any task a duration of 0 and it automatically becomes a milestone: it renders as a small diamond on the Gantt chart instead of a bar, marking a single point in time (a launch, a sign-off, a deadline) rather than a span of work.

Editing Task Details

There are two ways to edit a task, depending on how much you want to change at once.

Quick inline edits

Double-click any cell in the grid — Name, Start, End, Duration, % Complete, or Predecessors — and it turns into an editable field right there. Press Enter to save, or Escape to back out without changing anything.

Full task editor

Click the little pencil icon at the start of any row to open the Task Details panel. This is the place to edit everything about a task in one go, including two things you can't get to inline:

Dependencies (Predecessors)

The Predecessors column tells ProjectFlow which tasks must happen before a given task can start. This is what powers automatic scheduling: change an earlier task's dates, and everything downstream shifts to match.

Basic dependency — type the ID of the task it depends on, e.g. 3. Task 3 must finish before this one can start.

Lag and lead time — real projects aren't always back-to-back. You can add a buffer or an overlap right in the predecessors field:

Creating a dependency by dragging — on the Gantt chart, hover over the right edge of a task's bar until you see a small circular handle, then drag it down (or up) to another task's row and let go. The link is created instantly, with no lag by default — add one afterward by editing the Predecessors field if needed.

The Gantt Chart

The chart is fully interactive, not just a picture:

A quick note on how dragging interacts with dependencies: if a task has a predecessor, you can still drag it later — that's allowed, and it just creates slack in the schedule. But you can't drag it earlier than its predecessor allows; it'll snap back to the earliest valid date. This mirrors how real scheduling works — a dependency is a hard floor, not a suggestion.

Switch between Day, Week, and Month views from the toolbar depending on whether you need fine detail or a big-picture view of a long project.

The Critical Path

The critical path is the chain of tasks that directly controls your project's finish date — if any one of them slips, your whole project slips with it. Tasks not on the critical path have some built-in slack (room to move without affecting the deadline).

ProjectFlow recalculates this automatically every time you change a date, duration, or dependency, and highlights critical tasks in red (both their grid row's dates and their Gantt bar) whenever the Critical Path toggle in the toolbar is on. Toggle it off if the red is distracting and you just want to focus on the schedule itself.

Resources

Click Resources in the toolbar to open the resource pool — a simple list of names and roles (e.g. "Alice Chen, Project Manager"). Add as many as you need; remove one and it's automatically un-assigned from every task that had it.

To assign resources to a specific task, click its Resources cell in the grid — a small checklist pops up right there letting you pick anyone from the pool. You can also assign resources from the Task Details panel (pencil icon).

Selecting Multiple Tasks

You can select more than one task at a time to indent, outdent, or delete them all in a single action:

Indenting a multi-selection processes tasks top-to-bottom, so selecting a block of sibling tasks and hitting Indent groups them all together under whatever's above them — exactly as if you'd indented each one by hand, in order.

Resizing Columns

If a column's too narrow (or too wide), just drag the thin divider on the right edge of its header — hover near the border and your cursor will change to a resize icon. Your column widths are remembered, so they'll still be the way you left them next time you open the project.

Saving Your Work

ProjectFlow saves automatically to your browser's local storage every time you make a change — there's no save button, and nothing to lose if you close the tab by accident.

A couple of things worth knowing about this:

Importing & Exporting

Use Export in the toolbar to download your project as:

Use Import to load a project back in from either format. This replaces whatever's currently open, so export first if you want to keep it.

One nuance worth knowing: if you'd manually dragged a task later than its dependency strictly required (creating some slack), that specific adjustment doesn't round-trip through export/import — a freshly imported project resolves every dependent task to the earliest date its predecessors allow. Everything else (dates for tasks with no dependencies, durations, hierarchy, resources, notes) comes back exactly as you left it.

Tips & Troubleshooting