树形图 
括号图 
思维笔记 
状态图
Mermaid状态图语法与plantUml中使用的语法兼容，这将使用户更容易在 mermaid 和 plantUml 之间共享图表。
复制
嵌入
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
旧编辑器：
复制
嵌入
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
新编辑器：
在状态图中，系统是根据状态以及一个状态如何通过转换变更为另一种状态来描述的。上面的示例图显示了三种状态：静止、移动和碰撞。你从静止状态开始，从静止状态可以变为移动状态。从移动状态，你可以回到静止状态，或者变为碰撞状态。没有从静止状态到碰撞状态的转换。（如果保持静止，你不会发生碰撞。）
状态
可以通过多种方式声明状态，最简单的方法是仅用一个 id 来定义状态：
复制
嵌入
stateDiagram-v2
stateId
另一种方法是使用 state 关键字，并添加以下描述：
复制
嵌入
stateDiagram-v2
state "This is a state description" as s2
定义带有描述的状态的另一种方法是先定义状态 ID，然后添加冒号和描述：
复制
嵌入
stateDiagram-v2
s2 : This is a state description
转换
转换是指当一个状态进入另一个状态时的连接线，使用文本箭头 "-->" 表示。
当你定义两个状态之间的转换，并且状态尚未定义时，未定义的状态将使用转换中的 id 进行定义。之后，你可以为以这种方式定义的状态添加描述。
复制
嵌入
stateDiagram-v2
s1 --> s2
可以向转换中添加文本来描述它所代表的内容：
复制
嵌入
stateDiagram-v2
s1 --> s2: A transition
开始和结束
有两种特殊状态表示图表的开始和停止。这两个状态使用 [*] 语法表示，其到该状态的转移方向决定了它是开始状态还是结束状态。
复制
嵌入
stateDiagram-v2
[*] --> s1
s1 --> [*]
复合状态
在现实世界中使用状态图时，你经常会遇到多维的图，因为一个状态可以有多个内部状态，这被称为复合状态。
为了定义复合状态，你需要使用 state 关键字，后面跟一个 id，并在大括号 {} 中写出复合状态的主体。你可以像定义简单状态一样，在单独的一行上命名复合状态。请参阅下面的示例：
复制
嵌入
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
你可以分几个层次来操作：
复制
嵌入
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
你还可以定义复合状态之间的转换：
复制
嵌入
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
注意：不能定义属于不同复合状态的内部状态之间的转换。
选择
有时你需要模拟在两条或多条路径之间做出选择，可以使用 <<choice>> 来实现。
复制
嵌入
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
分叉/合并
可以使用 <<fork>> <<join>> 在图中指定一个分叉/合并。
复制
嵌入
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
注意
状态图中使用注释更能清晰的表达，可以选择将注释放在节点的右侧或左侧。
复制
嵌入
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
并发
与在 plantUml 中一样，你可以使用中划线符号 -- 指定并发性。
复制
嵌入
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
设置图表方向
对于状态图，你可以使用方向语句来设置图表渲染方向，如本例所示。
复制
嵌入
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
注释
可以在状态图表中输入注释，编辑器将忽略这些注释。注释必须以双百分号 (%%) 开头,从该标记到下一个换行符之间的所有文本都将被视为注释，包括任何图表语法。注释可以单独占一行，也可以放在语句的末尾。
复制
嵌入
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
使用 classDefs 设置样式
状态图 classDef 当前限制：
1.不能应用于开始或结束状态
2.不能应用于复合状态或复合状态内部
你可以使用 classDef 关键字（即 class definition 的缩写，其中的“class”类似于 CSS 中的类）来定义样式。classDef 后面是样式名称，再接一个或多个‘属性-值’，每个‘属性-值’由一个合法的 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
复制
嵌入
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*]--> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
class end badBadEvent
2. 使用 ::: 运算符为状态应用样式
你可以使用运算符 ::: 将 classDef 样式应用于状态。语法是：
复制
嵌入
[state]:::[style name]
你可以在使用类的语句应用它，这包括开始状态和结束状态。例如：
复制
嵌入
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
状态名的空格
可以先使用 id 定义状态，然后在之后引用该 id 来向状态添加空格。
在以下示例中，有一个状态，其 ID 为 yswsii，描述为‘’Your state with spaces in it’。定义后，yswsii 在图表的第一个转换中使用 ([*] --> yswsii)， 并且在转换到 YetAnotherState 时也使用了它 (yswsii --> YetAnotherState)。yswsii 已被设置样式，使其与其他状态不同。
复制
嵌入
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
