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

相关文章

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

Python装饰器之类装饰器详解

《Python装饰器之类装饰器详解》本文将详细介绍Python中类装饰器的概念、使用方法以及应用场景,并通过一个综合详细的例子展示如何使用类装饰器,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录1. 引言2. 装饰器的基本概念2.1. 函数装饰器复习2.2 类装饰器的定义和使用3. 类装饰

Python 交互式可视化的利器Bokeh的使用

《Python交互式可视化的利器Bokeh的使用》Bokeh是一个专注于Web端交互式数据可视化的Python库,本文主要介绍了Python交互式可视化的利器Bokeh的使用,具有一定的参考价值,感... 目录1. Bokeh 简介1.1 为什么选择 Bokeh1.2 安装与环境配置2. Bokeh 基础2

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

MySQL 中的 JSON 查询案例详解

《MySQL中的JSON查询案例详解》:本文主要介绍MySQL的JSON查询的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 的 jsON 路径格式基本结构路径组件详解特殊语法元素实际示例简单路径复杂路径简写操作符注意MySQL 的 J

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读