OD(11)之Mermaid时间线图(Timeline diagram)使用详解

Author: Once Day Date: 2024年2月25日

漫漫长路才刚刚开始…

全系列文章可参考专栏: Mermiad使用指南_Once_day的博客-CSDN博客

参考文章:

关于 Mermaid | Mermaid 中文网 (nodejs.cn)
Mermaid | Diagramming and charting tool
‍‌⁡⁤‍‍⁢‌‬⁡⁤⁢‍‌⁣⁢⁢⁤⁣‌‌⁢⁣⁢⁤⁡‌‌⁤⁤⁢⁡⁡⁢‍⁢⁣⁤‌Mermaid 绘图语法介绍 - 飞书云文档 (larkoffice.com)
Draw Diagrams With Markdown - Typora Support (typoraio.cn)
Mermaid 使用教程：从入门到精通——流程图、时序图、甘特图、类图等图形绘制轻松搞定 - 知乎 (zhihu.com)
时间线图 | Mermaid 中文网 (nodejs.cn)
mermaid live 在线mermiad工具

文章目录

- - OD(11)之Mermaid时间线图(Timeline diagram)使用详解
  - - 1. 概述
    - - 1.1 Mermaid时间线图介绍
      - 1.2 Mermaid时间线图实例
    - 2. 具体使用
    - - 2.1 时间线数据(事件)
      - 2.2 分组功能(section)
      - 2.3 多行文本换行
      - 2.4 修改配置颜色
      - 2.5 更改默认主题色

1. 概述

1.1 Mermaid时间线图介绍

Mermaid是一个轻量级的、基于文本的图表绘制工具，它允许开发者使用文本描述来生成图表，这使得图表的创建和维护变得更加简单和高效。Mermaid可以创建多种图表，其中时间线图（Timeline Diagram）是一种表示时间顺序的图表，它展示了一系列事件按时间发生的顺序。

维基百科：时间线是一种图表，用于说明事件、日期或时间段的年表。它通常以图形方式渲染以指示时间的流逝，并且通常按时间顺序组织。基本时间线按时间顺序渲染事件列表，通常使用日期作为标记。时间线还可以用来显示事件之间的关系，例如一个人一生中的事件之间的关系。

时间线图的历史可以追溯到古代，但在数字化时代，这类图形以新的形式复兴。随着项目管理和历史研究的需求日渐增长，时间线图成为了一种重要的视觉工具，帮助人们理解复杂的时间关系和发展脉络。

Mermaid时间线图的用处非常广泛，尤其在项目管理、教育、历史研究以及任何需要时间可视化的领域。它可以帮助项目经理规划和跟踪项目的关键里程碑，也能辅助学者们整理和展示研究成果中的时间序列。在商业分析中，时间线图可以用来展示产品的市场发展历程。

使用Mermaid时间线图的优点在于它的简洁性和易于理解。你只需要使用简单的文本描述，就能生成一个清晰、直观的时间线图。此外，由于这是一个基于文本的图表工具，它非常适合与版本控制系统一起使用，这意味着你可以方便地跟踪图表的变更历史。

然而，Mermaid的一个局限性在于它的美观程度和定制能力可能不如一些专业的图表软件。对于要求极高的图形设计来说，Mermaid可能无法完全满足需求。但对于大多数技术性文档或者快速可视化的场合，Mermaid的时间线图是一个极佳的选择。

总的来说，Mermaid时间线图是一个简单、高效的工具，它使得时间序列的可视化变得轻松易行。尽管它可能不适合所有场合，但在快速生成、易于维护且足够表达概念的情况下，它是一种非常有价值的工具。

1.2 Mermaid时间线图实例

下面是一个Mermaid时间线图的示例代码：

%%{init: {'theme':'default'}}%%
timelinetitle mermiad时间线图示例(成长)section 少年2015: 高中2018: 大学 section 青年2023: 工作2024: 创业

在这里插入图片描述

这段代码的含义如下：

首先，%%{init: {'theme':'default'}}%% 是Mermaid的配置代码，用于设置图表的主题。这里选择的是默认主题。
timeline 关键字标志着这个Mermaid图表是一个时间线图。
title关键字可以向时间线添加标题，后面接标题文本。
section 少年/青年 开始了一个时间线的段落，这里称之为“少年/青年”。这个名称可以自定义，代表时间线图中的一个部分或者分类。
2015: 高中等等是主要的时间线数据(事件描述)，其中始终以时间段开头，后跟冒号，然后是事件的文本。可以选择添加第二个冒号，然后添加事件的文本，在每个时间段内拥有一个或多个事件。

这个代码示例展示了如何在Mermaid中创建一个简单的时间线图，定义了两个部分，每个部分包含两个事件，并通过时间点和相对时间安排了事件的顺序。这种方式使得项目的时间规划和事件的时间关系一目了然。在实际使用中，你可以根据需要添加更多的事件和段落，以及调整它们的状态和描述，从而创建出符合实际需求的时间线图。

2. 具体使用

2.1 时间线数据(事件)

