GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Spelling, markdown lint cleanup

Browse Source 
Fixed spelling errors. Applied some markdown lint standards.
This commit is contained in:
Doug Hill 2019-10-22 20:10:35 -10:00 committed by GitHub
parent 61a3802494
commit 08762bc066
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 45 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
docs/stateDiagram.md
View File

@ -2,10 +2,9 @@
> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia > "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
share diagrams between mermaid and plantUml.
``` ```markdown
stateDiagram stateDiagram
[*] --> Still [*] --> Still
Still --> [*] Still --> [*]
@ -15,6 +14,7 @@ stateDiagram
Moving --> Crash Moving --> Crash
Crash --> [*] Crash --> [*]
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
[*] --> Still [*] --> Still
@ -25,53 +25,58 @@ stateDiagram
Moving --> Crash Moving --> Crash
Crash --> [*] Crash --> [*]
``` ```
In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash. In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
## States ## States
A state can be declares in multiple ways. The simplest way is to define a state id as a description. A state can be declares in multiple ways. The simplest way is to define a state id as a description.
``` ```markdown
stateDiagram stateDiagram
s1 s1
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
s1 s1
``` ```
Another way is by using the state keyword with a description as per below: Another way is by using the state keyword with a description as per below:
```
```markdown
stateDiagram stateDiagram
state "This ia state decription" as s2 state "This is a state description" as s2
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
state "This ia state decription" as s2 state "This is a state description" as s2
``` ```
Another way to define a state with a description is to define the state id followed by a colon and the description: Another way to define a state with a description is to define the state id followed by a colon and the description:
```
```markdown
stateDiagram stateDiagram
s2 : This ia state decription s2 : This is a state description
```
```mermaid
stateDiagram
s2 : This ia state decription
``` ```
```mermaid
stateDiagram
s2 : This is a state description
```
## Transitions ## Transitions
Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->". Transitions are path/edges when one state passes into another. This is represented using text arrow, "\-\-\>".
When you define a transition between two states and the states are not already defined the undefined states are defined with the id When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
from the transition. You can later add descriptions to states defined this way.
``` ```markdown
stateDiagram stateDiagram
s1 --> s2 s1 --> s2
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
s1 --> s2 s1 --> s2
@ -79,39 +84,40 @@ stateDiagram
It is possible to add text to a transition. To describe what it represents. It is possible to add text to a transition. To describe what it represents.
``` ```markdown
stateDiagram stateDiagram
s1 --> s2: A transition s1 --> s2: A transition
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
s1 --> s2: A transition s1 --> s2: A transition
``` ```
## Start and end ## Start and End
There are two special states indicating the start and stop of the diagram. These are written with the [*] syntax and the direction of the transition to it defines it either as a start or a stop state. There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
``` ```markdown
stateDiagram stateDiagram
[*] --> s1 [*] --> s1
s1 --> [*] s1 --> [*]
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
[*] --> s1 [*] --> s1
s1 --> [*] s1 --> [*]
``` ```
## Composite states
## Composit states
In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
have several internal states. These are called composit states in this terminology. have several internal states. These are called composite states in this terminology.
In order to define a composit state you need to use the state keyword followed by and id and the body of the composit state between {}. See the example below: In order to define a composite state you need to use the state keyword followed by and id and the body of the composite state between \{\}. See the example below:
``` ```markdown
stateDiagram stateDiagram
[*] --> First [*] --> First
state First { state First {
@ -119,6 +125,7 @@ stateDiagram
second --> [*] second --> [*]
} }
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
[*] --> First [*] --> First
@ -130,7 +137,7 @@ stateDiagram
You can do this in several layers: You can do this in several layers:
``` ```markdown
stateDiagram stateDiagram
[*] --> First [*] --> First
@ -148,6 +155,7 @@ stateDiagram
} }
} }
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
[*] --> First [*] --> First
@ -166,9 +174,9 @@ stateDiagram
} }
``` ```
You can also define transitions also between composit states: You can also define transitions also between composite states:
``` ```markdown
stateDiagram stateDiagram
[*] --> First [*] --> First
First --> Second First --> Second
@ -187,6 +195,7 @@ stateDiagram
thi --> [*] thi --> [*]
} }
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
[*] --> First [*] --> First
@ -207,13 +216,13 @@ stateDiagram
} }
``` ```
*You can not define transitions between internal states belonging to different composit states* *You can not define transitions between internal states belonging to different composite states*
## Forks ## Forks
It is possible to specify a fork in the diagram using <<fork>> <<join>>. It is possible to specify a fork in the diagram using <<fork>> <<join>>.
``` ```markdown
stateDiagram stateDiagram
state fork_state <<fork>> state fork_state <<fork>>
[*] --> fork_state [*] --> fork_state
@ -226,6 +235,7 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&
join_state --> State4 join_state --> State4
State4 --> [*] State4 --> [*]
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
state fork_state <<fork>> state fork_state <<fork>>
@ -247,7 +257,7 @@ Sometimes nothing says it better then a Post-it note. That is also the case in s
Here you can choose to put the note to the *right of* or to the *left of* a node. Here you can choose to put the note to the *right of* or to the *left of* a node.
``` ```markdown
stateDiagram stateDiagram
State1: The state with a note State1: The state with a note
note right of State1 note right of State1
@ -257,6 +267,7 @@ Here you can choose to put the note to the *right of* or to the *left of* a node
State1 --> State2 State1 --> State2
note left of State2 : This is the note to the left. note left of State2 : This is the note to the left.
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
State1: The state with a note State1: The state with a note
@ -272,7 +283,8 @@ Here you can choose to put the note to the *right of* or to the *left of* a node
## Concurrency ## Concurrency
As in plantUml you can specify concurrency using the -- symbol. As in plantUml you can specify concurrency using the -- symbol.
```
```markdown
stateDiagram stateDiagram
[*] --> Active [*] --> Active
@ -291,7 +303,6 @@ As in plantUml you can specify concurrency using the -- symbol.
} }
``` ```
```mermaid ```mermaid
stateDiagram stateDiagram
[*] --> Active [*] --> Active