状态图

¥State diagrams

“状态图是计算机科学及相关字段中用于描述系统行为的一种图表。状态图要求所描述的系统由有限数量的状态组成；有时，情况确实如此，而有时这是一个合理的抽象。”维基百科

¥"A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia

Mermaid 可以渲染状态图。该语法尝试与 plantUml 中使用的语法兼容，因为这将使用户更容易在 mermaid 和 plantUml 之间共享图表。

¥Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.

较旧的渲染器：

¥Older renderer:

在状态图中，系统是根据状态以及一个状态如何通过转换更改为另一种状态来描述的。上面的示例图显示了三种状态：尽管如此，移动和崩溃。你从静止状态开始。你可以从静止状态更改为移动状态。你可以从“移动”状态更改回“静止”状态或“崩溃”状态。没有从静止到崩溃的过渡。（如果你还在的话，你就不会崩溃。）

¥In state diagrams systems are described in terms of states and how one state can change to another state via a transition. The example diagram above shows three states: Still, Moving and Crash. You start in the Still state. From Still you can change to the Moving state. From Moving you can change either back to the Still state or to the Crash state. There is no transition from Still to Crash. (You can't crash if you're still.)

状态

¥States

可以通过多种方式声明状态。最简单的方法是只用 id 定义一个状态：

¥A state can be declared in multiple ways. The simplest way is to define a state with just an id:

另一种方法是使用 state 关键字和如下描述：

¥Another way is by using the state keyword with a description as per below:

使用描述定义状态的另一种方法是定义状态 id，后跟冒号和描述：

¥Another way to define a state with a description is to define the state id followed by a colon and the description:

过渡

¥Transitions

转换是一种状态进入另一种状态时的路径/边缘。这使用文本箭头 "-->" 表示。

¥Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->".

当你定义两个状态之间的转换并且状态尚未定义时，未定义的状态将使用转换中的 id 进行定义。你稍后可以向以此方式定义的状态添加描述。

¥When you define a transition between two states and the states are not already defined, the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.

可以向过渡添加文本来描述它所代表的内容：

¥It is possible to add text to a transition to describe what it represents:

开始和结束

¥Start and End

有两种特殊状态指示图的开始和停止。它们是用 [*] 语法编写的，并且转换到它的方向将其定义为开始或停止状态。

¥There are two special states indicating the start and stop of the diagram. These are written with the [*] syntax and the direction of the transition to it defines it either as a start or a stop state.

复合状态

¥Composite states

在现实世界中使用状态图时，你通常会得到多维的图，因为一个状态可以有多个内部状态。在这个术语中，这些被称为复合状态。

¥In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can have several internal states. These are called composite states in this terminology.

为了定义复合状态，你需要使用 state 关键字，后跟 id 和 {} 之间的复合状态主体。你可以像简单状态一样在单独的行上命名复合状态。请参阅下面的示例：

¥In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between {}. You can name a composite state on a separate line just like a simple state. See the example below:

你可以在多个层中执行此操作：

¥You can do this in several layers:

你还可以定义复合状态之间的转换：

¥You can also define transitions also between composite states:

你无法定义属于不同复合状态的内部状态之间的转换

¥You can not define transitions between internal states belonging to different composite states

选择

¥Choice

有时你需要对两个或多个路径之间的选择进行建模，可以使用 <<choice>> 来实现。

¥Sometimes you need to model a choice between two or more paths, you can do so using <<choice>>.

复刻

¥Forks

可以使用 <<fork>> < 在图中指定一个分叉 <join>>。

¥It is possible to specify a fork in the diagram using <<fork>> <<join>>.

注意

¥Notes

有时没有什么比便利贴更能表达这一点。状态图中也是如此。

¥Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams.

在这里你可以选择将注释放在节点的右侧或左侧。

¥Here you can choose to put the note to the right of or to the left of a node.

并发性

¥Concurrency

与在 plantUml 中一样，你可以使用 -- 符号指定并发性。

¥As in plantUml you can specify concurrency using the -- symbol.

设置图表的方向

¥Setting the direction of the diagram

对于状态图，你可以使用方向语句来设置图渲染的方向，如本例所示。

¥With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.

注释

¥Comments

可以在状态图表中输入注释，解析器将忽略这些注释。注释需要独占一行，并且必须以 %%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法

¥Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

使用 classDefs 设置样式

¥Styling with classDefs

与其他图表（如流程图）一样，你可以在图表本身中定义样式，并将该命名样式应用于图表中的一个或多个状态。

¥As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a state or states in the diagram.

这些是状态图 classDef 的当前限制：

¥These are the current limitations with state diagram classDefs:

