Merge pull request #1351 from adutton/patch-1

Show source code in later examples

docs/examples.md

@@ -5,7 +5,7 @@ pie title NETFLIX
          "Time spent looking for movie" : 90
          "Time spent watching it" : 10
 ```
-``` mermaid
+```mermaid
 pie title NETFLIX
          "Time spent looking for movie" : 90
          "Time spent watching it" : 10
@@ -35,8 +35,6 @@ sequenceDiagram
     Bob-->Alice: Checking with John...
     Alice->John: Yes... John, how are you?
 ```
-
-
 ```mermaid
 sequenceDiagram
     Alice ->> Bob: Hello Bob, how are you?
@@ -49,9 +47,15 @@ sequenceDiagram
     Alice->John: Yes... John, how are you?
 ```
 
-
 ## Basic flowchart
 
+```
+graph LR
+    A[Square Rect] -- Link text --> B((Circle))
+    A --> C(Round Rect)
+    B --> D{Rhombus}
+    C --> D
+```
 ```mermaid
 graph LR
     A[Square Rect] -- Link text --> B((Circle))
@@ -63,6 +67,29 @@ graph LR
 
 ## Larger flowchart with some styling
 
+```
+graph TB
+    sq[Square shape] --> ci((Circle shape))
+
+    subgraph A
+        od>Odd shape]-- Two line<br/>edge comment --> ro
+        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
+        di==>ro2(Rounded square shape)
+    end
+
+    %% Notice that no text in shape are added here instead that is appended further down
+    e --> od3>Really long text with linebreak<br>in an Odd shape]
+
+    %% Comments after double percent signs
+    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
+
+    cyr[Cyrillic]-->cyr2((Circle shape Начало));
+
+     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
+     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
+     class sq,e green
+     class di orange
+```
 ```mermaid
 graph TB
     sq[Square shape] --> ci((Circle shape))
@@ -90,6 +117,21 @@ graph TB
 
 ## Loops, alt and opt
 
+```
+sequenceDiagram
+    loop Daily query
+        Alice->>Bob: Hello Bob, how are you?
+        alt is sick
+            Bob->>Alice: Not so good :(
+        else is well
+            Bob->>Alice: Feeling fresh like a daisy
+        end
+
+        opt Extra response
+            Bob->>Alice: Thanks for asking
+        end
+    end
+```
 ```mermaid
 sequenceDiagram
     loop Daily query
@@ -109,6 +151,19 @@ sequenceDiagram
 
 ## Message to self in loop
 
+```
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts<br/>prevail...
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
 ```mermaid
 sequenceDiagram
     participant Alice