Mermaid中文文档

Appearance

时间线图 ​

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

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

时间线示例 ​

语法 ​

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

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

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

json
{时间段} : {事件}

或者

json
{时间段} : {事件} : {事件}

或者

json
{时间段} : {事件}
              : {事件}
              : {事件}

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

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

Code:
mermaid

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

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

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

您可以将时间段分组到节/时代。这是通过添加一行带有section关键字以及节名称来完成的。

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

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

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

Code:
mermaid

正如你所看到的，时间段被放置在节中，节按定义的顺序排列。

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

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

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

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

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

Code:
mermaid
Code:
mermaid

时间段和事件的样式 ​

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

但是，如果没有定义节，那么我们有两种可能性：

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

注意: 没有定义节，每个时间段及其相应的事件将有其自己的配色方案。

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

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

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

让我们看看同一个例子，我们在此禁用了multiColor选项。

Code:
mermaid

自定义配色方案 ​

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

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

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

示例：

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

Code:
mermaid

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

主题 ​

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

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

  • base
  • forest
  • dark
  • default
  • neutral

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

Base 主题 ​

Code:
mermaid

Forest 主题 ​

Code:
mermaid

Dark 主题 ​

Code:
mermaid

Default 主题 ​

Code:
mermaid

Neutral 主题 ​

Code:
mermaid

集成到您的库/网站 ​

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

您可以使用此方法将包括时间线图在内的mermaid添加到网页：

html
<script type="module">
  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
</script>

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