Enter tasks, get a real timeline with phases, progress, and weekend shading
| Type | Name | Meaning | Example |
|---|---|---|---|
| FS | Finish-to-Start | B starts when A finishes | Design finishes, then build starts |
| SS | Start-to-Start | B starts when A starts | Testing begins as coding begins |
| FF | Finish-to-Finish | B finishes when A finishes | Docs end when the build ends |
| SF | Start-to-Finish | B finishes when A starts (rare) | Old system retires as new one goes live |
Finish-to-Start covers roughly 90% of real project links. If you can only state one relationship per task pair, state that one.
| Phase | Share of Calendar | What Runs Concurrent |
|---|---|---|
| Discovery & planning | 10–15% | Stakeholder interviews, requirements |
| Design | 15–20% | Wireframes → prototypes → review |
| Build | 35–45% | Frontend, backend, content prep |
| Test & fix | 15–20% | QA cycles overlap late build |
| Launch & stabilize | 5–10% | Deploy, monitor, hotfixes |
Each task carries four numbers and a phase: when it starts (day offset from the project start), how long it runs, how complete it is, and which phase it belongs to for color. The chart lays one row per task on a calendar grid, shades weekends, marks the project start date on the axis, and draws a progress overlay inside each bar. Everything renders as SVG, so the download is a clean vector you can drop into a slide deck or spec.
Start with your milestone list, then break each milestone into tasks of one to five days; longer bars hide slippage. Enter tasks top to bottom in kickoff order, using the start-day column to shift things later or run them in parallel. Phases exist for color and legend, so use them consistently. When a client asks what a one-week delay does, move the affected bars and watch the finish date move with them.
The sample project is a realistic website relaunch: discovery on days 0–4, design 3–12 overlapping discovery's tail, build 10–32, content 14–30 in parallel with build, QA 28–38, and launch 38–41. Total: 42 calendar days. Notice the overlaps: content and build share two weeks, which is why the project is 42 days and not the 60 a straight sum would suggest. That overlap-finding is the entire value of the chart.
Scheduling anything where tasks run over time: seeing what happens when, which tasks overlap, where the critical path sits, and what a delay in one task pushes back downstream. It answers the question a task list can't: given all this work, when does the project actually finish?
Estimate in the units you actually track (days for most projects), then add buffer to the tasks with external dependencies, since those slip most. A practical default from project management practice: take your honest estimate, and if the task involves anyone outside your team, add 50 percent.
The longest chain of dependent tasks from start to finish. If any task on that chain slips a day, the whole project slips a day, while tasks off the chain have slack. Most Gantt tools highlight it; on paper you find it by tracing dependency arrows and looking for the chain with zero room.
Yes. The Download SVG button gives you a vector file that scales cleanly into slides, docs, or design tools, and your browser's print dialog can print the page directly. The chart also re-renders on every edit, so what you see is always current.
It draws the timeline view: bars, phases, progress, and calendar context. It doesn't draw dependency arrows, which keeps it fast and simple. If you need dependency logic and leveling, you need a full project management tool; if you need a clear chart to share, this is it.