Gantt charts: task dependencies

简介 / Introduction

Gantt charts are one of the most widely used project management visuals, showing task start dates, durations, and dependencies. This tutorial covers how to draw Gantt charts with dependencies in both PlantUML and Mermaid.

PlantUML 版

@startgantt
Project starts 2026-01-01

[需求分析] is [Analyze requirements] lasts 5 days
[系统设计] is [Design architecture] lasts 4 days
[原型开发] is [Prototype] lasts 6 days
[评审通过] is [Review] lasts 2 days
[开发任务] is [Development] lasts 10 days
[测试验收] is [Testing] lasts 3 days
[上线部署] is [Deploy] lasts 2 days

[需求分析] --> [系统设计]
[系统设计] --> [原型开发]
[原型开发] --> [评审通过]
[评审通过] --> [开发任务]
[开发任务] --> [测试验收]
[测试验收] --> [上线部署]
@enduml

Mermaid 版

gantt
    dateFormat YYYY-MM-DD
    title Task Dependencies Example

    section Development
    Requirements       :done,    a1, 2026-01-01, 5d
    System Design      :done,    a2, after a1,   4d
    Prototype          :active,  a3, after a2,   6d
    Review             :         a4, after a3,   2d
    Development        :         a5, after a4,   10d
    Testing            :         a6, after a5,   3d
    Deployment         :         a7, after a6,   2d

对比 / Side-by-side

Feature	PlantUML	Mermaid
Init	`Project starts`	`dateFormat` + `title`
Task syntax	`[Name] is [desc] lasts N days`	`Task :key, date, dur`
Dependencies	`-->`	implicit `after key`
Task states	no built-in color	`done` / `active` / `crit`
Parallel tasks	multiple `-->` to same task	multiple `after X`

小结 / Wrap-up

Both engines render Gantt charts. PlantUML uses explicit --> arrows for dependencies, making it better for complex project graphs. Mermaid uses after to implicitly chain tasks, resulting in cleaner syntax for straightforward timelines. For critical-path visualization, PlantUML’s lines are more readable.