时间线图

£Timeline Diagram

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

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

时间线示例

£An example of a timeline

语法

£Syntax

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

£The syntax for creating Timeline diagram is simple. You always start with the timeline keyword to let mermaid know that you want to create a timeline diagram.

之后有可能向时间轴添加标题。这可以通过添加一行以关键字 title 开头，后跟标题文本来完成。

£After that there is a possibility to add a title to the timeline. This is done by adding a line with the keyword title followed by the title text.

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

£Then you add the timeline data, where you always start with a time period, followed by a colon and then the text for the event. Optionally you can add a second colon and then the text for the event. So, you can have one or more events per time period.

{time period} : {event}

或者

£or

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

或者

£or

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

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

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

£Let us look at the syntax for the example above.

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

£In this way we can use a text outline to generate a timeline diagram. The sequence of time period and events is important, as it will be used to draw the timeline. The first time period will be placed at the left side of the timeline, and the last time period will be placed at the right side of the timeline.

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

£Similarly, the first event will be placed at the top for that specific time period, and the last event will be placed at the bottom.

时间段在各时期/时代的划分

£Grouping of time periods in sections/ages

你可以将时间段分组到不同的部分/时代中。这可以通过添加一行带有关键字 section 后跟部分名称的方式来实现。

£You can group time periods in sections/ages. This is done by adding a line with the keyword section followed by the section name.

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

£All subsequent time periods will be placed in this section until a new section is defined.

如果未定义任何部分，所有时间段将被放入默认部分。

£If no section is defined, all time periods will be placed in the default section.

让我们看一个例子，我们将时间段分组为几个部分。

£Let us look at an example, where we have grouped the time periods in sections.

正如你所看到的，时间段被放置在各个部分中，而各个部分则按它们被定义的顺序排列。

£As you can see, the time periods are placed in the sections, and the sections are placed in the order they are defined.

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

£All time periods and events under a given section follow a similar color scheme. This is done to make it easier to see the relationship between time periods and events.

长时间周期或事件的文本换行

£Wrapping of text for long time-periods or events

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

£By default, the text for time-periods and events will be wrapped if it is too long. This is done to avoid that the text is drawn outside the diagram.

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

£You can also use <br> to force a line break.

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

£Let us look at another example, where we have a long time period, and a long event.

时间段和事件的样式

£Styling of time periods and events

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

£As explained earlier, each section has a color scheme, and each time period and event under a section follow the similar color scheme.

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

£However, if there is no section defined, then we have two possibilities:

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

注意：没有定义具体的章节，每个时间段及其对应的事件都会有自己独特的配色方案。

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

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

£You will need to add this option either via mermaid.initialize function or directives.

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

让我们来看一个例子，我们已经禁用了多彩选项。

£let us look at same example, where we have disabled the multiColor option.

自定义配色方案

£Customizing Color scheme

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

£You can customize the color scheme using the cScale0 to cScale11 theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where cScale0 variable will drive the value of the first section or time-period, cScale1 will drive the value of the second section and so on. In case you have more than 12 sections, the color scheme will start to repeat.

如果你还想更改某个部分的前景色，可以使用与 cScaleLabel0 到 cScaleLabel11 变量对应的主题变量来实现。

£If you also want to change the foreground color of a section, you can do so use theme variables corresponding cScaleLabel0 to cScaleLabel11 variables.

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

示例：

£Example:

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

£Now let's override the default values for the cScale0 to cScale2 variables:

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

£See how the colors are changed to the values specified in the theme variables.

主题

£Themes

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

£Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram.

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

£The following are the different pre-defined theme options:

• 基础
• 森林
• 黑暗
• 默认
• 中性

注意：要更改主题，你可以使用 initialize 调用或 _ 指令 _。了解更多关于 指令 的信息
让我们来使用它们，看看我们的示例图在不同主题下的效果：

基础主题

£Base Theme

森林主题

£Forest Theme

深色主题

£Dark Theme

默认主题

£Default Theme

中性主题

£Neutral Theme

与你的库/网站集成

£Integrating with your library/website

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

£Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.

你可以使用这种方法将包括时间线图在内的 Mermaid 图添加到网页中：

£You can use this method to add mermaid including the timeline diagram to a web page:

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

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

£You can also refer the implementation in the live editor to see how the async loading is done.