前言

状态图是一个有限状态的表达，基本用于我们编程语言的逻辑运行。

mermaid 的状态图，官方说尽可能保持和 plantuml 一致，也就说写法上都差不多。

基础语法

  1. # 这里拿官方的例子来说明
  2. # * 和 单词都是代表一个节点
  3. # * 是特殊节点，必须存在的！
  4. stateDiagram
  5.     [*] --> Still
  6.     Still --> [*]
  8.     Still --> Moving
  9.     Moving --> Still
  10.     Moving --> Crash
  11.     Crash --> [*]

State diagrams(状态图) - 图1

添加描述信息节点

  1. # 姿势1
  2. stateDiagram
  3.     state "This is a state description" as s2
  4.     [*] --> s2
  5.     s1 --> s2
  6.     s2 --> [*]
  9. # 姿势2
  10. stateDiagram
  11.     s2:"This is a state description"
  12.     [*] --> s2
  13.     s1 --> s2
  14.     state --> [*]

State diagrams(状态图) - 图2

节点之间的过渡描述

  1. stateDiagram
  2.   [*]--> 西游记四师徒
  3.     西游记四师徒 --> 大雷音寺: 经过九九八十一难
  4.     大雷音寺 -->[*]: 功德圆满

State diagrams(状态图) - 图3

节点传递状态

  1. stateDiagram
  2.     [*] --> 不知名的家庭
  3.     不知名的家庭 --> 儿子
  4.     不知名的家庭 --> 女儿
  6.     state 儿子 {
  7.         [*] --> 努力学习
  8.         努力学习 --> 打工赚钱
  9.         打工赚钱 --> 娶妻养娃
  10.         娶妻养娃 --> [*]
  11.     }
  12.     state 女儿 {
  13.         [*] --> 努力学习
  14.         努力学习 --> 打工赚钱
  15.         打工赚钱 --> 嫁人生娃
  16.         嫁人生娃 --> [*]
  17.     }
  18.     儿子 --> 孤独终老
  19.     女儿 --> 孤独终老
  20.     孤独终老 --> 化作春泥更护花
  21.     化作春泥更护花 --> [*]

State diagrams(状态图) - 图4

状态 fork 和 join

状态分叉主要使用修饰符<<fork>>

状态汇合主要使用修饰符<<join>>

  1. stateDiagram
  2.     state 人类 <<fork>>
  3.       [*] --> 人类
  4.       人类 --> 亚洲人
  5.       人类 --> 美洲人
  6.       人类 --> 印第安人
  8.       state 都离不开 <<join>>
  9.       亚洲人 --> 都离不开
  10.       美洲人 --> 都离不开
  11.       印第安人 --> 都离不开
  12.       都离不开 --> 生命之泉
  13.       生命之泉 --> [*]

State diagrams(状态图) - 图5

备注

支持的方向有：right of，left of

接着上面的例子说

  1. stateDiagram
  2.     state 人类 <<fork>>
  3.       [*] --> 人类
  4.             note left of 人类: 人类也是哺乳动物的一种,哪来那么高贵，无非适者生存，不适者淘汰
  5.       人类 --> 亚洲人
  6.       人类 --> 美洲人
  7.       人类 --> 印第安人
  10.       state 水 <<join>>
  11.                 亚洲人 --> 水
  12.                 美洲人 --> 水
  13.                 印第安人 --> 水
  14.                 水 --> 生命之泉
  15.                 note right of 生命之泉
  16.                     又名 water
  17.                 end note    
  18.                 生命之泉 --> [*]

State diagrams(状态图) - 图6

并发状态

并发状态主要用到修饰符—

  1. stateDiagram
  2.   [*] --> 开炮
  3.     开炮--> 胜利:大吉大利,今晚吃鸡
  4.     胜利 --> [*]
  6.   state 开炮 {
  7.   [*] --> 激光炮
  8.   激光炮 --> 发射 : 充能
  9.   发射 --> 熄火 : 能量消耗完毕
  10.   --
  11.   [*] --> 东风41
  12.   东风41 --> 定点打击 : 定位->蓄能
  13.   定点打击 --> 熄火 : 确认目标击中
  14. }

State diagrams(状态图) - 图7