Mermaid.js 时间线语法指南

什么是时间线图？

一个时间线图是一种按时间顺序可视化工具，用于在一条线性时间路径上绘制事件或项目里程碑。虽然甘特图处理复杂的任务依赖关系和持续时间，但时间线图则专注于何时——提供了一个清晰、易于扫描的项目演进或系统发布周期的叙述。

使用Mermaid.js，你可以使用一种简单、分层的文本格式来定义你的时间线。引擎会自动处理间距、日期或时间段标签的格式化，以及事件标记在中心时间轴上的对齐。

核心语法指南

要设计一个有效且可运行的时间线，你必须定义轴的周期，并将事件映射到特定的章节。

1. 初始化时间线

你使用timeline关键字来初始化画布。结构通过定义章节（作为分组）并将事件（或日期）映射到这些章节来构建。

timeline
    title 系统开发历史
    section 2025
        Q1 : Alpha 发布
    section 2026
        Q2 : Beta 发布

2. 为事件添加详细信息

你可以通过使用冒号分隔的列表，为单个时间标记添加多个详细信息。这对于总结与特定日期或时间段相关的关键成果或版本号非常有用。

timeline
    section Q3 2026
        Release : v1.0.0
                : 性能改进
                : 安全补丁

现实世界中的 Mermaid.js 时序图示例：产品发布路线图

此蓝图模拟了多年的产品路线图，按财政年度分组发布，并突出显示每个周期的关键交付成果。

时间线
    标题 产品路线图 2026-2027
    部分 2026
        Q1 : 发现阶段
           : 利益相关者访谈
        Q2 : MVP 开发
           : 核心 API 设计
        Q3 : 内测发布
           : 用户反馈循环
    部分 2027
        Q1 : 全面上线
           : 全球扩展

时间线的最佳实践

• 保持分类简洁： 使用 部分 来表示高层次的分组（如年份或主要阶段），同时确保下方的实际事件具体且可操作。
• 日期格式保持一致： 确保你的时间线事件在代码中按时间顺序排列，因为 Mermaid 引擎会根据你的脚本顺序来确定布局位置。
• 使用细节提供上下文： 不要在中心轴上堆叠过多文字。使用多行事件格式来分解“发生了什么”，而不是让日期标签本身过长。