您当前的位置: 首页 >  ar

Kevin-Dev

暂无认证

  • 0浏览

    0关注

    544博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

【Android -- 写作工具】Markdown 状态图

Kevin-Dev 发布时间:2020-06-02 22:07:09 ,浏览量:0

在这里插入图片描述

1. 前言

Markdown 的原生语法不支持绘制图形,但通过扩展模块,我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。

本节将重点介绍如何通过 Mermaid 绘制「状态图」。

状态图 (Statechart) 是描述一个实体基于事件反应的动态行为,是使对象达到某种状态的事件、条件或操作的图形化描述。

一个完整的状态图由状态、转换组成。

2. 语法详解

2.1 状态图中的「状态」 状态代表某一对象在某一特定的条件、时间下所保持的静态值。

使用 Mermaid 扩展绘制状态图时,有多种方式声明一个状态节点。

实例 1:

通过设置状态 ID 声明状态

#mermaid-svg-uTPaVNch0iXvngaO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uTPaVNch0iXvngaO .error-icon{fill:#552222;}#mermaid-svg-uTPaVNch0iXvngaO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uTPaVNch0iXvngaO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-uTPaVNch0iXvngaO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uTPaVNch0iXvngaO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uTPaVNch0iXvngaO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uTPaVNch0iXvngaO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uTPaVNch0iXvngaO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uTPaVNch0iXvngaO .marker.cross{stroke:#333333;}#mermaid-svg-uTPaVNch0iXvngaO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uTPaVNch0iXvngaO defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-uTPaVNch0iXvngaO g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-uTPaVNch0iXvngaO g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-uTPaVNch0iXvngaO g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-uTPaVNch0iXvngaO g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-uTPaVNch0iXvngaO g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-uTPaVNch0iXvngaO .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-uTPaVNch0iXvngaO .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-uTPaVNch0iXvngaO .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-uTPaVNch0iXvngaO .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-uTPaVNch0iXvngaO .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-uTPaVNch0iXvngaO .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-uTPaVNch0iXvngaO .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-uTPaVNch0iXvngaO .edgeLabel .label text{fill:#333;}#mermaid-svg-uTPaVNch0iXvngaO .label div .edgeLabel{color:#333;}#mermaid-svg-uTPaVNch0iXvngaO .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-uTPaVNch0iXvngaO .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-uTPaVNch0iXvngaO .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-uTPaVNch0iXvngaO .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-uTPaVNch0iXvngaO .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-uTPaVNch0iXvngaO .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uTPaVNch0iXvngaO .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uTPaVNch0iXvngaO #statediagram-barbEnd{fill:#333333;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uTPaVNch0iXvngaO .cluster-label,#mermaid-svg-uTPaVNch0iXvngaO .nodeLabel{color:#131300;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-uTPaVNch0iXvngaO .note-edge{stroke-dasharray:5;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-note text{fill:black;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram-note .nodeLabel{color:black;}#mermaid-svg-uTPaVNch0iXvngaO .statediagram .edgeLabel{color:red;}#mermaid-svg-uTPaVNch0iXvngaO #dependencyStart,#mermaid-svg-uTPaVNch0iXvngaO #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-uTPaVNch0iXvngaO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
状态1

实例 2:

用单向箭头表示转换。

