How to Create a Gantt Chart in 5 Minutes (Step-by-Step, Free Tool)
Five minutes. No signup. No download. By the end of this post, you'll have a printable Gantt chart ready to share. Here's the entire walkthrough.
-->What you'll build
A 10-task project schedule with:
- Working-day duration math (weekends excluded)
- Predecessor chains (B starts when A finishes)
- Auto project root (from Project Title) that rolls up all task dates
- Auto-assigned colors by Indent 1 group
- A clean 3-row date header and dependency arrows
We'll use GanttBuilder — a free browser tool with no signup. Open it in another tab now.
Step 1 — Open the tool (30 seconds)
Go to https://aistory.antlog.kr/p/gantt-builder-tool.html. You'll see four sections:
- Toolbar at the top — Load Sample, Save CSV, Export HTML, etc.
- Project panel — title, start date, current date
- Tasks editor — the spreadsheet-like row table
- Preview — the live Gantt chart
Click Clear in the toolbar to start with a blank slate. Confirm the dialog.
Step 2 — Set your project info (30 seconds)
In the Project panel:
- Title: enter your project name, e.g., "Website Redesign Q1 2026"
- Project Start: pick the date the project begins
- Current Date: pick today (used for the red "today" line)
- Header Interval: leave at 3 for projects under 4 months. Use 7 for longer.
Step 3 — Add your first task (30 seconds)
Click + Add Task. A new row appears with placeholder values.
Fill in:
- Task Name: "Kickoff meeting"
- Duration: 1 (working day)
- Predecessor: leave blank (this is the first task — it starts on the project start date)
- Phase: removed — colors are auto-assigned by Indent 1 task position. Tutorial inputs no longer need a Phase column.
Watch the chart update — your first bar appears.
Step 4 — Add a chain of dependent tasks (1 minute)
Click + Add Task four more times. Fill in:
| Task | Duration | Predecessor |
|---|---|---|
| Requirements gathering | 5 | 2 |
| Wireframes | 3 | 3 |
| Visual design | 5 | 4 |
| Client review | 3 | 5 |
Each task automatically schedules itself based on its predecessor. Weekends are skipped.
Notice that Predecessor is the row NO of the preceding task. Task 3 ("Requirements gathering") depends on task 2 ("Kickoff meeting"). The arrows draw themselves.
Step 5 — Add parallel work (1 minute)
Real projects rarely run in pure sequence. Let's add two parallel tracks that both depend on the design approval:
| Task | Duration | Predecessor |
|---|---|---|
| Frontend development | 15 | 6 |
| Backend development | 12 | 6 |
| Integration testing | 5 | 7,8 |
| Launch | 2 | 9 |
The trick is in the Integration testing row — its Predecessor is 7,8 (comma-separated). That means "wait until BOTH tasks 7 and 8 are done."
Look at the chart: frontend and backend bars overlap (parallel), then integration testing starts after the later of the two finishes.
-->Step 6 — Project Title and Sub-Summaries (auto)
You don't have to create a manual root task — the tool auto-injects a project umbrella from your Project Title in Settings.
- Set Project Title in the Project Settings panel (e.g., "Website Redesign")
- All your tasks remain at Indent 1+ — no Indent 0 row needed
- The virtual root automatically rolls up
min(start)andmax(finish)from your tasks - The Project End and Working Days fields in Settings show this rollup live
To create a sub-summary (e.g., "Design Phase" containing 3 sub-tasks), simply indent the sub-tasks one level deeper using the + button. The parent automatically becomes a Summary row with auto-rolled-up dates and locked duration/start/finish inputs.
Step 7 — Verify and export (30 seconds)
Look at the chart. You should see:
- A slim navy "Website Redesign" bar at the top, spanning the whole project
- 10 colored bars below, organized by phase
- Light gray weekend shading
- Arrows showing dependencies
- A red dashed "today" line (if today is within the project span)
If something looks off, scroll back through the editor and fix the offending row. The chart updates as you fix.
When you're satisfied, click Export HTML. A single self-contained HTML file downloads. Open it — your chart, exactly as you see it, ready to share or embed.
Step 8 — Share or print
You now have three ways to use the chart:
- Send the HTML file by email. Recipients double-click to view; no software needed.
- Print to PDF via the toolbar's Print / PDF button. Use A3 landscape for best results.
- Embed in your blog with an
<iframe>— see the embedding guide.
Time check
If you followed along, you spent roughly:
- 30s — opening the tool
- 30s — project setup
- 30s — first task
- 2 min — adding remaining tasks and dependencies
- 1 min — summary row and indenting
- 30s — verifying and exporting
About five minutes for a polished 10-task chart with proper dependency math. Compare with the same exercise in Excel — you'd still be wrestling with conditional formatting.
Common gotchas
Tasks aren't lining up where I expect
The most common cause: a typo in the Predecessor field. Check the NO column — predecessors reference NO values, not row positions.
The chart is empty
You might have set every task's duration to blank. Only Summary rows should have blank durations.
Summary row isn't aggregating
Make sure the children are at a higher Indent value than the summary. Indent 0 = root, Indent 1 = child, Indent 2 = grandchild.
I made a mess — start over?
Use the Clear button. Or undo via your browser's back button (the auto-save reloads previous state).
What to learn next
- How working days are calculated — why the math matters
- Mastering task dependencies — beyond simple FS chains
- 10 best free Gantt tools — when to use GanttBuilder vs. alternatives