Markdown mermaid种草(7)_ 状态图

最新推荐文章于 2024-06-24 10:31:06 发布

CarnivoreRabbit

最新推荐文章于 2024-06-24 10:31:06 发布

阅读量1.5k

点赞数 1

分类专栏： Markdown 文章标签： markdown mermaid

本文链接：https://blog.csdn.net/horsee/article/details/114032885

版权

Markdown 专栏收录该内容

10 篇文章 8 订阅

订阅专栏

本文详细介绍了如何使用Markdown和Mermaid创建状态图，包括状态定义、状态转移、开始与结束状态、复合状态、分叉、状态标注和并发状态的语法。通过实例演示，让读者掌握状态图在描述系统行为中的实用技巧。

摘要由CSDN通过智能技术生成

Markdown mermaid种草(7)_ 状态图

文章目录

Markdown mermaid种草(7)_ 状态图

1 状态图简介

“状态图是计算机科学和相关领域用于描述系统行为的一种图表。状态图要求所述系统由数量有限的状态组成：有时，这确实是这样，而在其他时候，这是一个合理的抽象。” ——维基百科

mermaid可以渲染状态图.语法试图符合plantUML中使用的语法，因为这将使用户更容易在mermaid和plantUML之间共享图表.

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

在这里插入图片描述

在状态图中，系统被描述为其状态，以及系统状态如何通过过渡更改到另一个状态。上图示示为静止状态、移动状态和崩溃状态。你从静止状态开始。从静止，你可以改变状态移动。在移动中，您可以将状态更改回静止状态或崩溃状态。没有从静止到崩溃的过渡。

2 状态图语法

2.1 状态

状态的定义一共有三种方法：

直接将状态描述作为状态ID.

stateDiagram-v2
    s1

在这里插入图片描述

使用state关键字，使用双引号引用描述，使用as引导状态ID.

stateDiagram-v2
    state "This is a state description" as s2

在这里插入图片描述

状态ID后添加冒号，后接双引号引用的描述.

stateDiagram-v2
    s2 : This is a state description

在这里插入图片描述

2.2 状态转移

状态转移只需要一个-->即可，可以在状态转移后加冒号和文本来进行状态转移的注释.

stateDiagram-v2
    s1 --> s2

在这里插入图片描述

stateDiagram-v2
    s1 --> s2: A transition

在这里插入图片描述

2.3 开始和结束状态

有两种特殊状态指示图表的开始和停止。这些都用 [*] 语法编写，过渡到它的方向将其定义为开始状态或停止状态。

stateDiagram-v2
    [*] --> s1
    s1 --> [*]

在这里插入图片描述

2.4 复合状态

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

为了定义复合状态，你需要使用后面的状态关键字，并在 {}之间使用 ID 和复合状态的主体。请参阅下面的示例：

stateDiagram-v2
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

在这里插入图片描述

多层复合可以如下所示：

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 --> [*]
    }

在这里插入图片描述

2.5 分叉

可以使用<<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 --> [*]

在这里插入图片描述

2.6 状态标注

mermaid允许对状态进行标注，可以标在状态的左侧或右侧，通过note left of或note right of来实现.

可以使用冒号来做单行标注，也可以使用end note进行段落标注，如下例所示.

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.

在这里插入图片描述