#mermaid-svg-TetgHzREsGpG9ilZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TetgHzREsGpG9ilZ .error-icon{fill:#552222;}#mermaid-svg-TetgHzREsGpG9ilZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TetgHzREsGpG9ilZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-TetgHzREsGpG9ilZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TetgHzREsGpG9ilZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TetgHzREsGpG9ilZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TetgHzREsGpG9ilZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TetgHzREsGpG9ilZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TetgHzREsGpG9ilZ .marker.cross{stroke:#333333;}#mermaid-svg-TetgHzREsGpG9ilZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TetgHzREsGpG9ilZ defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-TetgHzREsGpG9ilZ g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-TetgHzREsGpG9ilZ g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-TetgHzREsGpG9ilZ g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-TetgHzREsGpG9ilZ g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-TetgHzREsGpG9ilZ g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-TetgHzREsGpG9ilZ .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-TetgHzREsGpG9ilZ .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-TetgHzREsGpG9ilZ .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-TetgHzREsGpG9ilZ .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-TetgHzREsGpG9ilZ .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-TetgHzREsGpG9ilZ .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-TetgHzREsGpG9ilZ .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-TetgHzREsGpG9ilZ .edgeLabel .label text{fill:#333;}#mermaid-svg-TetgHzREsGpG9ilZ .label div .edgeLabel{color:#333;}#mermaid-svg-TetgHzREsGpG9ilZ .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-TetgHzREsGpG9ilZ .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-TetgHzREsGpG9ilZ .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-TetgHzREsGpG9ilZ .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-TetgHzREsGpG9ilZ .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-TetgHzREsGpG9ilZ .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TetgHzREsGpG9ilZ .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TetgHzREsGpG9ilZ #statediagram-barbEnd{fill:#333333;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TetgHzREsGpG9ilZ .cluster-label,#mermaid-svg-TetgHzREsGpG9ilZ .nodeLabel{color:#131300;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-TetgHzREsGpG9ilZ .note-edge{stroke-dasharray:5;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-note text{fill:black;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram-note .nodeLabel{color:black;}#mermaid-svg-TetgHzREsGpG9ilZ .statediagram .edgeLabel{color:red;}#mermaid-svg-TetgHzREsGpG9ilZ #dependencyStart,#mermaid-svg-TetgHzREsGpG9ilZ #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-TetgHzREsGpG9ilZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
状态1
状态2

实例 3:

增加描述。

#mermaid-svg-JEj167A8ZNmDuxDk {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JEj167A8ZNmDuxDk .error-icon{fill:#552222;}#mermaid-svg-JEj167A8ZNmDuxDk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JEj167A8ZNmDuxDk .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-JEj167A8ZNmDuxDk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JEj167A8ZNmDuxDk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JEj167A8ZNmDuxDk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JEj167A8ZNmDuxDk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JEj167A8ZNmDuxDk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JEj167A8ZNmDuxDk .marker.cross{stroke:#333333;}#mermaid-svg-JEj167A8ZNmDuxDk svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JEj167A8ZNmDuxDk defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-JEj167A8ZNmDuxDk g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-JEj167A8ZNmDuxDk g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-JEj167A8ZNmDuxDk g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-JEj167A8ZNmDuxDk g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-JEj167A8ZNmDuxDk g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-JEj167A8ZNmDuxDk .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-JEj167A8ZNmDuxDk .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-JEj167A8ZNmDuxDk .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-JEj167A8ZNmDuxDk .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-JEj167A8ZNmDuxDk .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-JEj167A8ZNmDuxDk .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-JEj167A8ZNmDuxDk .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-JEj167A8ZNmDuxDk .edgeLabel .label text{fill:#333;}#mermaid-svg-JEj167A8ZNmDuxDk .label div .edgeLabel{color:#333;}#mermaid-svg-JEj167A8ZNmDuxDk .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-JEj167A8ZNmDuxDk .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-JEj167A8ZNmDuxDk .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-JEj167A8ZNmDuxDk .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-JEj167A8ZNmDuxDk .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-JEj167A8ZNmDuxDk .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-JEj167A8ZNmDuxDk .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-JEj167A8ZNmDuxDk #statediagram-barbEnd{fill:#333333;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-JEj167A8ZNmDuxDk .cluster-label,#mermaid-svg-JEj167A8ZNmDuxDk .nodeLabel{color:#131300;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-JEj167A8ZNmDuxDk .note-edge{stroke-dasharray:5;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-note text{fill:black;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram-note .nodeLabel{color:black;}#mermaid-svg-JEj167A8ZNmDuxDk .statediagram .edgeLabel{color:red;}#mermaid-svg-JEj167A8ZNmDuxDk #dependencyStart,#mermaid-svg-JEj167A8ZNmDuxDk #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-JEj167A8ZNmDuxDk :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
咻~
状态1
状态2

