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

state demo add classDefs to example with explanations; add some headers; update composite from docs

Browse Source
This commit is contained in:
Ashley Engelund (weedySeaDragon @ github)
2022-10-10 18:25:33 -07:00
parent 56f3fa6495
commit 278a19f87a
1 changed files with 47 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
demos/state.html
View File

@@ -15,6 +15,7 @@
<body> <body>
<h1>State diagram demos</h1> <h1>State diagram demos</h1>
<h2>Very simple showing change from State1 to State2</h2>
<pre class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram
accTitle: This is the accessible title accTitle: This is the accessible title
@@ -24,16 +25,43 @@
<hr /> <hr />
<h2>This has classDef statements to apply style classes to specific 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<br />
</code>
</p>
<h4>And these are how they are applied:</h4>
<p>
<code>
class Still notMoving<br />
class Moving, Crash movement<br />
class Crash badBadEvent<br />
</code>
</p>
<pre class="mermaid"> <pre class="mermaid">
stateDiagram-v2 stateDiagram-v2
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 movement font-style:italic;
classDef badBadEvent fill:#f00,color:white,font-weight:bold
[*] --> Still [*] --> Still
Still --> [*] Still --> [*]
Still --> Moving Still --> Moving
Moving --> Still Moving --> Still
Moving --> Crash Moving --> Crash
Crash --> [*] Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
</pre> </pre>
<hr /> <hr />
@@ -46,14 +74,29 @@
</pre> </pre>
<hr /> <hr />
<h2>This shows Composite states</h2>
<pre class="mermaid"> <pre class="mermaid">
stateDiagram
stateDiagram-v2
[*] --> First [*] --> First
First --> Second
First --> Third
state First { state First {
[*] --> second [*] --> 1st
second --> [*] 1st --> [*]
} }
state Second {
[*] --> 2nd
2nd --> [*]
}
state Third {
[*] --> 3rd
3rd --> [*]
}
</pre> </pre>
<pre class="mermaid"> <pre class="mermaid">
stateDiagram stateDiagram