How do I make a Gantt chart online for free?

Start with gantt, set a dateFormat, then list tasks under a section as 'Name :id, start, duration' – e.g. Research :a1, 2026-01-01, 7d. The timeline renders instantly.

How do I make a task depend on another task?

Use 'after ' instead of a start date, e.g. Wireframes :a2, after a1, 5d, so the task starts when the referenced task finishes.

Can I highlight a critical task?

Yes, add 'crit' before the task id, e.g. Go live :crit, b1, after a2, 1d, to mark it as a critical-path task.

Gantt chart maker

Plan project timelines by listing tasks, sections, durations and dependencies as simple text. Diagram.RS renders an interactive Gantt chart live using Mermaid syntax – useful for project plans and roadmaps.

Diagram code

Preview

Theme

Default

Try an example

How to make a Gantt chart online

Start with gantt and set a dateFormat, e.g. YYYY-MM-DD.
Group tasks under section headings and list each task with an id, start date and duration.
Use after <id> to chain tasks, and crit to highlight critical-path tasks.
Export the timeline as SVG or PNG for your project plan.

Gantt chart FAQ

How do I make a Gantt chart online for free?: Start with gantt, set a dateFormat, then list tasks under a section as 'Name :id, start, duration' – e.g. Research :a1, 2026-01-01, 7d. The timeline renders instantly.
How do I make a task depend on another task?: Use 'after <id>' instead of a start date, e.g. Wireframes :a2, after a1, 5d, so the task starts when the referenced task finishes.
Can I highlight a critical task?: Yes, add 'crit' before the task id, e.g. Go live :crit, b1, after a2, 1d, to mark it as a critical-path task.

More diagram tools

Diagram maker home Flowchart maker Sequence diagram tool ER diagram tool Mermaid live editor