状态图

【State diagrams】

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

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 cannot 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.】

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

1. 不能应用于起始或结束状态
2. 不能应用于复合州或其内部

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

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

你可以使用 classDef 关键字来定义样式，classDef 是“类定义”（class definition）的缩写（这里的“类”类似于 _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
• 唯一的 属性 是 font-style，其 值 是 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
• 第一个属性是 fill，其值是 #f00
• 第二个属性是 color，它的值是 white
• 第三个 property 是 font-weight，其 value 是 bold
• 第四个属性是 stroke-width，它的值是 2px
• 第五个 属性 是 stroke，其 值 是 yellow

将 classDef 样式应用到状态

【Apply classDef styles to states】

将 classDef 样式应用到状态有两种方式：

【There are two ways to apply a classDef style to a state:】

1. 使用 class 关键字在一条语句中将 classDef 样式应用到一个或多个状态，或者
2. 使用 ::: 运算符在状态被用于转换语句时应用 classDef 样式（例如，带箭头指向/来自另一个状态）

1. class 语句

【1. 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. 使用 ::: 运算符为状态应用样式

【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，描述为 Your state with spaces in it。 定义之后，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.)】