实例 4:

增加开始和结束节点。

#mermaid-svg-xzZAFYhX96aao77i {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xzZAFYhX96aao77i .error-icon{fill:#552222;}#mermaid-svg-xzZAFYhX96aao77i .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-xzZAFYhX96aao77i .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-xzZAFYhX96aao77i .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-xzZAFYhX96aao77i .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-xzZAFYhX96aao77i .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-xzZAFYhX96aao77i .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-xzZAFYhX96aao77i .marker{fill:#333333;stroke:#333333;}#mermaid-svg-xzZAFYhX96aao77i .marker.cross{stroke:#333333;}#mermaid-svg-xzZAFYhX96aao77i svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-xzZAFYhX96aao77i defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-xzZAFYhX96aao77i g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-xzZAFYhX96aao77i g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-xzZAFYhX96aao77i g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-xzZAFYhX96aao77i g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-xzZAFYhX96aao77i g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-xzZAFYhX96aao77i .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-xzZAFYhX96aao77i .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-xzZAFYhX96aao77i .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-xzZAFYhX96aao77i .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-xzZAFYhX96aao77i .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-xzZAFYhX96aao77i .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-xzZAFYhX96aao77i .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-xzZAFYhX96aao77i .edgeLabel .label text{fill:#333;}#mermaid-svg-xzZAFYhX96aao77i .label div .edgeLabel{color:#333;}#mermaid-svg-xzZAFYhX96aao77i .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-xzZAFYhX96aao77i .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-xzZAFYhX96aao77i .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-xzZAFYhX96aao77i .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-xzZAFYhX96aao77i .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-xzZAFYhX96aao77i .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xzZAFYhX96aao77i .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xzZAFYhX96aao77i #statediagram-barbEnd{fill:#333333;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-xzZAFYhX96aao77i .cluster-label,#mermaid-svg-xzZAFYhX96aao77i .nodeLabel{color:#131300;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-xzZAFYhX96aao77i .note-edge{stroke-dasharray:5;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-note text{fill:black;}#mermaid-svg-xzZAFYhX96aao77i .statediagram-note .nodeLabel{color:black;}#mermaid-svg-xzZAFYhX96aao77i .statediagram .edgeLabel{color:red;}#mermaid-svg-xzZAFYhX96aao77i #dependencyStart,#mermaid-svg-xzZAFYhX96aao77i #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-xzZAFYhX96aao77i :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
状态节点

2.2 状态图中的「嵌套」 在负责的状态描述中,有的状态节点会包含一系列的子状态,我们可以用组合「嵌套」的方式来描绘它们。在 Mermaid 扩展中,描述嵌套的方式,是使用「花括号 {}」描述子状态。

实例 7:

