state demo: add more diagrams, add explanatory text

demos/state.html

@@ -61,23 +61,31 @@
       class Still notMoving
       class Moving, Crash movement
       class Crash badBadEvent
-
     </pre>
 
     <hr />
 
     <pre class="mermaid">
-    stateDiagram
+    stateDiagram-v2
       accTitle: very very simple state
     accDescr: This is a state diagram showing one state
     State1
     </pre>
-
     <hr />
+
+    <h2>You can label the relationships</h2>
+    <pre class="mermaid">
+    stateDiagram-v2
+    [*] --> State1
+    State1 --> State2 : Transition 1
+    State1 --> State3 : Transition 2
+    State1 --> State4 : Transition 3
+    State1 --> [*]
+    </pre>
+    <hr />
+
     <h2>This shows Composite states</h2>
     <pre class="mermaid">
-
-
     stateDiagram-v2
     [*] --> First
     First --> Second
@@ -95,31 +103,48 @@
         [*] --> 3rd
         3rd --> [*]
     }
+    </pre>
+    <hr />
 
+    <h2>Compsite states can link to themselves</h2>
+    <pre class="mermaid">
+      stateDiagram-v2
+            state Active {
+              Idle
+            }
+            Inactive --> Idle: ACT
+            Active --> Active: LOG
+    </pre>
+    <hr />
+
+    <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 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.
 
     </pre>
+    <hr />
+
+    <h2>You can add Notes</h2>
     <pre class="mermaid">
-    stateDiagram
+    stateDiagram-v2
-    State1: The state with a note
+      direction LR
-    note right of State1
+      State1: A state with a note
-    Important information! You can write
+      note right of State1
-    notes.
+        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 : This is the note to the left.
+      note left of State2 : Notes can be to the left of a state\n(like this one).
-    </pre>
+      note right of State2 : Notes can be to the right of a state\n(like this one).
-    <pre class="mermaid">
-    stateDiagram
-    State1
-    note right of State1
-    Line1<br>Line2<br />Line3<br />Line4<br />Line5
-    end note
     </pre>
+    <hr />
 
     <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'base',
+        theme: 'default',
         // themeCSS: '.node rect { fill: red; }',
         logLevel: 3,
         securityLevel: 'loose',