主要有三种语法格式，时间段和事件都是简单的文本，不限于数字，如下所示:

1. {time period} : {event}
2. {time period} : {event} : {event}
3. {time period} : {event}: {event}: {event}

事件的顺序很重要，因为时间不是按照time period排序，而是按照{time period} : {event}文本从上到下的顺序，依次从左到右排序，这个顺序即为时间线的顺序。该特定时间段的第一个事件将放置在顶部，最后一个事件将放置在底部。

下面是一个简单示例来描述排序规则:

timelinetitle 时间线图排序规则第一阶段 : 左边第一件事 : 左边第二件事第二阶段 : 中间第一件事第三阶段 : 右边第一件事 : 右边第二件事 : 右边第三件事

在这里插入图片描述

2.2 分组功能(section)

Mermaid时间线图中的“section”功能是用来对时间线的不同部分进行分组的。这是一个组织时间线信息的有力工具，它可以帮助你将相关事件按照章节、阶段、年龄或任何逻辑组别进行划分，使得时间线更加清晰和有条理。每个“section”都可以包含一个或多个事件（events），并且每个事件都可以有不同的状态和时长。这种分组方式尤其适合在项目管理、产品开发或历史时间线上展示不同的发展阶段或时期。

下面是一个简单的示例，展示了如何在Mermaid时间线图中使用“section”对事件进行分组：

timelinesection 第一阶段2023-01-10 : 完成项目启动会议2023-02-10 : 完成需求分析section 第二阶段2023-04-15 : 开发阶段开始2023-04-25 : 第一次迭代发布section 第三阶段2023-05-15 : 测试阶段2023-07-01 : 项目上线

在这里插入图片描述

在这个示例中：

timeline 关键词标志着开始了一个时间线图的定义。
section 第一阶段 定义了时间线图的第一个分组，表示项目的第一阶段，完成项目启动会议和需求分析。
section 第二阶段 和 section 第三阶段 同理，分别定义了项目的第二和第三阶段，并且在各自的阶段内列出了相应的事件。

通过使用“section”功能，Mermaid时间线图可以有效地展示项目或事件的不同阶段，帮助观众快速把握整体的时间结构和进度。这种按章节或年份分组的方式也使得时间线图在视觉上更加分明，便于理解和沟通。

2.3 多行文本换行

Mermaid时间线图（Timeline Diagram）提供了丰富的功能，以便更好地展示和管理时间线上的事件。其中，长时间或事件的文本换行功能是一个重要的功能，因为它可以帮助你更有效地管理那些具有冗长描述的事件，确保时间线的可读性和整洁性。

在Mermaid中，可以使用<br>标签来手动插入换行符，这可以将长文本分割成多行显示。这对于需要在时间线图中包含多行详细描述的情况尤其有用。

下面是一个使用文本换行功能的Mermaid时间线图示例：

timelinesection 阶段一2023-01-10 : 项目启动会议2023-01-15 : 需求收集和分析工作<br>包括市场调研和用户访谈section 阶段二2023-04-15 : 开发阶段启动2023-04-25 : 第一次迭代发布<br>实现核心功能section 阶段三2023-05-15 : 测试阶段2023-07-01 : 项目上线准备<br>完成最终测试和部署

在这里插入图片描述

在这个示例中，<br>被放置在长文本字符串的适当位置，以创建文本换行，例如：

“需求收集和分析工作<br>包括市场调研和用户访谈”和“第一次迭代发布<br>实现核心功能”

这样做可以让文本在时间线的事件框中分布在多行，而不是一行内过长导致难以阅读。

使用这个功能时，重要的是要找到合适的位置进行换行，以保持信息的连贯性和清晰度，同时也要考虑到整体的布局美观。这样，不仅确保了时间线图的信息易于理解，也提高了视觉展示的专业性。

2.4 修改配置颜色

默认情况下，每个时间段（及其相应的事件）都有自己的配色方案，都是预定义的颜色。

可以使用 disableMultiColor 选项禁用多色选项，这将使所有时间段和事件遵循相同的配色方案。

%%{init: { 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
timelinetitle 一样的颜色2023: 打工人2024: 自由人2025: 自由职业

在这里插入图片描述

还可以使用 cScale0 到 cScale11 主题变量自定义配色方案，包括前景色和背景色，最多12个，超过的事件之后将重复配色:

%%{init: { 'theme': 'base', 'themeVariables': {'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff','cScale1': '#00ff00','cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'}}}%%
timelinetitle 指定红色/绿色/蓝色2023: 打工人2024: 自由人2025: 自由职业

在这里插入图片描述

2.5 更改默认主题色

Mermaid 支持一系列预定义的主题，可以使用它们来找到适合的主题，通过theme来指定。

%%{init: { 'theme': 'base' } }%%
timelinetitle 主题色展示2002 : LinkedIn2004 : Facebook : Google2005 : Youtube2006 : Twitter2007 : Tumblr2008 : Instagram2010 : Pinterest

(1) 基础主题色(base)

在这里插入图片描述