Support for mermaid-example

docs/classDiagram.md

@@ -7,32 +7,7 @@ The class diagram is the main building block of object-oriented modeling. It is
 
 Mermaid can render class diagrams.
 
-```mermaid-code
- classDiagram
-      Animal <|-- Duck
-      Animal <|-- Fish
-      Animal <|-- Zebra
-      Animal : +int age
-      Animal : +String gender
-      Animal: +isMammal()
-      Animal: +mate()
-      class Duck{
-          +String beakColor
-          +swim()
-          +quack()
-      }
-      class Fish{
-          -int sizeInFeet
-          -canEat()
-      }
-      class Zebra{
-          +bool is_wild
-          +run()
-      }
-
-```
-
-```mermaid
+```mermaid-example
  classDiagram
       Animal <|-- Duck
       Animal <|-- Fish
@@ -68,7 +43,7 @@ A single instance of a class in the diagram contains three compartments:
 - The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
     The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.
 
-```mermaid-code
+```mermaid-example
 classDiagram
     class BankAccount
     BankAccount : +String owner
@@ -78,15 +53,6 @@ classDiagram
 
 ```
 
-```mermaid
-classDiagram
-    class BankAccount
-    BankAccount : +String owner
-    BankAccount : +BigDecimal balance
-    BankAccount : +deposit(amount)
-    BankAccount : +withdrawl(amount)
-```
-
 ## Define a class
 
 There are two ways to define a class:
@@ -94,13 +60,7 @@ There are two ways to define a class:
 - Explicitly defining a class using keyword **class** like `class Animal`. This defines the Animal class
 - Define two classes via a **relationship** between them `Vehicle <|-- Car`. This defines two classes Vehicle and Car along with their relationship.
 
-```mermaid-code
-classDiagram
-    class Animal
-    Vehicle <|-- Car
-```
-
-```mermaid
+```mermaid-example
 classDiagram
     class Animal
     Vehicle <|-- Car
@@ -118,7 +78,8 @@ There are two ways to define the members of a class, and regardless of whichever
 
 - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example:
 
-```mermaid-code
+```mermaid-example
+ classDiagram
  class BankAccount
  BankAccount : +String owner
  BankAccount : +BigDecimal balance
@@ -126,27 +87,9 @@ There are two ways to define the members of a class, and regardless of whichever
  BankAccount : +withdrawal(amount)
 ```
 
-```mermaid
-  classDiagram
-  class BankAccount
-  BankAccount : +String owner
-  BankAccount : +BigDecimal balance
-  BankAccount : +deposit(amount)
-  BankAccount : +withdrawl(amount)
-```
-
 - Associate members of a class using **{}** brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once. For example:
 
