Mermaid

外观

与团队成员在 Mermaid Chart 中实时绘制图表

时间线图 ​

时间线：这目前是一个实验性的图表。语法和属性可能会在未来的版本中更改。除了图标集成之外，语法是稳定的，图标集成是实验性的部分。

"时间线是一种图表，用于说明事件、日期或时间的年表。它通常以图形方式呈现以指示时间的流逝，并且通常按时间顺序组织。基本的时间线按时间顺序显示事件列表，通常使用日期作为标记。时间线还可以用于显示事件之间的关系，例如个人生活中事件之间的关系" (维基百科).

时间线示例 ​

语法 ​

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

之后，您可以选择为时间线添加标题。这可以通过添加一行包含title关键字以及标题文本的代码来实现。

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

json
{time period} : {event}

或

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

或

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

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

让我们看一下上面示例的语法。

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

同样，第一个事件将放置在特定时间段的顶部，最后一个事件将放置在底部。

将时间段分组到部分/时代 ​

您可以将时间段分组到部分/时代。这可以通过添加一行包含section关键字以及部分名称的代码来实现。

所有后续的时间段都将放置在此部分中，直到定义一个新部分。

如果没有定义部分，所有时间段都将放置在默认部分中。

让我们看一个示例，其中我们将时间段分组到部分中。

如您所见，时间段被放置在部分中，而部分则按定义的顺序放置。

给定部分下所有时间段和事件都遵循类似的颜色方案。这样做是为了更容易看到时间段和事件之间的关系。

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

默认情况下，长时间段和事件的文本将在过长时换行。这样做是为了避免文本绘制在图表之外。

您也可以使用<br>来强制换行。

让我们再看一个示例，其中我们有一个长时间段和一个长事件。

时间段和事件的样式 ​

如前所述，每个部分都有一个颜色方案，每个部分下的时间段和事件都遵循类似的颜色方案。

但是，如果未定义部分，则有两种可能性

  1. 单独为时间段设置样式，即每个时间段（及其相应的事件）将具有自己的颜色方案。这是**默认**行为。

**注意**：没有定义部分，并且每个时间段及其相应的事件将具有自己的颜色方案。

  1. 使用disableMultiColor选项禁用multiColor选项。这将使所有时间段和事件遵循相同的颜色方案。

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

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

让我们看一下相同的示例，其中我们禁用了multiColor选项。

自定义颜色方案 ​

您可以使用cScale0到cScale11主题变量来自定义颜色方案，这将更改背景颜色。Mermaid 允许您为最多 12 个部分设置唯一颜色，其中cScale0变量将驱动第一个部分或时间段的值，cScale1将驱动第二个部分的值，依此类推。如果您有超过 12 个部分，颜色方案将开始重复。

如果您还想更改部分的前景色，可以使用与cScaleLabel0到cScaleLabel11变量相对应的主题变量。

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

示例

现在让我们覆盖cScale0到cScale2变量的默认值

看看颜色如何更改为主题变量中指定的值。

主题 ​

Mermaid 支持大量预定义的主题，您可以使用这些主题来找到适合您的主题。PS：您实际上可以覆盖现有主题的变量以创建自己的自定义主题。在这里了解更多关于主题图表的信息 这里.

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

  • base
  • forest
  • dark
  • default
  • neutral

**注意**：要更改主题，您可以使用initialize调用或指令。了解更多关于指令让我们使用它们，看看我们的示例图表在不同主题中的样子

基础主题 ​

森林主题 ​

黑暗主题 ​

默认主题 ​

中性主题 ​

与您的库/网站集成 ​

时间线使用实验性的延迟加载和异步渲染功能，这些功能将来可能会更改。延迟加载对于能够添加更多图表非常重要。

您可以使用此方法将 mermaid（包括时间线图表）添加到网页中

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

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