Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(feat) state classDef documentation #3841

Merged
merged 11 commits into from
Nov 22, 2022
Merged

(feat) state classDef documentation #3841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e1c2b1d
refine - what is not done yet
weedySeaDragon Nov 22, 2022
98e4b6f
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
weedySeaDragon Nov 22, 2022
e2e604a
update demos/state.html to includ examples; formatting
weedySeaDragon Nov 22, 2022
828e99d
remove 'horz' from cSpell.json
weedySeaDragon Nov 22, 2022
8066aae
refine - what is not done yet
weedySeaDragon Nov 22, 2022
4703523
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
weedySeaDragon Nov 22, 2022
7f5b489
update demos/state.html to includ examples; formatting
weedySeaDragon Nov 22, 2022
a09ec69
remove 'horz' from cSpell.json
weedySeaDragon Nov 22, 2022
c3e054c
tiny fix and change: "The/y cannot" -> "Cannot..."
weedySeaDragon Nov 22, 2022
338d83d
Merge branch 'feat/1952-state--classDef-documentation' of github.com:…
weedySeaDragon Nov 22, 2022
1ca49c6
Merge branch 'develop' into feat/1952-state--classDef-documentation
sidharthv96 Nov 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 73 additions & 9 deletions demos/state.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down Expand Up @@ -33,8 +33,9 @@ <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 />
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>
Expand All @@ -49,15 +50,17 @@ <h4>And these are how they are applied:</h4>
---
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
Expand All @@ -67,10 +70,57 @@ <h4>And these are how they are applied:</h4>
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
Expand All @@ -79,6 +129,20 @@ <h4>And these are how they are applied:</h4>
</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
Expand Down Expand Up @@ -127,7 +191,7 @@ <h2>transition labels can span multiple lines using "br" tags or \n</h2>
<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>
Expand All @@ -139,7 +203,7 @@ <h2>You can add Notes</h2>
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).
Expand Down
Loading