1. 不能应用于开始或结束状态

   ¥Cannot be applied to start or end states

2. 不能应用于复合状态或复合状态内

   ¥Cannot be applied to or within composite states

这些正在开发中，并将在未来版本中提供。

¥These are in development and will be available in a future version.

你可以使用 classDef 关键字定义样式，该关键字是 "类定义" 的缩写（其中 "class" 表示类似于 CSS 类的内容），后跟样式名称，然后是一个或多个属性值对。每个属性-值对都是 有效的 CSS 属性名称，后跟冒号 (:)，然后是一个值。

¥You define a style using the classDef keyword, which is short for "class definition" (where "class" means something like a CSS class) followed by a name for the style, and then one or more property-value pairs. Each property-value pair is a valid CSS property name followed by a colon (:) and then a value.

下面是只有一个属性-值对的 classDef 的示例：

¥Here is an example of a classDef with just one property-value pair:

    classDef movement font-style:italic;

where

• 样式名称是 movement

  ¥the name of the style is movement

• 唯一的属性是 font-style，其值是 italic

  ¥the only property is font-style and its value is italic

如果你想要多个属性-值对，则可以在每个属性-值对之间放置一个逗号 (,)。

¥If you want to have more than one property-value pair then you put a comma (,) between each property-value pair.

下面是一个包含三个属性-值对的示例：

¥Here is an example with three property-value pairs:

    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

where

• 样式名称是 badBadEvent

  ¥the name of the style is badBadEvent

• 第一个属性是 fill，其值是 #f00

  ¥the first property is fill and its value is #f00

• 第二个属性是 color，其值为 white

  ¥the second property is color and its value is white

• 第三个属性是 font-weight，其值为 bold

  ¥the third property is font-weight and its value is bold

• 第四个属性是 stroke-width，其值为 2px

  ¥the fourth property is stroke-width and its value is 2px

• 第五个属性是 stroke，其值为 yellow

  ¥the fifth property is stroke and its value is yellow

将 classDef 样式应用于状态

¥Apply classDef styles to states

有两种方法可以将 classDef 样式应用于状态：

¥There are two ways to apply a classDef style to a state:

1. 使用 class 关键字将 classDef 样式应用于单个语句中的一个或多个状态，或者

   ¥use the class keyword to apply a classDef style to one or more states in a single statement, or

2. 使用 ::: 运算符将 classDef 样式应用于状态，因为它在转换语句中使用（例如，使用往返另一个状态的箭头）

   ¥use the ::: operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow to/from another state)

1. class 声明

¥ class statement

class 语句告诉 Mermaid 将命名的 classDef 应用于一个或多个类。形式为：

¥A class statement tells Mermaid to apply the named classDef to one or more classes. The form is:

    class [one or more state names, separated by commas] [name of a style defined with classDef]

以下是将 badBadEvent 样式应用于名为 Crash 的状态的示例：

¥Here is an example applying the badBadEvent style to a state named Crash:

class Crash badBadEvent

以下是将 movement 样式应用于 Moving 和 Crash 两个状态的示例：

¥Here is an example applying the movement style to the two states Moving and Crash:

class Moving, Crash movement

这是显示使用示例的图表。请注意，Crash 状态应用了两种 classDef 样式：movement 和 badBadEvent

¥Here is a diagram that shows the examples in use. Note that the Crash state has two classDef styles applied: movement and badBadEvent

2. ::: 运算符将样式应用于状态

¥ ::: operator to apply a style to a state

你可以使用 :::（三个冒号）运算符将 classDef 样式应用于状态。语法是

¥You can apply a classDef style to a state using the ::: (three colons) operator. The syntax is

[state]:::[style name]

你可以在使用类的语句内的图表中使用它。这包括开始和结束状态。例如：

¥You can use this in a diagram within a statement using a class. This includes the start and end states. For example:

状态名称中的空格

¥Spaces in state names

可以通过首先使用 id 定义状态然后稍后引用该 id 来将空格添加到状态中。

¥Spaces can be added to a state by first defining the state with an id and then referencing the id later.

在以下示例中，有一个状态，其 ID 为 yswsii，描述为“你的状态”，其中包含空格。定义后，yswsii 在图中的第一个转换 ([*] --> yswsii) 以及到 YetAnotherState (yswsii --> YetAnotherState) 的转换中使用。（yswsii 的风格与其他状态有所不同。）

¥In the following example there is a state with the id yswsii and description Your state with spaces in it. After it has been defined, yswsii is used in the diagram in the first transition ([*] --> yswsii) and also in the transition to YetAnotherState (yswsii --> YetAnotherState). (yswsii has been styled so that it is different from the other states.)