状态图
"状态图是一种用于计算机科学及相关领域的图表，用于描述系统的行为。状态图要求所描述的系统由有限数量的状态组成；有时确实如此，而其他时候这是一个合理的抽象。" 维基百科
Mermaid 可以渲染状态图。语法尝试与 plantUml 中使用的语法兼容，这将使用户更容易在 Mermaid 和 plantUml 之间共享图表。
旧版渲染器：
在状态图中，系统通过状态以及一个状态如何通过转换变为另一个状态来描述。上面的示例图显示了三个状态：静止、移动和碰撞。你从静止状态开始。从静止状态，你可以转换到移动状态。从移动状态，你可以转换回静止状态或转换到碰撞状态。没有从静止状态到碰撞状态的转换。（如果你静止不动，你就不会碰撞。）
状态
状态可以通过多种方式声明。最简单的方法是仅使用id定义状态：
另一种方法是使用状态关键字和描述，如下所示：
另一种定义带有描述的状态的方法是定义状态ID，后跟冒号和描述：
过渡
过渡是指一个状态转变为另一个状态时的路径/边。这通常使用文本箭头“-->”来表示。
当你在两个状态之间定义过渡，而这些状态尚未定义时，未定义的状态将使用过渡中的ID进行定义。你可以稍后为以这种方式定义的状态添加描述。
可以在过渡中添加文本来描述它所代表的内容：
开始和结束
有两个特殊状态表示图的开始和结束。这些状态使用[*]语法编写，并且向它的转换方向定义了它是开始状态还是结束状态。
复合状态
在实际使用状态图时，你经常会遇到多维的图表，因为一个状态可能有多个内部状态。在这个术语中，这些被称为复合状态。
为了定义一个复合状态，你需要使用state关键字，后跟一个id和复合状态的主体，主体放在{}之间。你可以像简单状态一样在单独的一行上命名复合状态。请参见下面的示例：
你可以在多个层次上做到这一点：
你也可以在复合状态之间定义过渡：
你不能定义属于不同复合状态的内部状态之间的转换
选择
有时你需要在两个或多个路径之间做出选择，你可以使用<
分支
可以在图中使用<
注释
有时候，没有什么比便利贴更能表达清楚了。在状态图中也是如此。
在这里，您可以选择将注释放在节点的右侧或左侧。
并发
与在plantUml中一样，您可以使用--符号来指定并发性。
设置图表的方向
使用状态图时，您可以使用方向语句来设置图表的渲染方向，如本例所示。
评论
可以在状态图图表中输入注释，这些注释将被解析器忽略。注释需要单独成行，并且必须以%%（双百分号）开头。从注释开始到下一个换行符之间的任何文本都将被视为注释，包括任何图表语法
使用classDefs进行样式设置
与其他图表（如流程图）一样，您可以在图表本身中定义一个样式，并将该命名样式应用于图表中的一个或多个状态。
以下是状态图类定义的当前限制：
- 不能应用于开始或结束状态
- 不能应用于或包含在复合状态中
这些功能正在开发中，将在未来的版本中提供。
您使用classDef关键字定义一个样式，这是“类定义”的缩写（其中“类”类似于CSS类），后面跟着样式的名称，然后是一个或多个属性-值对。每个属性-值对是一个有效的CSS属性名称，后面跟着一个冒号（:），然后是一个值。
这是一个只有一个属性-值对的classDef示例：
classDef movement font-style:italic;其中
- 样式的名称是
movement - 唯一的属性是
font-style，其值为italic
如果你想要有多个属性-值对，那么你需要在每个属性-值对之间加上逗号（,）。
这是一个包含三个属性-值对的示例：
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow其中
- 样式的名称是
badBadEvent - 第一个属性是
fill，其值为#f00 - 第二个属性是
color，其值为white - 第三个属性是
font-weight，其值为bold - 第四个属性是
stroke-width，其值为2px - 第五个属性是
stroke，其值为yellow
应用classDef样式到状态
有两种方法可以将classDef样式应用于状态：
- 使用
class关键字将classDef样式应用于单个语句中的一个或多个状态，或者 - 使用
:::操作符在转换语句中应用 classDef 样式到状态（例如，使用箭头指向/来自另一个状态）
1. class 语句
一个 class 语句告诉 Mermaid 将命名的 classDef 应用到一个或多个类。形式如下：
class [one or more state names, separated by commas] [name of a style defined with classDef]这是一个将badBadEvent样式应用于名为Crash状态的示例：
class Crash badBadEvent以下是将movement样式应用于两个状态Moving和Crash的示例：
class Moving, Crash movement这里是一个展示使用示例的图表。请注意，Crash状态应用了两个classDef样式：movement和badBadEvent
2. ::: 操作符用于将样式应用于状态
你可以使用:::（三个冒号）操作符将classDef样式应用于状态。语法是
[state]:::[style name]你可以在语句中使用类来在图表中使用这个。这包括开始和结束状态。例如：
州名中的空格
可以通过首先使用id定义状态，然后在以后引用该id来向状态添加空格。
在以下示例中，有一个状态，其ID为yswsii，描述为Your state with spaces in it。定义后，yswsii在图表中的第一个转换（[*] --> yswsii）以及到YetAnotherState的转换（yswsii --> YetAnotherState）中使用。（yswsii已被样式化，使其与其他状态不同。）