Build docs

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -154,6 +154,11 @@ graph LR
     id1>This is the text in the box]
 ```
 
+```mermaid
+graph LR
+    id1>This is the text in the box]
+```
+
 Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
 
 ### A node (rhombus)
@@ -187,6 +192,11 @@ graph TD
     id1[/This is the text in the box/]
 ```
 
+```mermaid
+graph TD
+    id1[/This is the text in the box/]
+```
+
 ### Parallelogram alt
 
 ```mermaid-example
@@ -206,6 +216,11 @@ graph TD
     A[/Christmas\]
 ```
 
+```mermaid
+graph TD
+    A[/Christmas\]
+```
+
 ### Trapezoid alt
 
 ```mermaid-example
@@ -375,6 +390,11 @@ graph TB
     A & B--> C & D
 ```
 
+```mermaid
+graph TB
+    A & B--> C & D
+```
+
 If you describe the same diagram using the the basic syntax, it will take four lines:
 
 ```mmd
@@ -539,6 +559,20 @@ graph TB
     end
 ```
 
+```mermaid
+graph TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+```
+
 You can also set an explicit id for the subgraph:
 
 ```mermaid-example
@@ -549,6 +583,14 @@ graph TB
     end
 ```
 
+```mermaid
+graph TB
+    c1-->a2
+    subgraph ide1 [one]
+    a1-->a2
+    end
+```
+
 ## Flowcharts
 
 With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
@@ -570,6 +612,23 @@ flowchart TB
     two --> c2
 ```
 
+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+```
+
 ## Interaction
 
 A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
@@ -603,6 +662,17 @@ graph LR;
     click B href "https://www.github.com" "This is a tooltip for a link"
 ```
 
+```mermaid
+graph LR;
+    A-->B;
+    B-->C;
+    C-->D;
+    click A callback "Tooltip for a callback"
+    click B "https://www.github.com" "This is a tooltip for a link"
+    click A call callback() "Tooltip for a callback"
+    click B href "https://www.github.com" "This is a tooltip for a link"
+```
+
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
 ?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
@@ -712,6 +782,13 @@ graph LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
+```mermaid
+graph LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes.
@@ -736,6 +813,12 @@ graph LR
     classDef someclass fill:#f96;
 ```
 
+```mermaid
+graph LR
+    A:::someclass --> B
+    classDef someclass fill:#f96;
+```
+
 ### Css classes
 
 It is also possible to predefine classes in css styles that can be applied from the graph definition:
@@ -759,13 +842,18 @@ graph LR;
     class A cssClass;
 ```
 
+```mermaid
+graph LR;
+    A-->B[AAA<span>BBB</span>];
+    B-->D;
+    class A cssClass;
+```
+
 ### Default class
 
 If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
 
-```
-    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
-```
+        classDef default fill:#f9f,stroke:#333,stroke-width:4px;
 
 ## Basic support for fontawesome
 
@@ -779,6 +867,14 @@ graph TD
     B-->E(A fa:fa-camera-retro perhaps?);
 ```
 
+```mermaid
+graph TD
+    B["fa:fa-twitter for peace"]
+    B-->C[fa:fa-ban forbidden]
+    B-->D(fa:fa-spinner);
+    B-->E(A fa:fa-camera-retro perhaps?);
+```
+
 ## Graph declarations with spaces between vertices and link and without semicolon
 
 - After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
@@ -795,6 +891,14 @@ graph LR
     C -->|Two| E[Result two]
 ```
 
+```mermaid
+graph LR
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+```
+
 ## Configuration...
 
 Is it possible to adjust the width of the rendered flowchart.