📖 What is this tool?
A Gantt chart maps project tasks against a timeline, showing start dates, durations, dependencies and milestones at a glance. This builder uses Mermaid Gantt syntax: you define sections, tasks and date ranges, and the chart renders live. Choose from Development Project, Sprint Plan and Product Launch templates, or write your own. Perfect for sprint planning, roadmap presentations and release tracking. Everything runs in your browser — your project data is never uploaded.
💡 Example
Input
gantt
title Project
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2026-01-01, 7d
Output
Live Gantt chart with colored task bars and timeline
🛠️ Common Use Cases
- Plan software development sprints
- Create project timelines for stakeholders
- Visualize task dependencies
- Track milestone dates
- Build product launch roadmaps
📝 Mermaid Gantt Syntax Reference
dateFormat YYYY-MM-DD — set the date format (required)title Project Name — chart title shown at the topsection Phase Name — group tasks under a labeled sectionTask name :id, start, duration — define a task with optional IDTask :after id1, 3d — start this task after another finishes (dependency)Milestone :milestone, m1, 2026-07-01, 0d — zero-duration markerTask :active, t1, 2026-06-10, 5d — mark a task as currently activeTask :done, t2, 2026-06-01, 3d — mark a task as completedTask :crit, t3, 2026-06-15, 2d — mark a task as critical path
⚠️ Common Mistakes
- Wrong date format — if your
dateFormat says YYYY-MM-DD but you write 06/15/2026, the chart breaks silently
- Missing commas between task fields — each field (status, id, start, duration) must be comma-separated
- Circular dependencies — task A after B and B after A creates an infinite loop; Mermaid will not render it
- Forgetting
section — tasks without a section header still render but are harder to read in larger charts
❓ Frequently Asked Questions
How do I create task dependencies? ▾
Use "after taskId" to start a task after another: Build :a2, after a1, 14d. This automatically positions the task to start when the dependency finishes.
How do I add milestones? ▾
Add milestone, 0d as the duration: Launch :milestone, after testing, 0d. Milestones appear as diamond markers on the timeline.
What date formats are supported? ▾
Gantt charts support YYYY-MM-DD, DD/MM/YYYY and other formats specified with dateFormat. YYYY-MM-DD (ISO format) is recommended for clarity.
Can I use relative durations instead of dates? ▾
Yes — use duration notation like 3d (3 days), 1w (1 week). Combine with "after" to chain tasks: Task B :after taskA, 5d starts 5 days after Task A finishes.
How do I highlight the critical path? ▾
Add the :crit modifier to critical tasks. They render in red by default, making the critical path visually distinct from other tasks.
Can I show weekends or holidays? ▾
Use excludes weekends to skip Saturdays and Sundays from the timeline. You can also exclude specific dates: excludes 2026-07-04.
🔒
Your data stays private. All processing happens entirely in your browser. Nothing is ever sent to our servers. You can use this tool offline after the page loads.