注意：时间线图的高亮新旧版本会正常显示。
时间线图
mermaid官方网站文档教程链接(英文)
社区维护的中文文档站
1、新版本语法
timeline如下仅是基础的常用功能语法，如需更全面内容可参考官网教程文档
-
最简版（仅核心条目）
timeline 2026-01 : 需求分析 2026-02 : 编码开发 2026-03 : 测试上线规则：
时间点和事件描述之间用 英文冒号 + 空格（:）分隔，缺一不可；时间点格式：支持
年/年月/年月日/季度/自定义文本（如Q1/第一阶段）。 -
加标题（提升可读性）
用
title给时间线加总标题，放在timeline下一行 -
加分组（按阶段归类）
用
section 分组名把事件按逻辑分组，视觉上会自动分隔规则：
section后接分组名，同一分组下的事件会归到该类别下；注意：分组是可选的，无分组时所有事件会平铺显示。
-
同一时间点多个事件
同一时间点下换行写多个事件，会自动垂直堆叠，无需重复写时间
-
长文本换行（适配复杂事件）
事件描述过长时，用
<br>强制换行，排版更整洁 -
注释规则
- 单行注释：
%% 注释内容（必须以%%开头，可放在行首 / 行尾）； - 多行注释：无原生支持，需每行加
%%；
- 单行注释：
-
特殊规则（避坑重点）
-
符号必须是英文：冒号（
:）、<br>中的尖括号都要切换成英文输入法，中文冒号（：）会导致渲染失败； -
空格不能省：时间和事件之间是「英文冒号 + 空格」（
:），少了空格会识别错误； -
无缩进要求：语法不强制缩进，换行即可，但统一缩进（如 4 个空格）会更易读。
-
2、代码示例
示例1
timeline
title 年度关键节点
Q1 : 规划
Q2 : 开发
Q3 : 测试
Q4 : 上线 & 复盘
示例2
timeline
title 项目全生命周期时间线（复杂版）section 需求与设计
2026-01-01 : 需求调研与评审: 输出PRD文档
2026-01-15 : 原型设计: UI/UE定稿: 技术方案评审section 开发阶段
2026-02-01 : 后端接口开发: 数据库设计
2026-02-15 : 前端页面开发: 联调测试
2026-02-28 : 性能压测: 安全扫描section 上线与复盘
2026-03-05 : 灰度发布
2026-03-10 : 全量上线
2026-03-15 : 项目复盘: 经验沉淀
3、效果示例
示例1
timeline
title 年度关键节点
Q1 : 规划
Q2 : 开发
Q3 : 测试
Q4 : 上线 & 复盘
示例2
timeline
title 项目全生命周期时间线（复杂版）section 需求与设计
2026-01-01 : 需求调研与评审: 输出PRD文档
2026-01-15 : 原型设计: UI/UE定稿: 技术方案评审section 开发阶段
2026-02-01 : 后端接口开发: 数据库设计
2026-02-15 : 前端页面开发: 联调测试
2026-02-28 : 性能压测: 安全扫描section 上线与复盘
2026-03-05 : 灰度发布
2026-03-10 : 全量上线
2026-03-15 : 项目复盘: 经验沉淀
4、老版本语法
**graph **新版本功能可以支持更丰富的内容，旧版写法差异明显，头部声明没有变化，不推荐使用就不介绍太多了。
旧版是使用graph模拟的，特别难看
graph LRA["2026-01<br>需求分析"]:::green --> B["2026-02<br>编码开发"]:::blueB --> C["2026-03<br>测试"]:::orangeC --> D["2026-04<br>上线"]:::red%% 定义样式类classDef green fill:#90EE90,stroke:#333,stroke-width:2pxclassDef blue fill:#87CEEB,stroke:#333,stroke-width:2pxclassDef orange fill:#FFD700,stroke:#333,stroke-width:2pxclassDef red fill:#FF6347,stroke:#333,stroke-width:2px
graph LRA["2026-01<br>需求分析"]:::green --> B["2026-02<br>编码开发"]:::blueB --> C["2026-03<br>测试"]:::orangeC --> D["2026-04<br>上线"]:::red%% 定义样式类classDef green fill:#90EE90,stroke:#333,stroke-width:2pxclassDef blue fill:#87CEEB,stroke:#333,stroke-width:2pxclassDef orange fill:#FFD700,stroke:#333,stroke-width:2pxclassDef red fill:#FF6347,stroke:#333,stroke-width:2px
5、新旧版本差异
新旧版本差异比较大，如下对比
| 对比维度 | 旧版写法（graph 模拟） | 新版写法（原生 timeline） |
|---|---|---|
| 核心语法 | 基于 graph LR/TD（横向 / 纵向图）+ 节点 / 连线 |
直接用 timeline 关键字，专属语法 |
| Mermaid 版本 | 无版本限制（支持所有旧版本） | 需 Mermaid 8.8+ |
| Typora 版本 | 支持所有版本（包括 1.0 以下） | 需 Typora 1.0+（默认已兼容） |
| 编写效率 | 手动写节点、手动用 --> 连接，多事件需拆分子节点，代码量大 |
仅需「时间：事件」，自动排版，多事件直接换行，极简 |
| 视觉效果 | 是「流程图」模拟的时间线，节点分散、排版乱，需手动调样式 | 原生时间线样式，事件按时间 / 分组堆叠，视觉贴合时间轴 |
| 功能支持 | 不支持原生分组（section），需手动嵌套节点 | 原生支持 section 分组、长文本 <br> 换行、多事件堆叠 |
| 自定义能力 | 支持节点颜色、形状、图标等高度自定义 | 自定义能力弱（仅基础样式） |
| 适用场景 | 1. Typora 版本过低；2. 需要高度定制样式 | 绝大多数场景（简洁、易维护、视觉优） |
- 基础场景：语法规则差异明显
- 高级场景：timeline新增专属功能
6、版本兼容性
-
Typora 版本 < 1.0：旧版是使用graph模拟的，支持不友好；
-
Typora 版本 ≥ 1.0：完美支持timeline；
-
如何查版本：Typora → 帮助 → 关于 Typora（可看到 Typora 版本）。