update demos/state.html to includ examples; formatting
This commit is contained in:
Ashley Engelund (weedySeaDragon @ github)
parent
4703523d6b
commit
7f5b48920c
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
|
@ -33,8 +33,9 @@ title: Very simple diagram
|
|||
<p>
|
||||
<code>
|
||||
classDef notMoving fill:white<br />
|
||||
classDef movement font-style:italic;<br />
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold<br />
|
||||
classDef movement font-style:italic<br />
|
||||
classDef badBadEvent
|
||||
fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br />
|
||||
</code>
|
||||
</p>
|
||||
<h4>And these are how they are applied:</h4>
|
||||
|
|
@ -49,15 +50,17 @@ title: Very simple diagram
|
|||
---
|
||||
title: Very simple diagram
|
||||
---
|
||||
stateDiagram-v2
|
||||
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:#f00,color:white,font-weight:bold
|
||||
classDef movement font-style:italic
|
||||
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
|
||||
[*] --> Still
|
||||
[*]--> Still
|
||||
Still --> [*]
|
||||
Still --> Moving
|
||||
Moving --> Still
|
||||
|
|
@ -67,10 +70,57 @@ title: Very simple diagram
|
|||
class Still notMoving
|
||||
class Moving, Crash movement
|
||||
class Crash badBadEvent
|
||||
class end badBadEvent
|
||||
</pre>
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Here is a diagram that uses the ::: operator to apply styles to states</h2>
|
||||
<h4>Here are the <code>classDef</code> statements:</h4>
|
||||
<p>
|
||||
<code>
|
||||
classDef notMoving fill:white<br />
|
||||
classDef movement font-style:italic<br />
|
||||
classDef badBadEvent
|
||||
fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br />
|
||||
</code>
|
||||
</p>
|
||||
<h4>And these are how they are applied:</h4>
|
||||
<p>
|
||||
<code>
|
||||
[*] --> Still:::notMoving<br />
|
||||
...<br />
|
||||
Still --> Moving:::movement<br />
|
||||
...<br />
|
||||
Moving --> Crash:::movement<br />
|
||||
Crash:::badBadEvent --> [*]<br />
|
||||
</code>
|
||||
</p>
|
||||
<p>
|
||||
Note that both the starting state and the end state have styles applied:<br />
|
||||
The start state has the <i>start</i> classDef style<br />and the end state has the
|
||||
<i>stop</i> classDef style applied.
|
||||
</p>
|
||||
<pre class="mermaid">
|
||||
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:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
|
||||
|
||||
[*] --> Still:::notMoving
|
||||
Still --> [*]
|
||||
Still --> Moving:::movement
|
||||
Moving --> Still
|
||||
Moving --> Crash:::movement
|
||||
Crash:::badBadEvent --> [*]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<pre class="mermaid">
|
||||
stateDiagram-v2
|
||||
accTitle: very very simple state
|
||||
|
|
@ -79,6 +129,20 @@ title: Very simple diagram
|
|||
</pre>
|
||||
<hr />
|
||||
|
||||
<h2>States with spaces in them</h2>
|
||||
<pre class="mermaid">
|
||||
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 --> [*]
|
||||
</pre>
|
||||
<hr />
|
||||
|
||||
<h2>You can label the relationships</h2>
|
||||
<pre class="mermaid">
|
||||
stateDiagram-v2
|
||||
|
|
@ -127,7 +191,7 @@ title: Very simple diagram
|
|||
<pre class="mermaid">
|
||||
stateDiagram-v2
|
||||
[*] --> S1
|
||||
S1 --> S2: This long line uses a br tag<br/>to create multiple<br/>lines.
|
||||
S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines.
|
||||
S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
|
||||
|
||||
</pre>
|
||||
|
|
@ -139,7 +203,7 @@ title: Very simple diagram
|
|||
direction LR
|
||||
State1: A state with a note
|
||||
note right of State1
|
||||
Important information!<br />You can write notes.<br/>And\nthey\ncan\nbe\nmulti-\nline.
|
||||
Important information!<br />You can write notes.<br />And\nthey\ncan\nbe\nmulti-\nline.
|
||||
end note
|
||||
State1 --> State2
|
||||
note left of State2 : Notes can be to the left of a state\n(like this one).
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ stateDiagram
|
|||
```
|
||||
|
||||
In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via
|
||||
a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
|
||||
**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
|
||||
a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
|
||||
**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
|
||||
the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)
|
||||
|
||||
## States
|
||||
|
|
@ -266,12 +266,12 @@ As with other diagrams (like flowcharts), you can define a style in the diagram
|
|||
state or states in the diagram.
|
||||
|
||||
**These are the current limitations with state diagram classDefs:**
|
||||
|
||||
1. They cannot be applied to start or end states
|
||||
2. The cannot be applied to or within composite states
|
||||
|
||||
_These are in development and will be available in a future version._
|
||||
|
||||
|
||||
You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
|
||||
like a _CSS class_)
|
||||
followed by _a name for the style,_
|
||||
|
|
@ -314,7 +314,6 @@ There are two ways to apply a `classDef` style to a state:
|
|||
2. use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
|
||||
to/from another state)
|
||||
|
||||
|
||||
#### 1. `class` statement
|
||||
|
||||
A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
|
||||
|
|
@ -335,7 +334,6 @@ Here is an example applying the `movement` style to the two states `Moving` and
|
|||
class Moving, Crash movement
|
||||
```
|
||||
|
||||
|
||||
Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
|
||||
and `badBadEvent`
|
||||
|
||||
|
|
@ -392,8 +390,6 @@ stateDiagram
|
|||
Crash:::badBadEvent --> [*]
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Spaces in state names
|
||||
|
||||
Spaces can be added to a state by first defining the state with an id and then referencing the id later.
|
||||
|
|
@ -402,10 +398,11 @@ In the following example there is a state with the id **yswsii** and description
|
|||
After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
|
||||
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
|
||||
(**yswsii** has been styled so that it is different from the other states.)
|
||||
|
||||
```mermaid-example
|
||||
stateDiagram
|
||||
classDef yourState font-style:italic,font-weight:bold,fill:white
|
||||
|
||||
|
||||
yswsii: Your state with spaces in it
|
||||
[*] --> yswsii:::yourState
|
||||
[*] --> SomeOtherState
|
||||
|
|
|
|||
Loading…
Reference in New Issue