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。

相关文章

Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
服务器集群同步时间手记

服务器集群同步时间手记

1.时间服务器配置（必须root用户） （1）检查ntp是否安装 [root@node1 桌面]# rpm -qa|grep ntpntp-4.2.6p5-10.el6.centos.x86_64fontpackages-filesystem-1.41-1.1.el6.noarchntpdate-4.2.6p5-10.el6.centos.x86_64 （2）修改ntp配置文件 [r
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2