时间线
时间线图用于可视化按时间顺序排列的事件序列。它们非常适合用于项目规划、历史事件展示和流程文档记录。
语法
基本元素
- 标题: 可选的时间线标题
- 部分: 将事件分组
- 事件: 单个时间线条目
基础示例
代码:
mermaid
timeline
title 社交媒体发展史
2004 : Facebook 创立
2006 : Twitter 创立
2010 : Instagram 创立
2011 : Snapchat 创立
高级示例
这是一个展示软件开发生命周期的详细时间线：
代码:
mermaid
timeline
title 软件开发生命周期
section 规划阶段
需求分析 : 2周
系统设计 : 3周
section 开发阶段
前端开发 : 4周
后端开发 : 4周
数据库实现 : 2周
section 测试阶段
单元测试 : 1周
集成测试 : 2周
用户验收测试 : 1周
section 部署阶段
Beta发布 : 1周
生产环境部署 : 1周
部署后监控 : 持续进行
项目时间线
代码:
mermaid
timeline
title 项目里程碑
section 2024年第一季度
项目启动 : 一月
需求收集 : 二月
初步设计 : 三月
section 2024年第二季度
开发阶段1 : 四月
测试 : 五月
用户培训 : 六月
section 2024年第三季度
正式上线 : 七月
收集反馈 : 八月
优化改进 : 九月
事件类型
简单事件
代码:
mermaid
timeline
title 简单事件
2024 : 新年
一月 : 第1个月
二月 : 第2个月
三月 : 第3个月
分组事件
代码:
mermaid
timeline
title 产品开发阶段
section 研究
市场分析 : 2周
竞品研究 : 1周
用户研究 : 2周
section 设计
线框图 : 1周
原型设计 : 2周
用户测试 : 1周
section 实现
开发 : 4周
测试 : 2周
发布 : 1周
样式设置
时间线会自动：
- 按时间顺序排列事件
- 将相关事件分组到部分中
- 显示持续时间（如指定）
- 保持一致的间距
- 显示清晰的关系
实用技巧
- 保持事件描述简洁
- 使用有意义的部分名称
- 包含重要日期
- 将相关事件分组
- 显示清晰的进展
- 适当包含持续时间
- 使用一致的格式
- 关注关键里程碑
常见问题解决
结构问题
- 确保部分逻辑合理
- 事件顺序正确
- 时间跨度适当
可读性问题
- 使用简洁的描述
- 避免过多部分
- 保持事件数量合理
时间管理问题
- 合理安排时间跨度
- 注意事件间隔
- 处理并行事件
最佳实践
时间线规划
- 确定合适的时间范围
- 选择适当的详细程度
- 保持时间流动清晰
内容组织
- 使用清晰的事件描述
- 合理分组相关事件
- 突出重要里程碑
视觉呈现
- 保持布局整洁
- 使用一致的格式
- 确保信息易读