时间线：Section 与 Periods

简介 / Introduction

时间线（Timeline）图常用于展示项目里程碑、历史事件或业务流程中的阶段划分。PlantUML 与 Mermaid 都支持时间线语法，并通过 Section 和 Period（时间区间）将事件分组，使图表更具可读性。本文对比两种引擎的语法与渲染效果。

PlantUUL 版

@startuml
timeline Timeline of Project X
: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 时间线使用 timeline 关键字，冒号 : 后跟事件文本，+ 后接时间区间标签。Section 通过 :Phase Name; 语句划分段落，视觉上形成清晰的分组。

Mermaid 版

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 时间线以 timeline 关键字开头，用冒号 : 分隔时间标签与事件描述，多个事件可在同一时间段内垂直排列。Section（分组）通过不同的时间标签自然划分。

对比 / Side-by-side

特性	PlantUML	Mermaid
关键字	`timeline`	`timeline`
时间区间	`+2026-01 ~ 2026-03`	`2026-Q1 : Label`
事件描述	`: Event text;`	`: Event text`
分段方式	`: Section Name;`	通过时间段自然分组
跨度表示	`~` 连接起止时间	多事件叠加在同一段

小结 / Wrap-up

PlantUML 时间线适合需要精确时间段和显式 Section 的场景；Mermaid 时间线更轻量，通过时间标签自动组织事件。两者均能清晰表达时间维度的流程，选择取决于项目对格式灵活性的需求。