-```mermaid-code
-class BankAccount{
-    +String owner
-    +BigDecimal balance
-    +deposit(amount)
-    +withdrawl(amount)
-}
-```
-
-```mermaid
+```mermaid-example
 classDiagram
 class BankAccount{
     +String owner
@@ -161,16 +104,7 @@ class BankAccount{
 Optionally you can end the method/function definition with the data type that will be returned (note: there must be a space between the final `)` of the method definition and return type
 example:
 
-```mermaid-code
-class BankAccount{
-    +String owner
-    +BigDecimal balance
-    +deposit(amount) bool
-    +withdrawl(amount) int
-}
-```
-
-```mermaid
+```mermaid-example
 classDiagram
 class BankAccount{
     +String owner
@@ -186,21 +120,7 @@ Members can be defined using generic types, such as `List<int>`, for fields, par
 
 This can be done as part of either class definition method:
 
-```mermaid-code
-classDiagram
-class Square~Shape~{
-    int id
-    List~int~ position
-    setPoints(List~int~ points)
-    getPoints() List~int~
-}
-
-Square : -List~string~ messages
-Square : +setMessages(List~string~ messages)
-Square : +getMessages() List~string~
-```
-
-```mermaid
+```mermaid-example
 classDiagram
 class Square~Shape~{
     int id
@@ -240,7 +160,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes
 
 A relationship is a general term covering the specific types of logical connections found on class and object diagrams.
 
-```mermaid-code
+```
 [classA][Arrow][ClassB]
 ```
 
@@ -257,20 +177,7 @@ There are different types of relations defined for classes under UML which are c
 | ..\|> | Realization   |
 | ..    | Link (Dashed) |
 
-```mermaid-code
-classDiagram
-classA <|-- classB
-classC *-- classD
-classE o-- classF
-classG <-- classH
-classI -- classJ
-classK <.. classL
-classM <|.. classN
-classO .. classP
-
-```
-
-```mermaid
+```mermaid-example
 classDiagram
 classA <|-- classB
 classC *-- classD
@@ -285,7 +192,7 @@ classO .. classP
 
 We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well :
 
-```mermaid-code
+```mermaid-example
 classDiagram
 classA --|> classB : Inheritance
 classC --* classD : Composition
@@ -298,18 +205,6 @@ classO .. classP : Link(Dashed)
 
 ```
 
-```mermaid
-classDiagram
-classA --|> classB : Inheritance
-classC --* classD : Composition
-classE --o classF : Aggregation
-classG --> classH : Association
-classI -- classJ : Link(Solid)
-classK ..> classL : Dependency
-classM ..|> classN : Realization
-classO .. classP : Link(Dashed)
-```
-
 ### Labels on Relations
 
 It is possible to add a label text to a relation:
@@ -318,20 +213,13 @@ It is possible to add a label text to a relation:
 [classA][Arrow][ClassB]:LabelText
 ```
 
-```mermaid-code
+```mermaid-example
 classDiagram
 classA <|-- classB : implements
 classC *-- classD : composition
 classE o-- classF : association
 ```
 
-```mermaid
-classDiagram
-classA <|-- classB : implements
-classE o-- classF : association
-
-```
-
 ### Two-way relations
 
 Relations can go in multiple ways:
@@ -388,14 +276,7 @@ Cardinality can be easily defined by placing cardinality text within quotes `"`
 [classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
 ```
 
-```mermaid-code
-classDiagram
-    Customer "1" --> "*" Ticket
-    Student "1" --> "1..*" Course
-    Galaxy --> "many" Star : Contains
-```
-
-```mermaid
+```mermaid-example
 classDiagram
     Customer "1" --> "*" Ticket
     Student "1" --> "1..*" Course
@@ -415,13 +296,7 @@ Annotations are defined within the opening `<<` and closing `>>`. There are two
 
 - In a **_separate line_** after a class is defined. For example:
 
-```mermaid-code
-classDiagram
-class Shape
-<<interface>> Shape
-```
-
-```mermaid
+```mermaid-example
 classDiagram
 class Shape
 <<interface>> Shape
@@ -431,7 +306,7 @@ Shape : draw()
 
 - In a **_nested structure_** along with class definition. For example:
 
-```mermaid-code
+```mermaid-example
 classDiagram
 class Shape{
     <<interface>>
@@ -449,23 +324,6 @@ class Color{
 
 ```
 
-```mermaid
-classDiagram
-class Shape{
-    <<interface>>
-    noOfVertices
-    draw()
-}
-class Color{
-    <<enumeration>>
-    RED
-    BLUE
-    GREEN
-    WHITE
-    BLACK
-}
-```
-
 ## Comments
 
 Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any class diagram syntax
@@ -485,25 +343,7 @@ class Shape{
 
 With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
 
-```mermaid-code
-classDiagram
-  direction RL
-  class Student {
-    -idCard : IdCard
-  }
-  class IdCard{
-    -id : int
-    -name : string
-  }
-  class Bike{
-    -id : int
-    -name : string
-  }
-  Student "1" --o "1" IdCard : carries
-  Student "1" --o "1" Bike : rides
- ```
- This is how this renders
-```mermaid
+```mermaid-example
 classDiagram
   direction RL
   class Student {
@@ -560,7 +400,7 @@ class Shape2
 click Shape2 call callbackFunction() "This is a tooltip for a callback"
 ```
 
-```
+```html
 <script>
     var callbackFunction = function(){
         alert('A callback was triggered');

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

@@ -11,22 +11,14 @@ This statement declares the direction of the Flowchart.
 
 This declares the graph is oriented from top to bottom (`TD` or `TB`).
 
-```mermaid-code
-graph TD
-    Start --> Stop
-```
-```mermaid
+```mermaid-example
 graph TD
     Start --> Stop
 ```
 
 This declares the graph is oriented from left to right (`LR`).
 
-```mermaid-code
-graph LR
-    Start --> Stop
-```
-```mermaid
+```mermaid-example
 graph LR
     Start --> Stop
 ```
@@ -55,12 +47,7 @@ Apart from the graph type, the syntax is the same. This is currently experimenta
 
 ### A node (default)
 
-```mermaid-code
-graph LR
-    id
-```
-
-```mermaid
+```mermaid-example
 graph LR
     id
 ```
@@ -73,11 +60,7 @@ It is also possible to set text in the box that differs from the id. If this is
 found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
 one previously defined will be used when rendering the box.
 
-```mermaid-code
-graph LR
-    id1[This is the text in the box]
-```
-```mermaid
+```mermaid-example
 graph LR
     id1[This is the text in the box]
 ```
@@ -86,66 +69,42 @@ graph LR
 
 ### A node with round edges
 
-```mermaid-code
-graph LR
-    id1(This is the text in the box)
-```
-```mermaid
+```mermaid-example
 graph LR
     id1(This is the text in the box)
 ```
 
 ### A stadium-shaped node
 
-```mermaid-code
-graph LR
-    id1([This is the text in the box])
-```
-```mermaid
+```mermaid-example
 graph LR
     id1([This is the text in the box])
 ```
 
 ### A node in a subroutine shape
 
-```mermaid-code
-graph LR
-    id1[[This is the text in the box]]
-```
-```mermaid
+```mermaid-example
 graph LR
     id1[[This is the text in the box]]
 ```
 
 ### A node in a cylindrical shape
 
-```mermaid-code
-graph LR
-    id1[(Database)]
-```
-```mermaid
+```mermaid-example
 graph LR
     id1[(Database)]
 ```
 
 ### A node in the form of a circle
 
-```mermaid-code
-graph LR
-    id1((This is the text in the circle))
-```
-```mermaid
+```mermaid-example
 graph LR
     id1((This is the text in the circle))
 ```
 
 ### A node in an asymmetric shape
 
-```mermaid-code
-graph LR
-    id1>This is the text in the box]
-```
-```mermaid
+```mermaid-example
 graph LR
     id1>This is the text in the box]
 ```
@@ -153,69 +112,40 @@ Currently only the shape above is possible and not its mirror. *This might chang
 
 ### A node (rhombus)
 
-```mermaid-code
-graph LR
-    id1{This is the text in the box}
-```
-```mermaid
+```mermaid-example
 graph LR
     id1{This is the text in the box}
 ```
 
 ### A hexagon node
-{% raw %}
-```mermaid-code
-graph LR
-    id1{{This is the text in the box}}
-```
-{% endraw %}
 
-```mermaid
-{% raw %}
+```mermaid-example
 graph LR
     id1{{This is the text in the box}}
-{% endraw %}
 ```
 
 ### Parallelogram
 
-```mermaid-code
+```mermaid-example
 graph TD
     id1[/This is the text in the box/]
 ```
-```mermaid
-graph TD
-    id1[/This is the text in the box/]
-```
-
 ### Parallelogram alt
 
-```mermaid-code
-graph TD
-    id1[\This is the text in the box\]
-```
-```mermaid
+```mermaid-example
 graph TD
     id1[\This is the text in the box\]
 ```
 
 ### Trapezoid
 
-```mermaid-code
-graph TD
-    A[/Christmas\]
-```
-```mermaid
+```mermaid-example
 graph TD
     A[/Christmas\]
 ```
 ### Trapezoid alt
 
-```mermaid-code
-graph TD
-    B[\Go shopping/]
-```
-```mermaid
+```mermaid-example
 graph TD
     B[\Go shopping/]
 ```
@@ -226,110 +156,70 @@ Nodes can be connected with links/edges. It is possible to have different types
 
 ### A link with arrow head
 
-```mermaid-code
-graph LR
-    A-->B
-```
-```mermaid
+```mermaid-example
 graph LR
     A-->B
 ```
 
 ### An open link
 
-```mermaid-code
-graph LR
-    A --- B
-```
-```mermaid
+```mermaid-example
 graph LR
     A --- B
 ```
 
 ### Text on links
 
-```mermaid-code
+```mermaid-example
 graph LR
     A-- This is the text! ---B
 ```
-```mermaid
-graph LR
-    A-- This is the text ---B
-```
 
 or
 
-```mermaid-code
-graph LR
-    A---|This is the text|B
-```
-```mermaid
+```mermaid-example
 graph LR
     A---|This is the text|B
 ```
 
 ### A link with arrow head and text
 
-```mermaid-code
-graph LR
-    A-->|text|B
-```
-```mermaid
+```mermaid-example
 graph LR
     A-->|text|B
 ```
 
 or
 
-```mermaid-code
-graph LR
-    A-- text -->B
-```
-```mermaid
+```mermaid-example
 graph LR
     A-- text -->B
 ```
 
 ### Dotted link
 
-```mermaid-code
-graph LR;
-   A-.->B;
-```
-```mermaid
+```mermaid-example
 graph LR;
    A-.->B;
 ```
 
 ### Dotted link with text
 
-```mermaid-code
-graph LR
-   A-. text .-> B
-```
-```mermaid
+```mermaid-example
 graph LR
    A-. text .-> B
 ```
 
 ### Thick link
 
-```mermaid-code
-graph LR
-   A ==> B
-```
-```mermaid
+```mermaid-example
 graph LR
    A ==> B
 ```
 
 ### Thick link with text
 
-```mermaid-code
-graph LR
-   A == text ==> B
-```
-```mermaid
+```mermaid-example
 graph LR
    A == text ==> B
 ```
@@ -337,31 +227,19 @@ graph LR
 ### Chaining of links
 
 It is possible to declare many links in the same line as per below:
-```mermaid-code
-graph LR
-   A -- text --> B -- text2 --> C
-```
-```mermaid
+```mermaid-example
 graph LR
    A -- text --> B -- text2 --> C
 ```
 
 It is also possible to declare multiple nodes links in the same line as per below:
-```mermaid-code
-graph LR
-   a --> b & c--> d
-```
-```mermaid
+```mermaid-example
 graph LR
    a --> b & c--> d
 ```
 
 You can then describe dependencies in a very expressive way. Like the one-liner below:
-```mermaid-code
-graph TB
-    A & B--> C & D
-```
-```mermaid
+```mermaid-example
 graph TB
     A & B--> C & D
 ```
@@ -381,13 +259,7 @@ graph TB
 
 When using flowchart instead of graph there are new types of arrows supported as per below:
 
-```mermaid-code
-flowchart LR
-    A --o B
-    B --x C
-```
-
-```mermaid
+```mermaid-example
 flowchart LR
     A --o B
     B --x C
@@ -398,14 +270,7 @@ flowchart LR
 
 When using flowchart instead of graph there is the possibility to use multidirectional arrows.
 
-```mermaid-code
-flowchart LR
-    A o--o B
-    B <--> C
-    C x--x D
-```
-
-```mermaid
+```mermaid-example
 flowchart LR
     A o--o B
     B <--> C
@@ -423,16 +288,7 @@ than the others by adding extra dashes in the link definition.
 In the following example, two extra dashes are added in the link from node _B_
 to node _E_, so that it spans two more ranks than regular links:
 
-```mermaid-code
-graph TD
-    A[Start] --> B{Is it?};
-    B -->|Yes| C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B ---->|No| E[End];
-```
-
-```mermaid
+```mermaid-example
 graph TD
     A[Start] --> B{Is it?};
     B -->|Yes| C[OK];
@@ -448,7 +304,7 @@ When the link label is written in the middle of the link, the extra dashes must
 be added on the right side of the link. The following example is equivalent to
 the previous one:
 
-```mermaid-code
+```mermaid-example
 graph TD
     A[Start] --> B{Is it?};
     B -- Yes --> C[OK];
@@ -457,15 +313,6 @@ graph TD
     B -- No ----> E[End];
 ```
 
-```mermaid
-graph TD
-    A[Start] --> B{Is it?};
-    B -->|Yes| C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B ---->|No| E[End];
-```
-
 For dotted or thick links, the characters to add are equals signs or dots,
 as summed up in the following table:
 
@@ -482,11 +329,7 @@ as summed up in the following table:
 
 It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
 
-```mermaid-code
-graph LR
-    id1["This is the (text) in the box"]
-```
-```mermaid
+```mermaid-example
 graph LR
     id1["This is the (text) in the box"]
 ```
@@ -495,11 +338,7 @@ graph LR
 
 It is possible to escape characters using the syntax exemplified here.
 
-```mermaid-code
-    graph LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
-```
-```mermaid
+```mermaid-example
     graph LR
         A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
@@ -514,20 +353,7 @@ end
 
 An example below:
 
-```mermaid-code
-graph TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
- ```
-```mermaid
+```mermaid-example
 graph TB
     c1-->a2
     subgraph one
@@ -543,43 +369,19 @@ graph TB
 
  You can also set an explicit id for the subgraph.
 
-```mermaid-code
+```mermaid-example
 graph TB
     c1-->a2
     subgraph ide1 [one]
     a1-->a2
     end
  ```
-```mermaid
-graph TB
-    c1-->a2
-    subgraph id1 [one]
-    a1-->a2
-    end
- ```
 
 ## Beta: flowcharts
 
 With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
 
-```mermaid-code
-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
- ```
-
-```mermaid
+```mermaid-example
 flowchart TB
     c1-->a2
     subgraph one
@@ -618,7 +420,9 @@ Examples of tooltip usage below:
 </script>
 ```
 
-```mermaid-code
+The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
+
+```mermaid-example
 graph LR;
     A-->B;
     B-->C;
@@ -628,37 +432,12 @@ graph LR;
     click A call callback() "Tooltip for a callback"
     click B href "http://www.github.com" "This is a tooltip for a link"
 ```
-
-The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
-
-```mermaid
-graph LR
-    A-->B;
-    B-->C;
-    C-->D;
-    click A callback "Tooltip"
-    click B "http://www.github.com" "This is a link"
-    click C call callback() "Tooltip"
-    click D href "http://www.github.com" "This is 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/).
 
 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
-```mermaid-code
-graph LR;
-    A-->B;
-    B-->C;
-    C-->D;
-    D-->E;
-    click A "http://www.github.com" _blank
-    click B "http://www.github.com" "Open this in a new tab" _blank
-    click C href "http://www.github.com" _blank
-    click D href "http://www.github.com" "Open this in a new tab" _blank
-```
-
-```mermaid
+```mermaid-example
 graph LR;
     A-->B;
     B-->C;
@@ -751,13 +530,7 @@ linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
 
 It is possible to apply specific styles such as a thicker border or a different background color to a node.
 
-```mermaid-code
-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
-```
-```mermaid
+```mermaid-example
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
@@ -791,12 +564,7 @@ It is also possible to attach a class to a list of nodes in one statement:
 
 A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
 
-```mermaid-code
-graph LR
-    A:::someclass --> B
-    classDef someclass fill:#f96;
-```
-```mermaid
+```mermaid-example
 graph LR
     A:::someclass --> B
     classDef someclass fill:#f96;
@@ -822,13 +590,7 @@ below:
 
 **Example definition**
 
-```mermaid-code
-graph LR;
-    A-->B[AAA<span>BBB</span>];
-    B-->D;
-    class A cssClass;
-```
-```mermaid
+```mermaid-example
 graph LR;
     A-->B[AAA<span>BBB</span>];
     B-->D;
@@ -851,14 +613,7 @@ It is possible to add icons from fontawesome.
 
 The icons are accessed via the syntax fa:#icon class name#.
 
-```mermaid-code
-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?);
-```
-```mermaid
+```mermaid-example
 graph TD
     B["fa:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
@@ -875,15 +630,7 @@ graph TD
 
 Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
 
-```mermaid-code
-graph LR
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
-```
-
-```mermaid
+```mermaid-example
 graph LR
     A[Hard edge] -->|Link text| B(Round edge)
     B --> C{Decision}

docs/entityRelationshipDiagram.md

@@ -7,14 +7,7 @@ Note that practitioners of ER modelling almost always refer to *entity types* si
 
 Mermaid can render ER diagrams
 
-```mermaid-code
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-```
-
-```mermaid
+```mermaid-example
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
@@ -27,27 +20,7 @@ Relationships between entities are represented by lines with end markers represe
 
 ER diagrams can be used for various purposes, ranging from abstract logical models devoid of any implementation details, through to physical models of relational database tables.  It can be useful to include attribute definitions on ER diagrams to aid comprehension of the purpose and meaning of entities.  These do not necessarily need to be exhaustive; often a small subset of attributes is enough.  Mermaid allows to be defined in terms of their *type* and *name*.
 
-```mermaid-code
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    CUSTOMER {
-        string name
-        string custNumber
-        string sector
-    }
-    ORDER ||--|{ LINE-ITEM : contains
-    ORDER {
-        int orderNumber
-        string deliveryAddress
-    }
-    LINE-ITEM {
-        string productCode
-        int quantity
-        float pricePerUnit
-    }
-```
-
-```mermaid
+```mermaid-example
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     CUSTOMER {
@@ -118,6 +91,7 @@ Cardinality is a property that describes how many elements of another entity can
 Relationships may be classified as either *identifying* or *non-identifying* and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other.  For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`.  Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities.  But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
 ```mermaid-code
+erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     PERSON ||--o{ NAMED-DRIVER : is
 ```
@@ -126,22 +100,7 @@ Relationships may be classified as either *identifying* or *non-identifying* and
 
 Attributes can be defined for entities by specifying the entity name followed by a block containing multiple `type name` pairs, where a block is delimited by an opening `{` and a closing `}`.  For example:
 
-```mermaid-code
-erDiagram
-    CAR ||--o{ NAMED-DRIVER : allows
-    CAR {
-        string registrationNumber
-        string make
-        string model
-    }
-    PERSON ||--o{ NAMED-DRIVER : is
-    PERSON {
-        string firstName
-        string lastName
-        int age
-    }
-```
-```mermaid
+```mermaid-example
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {
@@ -158,22 +117,7 @@ erDiagram
 ```
 The attributes are rendered inside the entity boxes:
 
-```mermaid-code
-erDiagram
-    CAR ||--o{ NAMED-DRIVER : allows
-    CAR {
-        string registrationNumber
-        string make
-        string model
-    }
-    PERSON ||--o{ NAMED-DRIVER : is
-    PERSON {
-        string firstName
-        string lastName
-        int age
-    }
-```
-```mermaid
+```mermaid-example
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {
@@ -195,25 +139,7 @@ The `type` and `name` values must begin with an alphabetic character and may con
 
 Attributes may also have a `key` or comment defined. Keys can be "PK" or "FK", for Primary Key or Foreign Key. And a `comment` is defined by quotes at the end of an attribute. Comments themselves cannot have quote characters in them.
 
-```mermaid-code
-erDiagram
-    CAR ||--o{ NAMED-DRIVER : allows
-    CAR {
-        string allowedDriver FK 'The license of the allowed driver'
-        string registrationNumber
-        string make
-        string model
-    }
-    PERSON ||--o{ NAMED-DRIVER : is
-    PERSON {
-        string driversLicense PK 'The license #'
-        string firstName
-        string lastName
-        int age
-    }
-```
-
-```mermaid
+```mermaid-example
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     CAR {

docs/examples.md

@@ -8,23 +8,12 @@ This page contains a collection of examples of diagrams and charts that can be c
 
 ## Basic Pie Chart
 
-```mermaid-code
+```mermaid-example
 pie title NETFLIX
          "Time spent looking for movie" : 90
          "Time spent watching it" : 10
 ```
-```mermaid
-pie title NETFLIX
-         "Time spent looking for movie" : 90
-         "Time spent watching it" : 10
-```
-```mermaid-code
-pie title What Voldemort doesn't have?
-         "FRIENDS" : 2
-         "FAMILY" : 3
-         "NOSE" : 45
-```
-```mermaid
+```mermaid-example
 pie title What Voldemort doesn't have?
          "FRIENDS" : 2
          "FAMILY" : 3
@@ -32,18 +21,7 @@ pie title What Voldemort doesn't have?
 ```
 ## Basic sequence diagram
 
-```mermaid-code
-sequenceDiagram
-    Alice ->> Bob: Hello Bob, how are you?
-    Bob-->>John: How about you John?
-    Bob--x Alice: I am good thanks!
-    Bob-x John: I am good thanks!
-    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-
-    Bob-->Alice: Checking with John...
-    Alice->John: Yes... John, how are you?
-```
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice ->> Bob: Hello Bob, how are you?
     Bob-->>John: How about you John?
@@ -57,14 +35,7 @@ sequenceDiagram
 
 ## Basic flowchart
 
-```mermaid-code
-graph LR
-    A[Square Rect] -- Link text --> B((Circle))
-    A --> C(Round Rect)
-    B --> D{Rhombus}
-    C --> D
-```
-```mermaid
+```mermaid-example
 graph LR
     A[Square Rect] -- Link text --> B((Circle))
     A --> C(Round Rect)
@@ -75,30 +46,7 @@ graph LR
 
 ## Larger flowchart with some styling
 
-```mermaid-code
-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
+```mermaid-example
 graph TB
     sq[Square shape] --> ci((Circle shape))
 
@@ -125,22 +73,7 @@ graph TB
 
 ## SequenceDiagram: Loops, alt and opt
 
-```mermaid-code
-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
+```mermaid-example
 sequenceDiagram
     loop Daily query
         Alice->>Bob: Hello Bob, how are you?
@@ -159,20 +92,7 @@ sequenceDiagram
 
 ## SequenceDiagram: Message to self in loop
 
-```mermaid-code
-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
+```mermaid-example
 sequenceDiagram
     participant Alice
     participant Bob

docs/flowchart.md

@@ -10,12 +10,7 @@ It can also accomodate different arrow types, multi directional arrows, and link
 Node
 ### A node (default)
 
-```mermaid-code
-flowchart LR
-    id
-```
-
-```mermaid
+```mermaid-example
 flowchart LR
     id
 ```
@@ -28,11 +23,7 @@ It is also possible to set text in the box that differs from the id. If this is
 found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
 one previously defined will be used when rendering the box.
 
-```mermaid-code
-flowchart LR
-    id1[This is the text in the box]
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1[This is the text in the box]
 ```
@@ -43,22 +34,14 @@ This statement declares the direction of the Flowchart.
 
 This declares the flowchart is oriented from top to bottom (`TD` or `TB`).
 
-```mermaid-code
-flowchart TD
-    Start --> Stop
-```
-```mermaid
+```mermaid-example
 flowchart TD
     Start --> Stop
 ```
 
 This declares the flowchart is oriented from left to right (`LR`).
 
-```mermaid-code
-flowchart LR
-    Start --> Stop
-```
-```mermaid
+```mermaid-example
 flowchart LR
     Start --> Stop
 ```
@@ -77,66 +60,42 @@ Possible FlowChart orientations are:
 
 ### A node with round edges
 
-```mermaid-code
-flowchart LR
-    id1(This is the text in the box)
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1(This is the text in the box)
 ```
 
 ### A stadium-shaped node
 
-```mermaid-code
-flowchart LR
-    id1([This is the text in the box])
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1([This is the text in the box])
 ```
 
 ### A node in a subroutine shape
 
-```mermaid-code
-flowchart LR
-    id1[[This is the text in the box]]
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1[[This is the text in the box]]
 ```
 
 ### A node in a cylindrical shape
 
-```mermaid-code
-flowchart LR
-    id1[(Database)]
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1[(Database)]
 ```
 
 ### A node in the form of a circle
 
-```mermaid-code
-flowchart LR
-    id1((This is the text in the circle))
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1((This is the text in the circle))
 ```
 
 ### A node in an asymmetric shape
 
-```mermaid-code
-flowchart LR
-    id1>This is the text in the box]
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1>This is the text in the box]
 ```
@@ -144,65 +103,40 @@ Currently only the shape above is possible and not its mirror. *This might chang
 
 ### A node (rhombus)
 
-```mermaid-code
-flowchart LR
-    id1{This is the text in the box}
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1{This is the text in the box}
 ```
 
 ### A hexagon node
-```mermaid-code
-flowchart LR
-    id1{{This is the text in the box}}
-```
-
-```mermaid
+```mermaid-example
 flowchart LR
     id1{{This is the text in the box}}
 ```
 
 ### Parallelogram
 
-```mermaid-code
-flowchart TD
-    id1[/This is the text in the box/]
-```
-```mermaid
+```mermaid-example
 flowchart TD
     id1[/This is the text in the box/]
 ```
 
 ### Parallelogram alt
 
-```mermaid-code
-flowchart TD
-    id1[\This is the text in the box\]
-```
-```mermaid
+```mermaid-example
 flowchart TD
     id1[\This is the text in the box\]
 ```
 
 ### Trapezoid
 
-```mermaid-code
-flowchart TD
-    A[/Christmas\]
-```
-```mermaid
+```mermaid-example
 flowchart TD
     A[/Christmas\]
 ```
 ### Trapezoid alt
 
-```mermaid-code
-flowchart TD
-    B[\Go shopping/]
-```
-```mermaid
+```mermaid-example
 flowchart TD
     B[\Go shopping/]
 ```
@@ -213,110 +147,70 @@ Nodes can be connected with links/edges. It is possible to have different types
 
 ### A link with arrow head
 
-```mermaid-code
-flowchart LR
-    A-->B
-```
-```mermaid
+```mermaid-example
 flowchart LR
     A-->B
 ```
 
 ### An open link
 
-```mermaid-code
-flowchart LR
-    A --- B
-```
-```mermaid
+```mermaid-example
 flowchart LR
     A --- B
 ```
 
 ### Text on links
 
-```mermaid-code
+```mermaid-example
 flowchart LR
     A-- This is the text! ---B
 ```
-```mermaid
-flowchart LR
-    A-- This is the text ---B
-```
 
 or
 
-```mermaid-code
-flowchart LR
-    A---|This is the text|B
-```
-```mermaid
+```mermaid-example
 flowchart LR
     A---|This is the text|B
 ```
 
 ### A link with arrow head and text
 
-```mermaid-code
-flowchart LR
-    A-->|text|B
-```
-```mermaid
+```mermaid-example
 flowchart LR
     A-->|text|B
 ```
 
 or
 
-```mermaid-code
-flowchart LR
-    A-- text -->B
-```
-```mermaid
+```mermaid-example
 flowchart LR
     A-- text -->B
 ```
 
 ### Dotted link
 
-```mermaid-code
-flowchart LR;
-   A-.->B;
-```
-```mermaid
+```mermaid-example
 flowchart LR;
    A-.->B;
 ```
 
 ### Dotted link with text
 
-```mermaid-code
-flowchart LR
-   A-. text .-> B
-```
-```mermaid
+```mermaid-example
 flowchart LR
    A-. text .-> B
 ```
 
 ### Thick link
 
-```mermaid-code
-flowchart LR
-   A ==> B
-```
-```mermaid
+```mermaid-example
 flowchart LR
    A ==> B
 ```
 
 ### Thick link with text
 
-```mermaid-code
-flowchart LR
-   A == text ==> B
-```
-```mermaid
+```mermaid-example
 flowchart LR
    A == text ==> B
 ```
@@ -324,31 +218,19 @@ flowchart LR
 ### Chaining of links
 
 It is possible declare many links in the same line as per below:
-```mermaid-code
-flowchart LR
-   A -- text --> B -- text2 --> C
-```
-```mermaid
+```mermaid-example
 flowchart LR
    A -- text --> B -- text2 --> C
 ```
 
 It is also possible to declare multiple nodes links in the same line as per below:
-```mermaid-code
-flowchart LR
-   a --> b & c--> d
-```
-```mermaid
+```mermaid-example
 flowchart LR
    a --> b & c--> d
 ```
 
 You can then describe dependencies in a very expressive way. Like the one-liner below:
-```mermaid-code
-flowchart TB
-    A & B--> C & D
-```
-```mermaid
+```mermaid-example
 flowchart TB
     A & B--> C & D
 ```
@@ -368,13 +250,7 @@ flowchart TB
 
 There are new types of arrows supported as per below:
 
-```mermaid-code
-flowchart LR
-    A --o B
-    B --x C
-```
-
-```mermaid
+```mermaid-example
 flowchart LR
     A --o B
     B --x C
@@ -385,14 +261,7 @@ flowchart LR
 
 There is the possibility to use multidirectional arrows.
 
-```mermaid-code
-flowchart LR
-    A o--o B
-    B <--> C
-    C x--x D
-```
-
-```mermaid
+```mermaid-example
 flowchart LR
     A o--o B
     B <--> C
@@ -410,16 +279,7 @@ than the others by adding extra dashes in the link definition.
 In the following example, two extra dashes are added in the link from node _B_
 to node _E_, so that it spans two more ranks than regular links:
 
-```mermaid-code
-flowchart TD
-    A[Start] --> B{Is it?};
-    B -->|Yes| C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B ---->|No| E[End];
-```
-
-```mermaid
+```mermaid-example
 flowchart TD
     A[Start] --> B{Is it?};
     B -->|Yes| C[OK];
@@ -435,7 +295,7 @@ When the link label is written in the middle of the link, the extra dashes must
 be added on the right side of the link. The following example is equivalent to
 the previous one:
 
-```mermaid-code
+```mermaid-example
 flowchart TD
     A[Start] --> B{Is it?};
     B -- Yes --> C[OK];
@@ -444,15 +304,6 @@ flowchart TD
     B -- No ----> E[End];
 ```
 
-```mermaid
-flowchart TD
-    A[Start] --> B{Is it?};
-    B -->|Yes| C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B ---->|No| E[End];
-```
-
 For dotted or thick links, the characters to add are equals signs or dots,
 as summed up in the following table:
 
@@ -469,11 +320,7 @@ as summed up in the following table:
 
 It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
 
-```mermaid-code
-flowchart LR
-    id1["This is the (text) in the box"]
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1["This is the (text) in the box"]
 ```
@@ -482,11 +329,7 @@ flowchart LR
 
 It is possible to escape characters using the syntax exemplified here.
 
-```mermaid-code
-    flowchart LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
-```
-```mermaid
+```mermaid-example
     flowchart LR
         A["A double quote:#quot;"] -->B["A dec char:#9829;"]
 ```
@@ -503,20 +346,7 @@ end
 
 An example below:
 
-```mermaid-code
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
- ```
-```mermaid
+```mermaid-example
 flowchart TB
     c1-->a2
     subgraph one
@@ -532,43 +362,19 @@ flowchart TB
 
  You can also set an explicit id for the subgraph.
 
-```mermaid-code
+```mermaid-example
 flowchart TB
     c1-->a2
     subgraph ide1 [one]
     a1-->a2
     end
  ```
-```mermaid
-flowchart TB
-    c1-->a2
-    subgraph id1 [one]
-    a1-->a2
-    end
- ```
 
 ## Beta: flowcharts
 
 With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the flowchart below.
 
-```mermaid-code
-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
- ```
-
-```mermaid
+```mermaid-example
 flowchart TB
     c1-->a2
     subgraph one
@@ -589,7 +395,7 @@ flowchart TB
 
 With the graphtype flowcharts you can use the direction statement to set the direction which the subgraph will render like in this example.
 
-```mermaid-code
+```mermaid-example
 flowchart LR
   subgraph TOP
     direction TB
@@ -606,24 +412,6 @@ flowchart LR
   B1 --> B2
  ```
 
-```mermaid
-flowchart LR
-
-      subgraph TOP
-        direction TB
-        subgraph B1
-            direction RL
-            i1 -->f1
-        end
-        subgraph B2
-            direction BT
-            i2 -->f2
-        end
-      end
-      A --> TOP --> B
-      B1 --> B2
- ```
-
 ## Interaction
 
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
@@ -646,7 +434,9 @@ Examples of tooltip usage below:
 </script>
 ```
 
-```mermaid-code
+The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.
+
+```mermaid-example
 flowchart LR;
     A-->B;
     B-->C;
@@ -657,36 +447,12 @@ flowchart LR;
     click B href "http://www.github.com" "This is a tooltip for a link"
 ```
 
-The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
-
-```mermaid
-flowchart LR
-    A-->B;
-    B-->C;
-    C-->D;
-    click A callback "Tooltip"
-    click B "http://www.github.com" "This is a link"
-    click C call callback() "Tooltip"
-    click D href "http://www.github.com" "This is 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/).
 
 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
-```mermaid-code
-flowchart LR;
-    A-->B;
-    B-->C;
-    C-->D;
-    D-->E;
-    click A "http://www.github.com" _blank
-    click B "http://www.github.com" "Open this in a new tab" _blank
-    click C href "http://www.github.com" _blank
-    click D href "http://www.github.com" "Open this in a new tab" _blank
-```
-
-```mermaid
+```mermaid-example
 flowchart LR;
     A-->B;
     B-->C;
@@ -750,7 +516,7 @@ have no ids in the same way as nodes, some other way of deciding what style the
 Instead of ids, the order number of when the link was defined in the graph is used. In the example below the style
 defined in the linkStyle statement will belong to the fourth link in the graph:
 
-```mermaid-code
+```
 linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 ```
 
@@ -759,13 +525,7 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 
 It is possible to apply specific styles such as a thicker border or a different background color to a node.
 
-```mermaid-code
-flowchart 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
-```
-```mermaid
+```mermaid-example
 flowchart LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
@@ -799,12 +559,7 @@ It is also possible to attach a class to a list of nodes in one statement:
 
 A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
 
-```mermaid-code
-flowchart LR
-    A:::someclass --> B
-    classDef someclass fill:#f96;
-```
-```mermaid
+```mermaid-example
 flowchart LR
     A:::someclass --> B
     classDef someclass fill:#f96;
@@ -830,13 +585,7 @@ below:
 
 **Example definition**
 
-```mermaid-code
-flowchart LR;
-    A-->B[AAA<span>BBB</span>];
-    B-->D;
-    class A cssClass;
-```
-```mermaid
+```mermaid-example
 flowchart LR;
     A-->B[AAA<span>BBB</span>];
     B-->D;
@@ -859,14 +608,7 @@ It is possible to add icons from fontawesome.
 
 The icons are accessed via the syntax fa:#icon class name#.
 
-```mermaid-code
-flowchart 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?);
-```
-```mermaid
+```mermaid-example
 flowchart TD
     B["fa:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
@@ -883,15 +625,7 @@ flowchart TD
 
 Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
 
-```mermaid-code
-flowchart LR
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
-```
-
-```mermaid
+```mermaid-example
 flowchart LR
     A[Hard edge] -->|Link text| B(Round edge)
     B --> C{Decision}

docs/gantt.md

@@ -17,18 +17,7 @@
 
 Mermaid can render Gantt diagrams as SVG, PNG or a MarkDown link that can be pasted into docs.
 
-```mermaid-code
-gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-```
-```mermaid
+```mermaid-example
 gantt
     title A Gantt Diagram
     dateFormat  YYYY-MM-DD
@@ -41,7 +30,7 @@ gantt
 ```
 ## Syntax
 
-```
+```mermaid-example
 gantt
     dateFormat  YYYY-MM-DD
     title       Adding GANTT diagram functionality to mermaid
@@ -73,46 +62,9 @@ gantt
     Add gantt diagram to demo page      :20h
     Add another diagram to demo page    :48h
 ```
-```mermaid
-gantt
-    dateFormat  YYYY-MM-DD
-    title       Adding GANTT diagram functionality to mermaid
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
-    section A section
-    Completed task            :done,    des1, 2014-01-06,2014-01-08
-    Active task               :active,  des2, 2014-01-09, 3d
-    Future task               :         des3, after des2, 5d
-    Future task2              :         des4, after des3, 5d
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison          :crit, done, after des1, 2d
-    Create tests for parser             :crit, active, 3d
-    Future task in critical line        :crit, 5d
-    Create tests for renderer           :2d
-    Add to mermaid                      :1d
-
-    section Documentation
-    Describe gantt syntax               :active, a1, after des1, 3d
-    Add gantt diagram to demo page      :after a1  , 20h
-    Add another diagram to demo page    :doc1, after a1  , 48h
-
-    section Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h
-```
 
 It is possible to set multiple dependencies separated by space:
-```mermaid-code
-    gantt
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
-```
-```mermaid-code
+```mermaid-example
     gantt
         apple :a, 2017-07-20, 1w
         banana :crit, b, 2017-07-23, 1d
@@ -135,16 +87,7 @@ To do so, start a line with the `section` keyword and give it a name. (Note that
 
 You can add milestones to the diagrams. Milestones differ from tasks as they represent a single instant in time and are identified by the keyword `milestone`. Below is an example on how to use milestones. As you may notice, the exact location of the milestone is determined by the initial date for the milestone and the "duration" of the task this way: *initial date*+*duration*/2. 
 
-```mermaid-code
-gantt 
-dateFormat HH:mm
-axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min 
-Final milestone : milestone, m2, 18:14, 2min
-```
-```mermaid
+```mermaid-example
 gantt 
 dateFormat HH:mm
 axisFormat %H:%M

docs/index.html

@@ -66,17 +66,27 @@
       markdown: {
         renderer: {
           code: function(code, lang) {
-            if (lang === "mermaid") {
-              return (
-                '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
-              );
-            } else if (lang === 'mermaid-code') {
+            if (lang.startsWith('mermaid')) {
+              var resultingHTML = '';
+              
+              if (lang === "mermaid-code" || lang === 'mermaid-example') {
                 currentCodeExample++;
                 colorize.push(currentCodeExample);
-              return (
+                resultingHTML += (
                   '<pre id="code' + currentCodeExample + '">' + code + '</pre>'
                 )
               }
+              
+              if (lang === 'mermaid' || lang === 'mermaid-example') {
+                resultingHTML += (
+                  '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
+                );
+              }
+
+              if (resultingHTML !== '') {
+                return resultingHTML;
+              }
+            }
             return this.origin.code.apply(this, arguments);
           }
         }

docs/n00b-syntaxReference.md

@@ -10,18 +10,7 @@ One would notice that all **Diagrams definitions begin** with a declaration of t
 
 **Example** :  The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
 
-```mermaid-code
-erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-```mermaid
+```mermaid-example
 erDiagram
           CUSTOMER }|..|{ DELIVERY-ADDRESS : has
           CUSTOMER ||--o{ ORDER : places

docs/pie.md

@@ -5,18 +5,12 @@
 
 Mermaid can render Pie Chart diagrams.
 
-```mermaid-code
+```mermaid-example
 pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
     "Rats" : 15
 ```
-```mermaid
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 35
-```
 
 
 ## Syntax
@@ -37,7 +31,7 @@ Drawing a pie chart is really simple in mermaid.
       .
 
 ## Example
-```mermaid-code
+```mermaid-example
 pie
     title Key elements in Product X
     "Calcium" : 42.96
@@ -45,11 +39,3 @@ pie
     "Magnesium" : 10.01
     "Iron" :  5
 ```
-```mermaid
-pie
-title Key elements in Product X
-    "Calcium" : 42.96
-    "Potassium" : 50.05
-    "Magnesium" : 25.01
-    "Iron" :  15
- ```

docs/requirementDiagram.md

@@ -6,24 +6,7 @@
 
 Rendering requirements is straightforward.
 
-```mermaid-code
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-```
-
-```mermaid
+```mermaid-example
     requirementDiagram
 
     requirement test_req {
@@ -103,77 +86,7 @@ Each relationship is labeled in the diagram.
 ## Larger Example
 This example uses all features of the diagram.
 
-```mermaid-code
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    interfaceRequirement test_req4 {
-    id: 1.2.1
-    text: the fourth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    physicalRequirement test_req5 {
-    id: 1.2.2
-    text: the fifth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    designConstraint test_req6 {
-    id: 1.2.3
-    text: the sixth test text.
-    risk: medium
-    verifymethod: analysis
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-    element test_entity3 {
-    type: "test suite"
-    docRef: github.com/all_the_tests
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req3 - contains -> test_req4
-    test_req4 - derives -> test_req5
-    test_req5 - refines -> test_req6
-    test_entity3 - verifies -> test_req5
-    test_req <- copies - test_entity2
-```
-
-```mermaid
+```mermaid-example
     requirementDiagram
 
     requirement test_req {

docs/sequenceDiagram.md

@@ -5,20 +5,13 @@
 
 Mermaid can render sequence diagrams.
 
-```mermaid-code
+```mermaid-example
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     John-->>Alice: Great!
     Alice-)John: See you later!
 ```
 
-```mermaid
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    John-->>Alice: Great!
-    Alice--)John: See you later!
-```
-
 ```note
 A note on nodes, the word "end" could potentially break the diagram, due to the way that the mermaid language is scripted.
 
@@ -34,15 +27,7 @@ rendered in order of appearance in the diagram source text. Sometimes you might
 different order than how they appear in the first message. It is possible to specify the actor's order of
 appearance by doing the following:
 
-```mermaid-code
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     participant Alice
     participant Bob
@@ -53,7 +38,7 @@ sequenceDiagram
 ### Actors
 
 If you specifically want to use the actor symbol instead of a rectangle with text you can do so by using actor statements as per below.
-```mermaid-code
+```mermaid-example
 sequenceDiagram
     actor Alice
     actor Bob
@@ -61,23 +46,7 @@ sequenceDiagram
     Bob->>Alice: Hi Alice
 ```
 
-```mermaid
-    sequenceDiagram
-        actor Alice
-        actor Bob
-        Alice->>Bob: Hi Bob
-        Bob->>Alice: Hi Alice
-```
-
-```mermaid-code
-sequenceDiagram
-    actor Alice
-    actor Bob
-    Alice->>Bob: Hi Bob
-    Bob->>Alice: Hi Alice
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     actor Alice
     actor Bob
@@ -89,15 +58,7 @@ sequenceDiagram
 
 The actor can have a convenient identifier and a descriptive label.
 
-```mermaid-code
-sequenceDiagram
-    participant A as Alice
-    participant J as John
-    A->>J: Hello John, how are you?
-    J->>A: Great!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     participant A as Alice
     participant J as John
@@ -130,15 +91,7 @@ There are six types of arrows currently supported:
 
 It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:
 
-```mermaid-code
-sequenceDiagram
-    Alice->>John: Hello John, how are you?
-    activate John
-    John-->>Alice: Great!
-    deactivate John
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     activate John
@@ -148,13 +101,7 @@ sequenceDiagram
 
 There is also a shortcut notation by appending `+`/`-` suffix to the message arrow:
 
-```mermaid-code
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    John-->>-Alice: Great!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->>+John: Hello John, how are you?
     John-->>-Alice: Great!
@@ -162,15 +109,7 @@ sequenceDiagram
 
 Activations can be stacked for same actor:
 
-```mermaid-code
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->>+John: Hello John, how are you?
     Alice->>+John: John, can you hear me?
@@ -185,13 +124,7 @@ Note [ right of | left of | over ] [Actor]: Text in note content
 
 See the example below:
 
-```mermaid-code
-sequenceDiagram
-    participant John
-    Note right of John: Text in note
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     participant John
     Note right of John: Text in note
@@ -199,13 +132,7 @@ sequenceDiagram
 
 It is also possible to create notes spanning two participants:
 
-```mermaid-code
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    Note over Alice,John: A typical interaction
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
@@ -223,15 +150,7 @@ end
 
 See the example below:
 
-```mermaid-code
-sequenceDiagram
-    Alice->John: Hello John, how are you?
-    loop Every minute
-        John-->Alice: Great!
-    end
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->John: Hello John, how are you?
     loop Every minute
@@ -261,20 +180,7 @@ end
 
 See the example below:
 
-```mermaid-code
-sequenceDiagram
-    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
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     Alice->>Bob: Hello Bob, how are you?
     alt is sick
@@ -305,18 +211,7 @@ end
 
 See the example below:
 
-```mermaid-code
-sequenceDiagram
-    par Alice to Bob
-        Alice->>Bob: Hello guys!
-    and Alice to John
-        Alice->>John: Hello guys!
-    end
-    Bob-->>Alice: Hi Alice!
-    John-->>Alice: Hi Alice!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     par Alice to Bob
         Alice->>Bob: Hello guys!
@@ -329,21 +224,7 @@ sequenceDiagram
 
 It is also possible to nest parallel blocks.
 
-```mermaid-code
-sequenceDiagram
-    par Alice to Bob
-        Alice->>Bob: Go help John
-    and Alice to John
-        Alice->>John: I want this done today
-        par John to Charlie
-            John->>Charlie: Can we do this today?
-        and John to Diana
-            John->>Diana: Can you help us today?
-        end
-    end
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     par Alice to Bob
         Alice->>Bob: Go help John
@@ -377,26 +258,7 @@ end
 
 See the examples below:
 
-```mermaid-code
-sequenceDiagram
-    participant Alice
-    participant John
-
-    rect rgb(191, 223, 255)
-    note right of Alice: Alice calls John.
-    Alice->>+John: Hello John, how are you?
-    rect rgb(200, 150, 255)
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    end
-    John-->>-Alice: I feel great!
-    end
-    Alice ->>+ John: Did you want to go to the game tonight?
-    John -->>- Alice: Yeah! See you there.
-
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     participant Alice
     participant John
@@ -430,12 +292,7 @@ sequenceDiagram
 
 It is possible to escape characters using the syntax exemplified here.
 
-```mermaid-code
-sequenceDiagram
-    A->>B: I #9829; you!
-    B->>A: I #9829; you #infin; times more!
-```
-```mermaid
+```mermaid-example
 sequenceDiagram
     A->>B: I #9829; you!
     B->>A: I #9829; you #infin; times more!
@@ -459,20 +316,7 @@ It is possible to get a sequence number attached to each arrow in a sequence dia
 
 It can also be be turned on via the diagram code as in the diagram:
 
-```mermaid-code
-sequenceDiagram
-    autonumber
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-```mermaid
+```mermaid-example
 sequenceDiagram
     autonumber
     Alice->>John: Hello John, how are you?
@@ -490,9 +334,9 @@ sequenceDiagram
 Actors can have popup-menus containing individualized links to external pages.  For example, if an actor represented a web service, useful links might include a link to the service health dashboard, repo containing the code for the service, or a wiki page describing the service.
 
 This can be configured by adding one or more link lines with the format:
-
+```
 link <actor>: <link-label> @ <link-url>
-
+```
 ```mermaid-code
 sequenceDiagram
     participant Alice
@@ -511,7 +355,9 @@ There is an advanced syntax that relies on JSON formatting. If you are comfortab
 
 This can be configured by adding the links lines with the format:
 
+```
 links <actor>: <json-formatted link-name link-url pairs>
+```
 
 An example is below:
 

docs/stateDiagram.md

@@ -4,7 +4,7 @@
 
 Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
 
-```mermaid-code
+```mermaid-example
 stateDiagram-v2
     [*] --> Still
     Still --> [*]
@@ -15,17 +15,9 @@ stateDiagram-v2
     Crash --> [*]
 ```
 
-```mermaid
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
+Older renderer:
 
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-```
-```mermaid
+```mermaid-example
 stateDiagram
     [*] --> Still
     Still --> [*]
@@ -42,36 +34,21 @@ In state diagrams systems are described in terms of its states and how the syste
 
 A state can be declared in multiple ways. The simplest way is to define a state id as a description.
 
-```mermaid-code
-stateDiagram-v2
-    s1
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     s1
 ```
 
 Another way is by using the state keyword with a description as per below:
 
-```mermaid-code
-stateDiagram-v2
-    state "This is a state description" as s2
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     state "This is a state description" as s2
 ```
 
 Another way to define a state with a description is to define the state id followed by a colon and the description:
 
-```mermaid-code
-stateDiagram-v2
-    s2 : This is a state description
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     s2 : This is a state description
 ```
@@ -82,24 +59,14 @@ Transitions are path/edges when one state passes into another. This is represent
 
 When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
 
-```mermaid-code
-stateDiagram-v2
-    s1 --> s2
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     s1 --> s2
 ```
 
 It is possible to add text to a transition. To describe what it represents.
 
-```mermaid-code
-stateDiagram-v2
-    s1 --> s2: A transition
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     s1 --> s2: A transition
 ```
@@ -108,13 +75,7 @@ stateDiagram-v2
 
 There are two special states indicating the start and stop of the diagram. These are written with the [\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
 
-```mermaid-code
-stateDiagram-v2
-    [*] --> s1
-    s1 --> [*]
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     [*] --> s1
     s1 --> [*]
@@ -127,16 +88,7 @@ have several internal states. These are called composite states in this terminol
 
 In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between \{\}. See the example below:
 
-```mermaid-code
-stateDiagram-v2
-    [*] --> First
-    state First {
-        [*] --> second
-        second --> [*]
-    }
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     [*] --> First
     state First {
@@ -147,7 +99,7 @@ stateDiagram-v2
 
 You can do this in several layers:
 
-```mermaid-code
+```mermaid-example
 stateDiagram-v2
     [*] --> First
 
@@ -166,47 +118,9 @@ stateDiagram-v2
     }
 ```
 
-```mermaid
-stateDiagram-v2
-    [*] --> First
-
-    state First {
-        [*] --> Second
-        state Second {
-            [*] --> second2
-            second2 --> Third
-
-            state Third {
-                [*] --> third
-                third --> [*]
-            }
-        }
-    }
-```
-
 You can also define transitions also between composite states:
 
-```mermaid-code
-stateDiagram-v2
-    [*] --> First
-    First --> Second
-    First --> Third
-
-    state First {
-        [*] --> fir
-        fir --> [*]
-    }
-    state Second {
-        [*] --> sec
-        sec --> [*]
-    }
-    state Third {
-        [*] --> thi
-        thi --> [*]
-    }
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     [*] --> First
     First --> Second
@@ -232,16 +146,7 @@ stateDiagram-v2
 
 Sometimes you need to model a choice between two or more paths, you can do so using <<choice>>.
 
-```mermaid-code
-stateDiagram-v2
-    state if_state <<choice>>
-    [*] --> IsPositive
-    IsPositive --> if_state
-    if_state --> False: if n < 0
-    if_state --> True : if n >= 0
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     state if_state <<choice>>
     [*] --> IsPositive
@@ -254,7 +159,7 @@ stateDiagram-v2
 
 It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&lt;join&gt;&gt;.
 
-```mermaid-code
+```mermaid-example
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -268,28 +173,13 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&
       State4 --> [*]
 ```
 
-```mermaid
-   stateDiagram-v2
-    state fork_state <<fork>>
-      [*] --> fork_state
-      fork_state --> State2
-      fork_state --> State3
-
-      state join_state <<join>>
-      State2 --> join_state
-      State3 --> join_state
-      join_state --> State4
-      State4 --> [*]
-
-```
-
 ## Notes
 
 Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
 
 Here you can choose to put the note to the *right of* or to the *left of* a node.
 
-```mermaid-code
+```mermaid-example
     stateDiagram-v2
         State1: The state with a note
         note right of State1
@@ -300,42 +190,11 @@ Here you can choose to put the note to the *right of* or to the *left of* a node
         note left of State2 : This is the note to the left.
 ```
 
-```mermaid
-    stateDiagram-v2
-    State1: The state with a note
-    note right of State1
-      Important information! You can write
-      notes.
-    end note
-    State1 --> State2
-    note left of State2 : This is the note to the left.
-
-```
-
 ## Concurrency
 
 As in plantUml you can specify concurrency using the -- symbol.
 
-```mermaid-code
-stateDiagram-v2
-    [*] --> Active
-
-    state Active {
-        [*] --> NumLockOff
-        NumLockOff --> NumLockOn : EvNumLockPressed
-        NumLockOn --> NumLockOff : EvNumLockPressed
-        --
-        [*] --> CapsLockOff
-        CapsLockOff --> CapsLockOn : EvCapsLockPressed
-        CapsLockOn --> CapsLockOff : EvCapsLockPressed
-        --
-        [*] --> ScrollLockOff
-        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
-        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
-    }
-```
-
-```mermaid
+```mermaid-example
 stateDiagram-v2
     [*] --> Active
 
@@ -358,20 +217,7 @@ stateDiagram-v2
 
 With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
 
-```mermaid-code
-stateDiagram
-    direction LR
-    [*] --> A
-    A --> B
-    B --> C
-    state B {
-      direction LR
-      a --> b
-    }
-    B --> D
- ```
- This is how this renders
-```mermaid
+```mermaid-example
 stateDiagram
     direction LR
     [*] --> A

docs/theming.md

@@ -32,7 +32,7 @@ When Generating a diagram using on a webpage that supports mermaid. It is also p
 
 Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
 
-```mermaid
+```mermaid-example
 %%{init: {'theme':'base'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -61,7 +61,7 @@ The easiest way to make a custom theme is to start with the base theme, and just
 
 ## Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.
 
-```mermaid-code
+```mermaid-example
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -79,24 +79,6 @@ The easiest way to make a custom theme is to start with the base theme, and just
           end
 ```
 
-```mermaid
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#00ff00'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
 
 **Notes:**
 Leaving it empty will set all variable values to default.
@@ -204,26 +186,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 
 
 # Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-```mermaid-code
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-
+```mermaid-example
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -248,25 +211,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
 * make the edge label background differ from the subgraph by setting the edgeLabelBackground
 
 
-```mermaid-code
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
+```mermaid-example
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -332,24 +277,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```
 
 ### Flowchart (beta)
-```mermaid-code
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-```mermaid
+```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         flowchart TD
           A[Christmas] -->|Get money| B(Go shopping)
@@ -368,25 +296,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```
 
 ### Sequence diagram
-```mermaid-code
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-```mermaid
+```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         sequenceDiagram
           autonumber
@@ -406,7 +316,7 @@ In the following examples, the directive `init` is used, with the `theme` being
 ```
 
 ### Class diagram
-```mermaid-code
+```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 
 classDiagram
@@ -431,65 +341,9 @@ classDiagram
 		+run()
 	}
 ```
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o Zebra
-	Animal : +int age
-	Animal : +String gender
-	Animal: +isMammal()
-	Animal: +mate()
-	class Duck{
-		+String beakColor
-		+swim()
-		+quack()
-	}
-	class Fish{
-		-int sizeInFeet
-		-canEat()
-	}
-	class Zebra{
-		+bool is_wild
-		+run()
-	}
-
-```
 
 ### Gantt
-```mermaid-code
-gantt
-       dateFormat                YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       section A section
-       Completed task            :done,    des1, 2014-01-06,2014-01-08
-       Active task               :active,  des2, 2014-01-09, 3d
-       Future task               :         des3, after des2, 5d
-       Future task2              :         des4, after des3, 5d
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       section Documentation
-       Describe gantt syntax               :active, a1, after des1, 3d
-       Add gantt diagram to demo page      :after a1  , 20h
-       Add another diagram to demo page    :doc1, after a1  , 48h
-
-       section Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-```mermaid
+```mermaid-example
 gantt
        dateFormat                YYYY-MM-DD
        title                     Adding GANTT diagram functionality to mermaid
@@ -520,36 +374,7 @@ gantt
 ```
 
 ### State diagram
-```mermaid-code
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-```mermaid
+```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
       stateDiagram
         [*] --> Active
@@ -581,35 +406,7 @@ gantt
 
 ### State diagram (beta)
 
-```mermaid-code
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-```mermaid
+```mermaid-example
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 stateDiagram-v2
         [*] --> Active
@@ -640,18 +437,7 @@ stateDiagram-v2
 
 ### Entity Relations diagram
 
-```mermaid-code
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-```mermaid
+```mermaid-example
       erDiagram
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
@@ -664,19 +450,7 @@ stateDiagram-v2
 ```
 
 ### User journey diagram
-```mermaid-code
-journey
-            title My working day
-            section Go to work
-              Make tea: 5: Me
-              Go upstairs: 3: Me
-              Do work: 1: Me, Cat
-            section Go home
-              Go downstairs: 5: Me
-              Sit down: 5: Me
-```
-
-```mermaid
+```mermaid-example
 journey
             title My working day
             section Go to work

docs/user-journey.md

@@ -4,18 +4,7 @@
 
 Mermaid can render user journey diagrams:
 
-```mermaid-code
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-```
-```mermaid
+```mermaid-example
 journey
     title My working day
     section Go to work