#mermaid-svg-WfznQ4LvlEBhHpoN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WfznQ4LvlEBhHpoN .error-icon{fill:#552222;}#mermaid-svg-WfznQ4LvlEBhHpoN .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WfznQ4LvlEBhHpoN .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WfznQ4LvlEBhHpoN .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WfznQ4LvlEBhHpoN .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WfznQ4LvlEBhHpoN .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WfznQ4LvlEBhHpoN .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WfznQ4LvlEBhHpoN .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WfznQ4LvlEBhHpoN .marker.cross{stroke:#333333;}#mermaid-svg-WfznQ4LvlEBhHpoN svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WfznQ4LvlEBhHpoN defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-WfznQ4LvlEBhHpoN g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-WfznQ4LvlEBhHpoN g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-WfznQ4LvlEBhHpoN g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-WfznQ4LvlEBhHpoN g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-WfznQ4LvlEBhHpoN g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-WfznQ4LvlEBhHpoN .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-WfznQ4LvlEBhHpoN .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-WfznQ4LvlEBhHpoN .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-WfznQ4LvlEBhHpoN .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-WfznQ4LvlEBhHpoN .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-WfznQ4LvlEBhHpoN .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-WfznQ4LvlEBhHpoN .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-WfznQ4LvlEBhHpoN .edgeLabel .label text{fill:#333;}#mermaid-svg-WfznQ4LvlEBhHpoN .label div .edgeLabel{color:#333;}#mermaid-svg-WfznQ4LvlEBhHpoN .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-WfznQ4LvlEBhHpoN .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-WfznQ4LvlEBhHpoN .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-WfznQ4LvlEBhHpoN .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-WfznQ4LvlEBhHpoN .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-WfznQ4LvlEBhHpoN .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WfznQ4LvlEBhHpoN .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WfznQ4LvlEBhHpoN #statediagram-barbEnd{fill:#333333;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WfznQ4LvlEBhHpoN .cluster-label,#mermaid-svg-WfznQ4LvlEBhHpoN .nodeLabel{color:#131300;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-WfznQ4LvlEBhHpoN .note-edge{stroke-dasharray:5;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-note text{fill:black;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram-note .nodeLabel{color:black;}#mermaid-svg-WfznQ4LvlEBhHpoN .statediagram .edgeLabel{color:red;}#mermaid-svg-WfznQ4LvlEBhHpoN #dependencyStart,#mermaid-svg-WfznQ4LvlEBhHpoN #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-WfznQ4LvlEBhHpoN :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
父状态节点
子状态节点

实例 8: 群组之间的嵌套。

#mermaid-svg-ZFP4Ado7fKkTktmp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZFP4Ado7fKkTktmp .error-icon{fill:#552222;}#mermaid-svg-ZFP4Ado7fKkTktmp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ZFP4Ado7fKkTktmp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ZFP4Ado7fKkTktmp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ZFP4Ado7fKkTktmp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ZFP4Ado7fKkTktmp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ZFP4Ado7fKkTktmp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ZFP4Ado7fKkTktmp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ZFP4Ado7fKkTktmp .marker.cross{stroke:#333333;}#mermaid-svg-ZFP4Ado7fKkTktmp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ZFP4Ado7fKkTktmp defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-ZFP4Ado7fKkTktmp g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-ZFP4Ado7fKkTktmp g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-ZFP4Ado7fKkTktmp g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-ZFP4Ado7fKkTktmp g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-ZFP4Ado7fKkTktmp g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-ZFP4Ado7fKkTktmp .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-ZFP4Ado7fKkTktmp .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-ZFP4Ado7fKkTktmp .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-ZFP4Ado7fKkTktmp .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-ZFP4Ado7fKkTktmp .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-ZFP4Ado7fKkTktmp .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-ZFP4Ado7fKkTktmp .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-ZFP4Ado7fKkTktmp .edgeLabel .label text{fill:#333;}#mermaid-svg-ZFP4Ado7fKkTktmp .label div .edgeLabel{color:#333;}#mermaid-svg-ZFP4Ado7fKkTktmp .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-ZFP4Ado7fKkTktmp .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-ZFP4Ado7fKkTktmp .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-ZFP4Ado7fKkTktmp .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-ZFP4Ado7fKkTktmp .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-ZFP4Ado7fKkTktmp .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZFP4Ado7fKkTktmp .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZFP4Ado7fKkTktmp #statediagram-barbEnd{fill:#333333;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZFP4Ado7fKkTktmp .cluster-label,#mermaid-svg-ZFP4Ado7fKkTktmp .nodeLabel{color:#131300;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-ZFP4Ado7fKkTktmp .note-edge{stroke-dasharray:5;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-note text{fill:black;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram-note .nodeLabel{color:black;}#mermaid-svg-ZFP4Ado7fKkTktmp .statediagram .edgeLabel{color:red;}#mermaid-svg-ZFP4Ado7fKkTktmp #dependencyStart,#mermaid-svg-ZFP4Ado7fKkTktmp #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-ZFP4Ado7fKkTktmp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
第一层
第一层子节点
第二层
第二层子节点
第三层
第三层子节点

