时间线图

¥Timeline Diagram

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

¥Timeline: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stable except for the icon integration which is the experimental part.

“时间线是一种图表，用于说明事件、日期或时间段的年表。它通常以图形方式渲染以指示时间的流逝，并且通常按时间顺序组织。基本时间线按时间顺序渲染事件列表，通常使用日期作为标记。时间线还可以用来展示事件之间的关系，比如一个人一生中的事件之间的关系”（维基百科）.

¥"A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life" (Wikipedia).

时间线的示例

¥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}

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

¥NOTE: Both time period and event are simple text, and not limited to numbers.

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

¥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. 单独设置时间段的样式，即每个时间段（及其相应的事件）都有自己的配色方案。这是默认行为。

   ¥Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.

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

¥NOTE: that there are no sections defined, and each time period and its corresponding events will have its own color scheme.

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

   ¥Disable the multiColor option using the disableMultiColor option. This will make all time periods and events follow the same color scheme.

你需要通过 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 调用来添加自定义主题变量值。

¥NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the initialize call to add your custom theme variable values.

示例：

¥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 here.

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

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

• base

• forest

• dark

• default

• neutral

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

¥NOTE: To change theme you can either use the initialize call or directives. Learn more about directives Let's put them to use, and see how our sample diagram looks in different themes:

基础主题

¥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 here to see how the async loading is done.