marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-10 17:49:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

update demos/state.html to includ examples; formatting

Browse Source
This commit is contained in:
Ashley Engelund (weedySeaDragon @ github)
2022-11-21 16:59:55 -08:00
parent 4703523d6b
commit 7f5b48920c
2 changed files with 78 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
demos/state.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" xmlns="http://www.w3.org/1999/html">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -33,8 +33,9 @@ title: Very simple diagram
<p> <p>
<code> <code>
classDef notMoving fill:white<br /> classDef notMoving fill:white<br />
classDef movement font-style:italic;<br /> classDef movement font-style:italic<br />
classDef badBadEvent fill:#f00,color:white,font-weight:bold<br /> classDef badBadEvent
fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br />
</code> </code>
</p> </p>
<h4>And these are how they are applied:</h4> <h4>And these are how they are applied:</h4>
@@ -49,15 +50,17 @@ title: Very simple diagram
--- ---
title: Very simple diagram title: Very simple diagram
--- ---
stateDiagram-v2 stateDiagram
direction TB
accTitle: This is the accessible title accTitle: This is the accessible title
accDescr: This is an accessible description accDescr: This is an accessible description
classDef notMoving fill:white classDef notMoving fill:white
classDef movement font-style:italic; classDef movement font-style:italic
classDef badBadEvent fill:#f00,color:white,font-weight:bold classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still [*]--> Still
Still --> [*] Still --> [*]
Still --> Moving Still --> Moving
Moving --> Still Moving --> Still
@@ -67,10 +70,57 @@ title: Very simple diagram
class Still notMoving class Still notMoving
class Moving, Crash movement class Moving, Crash movement
class Crash badBadEvent class Crash badBadEvent
class end badBadEvent
</pre> </pre>
<hr /> <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"> <pre class="mermaid">
stateDiagram-v2 stateDiagram-v2
accTitle: very very simple state accTitle: very very simple state
@@ -79,6 +129,20 @@ title: Very simple diagram
</pre> </pre>
<hr /> <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> <h2>You can label the relationships</h2>
<pre class="mermaid"> <pre class="mermaid">
stateDiagram-v2 stateDiagram-v2
@@ -127,7 +191,7 @@ title: Very simple diagram
<pre class="mermaid"> <pre class="mermaid">
stateDiagram-v2 stateDiagram-v2
[*] --> S1 [*] --> 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. S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
</pre> </pre>
@@ -139,7 +203,7 @@ title: Very simple diagram
direction LR direction LR
State1: A state with a note State1: A state with a note
note right of State1 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 end note
State1 --> State2 State1 --> State2
note left of State2 : Notes can be to the left of a state\n(like this one). note left of State2 : Notes can be to the left of a state\n(like this one).

13
packages/mermaid/src/docs/syntax/stateDiagram.md
View File

@@ -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 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 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 **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.) the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)
## States ## 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. state or states in the diagram.
**These are the current limitations with state diagram classDefs:** **These are the current limitations with state diagram classDefs:**
1. They cannot be applied to start or end states 1. They cannot be applied to start or end states
2. The cannot be applied to or within composite states 2. The cannot be applied to or within composite states
_These are in development and will be available in a future version._ _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 You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
like a _CSS class_) like a _CSS class_)
followed by _a name for the style,_ 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 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) to/from another state)
#### 1. `class` statement #### 1. `class` statement
A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is: 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 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` Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
and `badBadEvent` and `badBadEvent`
@@ -392,8 +390,6 @@ stateDiagram
Crash:::badBadEvent --> [*] Crash:::badBadEvent --> [*]
``` ```
## Spaces in state names ## 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. 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`) 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`). and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
(**yswsii** has been styled so that it is different from the other states.) (**yswsii** has been styled so that it is different from the other states.)
```mermaid-example ```mermaid-example
stateDiagram stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it yswsii: Your state with spaces in it
[*] --> yswsii:::yourState [*] --> yswsii:::yourState
[*] --> SomeOtherState [*] --> SomeOtherState