2.4 状态图中的「分支」 对于非单一结果的状态转换,我们可以使用 和 标签实现。

实例 9:

使用 描述分支,使用 描述聚合。

#mermaid-svg-6aRgmdTuhQ8GyiXW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6aRgmdTuhQ8GyiXW .error-icon{fill:#552222;}#mermaid-svg-6aRgmdTuhQ8GyiXW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-6aRgmdTuhQ8GyiXW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-6aRgmdTuhQ8GyiXW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-6aRgmdTuhQ8GyiXW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-6aRgmdTuhQ8GyiXW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-6aRgmdTuhQ8GyiXW .marker.cross{stroke:#333333;}#mermaid-svg-6aRgmdTuhQ8GyiXW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-6aRgmdTuhQ8GyiXW defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-6aRgmdTuhQ8GyiXW g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-6aRgmdTuhQ8GyiXW g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-6aRgmdTuhQ8GyiXW g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-6aRgmdTuhQ8GyiXW g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-6aRgmdTuhQ8GyiXW g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-6aRgmdTuhQ8GyiXW .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-6aRgmdTuhQ8GyiXW .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-6aRgmdTuhQ8GyiXW .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-6aRgmdTuhQ8GyiXW .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-6aRgmdTuhQ8GyiXW .edgeLabel .label text{fill:#333;}#mermaid-svg-6aRgmdTuhQ8GyiXW .label div .edgeLabel{color:#333;}#mermaid-svg-6aRgmdTuhQ8GyiXW .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-6aRgmdTuhQ8GyiXW .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-6aRgmdTuhQ8GyiXW .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-6aRgmdTuhQ8GyiXW .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-6aRgmdTuhQ8GyiXW .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-6aRgmdTuhQ8GyiXW .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6aRgmdTuhQ8GyiXW #statediagram-barbEnd{fill:#333333;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .cluster-label,#mermaid-svg-6aRgmdTuhQ8GyiXW .nodeLabel{color:#131300;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-6aRgmdTuhQ8GyiXW .note-edge{stroke-dasharray:5;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-note text{fill:black;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram-note .nodeLabel{color:black;}#mermaid-svg-6aRgmdTuhQ8GyiXW .statediagram .edgeLabel{color:red;}#mermaid-svg-6aRgmdTuhQ8GyiXW #dependencyStart,#mermaid-svg-6aRgmdTuhQ8GyiXW #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-6aRgmdTuhQ8GyiXW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
分支2
分支3
状态4

2.5 状态图中的「并行」 对于一些同步完成的状态转换,我们可以用 – 符号声明并行效果。

实例 11:

