Mermaid

外观

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

时间线图 ​

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

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

时间轴示例 ​

语法 ​

创建时间线图表的语法很简单。你总是以timeline关键字开始，让mermaid知道你想要创建一个时间线图表。

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

然后你添加时间线数据，通常以一个时间段开始，后面跟着一个冒号，然后是事件的文本。你可以选择性地添加第二个冒号，然后是事件的文本。因此，每个时间段可以有一个或多个事件。

json
{time period} : {event}

或

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

或

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

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

让我们看看上面例子的语法。

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

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

时间段在部分/年龄中的分组 ​

您可以将时间段分组为部分/时代。这是通过添加一行带有关键字section，后跟部分名称来实现的。

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

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

让我们看一个例子，其中我们将时间段分组在各个部分中。

如你所见，时间段被放置在各个部分中，而这些部分按照它们定义的顺序排列。

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

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

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

你也可以使用
来强制换行。

让我们看另一个例子，我们有一个很长的时间段和一个很长的事件。

时间段和事件的样式 ​

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

然而，如果没有定义部分，那么我们有两种可能性：

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

注意：没有定义任何部分，每个时间段及其对应的事件将有自己的配色方案。

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

您需要通过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/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

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