找回密码
 register

QQ登录

只需一步，快速开始

搜索
雪舞知识库»首页 › 【网络笔记】 › 『网络运维区』 › 基于 Mermaid 的时间线图
返回列表 发新帖

[*网络运维*] 基于 Mermaid 的时间线图

[复制链接]

[*网络运维*] 基于 Mermaid 的时间线图

[复制链接]
Waylee

主题

0

回帖

7459

积分

仙帝

积分
7459
Waylee 2024-11-15 22:23 | 显示全部楼层 |阅读模式 | Google Chrome | Windows 10

马上注册,查看网站隐藏内容!!

您需要 登录 才可以下载或查看，没有账号？register

×

“时间线是一种用来展示事件、日期或时间段的图表。它通常以图形方式呈现，用以表示时间的流逝，并通常按照时间顺序进行组织。基本的时间线按时间顺序列出事件，通常使用日期作为标记。时间线还可以用来展示事件之间的关系，例如，展示一个人一生中各个事件之间的关系。”（维基百科）
示例:

    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
timeline     title History of Social Media Platform     2002 : LinkedIn     2004 : Facebook          : Google     2005 : Youtube     2006 : Twitter

语法

创建 Timeline 图的语法很简单。您始终以timeline 关键字开头，让 mermaid 知道您要创建时间线图。

之后，可以向时间线添加标题。这是通过添加一行关键字 title 后跟 title 文本来完成的。

然后添加时间线数据，其中始终以时间段开头，后跟冒号，然后是事件的文本。（可选）您可以添加第二个冒号，然后添加事件的文本。因此，每个时间段可以有一个或多个事件。

{time period} : {event}

或

{time period} : {event} : {event}

或

{time period} : {event}
              : {event}
              : {event}

注意：时间段和事件都是简单的文本，不限于数字。

代码:

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook : Google
    2005 : Youtube
    2006 : Twitter
timeline     title History of Social Media Platform     2002 : LinkedIn     2004 : Facebook : Google     2005 : Youtube     2006 : Twitter

通过这种方式，我们可以使用文本轮廓来生成时间线图。时间段和事件的顺序很重要，因为它将用于绘制时间线。第一个时间段将放置在时间轴的左侧，最后一个时间段将放置在时间轴的右侧。

同样，第一个事件将在该特定时间段内位于顶部，最后一个事件将位于底部。

按部分/年龄对时间段进行分组

您可以按部分/年龄对时间段进行分组。这是通过添加一行来完成的 keyword section，后跟段名。
所有后续时间段都将放置在此部分中，直到定义新部分。
如果未定义任何部分，则所有期间都将置于 default 部分中。
让我们看一个例子，我们将时间段分组为多个部分。
代码：

timeline
    title Timeline of Industrial Revolution
    section 17th-20th century
        Industry 1.0 : Machinery, Water power, Steam <br>power
        Industry 2.0 : Electricity, Internal combustion engine, Mass production
        Industry 3.0 : Electronics, Computers, Automation
    section 21st century
        Industry 4.0 : Internet, Robotics, Internet of Things
        Industry 5.0 : Artificial intelligence, Big data, 3D printing

效果：


timeline     title Timeline of Industrial Revolution     section 17th-20th century         Industry 1.0 : Machinery, Water power, Steam <br>power         Industry 2.0 : Electricity, Internal combustion engine, Mass production         Industry 3.0 : Electronics, Computers, Automation     section 21st century         Industry 4.0 : Internet, Robotics, Internet of Things         Industry 5.0 : Artificial intelligence, Big data, 3D printing

如您所见，时间段放置在各部分中，并且各部分按定义的顺序放置。
给定部分下的所有时间段和事件都遵循类似的配色方案。这样做是为了更容易地查看时间段和事件之间的关系。

长时间段或事件的文本换行

默认情况下，如果时间段或事件的文本过长，Mermaid 会自动换行。这是为了避免文本超出图表的边界，确保图表的内容不会被截断。

另外，你也可以使用 <br> 标签来强制换行，以便更好地控制文本布局。

让我们看一个示例，其中有一个很长的时间段和一个长事件描述。
代码

timeline
        title England's History Timeline
        section Stone Age
          7600 BC : Britain's oldest known house was built in Orkney, Scotland
          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
        section Bronze Age
          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
                  : New styles of pottery and ways of burying the dead appear.
          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.

效果：


timeline         title England's History Timeline         section Stone Age           7600 BC : Britain's oldest known house was built in Orkney, Scotland           6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.         section Bronze Age           2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.                   : New styles of pottery and ways of burying the dead appear.           2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.                   : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.

代码

timeline
        title MermaidChart 2023 Timeline
        section 2023 Q1 <br> Release Personal Tier
          Bullet 1 : sub-point 1a : sub-point 1b
               : sub-point 1c
          Bullet 2 : sub-point 2a : sub-point 2b
        section 2023 Q2 <br> Release XYZ Tier
          Bullet 3 : sub-point <br> 3a : sub-point 3b
               : sub-point 3c
          Bullet 4 : sub-point 4a : sub-point 4b

效果：


