Timelines: Sections and Time Periods

简介 / Introduction

Timeline diagrams are commonly used to visualize project milestones, historical events, or phases in a business process. Both PlantUML and Mermaid support timeline syntax, with Section and Period grouping to improve readability. This article compares their syntax and rendering.

PlantUML Version

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@startuml
timeline Project X Timeline
:Initiation Phase;
+2026-01 ~ 2026-03
Project kickoff
Requirements gathering
:Design Phase;
+2026-04 ~ 2026-06
Architecture design
UI/UX mockups
:Development Phase;
+2026-07 ~ 2026-09
Sprint 1 to Sprint 3
:Launch Phase;
+2026-10
Production deployment
@enduml

PlantUML uses the timeline keyword, with events written after colons :, and time period labels prefixed with +. Sections are defined with :Section Name; statements, creating clear visual groupings.

Mermaid Version

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

timeline
    title Project X Timeline
    2026-Q1 : Kickoff
        : Requirements
        : Planning
    2026-Q2 : Design
        : Architecture
        : Mockups
    2026-Q3 : Development
        : Sprint 1
        : Sprint 2
        : Sprint 3
    2026-Q4 : Launch
        : Deployment

Mermaid timelines start with the timeline keyword. A colon : separates the time label from the event description. Multiple events can stack vertically within the same period. Sections emerge naturally from the time labels.

对比 / Side-by-side

小结 / Wrap-up

PlantUML timelines suit scenarios requiring precise date ranges and explicit Section markers. Mermaid timelines are lighter, organizing events automatically through time labels. Both clearly convey time-based processes — pick based on your need for formatting flexibility.