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

2024-02-26 09:44
文章标签 使用 详解 时间 od mermaid 线图 timeline diagram

本文主要是介绍OD(11)之Mermaid时间线图(Timeline diagram)使用详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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)

在这里插入图片描述

（2) 森林主题(Forest Theme)

在这里插入图片描述

(3) 黑暗主题(Dark Theme)

在这里插入图片描述

(4) 默认主题(Default Theme)

在这里插入图片描述

(5) 默认主题

在这里插入图片描述







Alt

Once Day

也信美人终作土，不堪幽梦太匆匆......

如果这篇文章为您带来了帮助或启发，不妨点个赞👍和关注，再加上一个小小的收藏⭐！
(｡◕‿◕｡)感谢您的阅读与支持~~~

这篇关于OD(11)之Mermaid时间线图(Timeline diagram)使用详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/748447。

相关文章

Android Paging 分页加载库使用实践

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.
阅读更多...
idea的终端(Terminal)cmd的命令换成linux的命令详解

idea的终端(Terminal)cmd的命令换成linux的命令详解

《idea的终端(Terminal)cmd的命令换成linux的命令详解》本文介绍IDEA配置Git的步骤：安装Git、修改终端设置并重启IDEA,强调顺序,作为个人经验分享,希望提供参考并支持脚本之... 目录一编程、设置前二、前置条件三、android设置四、设置后总结一、php设置前二、前置条件
阅读更多...
python中列表应用和扩展性实用详解

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性：有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的
阅读更多...
python使用try函数详解

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所
阅读更多...
C++11范围for初始化列表auto decltype详解

C++11范围for初始化列表auto decltype详解

《C++11范围for初始化列表autodecltype详解》C++11引入auto类型推导、decltype类型推断、统一列表初始化、范围for循环及智能指针,提升代码简洁性、类型安全与资源管理效... 目录C++11新特性1. 自动类型推导auto1.1 基本语法2. decltype3. 列表初始化3
阅读更多...
C++11右值引用与Lambda表达式的使用

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发；同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符
阅读更多...
Python对接支付宝支付之使用AliPay实现的详细操作指南

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali
阅读更多...
C#中lock关键字的使用小结

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中，lock关键字用于确保当一个线程位于给定实例的代码块中时
阅读更多...
SQL Server 中的 WITH (NOLOCK) 示例详解

SQL Server 中的 WITH (NOLOCK) 示例详解

《SQLServer中的WITH(NOLOCK)示例详解》SQLServer中的WITH(NOLOCK)是一种表提示,等同于READUNCOMMITTED隔离级别,允许查询在不获取共享锁的情... 目录SQL Server 中的 WITH (NOLOCK) 详解一、WITH (NOLOCK) 的本质二、工作
阅读更多...
MySQL 强制使用特定索引的操作

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2