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

2024-02-26 09:44

本文主要是介绍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: 自由职业

在这里插入图片描述

还可以使用 cScale0cScale11 主题变量自定义配色方案,包括前景色和背景色,最多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

相关文章

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》:本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注:本文章中代码均为

java中反射(Reflection)机制举例详解

《java中反射(Reflection)机制举例详解》Java中的反射机制是指Java程序在运行期间可以获取到一个对象的全部信息,:本文主要介绍java中反射(Reflection)机制的相关资料... 目录一、什么是反射?二、反射的用途三、获取Class对象四、Class类型的对象使用场景1五、Class