#mermaid-svg-53b9omRsrr1a4T6L {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-53b9omRsrr1a4T6L .error-icon{fill:#552222;}#mermaid-svg-53b9omRsrr1a4T6L .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-53b9omRsrr1a4T6L .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-53b9omRsrr1a4T6L .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-53b9omRsrr1a4T6L .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-53b9omRsrr1a4T6L .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-53b9omRsrr1a4T6L .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-53b9omRsrr1a4T6L .marker{fill:#333333;stroke:#333333;}#mermaid-svg-53b9omRsrr1a4T6L .marker.cross{stroke:#333333;}#mermaid-svg-53b9omRsrr1a4T6L svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-53b9omRsrr1a4T6L defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-53b9omRsrr1a4T6L g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-53b9omRsrr1a4T6L g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-53b9omRsrr1a4T6L g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-53b9omRsrr1a4T6L g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-53b9omRsrr1a4T6L g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-53b9omRsrr1a4T6L .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-53b9omRsrr1a4T6L .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-53b9omRsrr1a4T6L .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-53b9omRsrr1a4T6L .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-53b9omRsrr1a4T6L .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-53b9omRsrr1a4T6L .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-53b9omRsrr1a4T6L .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-53b9omRsrr1a4T6L .edgeLabel .label text{fill:#333;}#mermaid-svg-53b9omRsrr1a4T6L .label div .edgeLabel{color:#333;}#mermaid-svg-53b9omRsrr1a4T6L .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-53b9omRsrr1a4T6L .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-53b9omRsrr1a4T6L .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-53b9omRsrr1a4T6L .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-53b9omRsrr1a4T6L .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-53b9omRsrr1a4T6L .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-53b9omRsrr1a4T6L .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-53b9omRsrr1a4T6L #statediagram-barbEnd{fill:#333333;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-53b9omRsrr1a4T6L .cluster-label,#mermaid-svg-53b9omRsrr1a4T6L .nodeLabel{color:#131300;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-53b9omRsrr1a4T6L .note-edge{stroke-dasharray:5;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-note text{fill:black;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram-note .nodeLabel{color:black;}#mermaid-svg-53b9omRsrr1a4T6L .statediagram .edgeLabel{color:red;}#mermaid-svg-53b9omRsrr1a4T6L #dependencyStart,#mermaid-svg-53b9omRsrr1a4T6L #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-53b9omRsrr1a4T6L :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
激活状态
按下 NumLock 键
按下 NumLock 键
NumLock关
NumLock开
按下 CapsLock 键
按下 CapsLock 键
CapsLock关
CapsLock开
按下 ScrollLock 键
按下 ScrollLock 键
ScrollLock关
ScrollLock开

2.6 为状态图增加「备注」 有时候图表元素不能完全表达我们的设计思路,这时候需要在图中加入文字描述。在 Mermaid 语法中,使用 note of 备注内容 end notes 的方式,将备注添加到状态节点的右侧(左侧)。

实例 12:

#mermaid-svg-yhdAl9BYiVDMdRVl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-yhdAl9BYiVDMdRVl .error-icon{fill:#552222;}#mermaid-svg-yhdAl9BYiVDMdRVl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-yhdAl9BYiVDMdRVl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-yhdAl9BYiVDMdRVl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-yhdAl9BYiVDMdRVl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-yhdAl9BYiVDMdRVl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-yhdAl9BYiVDMdRVl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-yhdAl9BYiVDMdRVl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-yhdAl9BYiVDMdRVl .marker.cross{stroke:#333333;}#mermaid-svg-yhdAl9BYiVDMdRVl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-yhdAl9BYiVDMdRVl defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-yhdAl9BYiVDMdRVl g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-yhdAl9BYiVDMdRVl g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-yhdAl9BYiVDMdRVl g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-yhdAl9BYiVDMdRVl g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-yhdAl9BYiVDMdRVl g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-yhdAl9BYiVDMdRVl .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-yhdAl9BYiVDMdRVl .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-yhdAl9BYiVDMdRVl .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-yhdAl9BYiVDMdRVl .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-yhdAl9BYiVDMdRVl .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-yhdAl9BYiVDMdRVl .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-yhdAl9BYiVDMdRVl .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-yhdAl9BYiVDMdRVl .edgeLabel .label text{fill:#333;}#mermaid-svg-yhdAl9BYiVDMdRVl .label div .edgeLabel{color:#333;}#mermaid-svg-yhdAl9BYiVDMdRVl .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-yhdAl9BYiVDMdRVl .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-yhdAl9BYiVDMdRVl .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-yhdAl9BYiVDMdRVl .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-yhdAl9BYiVDMdRVl .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-yhdAl9BYiVDMdRVl .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-yhdAl9BYiVDMdRVl .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-yhdAl9BYiVDMdRVl #statediagram-barbEnd{fill:#333333;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-yhdAl9BYiVDMdRVl .cluster-label,#mermaid-svg-yhdAl9BYiVDMdRVl .nodeLabel{color:#131300;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-yhdAl9BYiVDMdRVl .note-edge{stroke-dasharray:5;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-note text{fill:black;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram-note .nodeLabel{color:black;}#mermaid-svg-yhdAl9BYiVDMdRVl .statediagram .edgeLabel{color:red;}#mermaid-svg-yhdAl9BYiVDMdRVl #dependencyStart,#mermaid-svg-yhdAl9BYiVDMdRVl #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-yhdAl9BYiVDMdRVl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
描述将出现在右侧
这里添加描述内容
状态2
在节点左侧添加描述
3. 使用场景及实例

