Gantt chart vs timeline diagram

简介 / Introduction

Gantt charts and timelines are two common visualizations in project management. Both PlantUML and Mermaid support these diagram types, but their syntax and output differ. This post compares the same example rendered in each engine.

PlantUML 版

PlantUML uses @startgantt for Gantt charts and the concise style or timeline keyword for timelines.

1
2
3
4
5
6
7
8
9
10
11
12

@startgantt
skinparam backgroundColor #FEFEFE
Project starts the 2026-10-01
[需求分析] as [REQ] lasts 5 days
[系统设计] as [DES] lasts 4 days and starts at [REQ]'s end
[开发实现] as [DEV] lasts 10 days and starts at [DES]'s end
[测试验收] as [TEST] lasts 3 days and starts at [DEV]'s end
[REQ] is colored in #LightBlue
[DES] is colored in #LightGreen
[DEV] is colored in #LightPink
[TEST] is colored in #LightYellow
@endgantt

PlantUML Gantt charts excel at precise dependency chains (starts at ...'s end) and are suitable for complex project plans.

Mermaid 版

Mermaid uses the gantt keyword and supports date-range task bars with status markers.

1
2
3
4
5
6
7
8

gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 开发
    需求分析       :done, req, 2026-10-01, 5d
    系统设计       :done, des, after req, 4d
    开发实现       :active, dev, after des, 10d
    测试验收       :crit, test, after dev, 3d

Mermaid’s Gantt syntax is more concise, with “done” / “active” / “crit” markers providing instant status visibility.

对比 / Side-by-side

小结 / Wrap-up

PlantUML Gantt charts offer powerful dependency and styling control for complex project plans; Mermaid Gantt charts are more concise and ideal for quick prototypes and simple schedules. Neither engine has a native “timeline” diagram type — PlantUML approximates it with concise style or manual drawing.