timeline         title MermaidChart 2023 Timeline         section 2023 Q1 <br> Release Personal Tier           Bullet 1 : sub-point 1a : sub-point 1b                : sub-point 1c           Bullet 2 : sub-point 2a : sub-point 2b         section 2023 Q2 <br> Release XYZ Tier           Bullet 3 : sub-point <br> 3a : sub-point 3b                : sub-point 3c           Bullet 4 : sub-point 4a : sub-point 4b

时间段和事件的样式设置

如前所述，每个章节都有一个色彩方案，并且章节下的每个时间段和事件都会遵循相似的色彩方案。
然而，如果没有定义章节，则有两种可能的情况：

  • 单独为时间段设置样式
    • 即每个时间段（及其对应的事件）会有自己的颜色方案。这是默认行为。
      在没有章节的情况下，Mermaid 会自动为每个时间段分配不同的颜色。每个时间段下的事件将继承该时间段的颜色方案，从而确保视觉上能够区分不同的时间段。

代码

    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter

效果：


    timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter

注意：没有定义章节时，每个时间段及其对应的事件将拥有自己的颜色方案。
如果你希望禁用这种多颜色方案，确保所有时间段和事件遵循相同的颜色方案，可以使用 disableMultiColor 选项。启用该选项后，所有时间段和事件将会统一使用同一个颜色。

你需要通过 mermaid.initialize 函数或 Mermaid 指令来添加此选项。

mermaid.initialize({
        theme: 'base',
        startOnLoad: true,
        logLevel: 0,
        timeline: {
          disableMulticolor: false,
        },
        ...
        ...

让我们看一个相同的示例，其中禁用了 multiColor 选项，使得所有时间段和事件使用相同的颜色方案。

   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter

效果：


   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%     timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter

自定义颜色方案

你可以通过使用 cScale0 到 cScale11 这些主题变量来定制颜色方案，从而改变背景色。Mermaid 允许你为最多12个章节设置唯一的颜色，其中 cScale0 变量控制第一个章节或时间段的背景色，cScale1 控制第二个，依此类推。如果章节数超过12个，颜色方案会重新开始。

如果你还希望更改章节的前景色，可以使用与背景色相对应的 cScaleLabel0 到 cScaleLabel11 主题变量。

注意：
这些主题变量的默认值是从所选主题中提取的。如果你想覆盖默认值，可以使用 initialize 调用来添加自定义的主题变量值。

示例：覆盖默认值并自定义颜色方案
以下是如何覆盖 cScale0 到 cScale2 变量的默认值，以设置自定义颜色方案：
代码：

    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
              'cScale1': '#00ff00',
              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
       } } }%%
       timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
          2010 : Pinterest

效果：

    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {               'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',               'cScale1': '#00ff00',               'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'        } } }%%        timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter           2007 : Tumblr           2008 : Instagram           2010 : Pinterest

请查看颜色是如何根据主题变量中指定的值进行更改的。

Themes

Mermaid 支持一组预定义的主题，你可以使用它们来选择最适合你的主题。PS：你实际上可以覆盖现有主题的变量，来创建你自己的自定义主题。了解更多关于如何为你的图表设置主题的信息。

以下是不同的预定义主题选项：

  • base
  • forest
  • dark
  • default
  • neutral
    注意：
    要更改主题，你可以使用 initialize 调用或指令。了解更多关于指令的信息。
    让我们来使用这些主题，看看我们的示例图表在不同主题下的效果：

    基本主题

    代码：

    %%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
timeline
    title History of Social Media Platform
      2002 : LinkedIn
      2004 : Facebook : Google
      2005 : Youtube
      2006 : Twitter
      2007 : Tumblr
      2008 : Instagram
      2010 : Pinterest

    效果：

%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%     timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter           2007 : Tumblr           2008 : Instagram           2010 : Pinterest

森林主题

代码：

%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
          2010 : Pinterest

效果：

%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%     timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter           2007 : Tumblr           2008 : Instagram           2010 : Pinterest

深色主题

代码：

%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
          2010 : Pinterest

效果：

%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%     timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter           2007 : Tumblr           2008 : Instagram           2010 : Pinterest

默认主题

代码：

%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
          2010 : Pinterest

效果：

%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%     timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter           2007 : Tumblr           2008 : Instagram           2010 : Pinterest

中性主题

代码：

%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
          2010 : Pinterest

效果：

%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%     timeline         title History of Social Media Platform           2002 : LinkedIn           2004 : Facebook : Google           2005 : Youtube           2006 : Twitter           2007 : Tumblr           2008 : Instagram           2010 : Pinterest

与您的库/网站集成

时间线功能使用了实验性的懒加载和异步渲染特性，这些特性未来可能会发生变化。懒加载对于将来能够添加更多图表非常重要。

您可以使用以下方法将 Mermaid 包括时间线图表添加到网页中：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

您还可以参考这里的实时编辑器实现，查看异步加载是如何完成的。


回复 打印

举报

返回列表 发新帖

雪舞知识库 | 浙ICP备15015590号-1 | 萌ICP备20232229号|浙公网安备33048102000118号 |网站地图|天天打卡

GMT+8, 2024-11-22 00:01 , Processed in 0.061965 second(s), 10 queries , Redis On.

Powered by XueWu Licensed

Copyright © Tencent Cloud.

快速回复 返回顶部 返回列表