状态图专门用于表示依赖于状态的行为。

实例 13:

出货状态示意图。

#mermaid-svg-2LqBhor8pica2IPf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-2LqBhor8pica2IPf .error-icon{fill:#552222;}#mermaid-svg-2LqBhor8pica2IPf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2LqBhor8pica2IPf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-2LqBhor8pica2IPf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2LqBhor8pica2IPf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2LqBhor8pica2IPf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2LqBhor8pica2IPf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2LqBhor8pica2IPf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2LqBhor8pica2IPf .marker.cross{stroke:#333333;}#mermaid-svg-2LqBhor8pica2IPf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2LqBhor8pica2IPf defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-2LqBhor8pica2IPf g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-2LqBhor8pica2IPf g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-2LqBhor8pica2IPf g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-2LqBhor8pica2IPf g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-2LqBhor8pica2IPf g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-2LqBhor8pica2IPf .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-2LqBhor8pica2IPf .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-2LqBhor8pica2IPf .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-2LqBhor8pica2IPf .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-2LqBhor8pica2IPf .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-2LqBhor8pica2IPf .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-2LqBhor8pica2IPf .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-2LqBhor8pica2IPf .edgeLabel .label text{fill:#333;}#mermaid-svg-2LqBhor8pica2IPf .label div .edgeLabel{color:#333;}#mermaid-svg-2LqBhor8pica2IPf .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-2LqBhor8pica2IPf .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-2LqBhor8pica2IPf .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-2LqBhor8pica2IPf .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-2LqBhor8pica2IPf .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-2LqBhor8pica2IPf .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2LqBhor8pica2IPf .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2LqBhor8pica2IPf #statediagram-barbEnd{fill:#333333;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2LqBhor8pica2IPf .cluster-label,#mermaid-svg-2LqBhor8pica2IPf .nodeLabel{color:#131300;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-2LqBhor8pica2IPf .note-edge{stroke-dasharray:5;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-note text{fill:black;}#mermaid-svg-2LqBhor8pica2IPf .statediagram-note .nodeLabel{color:black;}#mermaid-svg-2LqBhor8pica2IPf .statediagram .edgeLabel{color:red;}#mermaid-svg-2LqBhor8pica2IPf #dependencyStart,#mermaid-svg-2LqBhor8pica2IPf #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-2LqBhor8pica2IPf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
下单成功
备货
出货失败
出货确认
出货完毕
订单完成
4. 小结
  • Mermaid 为 Markdown 扩展了使用普通文本生成状态图的语法及渲染支持;
  • Mermaid 状态图的基本元素包含「状态节点」、「转换」;
  • Mermaid 状态图还可以将节点合并,实现「嵌套」的效果;
  • Mermaid 状态图的逻辑支持「分支」、「并行」;
  • Mermaid 状态图还可以通过「备注」的方式,为状态图提供更多的细节描述。
关注
打赏
1658837700
查看更多评论
立即登录/注册

微信扫码登录

0.0697s