diff --git a/README.md b/README.md
index 83fe09ec76..345c6622e0 100644
--- a/README.md
+++ b/README.md
@@ -188,6 +188,7 @@ pie
 
 - [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
+- [HTTP Server](https://github.com/TomWright/mermaid-server)
 
 # Contributors [![Help wanted](https://img.shields.io/github/labels/mermaid-js/mermaid/Help%20wanted!)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)
 
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index c88129ddc5..4acccfc376 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -640,4 +640,35 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('31: should not slice off edges that are to the left of the left-most vertex', () => {
+    imgSnapshotTest(
+      `graph TD
+      work --> sleep
+      sleep --> work
+      eat --> sleep
+      work --> eat
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+
+  it('32: Render Subroutine shape', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[[subroutine shape test]]
+      A -->|Get money| B[[Go shopping]]
+      B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
+      C -->|One| D[[Laptop]]
+      C -->|Two| E[[iPhone]]
+      C -->|Three| F[[Car<br/>wroom wroom]]
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index c3614ec19a..4c90654c81 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -1,7 +1,7 @@
 /* eslint-env jest */
 import { imgSnapshotTest } from '../../helpers/util.js';
 
-describe('Sequencediagram', () => {
+describe('Gantt diagram', () => {
   it('should render a gantt chart', () => {
     imgSnapshotTest(
       `
@@ -130,4 +130,34 @@ describe('Sequencediagram', () => {
       {}
     );
   });
+
+  it('should hide today marker', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title Hide today marker (vertical line should not be visible)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker off
+        section Section1
+         Today: 1, -1h
+      `,
+      {}
+    );
+  });
+
+  it('should style today marker', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      title Style today marker (vertical line should be 5px wide and half-transparent blue)
+      dateFormat YYYY-MM-DD
+      axisFormat %d
+      todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+      section Section1
+       Today: 1, -1h
+      `,
+      {}
+    );
+  });
 });
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index c084b73c1e..cf65485c75 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -182,5 +182,18 @@ context('Sequence diagram', () => {
       {}
       );
     });
+    it('should render autonumber with different line breaks', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        autonumber
+        Alice->>John: Hello John,<br>how are you?
+        Alice->>John: John,<br/>can you hear me?
+        John-->>Alice: Hi Alice,<br />I can hear you!
+        John-->>Alice: I feel great!
+      `,
+      {}
+      );
+    });
   });
 });
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index cc4b9e862d..01ce04d88b 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -7,7 +7,7 @@
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
-        background: white;
+        background: rgb(221, 208, 208);
         font-family: 'Arial';
         }
       h1 { color: white;}
@@ -32,13 +32,31 @@ <h1>info below</h1>
         G-->c
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
-        flowchart LR
-        subgraph id1 [Test]
-            b
-          end
-        a-->id1
+    stateDiagram-v2
+    [*] --> monkey
+    state monkey {
+              Sitting
+            --
+              Eating
+            }
       </div>
-      <div class="mermaid mermaid-apa" style="width: 100%; height: 20%;">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+    stateDiagram-v2
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+      </div>
+      <div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
         stateDiagram
         [*] --> Still
         Still --> [*]
@@ -52,15 +70,66 @@ <h1>info below</h1>
         Moving --> Crash
         Crash --> [*]
       </div>
+      <div class="mermaid2" style="width: 100%; height: 100%;">
+stateDiagram-v2
+    [*] --> First
+    First --> Second
+%    First --> Third
+
+    state First {
+        [*] --> fir
+        fir --> [*]
+    }
+    state Second {
+        [*] --> sec
+        sec --> [*]
+    }
+    </div>
       <div class="mermaid" style="width: 100%; height: 100%;">
-        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.
+flowchart TD
+    subgraph A
+      a
+    end
+    subgraph B
+      b
+    end
+    subgraph C
+      subgraph D
+        d
+      end
+    end
+    A -- oAo --o B
+    A --> C
+    </div>
+      <div class="mermaid" style="width: 100%; height: 100%;">
+flowchart TD
+    subgraph A
+      a
+    end
+    subgraph B
+      b
+    end
+    c-->A
+    c-->B
+  </div>
+      <div class="mermaid2" style="width: 100%; height: 100%;">
+stateDiagram-v2
+    [*] --> First
+    First --> Second
+    First --> Third
+
+    state First {
+        [*] --> fir
+        fir --> [*]
+    }
+    state Second {
+        [*] --> sec
+        sec --> [*]
+    }
+    state Third {
+        [*] --> thi
+        thi --> [*]
+    }
     </div>
       <div class="mermaid2" style="width: 100%; height: 100%;">
         stateDiagram-v2
diff --git a/dist/index.html b/dist/index.html
index 46af0d7094..f33151662f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -16,6 +16,9 @@
   <div class="mermaid">
     info
   </div>
+
+  <hr/>
+
   <div class="mermaid">
     gantt
       title Exclusive end dates (Manual date should end on 3d)
@@ -25,7 +28,6 @@
        2 Days: 1, 2019-01-01,2d
        Manual Date: 2, 2019-01-01,2019-01-03
   </div>
-
   <div class="mermaid">
     gantt
       title Inclusive end dates (Manual date should end on 4th)
@@ -36,6 +38,27 @@
        2 Days: 1, 2019-01-01,2d
        Manual Date: 2, 2019-01-01,2019-01-03
   </div>
+  <div class="mermaid">
+    gantt
+      title Hide today marker (vertical line should not be visible)
+      dateFormat YYYY-MM-DD
+      axisFormat %d
+      todayMarker off
+      section Section1
+       Today: 1, -1h
+  </div>
+  <div class="mermaid">
+    gantt
+      title Style today marker (vertical line should be 5px wide and half-transparent blue)
+      dateFormat YYYY-MM-DD
+      axisFormat %d
+      todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+      section Section1
+       Today: 1, -1h
+  </div>
+
+  <hr/>
+
   <div class="mermaid">
       graph LR
       sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -315,6 +338,20 @@
     class A someclass;
     class C someclass;
   </div>
+  <div class="mermaid">
+    graph LR
+    A[[subroutine shape test]]
+    A -->|Get money| B[[Go shopping]]
+    B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
+    C -->|One| D[[Laptop]]
+    C -->|Two| E[[iPhone]]
+    C -->|Three| F[[Car<br/>wroom wroom]]
+    click A "index.html#link-clicked" "link test"
+    click B testClick "click test"
+    classDef someclass fill:#f96;
+    class A someclass;
+    class C someclass;
+  </div>
   <div class="mermaid">
     graph LR
     A[(cylindrical<br />shape<br />test)]
@@ -441,6 +478,14 @@
     4->>1: multiline<br 	/>using #lt;br 	/#gt;
     note right of 1: multiline<br 	/>using #lt;br 	/#gt;
   </div>
+  <div class="mermaid">
+    sequenceDiagram
+    autonumber
+    Alice->>John: Hello John,<br>how are you?
+    Alice->>John: John,<br/>can you hear me?
+    John-->>Alice: Hi Alice,<br />I can hear you!
+    John-->>Alice: I feel great!
+  </div>
 
   <hr/>
 
diff --git a/docs/README.md b/docs/README.md
index 4fb40e62b4..f8e5046df1 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -16,11 +16,11 @@ Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
 
 **Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
 
-## New diagrams in 8.4
+## New diagrams in 8.5
 
-With version 8.4 class diagrams have got some new features, bug fixes and documentation. Another new feature in 8.4 is the new diagram type, state diagrams.
+With version 8.5 there are some bug fixes and enhancements, plus a new diagram type,  entity relationship diagrams.
 
-![Image show the two new diagram types](./img/new-diagrams.png)
+![Image showing the new ER diagram type](./img/er.png)
 
 ## Special note regarding version 8.2
 
@@ -137,6 +137,18 @@ merge newbranch
 
 ![Git graph](./img/git.png)
 
+### Entity Relationship Diagram - :exclamation: experimental
+
+```
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+![ER diagram](./img/simple-er.png)
+
 ## Installation
 
 ### CDN
diff --git a/docs/entityRelationshipDiagram.md b/docs/entityRelationshipDiagram.md
index da5bf4b0d0..042adae6d8 100644
--- a/docs/entityRelationshipDiagram.md
+++ b/docs/entityRelationshipDiagram.md
@@ -2,20 +2,20 @@
 
 > An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
 
-Note that practitioners of ER modelling almost always refer to entity types simply as entities.  For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
+Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*.  For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity.  This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them.  This is why entities are always named using singular nouns.
 
 Mermaid can render ER diagrams
 ```
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ : DELIVERY-ADDRESS : uses 
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses 
 ```
 ```mermaid
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ : DELIVERY-ADDRESS : uses 
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses 
 ```
 
 Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.
@@ -24,7 +24,7 @@ Relationships between entities are represented by lines with end markers represe
 
 ## Status
 
-ER diagrams are a new feature in Mermaid and are **experimental**.  There are likely to be a few bugs and constraints, and enhancements will be made in due course.
+ER diagrams are a new feature in Mermaid and are **experimental**.  There are likely to be a few bugs and constraints, and enhancements will be made in due course.  Currently you can only define entities and relationships, but not attributes.
 
 ## Syntax
 
@@ -61,10 +61,10 @@ Cardinality is a property that describes how many elements of another entity can
 
 | Value (left) | Value (right) | Meaning                                                |
 |:------------:|:-------------:|--------------------------------------------------------|
-|     `|o`     |       `o|`    | Zero or one                                            |
-|     `||`     |       `||`    | Exactly one                                            |
+|     `\|o`    |       `o\|`   | Zero or one                                            |
+|     `\|\|`   |       `\|\|`  | Exactly one                                            |
 |     `}o`     |       `o{`    | Zero or more (no upper limit)                          |
-|     `}|`     |       `|{`    | One or more (no upper limit)                           |
+|     `}\|`    |       `\|{`   | One or more (no upper limit)                           |
 
 ### Identification
 
diff --git a/docs/examples.md b/docs/examples.md
index 02985474d6..127173384a 100644
--- a/docs/examples.md
+++ b/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
diff --git a/docs/flowchart.md b/docs/flowchart.md
index 0d964bdcc7..1e3d005103 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -89,6 +89,17 @@ graph LR
     id1([This is the text in the box])
 ```
 
+### A node in a subroutine shape
+
+```
+graph LR
+    id1[[This is the text in the box]]
+```
+```mermaid
+graph LR
+    id1[[This is the text in the box]]
+```
+
 ### A node in a cylindrical shape
 
 ```
diff --git a/docs/img/er.png b/docs/img/er.png
new file mode 100644
index 0000000000..21c44c257a
Binary files /dev/null and b/docs/img/er.png differ
diff --git a/docs/img/simple-er.png b/docs/img/simple-er.png
new file mode 100644
index 0000000000..5e139380be
Binary files /dev/null and b/docs/img/simple-er.png differ
diff --git a/docs/index.html b/docs/index.html
index 376fd5d66a..c3bdbb17ba 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,7 +7,7 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.7/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/integrations.md b/docs/integrations.md
index d01f7c35c1..33f424a980 100644
--- a/docs/integrations.md
+++ b/docs/integrations.md
@@ -137,3 +137,4 @@ The following is a list of different integrations and plugins where mermaid is b
   - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
+- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md
index ff25fd2f10..6dd749e275 100644
--- a/docs/mermaidAPI.md
+++ b/docs/mermaidAPI.md
@@ -263,6 +263,43 @@ The number of alternating section styles.
 Datetime format of the axis. This might need adjustment to match your locale and preferences
 **Default value '%Y-%m-%d'**.
 
+## er
+
+The object containing configurations specific for entity relationship diagrams
+
+### diagramPadding
+
+The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
+
+### layoutDirection
+
+Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL',
+where T = top, B = bottom, L = left, and R = right.
+
+### minEntityWidth
+
+The mimimum width of an entity box, expressed in pixels
+
+### minEntityHeight
+
+The minimum height of an entity box, expressed in pixels
+
+### entityPadding
+
+The minimum internal padding between the text in an entity box and the enclosing box borders, expressed in pixels
+
+### stroke
+
+Stroke color of box edges and lines
+
+### fill
+
+Fill color of entity boxes
+
+### fontSize
+
+Font size
+
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -318,6 +355,7 @@ mermaidAPI.initialize({
       boxTextMargin:5,
       noteMargin:10,
       messageMargin:35,
+      messageAlign:'center',
       mirrorActors:true,
       bottomMarginAdj:1,
       useMaxWidth:true,
diff --git a/package.json b/package.json
index 30d14ee66b..c1e10d887f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.4.7",
+  "version": "8.5.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -13,7 +13,7 @@
     "git graph"
   ],
   "scripts": {
-    "build": "webpack --progress --colors",
+    "build": "webpack --progress --colors -p",
     "postbuild": "documentation build src/mermaidAPI.js --shallow -f md --markdown-toc false -o docs/mermaidAPI.md",
     "build:watch": "yarn build --watch",
     "minify": "minify ./dist/mermaid.js > ./dist/mermaid.min.js",
diff --git a/src/dagre-wrapper/GraphObjects.md b/src/dagre-wrapper/GraphObjects.md
index 8821c7c364..cde45591d6 100644
--- a/src/dagre-wrapper/GraphObjects.md
+++ b/src/dagre-wrapper/GraphObjects.md
@@ -1,3 +1,55 @@
+# Cluster handling
+
+Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds.
+
+In the diagram below there are two clusters and there are no edges to nodes outside the own cluster.
+
+```mermaid
+flowchart
+  subgraph C1
+    a --> b
+  end
+  subgraph C2
+    c
+  end
+  C1 --> C2
+```
+
+In this case the dagre-wrapper will transform the graph to the graph below.
+```mermaid
+flowchart
+  C1 --> C2
+```
+
+The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
+
+When rendering this diagram it it beeing rendered recursivly. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
+
+```
+{ clusterNode: true, graph }
+```
+*Data for a clusterNode*
+
+When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
+
+```mermaid
+flowchart
+  subgraph C1
+    a
+  end
+  subgraph C2
+    b
+  end
+  a --> C2
+```
+
+To handle this case a special type of edge is inserted. The edge to/from the cluster is replaced with an edge to/from a node in the cluster which is tagged with toCluster/fromCluster. When rendering this edge the intersection between the edge and the border of the cluster is calculated making the edge start/stop there. In practice this renders like an an edge to/from the cluster.
+
+In the diagram above the root diagram would be rendered with C1 whereas C2 would be rendered recursively.
+
+Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.
+
+
 # Graph objects and their properties
 
 Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
@@ -7,12 +59,10 @@ Explains the representation of various objects used to render the flow charts an
 Sample object:
 ```json
 {
-  "labelType":"svg",
-  "labelStyle":"",
   "shape":"rect",
-  "label":{},
   "labelText":"Test",
-  "rx":0,"ry":0,
+  "rx":0,
+  "ry":0,
   "class":"default",
   "style":"",
   "id":"Test",
@@ -24,18 +74,16 @@ This is set by the renderer of the diagram and insert the data that the wrapper
 
 |  property  |                                                 description                                                 |
 | ---------- | ----------------------------------------------------------------------------------------------------------- |
-| labelType  | If the label should be html label or a svg label. Should we continue to support both?                       |
-| labelStyle | Css styles for the label. Not currently used.                                                               |
-| shape      | The shape of the node. Currently on rect is suppoerted. This will change.                                   |
-| label      | ??                                                                                                          |
+| labelStyle | Css styles for the label. User for instance for stylling the labels for clusters                            |
+| shape      | The shape of the node.                                                                                      |
 | labelText  | The text on the label                                                                                       |
-| rx         | The corner radius - maybe part of the shape instead?                                                        |
-| ry         | The corner radius - maybe part of the shape instead?                                                        |
-| class      | Class to be set for the shape                                                                               |
+| rx         | The corner radius - maybe part of the shape instead? Used for rects.                                        |
+| ry         | The corner radius - maybe part of the shape instead? Used for rects.                                        |
+| classes    | Classes to be set for the shape. Not used                                                                   |
 | style      | Css styles for the actual shape                                                                             |
 | id         | id of the shape                                                                                             |
-| type       | if set to group then this node indicates *a cluster*.                                                         |
-| padding    | Padding. Passed from the renderr as this might differ between react for different diagrams. Maybe obsolete. |
+| type       | if set to group then this node indicates *a cluster*.                                                       |
+| padding    | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete.            |
 
 
 # edge
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index 55db0b32ed..ac1163be8b 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -1,8 +1,10 @@
 import intersectRect from './intersect/intersect-rect';
-import { logger } from '../logger'; // eslint-disable-line
+import { logger as log } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
 
 const rect = (parent, node) => {
+  log.trace('Creating subgraph rect for ', node.id, node);
+
   // Add outer g element
   const shapeSvg = parent
     .insert('g')
@@ -23,6 +25,7 @@ const rect = (parent, node) => {
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
+  log.trace('Data ', node, JSON.stringify(node));
   // center the rect around its coordinate
   rect
     .attr('rx', node.rx)
@@ -32,9 +35,7 @@ const rect = (parent, node) => {
     .attr('width', node.width + padding)
     .attr('height', node.height + padding);
 
-  // logger.info('bbox', bbox.width, node.x, node.width);
   // Center the label
-  // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
   label.attr(
     'transform',
     'translate(' +
@@ -127,9 +128,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', node.width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  // logger.info('bbox', bbox.width, node.x, node.width);
   // Center the label
-  // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
   label.attr(
     'transform',
     'translate(' +
@@ -155,7 +154,9 @@ const shapes = { rect, roundedWithTitle, noteGroup };
 let clusterElems = {};
 
 export const insertCluster = (elem, node) => {
-  clusterElems[node.id] = shapes[node.shape](elem, node);
+  log.trace('Inserting cluster');
+  const shape = node.shape || 'rect';
+  clusterElems[node.id] = shapes[shape](elem, node);
 };
 export const getClusterTitleWidth = (elem, node) => {
   const label = createLabel(node.labelText, node.labelStyle);
@@ -170,6 +171,8 @@ export const clear = () => {
 };
 
 export const positionCluster = node => {
+  log.info('Position cluster');
   const el = clusterElems[node.id];
+
   el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
 };
diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js
index b7edb15720..a029f59fd9 100644
--- a/src/dagre-wrapper/createLabel.js
+++ b/src/dagre-wrapper/createLabel.js
@@ -1,8 +1,10 @@
 const createLabel = (vertexText, style) => {
   const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
   svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
-
-  const rows = vertexText.split(/\n|<br\s*\/?>/gi);
+  let rows = [];
+  if (vertexText) {
+    rows = vertexText.split(/\n|<br\s*\/?>/gi);
+  }
 
   for (let j = 0; j < rows.length; j++) {
     const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index ecf4254a82..0b5e474e2a 100644
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -63,34 +63,17 @@ const outsideNode = (node, point) => {
   return false;
 };
 
-// const intersection = (node, outsidePoint, insidePoint) => {
-//   const x = node.x;
-//   const y = node.y;
-
-//   const dx = Math.abs(x - insidePoint.x);
-//   const w = node.width / 2;
-//   let r = w - dx;
-//   const dy = Math.abs(y - insidePoint.y);
-//   const h = node.height / 2;
-//   const q = h - dy;
-
-//   const Q = Math.abs(outsidePoint.y - insidePoint.y);
-//   const R = Math.abs(outsidePoint.x - insidePoint.x);
-//   r = (R * q) / Q;
-
-//   return { x: insidePoint.x + r, y: insidePoint.y + q };
-// };
 const intersection = (node, outsidePoint, insidePoint) => {
-  // logger.info('intersection', outsidePoint, insidePoint, node);
+  logger.trace('intersection o:', outsidePoint, ' i:', insidePoint, node);
   const x = node.x;
   const y = node.y;
 
   const dx = Math.abs(x - insidePoint.x);
   const w = node.width / 2;
-  let r = w - dx;
+  let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
   const dy = Math.abs(y - insidePoint.y);
   const h = node.height / 2;
-  let q = h - dy;
+  let q = insidePoint.y < outsidePoint.y ? h - dy : h - dy;
 
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
@@ -105,20 +88,20 @@ const intersection = (node, outsidePoint, insidePoint) => {
     };
   } else {
     q = (Q * r) / R;
+    r = (R * q) / Q;
 
     return {
-      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - r,
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x + dx - w,
       y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q
     };
   }
 };
 
 export const insertEdge = function(elem, edge, clusterDb, diagramType) {
-  logger.info('\n\n\n\n');
   let points = edge.points;
   if (edge.toCluster) {
-    // logger.info('edge', edge);
-    // logger.info('to cluster', clusterDb[edge.toCluster]);
+    logger.trace('edge', edge);
+    logger.trace('to cluster', clusterDb[edge.toCluster]);
     points = [];
     let lastPointOutside;
     let isInside = false;
@@ -126,13 +109,12 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
       const node = clusterDb[edge.toCluster].node;
 
       if (!outsideNode(node, point) && !isInside) {
-        // logger.info('inside', edge.toCluster, point);
+        logger.trace('inside', edge.toCluster, point, lastPointOutside);
 
         // First point inside the rect
         const insterection = intersection(node, lastPointOutside, point);
-        // logger.info('intersect', inter.rect(node, lastPointOutside));
+        logger.trace('intersect', insterection);
         points.push(insterection);
-        // points.push(insterection);
         isInside = true;
       } else {
         if (!isInside) points.push(point);
@@ -142,8 +124,8 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
   }
 
   if (edge.fromCluster) {
-    // logger.info('edge', edge);
-    // logger.info('from cluster', clusterDb[edge.toCluster]);
+    logger.trace('edge', edge);
+    logger.trace('from cluster', clusterDb[edge.toCluster]);
     const updatedPoints = [];
     let lastPointOutside;
     let isInside = false;
@@ -152,17 +134,17 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
       const node = clusterDb[edge.fromCluster].node;
 
       if (!outsideNode(node, point) && !isInside) {
-        // logger.info('inside', edge.toCluster, point);
+        logger.trace('inside', edge.toCluster, point);
 
         // First point inside the rect
         const insterection = intersection(node, lastPointOutside, point);
-        // logger.info('intersect', intersection(node, lastPointOutside, point));
+        // logger.trace('intersect', intersection(node, lastPointOutside, point));
         updatedPoints.unshift(insterection);
         // points.push(insterection);
         isInside = true;
       } else {
         // at the outside
-        // logger.info('Outside point', point);
+        logger.trace('Outside point', point);
         if (!isInside) updatedPoints.unshift(point);
       }
       lastPointOutside = point;
@@ -170,10 +152,6 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
     points = updatedPoints;
   }
 
-  // logger.info('Poibts', points);
-
-  // logger.info('Edge', edge);
-
   // The data for our line
   const lineData = points.filter(p => !Number.isNaN(p.y));
 
@@ -216,7 +194,7 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
     url = url.replace(/\(/g, '\\(');
     url = url.replace(/\)/g, '\\)');
   }
-  // logger.info('arrowType', edge.arrowType);
+  logger.info('arrowType', edge.arrowType);
   switch (edge.arrowType) {
     case 'arrow_cross':
       svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index 8f5a5c7312..dca32ddc82 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -1,45 +1,66 @@
 import dagre from 'dagre';
+import graphlib from 'graphlib';
 import insertMarkers from './markers';
-import { insertNode, positionNode, clear as clearNodes } from './nodes';
+import { updateNodeBounds } from './shapes/util';
+import {
+  clear as clearGraphlib,
+  clusterDb,
+  adjustClustersAndEdges,
+  findNonClusterChild
+} from './mermaid-graphlib';
+import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
 import { insertCluster, clear as clearClusters } from './clusters';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
-import { logger } from '../logger';
-
-let clusterDb = {};
-
-const translateClusterId = id => {
-  if (clusterDb[id]) return clusterDb[id].id;
-  return id;
-};
-
-export const render = (elem, graph, markers, diagramtype, id) => {
-  insertMarkers(elem, markers, diagramtype, id);
-  clusterDb = {};
-  clearNodes();
-  clearEdges();
-  clearClusters();
+import { logger as log } from '../logger';
 
+const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
+  log.trace('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
+  const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
+  if (!graph.nodes()) {
+    log.trace('No nodes found for', graph);
+  } else {
+    log.trace('Recursive render', graph.nodes());
+  }
+  if (graph.edges().length > 0) {
+    log.trace('Recursive edges', graph.edge(graph.edges()[0]));
+  }
   const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
   const edgePaths = elem.insert('g').attr('class', 'edgePaths');
   const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
   const nodes = elem.insert('g').attr('class', 'nodes');
 
-  logger.warn('graph', graph);
-
   // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
   // to the abstract node and is later used by dagre for the layout
   graph.nodes().forEach(function(v) {
     const node = graph.node(v);
-    logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
-    if (node.type !== 'group') {
-      insertNode(nodes, graph.node(v));
+    if (typeof parentCluster !== 'undefined') {
+      const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
+      // data.clusterPositioning = true;
+      log.trace('Setting data for cluster', data);
+      graph.setNode(parentCluster.id, data);
+      graph.setParent(v, parentCluster.id, data);
+    }
+    log.trace('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
+    if (node.clusterNode) {
+      // const children = graph.children(v);
+      log.trace('Cluster identified', v, node, graph.node(v));
+      const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
+      updateNodeBounds(node, newEl);
+      setNodeElem(newEl, node);
+
+      log.warn('Recursive render complete', newEl, node);
     } else {
-      // const width = getClusterTitleWidth(clusters, node);
-      const children = graph.children(v);
-      logger.info('Cluster identified', node.id, children[0]);
-      // nodes2expand.push({ id: children[0], width });
-      clusterDb[node.id] = { id: children[0] };
-      logger.info('Clusters ', clusterDb);
+      if (graph.children(v).length > 0) {
+        // This is a cluster but not to be rendered recusively
+        // Render as before
+        log.trace('Cluster - the non recursive path', v, node.id, node, graph);
+        log.trace(findNonClusterChild(node.id, graph));
+        clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
+        // insertCluster(clusters, graph.node(v));
+      } else {
+        log.trace('Node - the non recursive path', v, node.id, node);
+        insertNode(nodes, graph.node(v));
+      }
     }
   });
 
@@ -48,49 +69,77 @@ export const render = (elem, graph, markers, diagramtype, id) => {
   // Edges from/to clusters really points to the first child in the cluster.
   // TODO: pick optimal child in the cluster to us as link anchor
   graph.edges().forEach(function(e) {
-    const edge = graph.edge(e);
-    logger.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
-    // logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
-    const v = translateClusterId(e.v);
-    const w = translateClusterId(e.w);
-    if (v !== e.v || w !== e.w) {
-      graph.removeEdge(e.v, e.w, e.name);
-      if (v !== e.v) edge.fromCluster = e.v;
-      if (w !== e.w) edge.toCluster = e.w;
-      graph.setEdge(v, w, edge, e.name);
-    }
+    const edge = graph.edge(e.v, e.w, e.name);
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
+
+    // Check if link is either from or to a cluster
+    log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
     insertEdgeLabel(edgeLabels, edge);
   });
 
   graph.edges().forEach(function(e) {
-    logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
   });
-  logger.info('#############################################');
-  logger.info('###                Layout                 ###');
-  logger.info('#############################################');
-  logger.info(graph);
+  log.trace('#############################################');
+  log.trace('###                Layout                 ###');
+  log.trace('#############################################');
+  log.trace(graph);
   dagre.layout(graph);
-
+  log.warn('Graph after layout:', graphlib.json.write(graph));
   // Move the nodes to the correct place
   graph.nodes().forEach(function(v) {
     const node = graph.node(v);
-    logger.info('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
-    if (node.type !== 'group') {
+    // log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
+    log.trace(
+      'Position ' + v + ': (' + node.x,
+      ',' + node.y,
+      ') width: ',
+      node.width,
+      ' height: ',
+      node.height
+    );
+    if (node && node.clusterNode) {
+      // clusterDb[node.id].node = node;
+
       positionNode(node);
     } else {
-      insertCluster(clusters, node);
-      clusterDb[node.id].node = node;
+      // Non cluster node
+      if (graph.children(v).length > 0) {
+        // A cluster in the non-recurive way
+        // positionCluster(node);
+        insertCluster(clusters, node);
+        clusterDb[node.id].node = node;
+      } else {
+        positionNode(node);
+      }
     }
   });
 
   // Move the edge labels to the correct place after layout
   graph.edges().forEach(function(e) {
     const edge = graph.edge(e);
-    logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
     insertEdge(edgePaths, edge, clusterDb, diagramtype);
     positionEdgeLabel(edge);
   });
+
+  return elem;
+};
+
+export const render = (elem, graph, markers, diagramtype, id) => {
+  insertMarkers(elem, markers, diagramtype, id);
+  clearNodes();
+  clearEdges();
+  clearClusters();
+  clearGraphlib();
+
+  log.warn('Graph before:', graphlib.json.write(graph));
+  adjustClustersAndEdges(graph);
+  log.warn('Graph after:', graphlib.json.write(graph));
+
+  recursiveRender(elem, graph, diagramtype);
 };
 
 // const shapeDefinitions = {};
diff --git a/src/dagre-wrapper/markers.js b/src/dagre-wrapper/markers.js
index 45884e0e8f..70c653fdb0 100644
--- a/src/dagre-wrapper/markers.js
+++ b/src/dagre-wrapper/markers.js
@@ -16,7 +16,7 @@ const extension = (elem, type, id) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'extensionStart')
+    .attr('id', type + '-extensionStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'extensionEnd ' + type)
+    .attr('id', type + '-extensionEnd ' + type)
     .attr('class', 'extension ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -44,7 +44,7 @@ const composition = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'compositionStart')
+    .attr('id', type + '-compositionStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -57,7 +57,7 @@ const composition = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'compositionEnd')
+    .attr('id', type + '-compositionEnd')
     .attr('class', 'extension ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -71,7 +71,7 @@ const aggregation = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'aggregationStart')
+    .attr('id', type + '-aggregationStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -84,7 +84,7 @@ const aggregation = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'aggregationEnd')
+    .attr('id', type + '-aggregationEnd')
     .attr('class', type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -98,7 +98,7 @@ const dependency = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'dependencyStart')
+    .attr('id', type + '-dependencyStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -111,7 +111,7 @@ const dependency = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'dependencyEnd')
+    .attr('id', type + '-dependencyEnd')
     .attr('class', type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -158,7 +158,7 @@ const point = (elem, type) => {
 const circle = (elem, type) => {
   elem
     .append('marker')
-    .attr('id', 'circleEnd')
+    .attr('id', type + '-circleEnd')
     .attr('class', type)
     .attr('viewBox', '0 0 10 10')
     .attr('refX', 11)
@@ -177,7 +177,7 @@ const circle = (elem, type) => {
 
   elem
     .append('marker')
-    .attr('id', 'circleStart')
+    .attr('id', type + '-circleStart')
     .attr('class', type)
     .attr('viewBox', '0 0 10 10')
     .attr('refX', -1)
@@ -197,7 +197,7 @@ const circle = (elem, type) => {
 const cross = (elem, type) => {
   elem
     .append('marker')
-    .attr('id', 'crossEnd')
+    .attr('id', type + '-crossEnd')
     .attr('class', type)
     .attr('viewBox', '0 0 11 11')
     .attr('refX', 12)
@@ -215,7 +215,7 @@ const cross = (elem, type) => {
 
   elem
     .append('marker')
-    .attr('id', 'crossStart')
+    .attr('id', type + '-crossStart')
     .attr('class', type)
     .attr('viewBox', '0 0 11 11')
     .attr('refX', -1)
diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js
new file mode 100644
index 0000000000..9b8e61fdda
--- /dev/null
+++ b/src/dagre-wrapper/mermaid-graphlib.js
@@ -0,0 +1,372 @@
+/**
+ * Decorates with functions required by mermaids dagre-wrapper.
+ */
+import { logger as log } from '../logger';
+import graphlib from 'graphlib';
+
+export let clusterDb = {};
+let decendants = {};
+let parents = {};
+
+export const clear = () => {
+  decendants = {};
+  parents = {};
+  clusterDb = {};
+};
+
+const isDecendant = (id, ancenstorId) => {
+  // if (id === ancenstorId) return true;
+
+  log.debug(
+    'In isDecendant',
+    ancenstorId,
+    ' ',
+    id,
+    ' = ',
+    decendants[ancenstorId].indexOf(id) >= 0
+  );
+  if (decendants[ancenstorId].indexOf(id) >= 0) return true;
+
+  return false;
+};
+
+const edgeInCluster = (edge, clusterId) => {
+  // Edges to/from the cluster is not in the cluster, they are in the parent
+  if (!(edge.v === clusterId || edge.w === clusterId)) return false;
+
+  if (!decendants[clusterId]) {
+    log.debug('Tilt, ', clusterId, ',not in decendants');
+    return false;
+  }
+
+  if (decendants[clusterId].indexOf(edge.v) >= 0) return true;
+  if (isDecendant(edge.v, clusterId)) return true;
+  if (isDecendant(edge.w, clusterId)) return true;
+  if (decendants[clusterId].indexOf(edge.w) >= 0) return true;
+
+  return false;
+};
+
+const copy = (clusterId, graph, newGraph, rootId) => {
+  log.trace(
+    'Copying children of ',
+    clusterId,
+    rootId,
+    ' from ',
+    clusterId,
+    graph.node(clusterId),
+    rootId
+  );
+  const nodes = graph.children(clusterId) || [];
+
+  // Include cluster node if it is not the root
+  if (clusterId !== rootId) {
+    nodes.push(clusterId);
+  }
+
+  log.debug('Copying (nodes)', nodes);
+
+  nodes.forEach(node => {
+    if (graph.children(node).length > 0) {
+      copy(node, graph, newGraph, rootId);
+    } else {
+      const data = graph.node(node);
+      log.trace('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
+      newGraph.setNode(node, data);
+      if (clusterId !== rootId && node !== clusterId) {
+        log.debug('Setting parent', node, clusterId);
+        newGraph.setParent(node, clusterId);
+      }
+      const edges = graph.edges(node);
+      log.debug('Copying Edges', edges);
+      edges.forEach(edge => {
+        log.trace('Edge', edge);
+        const data = graph.edge(edge.v, edge.w, edge.name);
+        log.trace('Edge data', data, rootId);
+        try {
+          // Do not copy edges in and out of the root cluster, they belong to the parent graph
+          if (edgeInCluster(edge, rootId)) {
+            log.trace('Copying as ', edge.v, edge.w, data, edge.name);
+            newGraph.setEdge(edge.v, edge.w, data, edge.name);
+            log.trace('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));
+          } else {
+            log.trace('Skipping copy of edge as ', rootId, edge.v, edge.w, clusterId);
+          }
+        } catch (e) {
+          log.error(e);
+        }
+      });
+    }
+    log.debug('Removing node', node);
+    graph.removeNode(node);
+  });
+};
+export const extractDecendants = (id, graph) => {
+  // log.debug('Extracting ', id);
+  const children = graph.children(id);
+  let res = [].concat(children);
+
+  for (let i = 0; i < children.length; i++) {
+    parents[children[i]] = id;
+    res = res.concat(extractDecendants(children[i], graph));
+  }
+
+  return res;
+};
+
+/**
+ * Validates the graph, checking that all parent child relation points to existing nodes and that
+ * edges between nodes also ia correct. When not correct the function logs the discrepancies.
+ * @param {graphlib graph} g
+ */
+export const validate = graph => {
+  const edges = graph.edges();
+  log.trace('Edges: ', edges);
+  for (let i = 0; i < edges.length; i++) {
+    if (graph.children(edges[i].v).length > 0) {
+      log.trace('The node ', edges[i].v, ' is part of and edge even though it has children');
+      return false;
+    }
+    if (graph.children(edges[i].w).length > 0) {
+      log.trace('The node ', edges[i].w, ' is part of and edge even though it has children');
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Finds a child that is not a cluster. When faking a edge between a node and a cluster.
+ * @param {Finds a } id
+ * @param {*} graph
+ */
+export const findNonClusterChild = (id, graph) => {
+  // const node = graph.node(id);
+  log.trace('Searching', id);
+  const children = graph.children(id);
+  if (children.length < 1) {
+    log.trace('This is a valid node', id);
+    return id;
+  }
+  for (let i = 0; i < children.length; i++) {
+    const _id = findNonClusterChild(children[i], graph);
+    if (_id) {
+      log.trace('Found replacement for', id, ' => ', _id);
+      return _id;
+    }
+  }
+};
+
+const getAnchorId = id => {
+  if (!clusterDb[id]) {
+    return id;
+  }
+  // If the cluster has no external connections
+  if (!clusterDb[id].externalConnections) {
+    return id;
+  }
+
+  // Return the replacement node
+  if (clusterDb[id]) {
+    return clusterDb[id].id;
+  }
+  return id;
+};
+
+export const adjustClustersAndEdges = (graph, depth) => {
+  if (!graph || depth > 10) {
+    log.debug('Opting out, no graph ');
+    return;
+  } else {
+    log.debug('Opting in, graph ');
+  }
+  // Go through the nodes and for each cluster found, save a replacment node, this can be used when
+  // faking a link to a cluster
+  graph.nodes().forEach(function(id) {
+    const children = graph.children(id);
+    if (children.length > 0) {
+      log.trace(
+        'Cluster identified',
+        id,
+        ' Replacement id in edges: ',
+        findNonClusterChild(id, graph)
+      );
+      decendants[id] = extractDecendants(id, graph);
+      clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
+    }
+  });
+
+  // Check incoming and outgoing edges for each cluster
+  graph.nodes().forEach(function(id) {
+    const children = graph.children(id);
+    const edges = graph.edges();
+    if (children.length > 0) {
+      log.debug('Cluster identified', id, decendants);
+      edges.forEach(edge => {
+        // log.debug('Edge, decendants: ', edge, decendants[id]);
+
+        // Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)
+        if (edge.v !== id && edge.w !== id) {
+          // Any edge where either the one of the nodes is decending to the cluster but not the other
+          // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {
+
+          const d1 = isDecendant(edge.v, id);
+          const d2 = isDecendant(edge.w, id);
+
+          // d1 xor d2 - if either d1 is true and d2 is false or the other way around
+          if (d1 ^ d2) {
+            log.debug('Edge: ', edge, ' leaves cluster ', id);
+            log.debug('Decendants of ', id, ': ', decendants[id]);
+            clusterDb[id].externalConnections = true;
+          }
+        }
+      });
+    }
+  });
+
+  extractor(graph, 0);
+
+  // For clusters with incoming and/or outgoing edges translate those edges to a real node
+  // in the cluster inorder to fake the edge
+  graph.edges().forEach(function(e) {
+    const edge = graph.edge(e);
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
+
+    let v = e.v;
+    let w = e.w;
+    // Check if link is either from or to a cluster
+    log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
+    if (clusterDb[e.v] || clusterDb[e.w]) {
+      log.trace('Fixing and trixing - removing', e.v, e.w, e.name);
+      v = getAnchorId(e.v);
+      w = getAnchorId(e.w);
+      graph.removeEdge(e.v, e.w, e.name);
+      if (v !== e.v) edge.fromCluster = e.v;
+      if (w !== e.w) edge.toCluster = e.w;
+      log.trace('Replacing with', v, w, e.name);
+      graph.setEdge(v, w, edge, e.name);
+    }
+  });
+  log.debug('Adjusted Graph', graphlib.json.write(graph));
+
+  log.trace(clusterDb);
+
+  // Remove references to extracted cluster
+  // graph.edges().forEach(edge => {
+  //   if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {
+  //     graph.removeEdge(edge);
+  //   }
+  // });
+};
+
+export const extractor = (graph, depth) => {
+  log.debug('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
+  if (depth > 10) {
+    log.error('Bailing out');
+    return;
+  }
+  // For clusters without incoming and/or outgoing edges, create a new cluster-node
+  // containing the nodes and edges in the custer in a new graph
+  // for (let i = 0;)
+  let nodes = graph.nodes();
+  let hasChildren = false;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const children = graph.children(node);
+    hasChildren = hasChildren || children.length > 0;
+  }
+
+  if (!hasChildren) {
+    log.debug('Done, no node has children', graph.nodes());
+    return;
+  }
+  // const clusters = Object.keys(clusterDb);
+  // clusters.forEach(clusterId => {
+  log.debug('Nodes = ', nodes, depth);
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+
+    log.debug(
+      'Extracting node',
+      node,
+      clusterDb,
+      clusterDb[node] && !clusterDb[node].externalConnections,
+      !graph.parent(node),
+      graph.node(node),
+      graph.children('D'),
+      ' Depth ',
+      depth
+    );
+    // Note that the node might have been removed after the Object.keys call so better check
+    // that it still is in the game
+    if (!clusterDb[node]) {
+      // Skip if the node is not a cluster
+      log.debug('Not a cluster', node, depth);
+      // break;
+    } else if (
+      !clusterDb[node].externalConnections &&
+      !graph.parent(node) &&
+      graph.children(node) &&
+      graph.children(node).length > 0
+    ) {
+      log.debug(
+        'Cluster without external connections, without a parent and with children',
+        node,
+        depth
+      );
+
+      const clusterGraph = new graphlib.Graph({
+        multigraph: true,
+        compound: true
+      })
+        .setGraph({
+          rankdir: 'TB',
+          // Todo: set proper spacing
+          nodesep: 50,
+          ranksep: 50,
+          marginx: 8,
+          marginy: 8
+        })
+        .setDefaultEdgeLabel(function() {
+          return {};
+        });
+
+      copy(node, graph, clusterGraph, node);
+      graph.setNode(node, {
+        clusterNode: true,
+        id: node,
+        clusterData: clusterDb[node].clusterData,
+        labelText: clusterDb[node].labelText,
+        graph: clusterGraph
+      });
+      log.debug('New graph after copy', graphlib.json.write(clusterGraph));
+      log.debug('Old graph after copy', graphlib.json.write(graph));
+    } else {
+      log.debug(
+        'Cluster ** ',
+        node,
+        ' **not meeting the criteria !externalConnections:',
+        !clusterDb[node].externalConnections,
+        ' no parent: ',
+        !graph.parent(node),
+        ' children ',
+        graph.children(node) && graph.children(node).length > 0,
+        graph.children('D'),
+        depth
+      );
+      log.debug(clusterDb);
+    }
+  }
+
+  nodes = graph.nodes();
+  log.debug('New list of nodes', nodes);
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const data = graph.node(node);
+    log.debug(' Now next leveö', node, data);
+    if (data.clusterNode) {
+      extractor(data.graph, depth + 1);
+    }
+  }
+};
diff --git a/src/dagre-wrapper/mermaid-graphlib.spec.js b/src/dagre-wrapper/mermaid-graphlib.spec.js
new file mode 100644
index 0000000000..33fea60deb
--- /dev/null
+++ b/src/dagre-wrapper/mermaid-graphlib.spec.js
@@ -0,0 +1,370 @@
+import graphlib from 'graphlib';
+import dagre from 'dagre';
+import { validate, adjustClustersAndEdges, extractDecendants } from './mermaid-graphlib';
+import { setLogLevel, logger } from '../logger';
+
+describe('Graphlib decorations', () => {
+  let g;
+  beforeEach(function () {
+    setLogLevel(1);
+    g = new graphlib.Graph({
+      multigraph: true,
+      compound: true
+    });
+    g.setGraph({
+      rankdir: 'TB',
+      nodesep: 10,
+      ranksep: 10,
+      marginx: 8,
+      marginy: 8
+    });
+    g.setDefaultEdgeLabel(function () {
+        return {};
+    });
+  });
+
+  describe('validate', function () {
+    it('Validate should detect edges between clusters', function () {
+      /*
+        subgraph C1
+          a --> b
+        end
+        subgraph C2
+          c
+        end
+        C1 --> C2
+      */
+      g.setNode('a', { data:1});
+      g.setNode('b', { data: 2 });
+      g.setNode('c', { data: 3 });
+      g.setParent('a', 'C1');
+      g.setParent('b', 'C1');
+      g.setParent('c', 'C2');
+      g.setEdge('a', 'b');
+      g.setEdge('C1', 'C2');
+
+      console.log(g.nodes())
+
+      expect(validate(g)).toBe(false);
+    });
+    it('Validate should not detect edges between clusters after adjustment', function () {
+      /*
+        subgraph C1
+          a --> b
+        end
+        subgraph C2
+          c
+        end
+        C1 --> C2
+      */
+      g.setNode('a', {});
+      g.setNode('b', {});
+      g.setNode('c', {});
+      g.setParent('a', 'C1');
+      g.setParent('b', 'C1');
+      g.setParent('c', 'C2');
+      g.setEdge('a', 'b');
+      g.setEdge('C1', 'C2');
+
+      console.log(g.nodes())
+      adjustClustersAndEdges(g);
+      logger.info(g.edges())
+      expect(validate(g)).toBe(true);
+    });
+
+    it('Validate should detect edges between clusters and transform clusters GLB4', function () {
+      /*
+        a --> b
+        subgraph C1
+          subgraph C2
+            a
+          end
+          b
+        end
+        C1 --> c
+      */
+      g.setNode('a', { data: 1 });
+      g.setNode('b', { data: 2 });
+      g.setNode('c', { data: 3 });
+      g.setNode('C1', { data: 4 });
+      g.setNode('C2', { data: 5 });
+      g.setParent('a', 'C2');
+      g.setParent('b', 'C1');
+      g.setParent('C2', 'C1');
+      g.setEdge('a', 'b', { name: 'C1-internal-link' });
+      g.setEdge('C1', 'c', { name: 'C1-external-link' });
+
+      adjustClustersAndEdges(g);
+      logger.info(g.nodes())
+      expect(g.nodes().length).toBe(2);
+      expect(validate(g)).toBe(true);
+    });
+    it('Validate should detect edges between clusters and transform clusters GLB5', function () {
+      /*
+        a --> b
+        subgraph C1
+          a
+        end
+        subgraph C2
+          b
+        end
+        C1 -->
+      */
+      g.setNode('a', { data: 1 });
+      g.setNode('b', { data: 2 });
+      g.setParent('a', 'C1');
+      g.setParent('b', 'C2');
+      // g.setEdge('a', 'b', { name: 'C1-internal-link' });
+      g.setEdge('C1', 'C2', { name: 'C1-external-link' });
+
+      logger.info(g.nodes())
+      adjustClustersAndEdges(g);
+      logger.info(g.nodes())
+      expect(g.nodes().length).toBe(2);
+      expect(validate(g)).toBe(true);
+    });
+  it('adjustClustersAndEdges GLB6', function () {
+    /*
+      subgraph C1
+        a
+      end
+      C1 --> b
+    */
+    g.setNode('a', { data: 1 });
+    g.setNode('b', { data: 2 });
+    g.setNode('C1', { data: 3 });
+    g.setParent('a', 'C1');
+    g.setEdge('C1', 'b', { data: 'link1' }, '1');
+
+    // logger.info(g.edges())
+    adjustClustersAndEdges(g);
+    logger.info(g.edges())
+    expect(g.nodes()).toEqual(['b', 'C1']);
+    expect(g.edges().length).toBe(1);
+    expect(validate(g)).toBe(true);
+    expect(g.node('C1').clusterNode).toBe(true);
+
+    const C1Graph = g.node('C1').graph;
+    expect(C1Graph.nodes()).toEqual(['a']);
+  });
+  it('adjustClustersAndEdges GLB7', function () {
+    /*
+      subgraph C1
+        a
+      end
+      C1 --> b
+      C1 --> c
+    */
+    g.setNode('a', { data: 1 });
+    g.setNode('b', { data: 2 });
+    g.setNode('c', { data: 3 });
+    g.setParent('a', 'C1');
+    g.setNode('C1', { data: 4 });
+    g.setEdge('C1', 'b', { data: 'link1' }, '1');
+    g.setEdge('C1', 'c', { data: 'link2' }, '2');
+
+    logger.info(g.node('C1'))
+    adjustClustersAndEdges(g);
+    logger.info(g.edges())
+    expect(g.nodes()).toEqual(['b', 'c', 'C1']);
+    expect(g.nodes().length).toBe(3);
+    expect(g.edges().length).toBe(2);
+
+    expect(g.edges().length).toBe(2);
+    const edgeData = g.edge(g.edges()[1]);
+    expect(edgeData.data).toBe('link2');
+    expect(validate(g)).toBe(true);
+
+    const C1Graph = g.node('C1').graph;
+    expect(C1Graph.nodes()).toEqual(['a']);
+  });
+  it('adjustClustersAndEdges GLB8', function () {
+    /*
+    subgraph A
+      a
+    end
+    subgraph B
+      b
+    end
+    subgraph C
+      c
+    end
+    A --> B
+    A --> C
+    */
+    g.setNode('a', { data: 1 });
+    g.setNode('b', { data: 2 });
+    g.setNode('c', { data: 3 });
+    g.setParent('a', 'A');
+    g.setParent('b', 'B');
+    g.setParent('c', 'C');
+    g.setEdge('A', 'B', { data: 'link1' }, '1');
+    g.setEdge('A', 'C', { data: 'link2' }, '2');
+
+    // logger.info(g.edges())
+    adjustClustersAndEdges(g);
+    expect(g.nodes()).toEqual(['A', 'B', 'C']);
+    expect(g.edges().length).toBe(2);
+
+    expect(g.edges().length).toBe(2);
+    const edgeData = g.edge(g.edges()[1]);
+    expect(edgeData.data).toBe('link2');
+    expect(validate(g)).toBe(true);
+
+    const CGraph = g.node('C').graph;
+    expect(CGraph.nodes()).toEqual(['c']);
+
+  });
+
+  it('adjustClustersAndEdges the extracted graphs shall contain the correct data GLB10', function () {
+    /*
+    subgraph C
+      subgraph D
+        d
+      end
+    end
+    */
+
+    g.setNode('C', { data: 1 });
+    g.setNode('D', { data: 2 });
+    g.setNode('d', { data: 3 });
+    g.setParent('d', 'D');
+    g.setParent('D', 'C');
+
+    // logger.info('Graph before', g.node('D'))
+    // logger.info('Graph before', graphlib.json.write(g))
+    adjustClustersAndEdges(g);
+    // logger.info('Graph after', graphlib.json.write(g), g.node('C').graph)
+
+    const CGraph = g.node('C').graph;
+    const DGraph = CGraph.node('D').graph;
+
+    expect(CGraph.nodes()).toEqual(['D']);
+    expect(DGraph.nodes()).toEqual(['d']);
+
+    expect(g.nodes()).toEqual(['C']);
+    expect(g.nodes().length).toBe(1);
+  });
+
+  it('adjustClustersAndEdges the extracted graphs shall contain the correct data GLB11', function () {
+    /*
+    subgraph A
+      a
+    end
+    subgraph B
+      b
+    end
+    subgraph C
+      subgraph D
+        d
+      end
+    end
+    A --> B
+    A --> C
+    */
+
+    g.setNode('C', { data: 1 });
+    g.setNode('D', { data: 2 });
+    g.setNode('d', { data: 3 });
+    g.setNode('B', { data: 4 });
+    g.setNode('b', { data: 5 });
+    g.setNode('A', { data: 6 });
+    g.setNode('a', { data: 7 });
+    g.setParent('a', 'A');
+    g.setParent('b', 'B');
+    g.setParent('d', 'D');
+    g.setParent('D', 'C');
+    g.setEdge('A', 'B', { data: 'link1' }, '1');
+    g.setEdge('A', 'C', { data: 'link2' }, '2');
+
+    logger.info('Graph before', g.node('D'))
+    logger.info('Graph before', graphlib.json.write(g))
+    adjustClustersAndEdges(g);
+    logger.trace('Graph after', graphlib.json.write(g))
+    expect(g.nodes()).toEqual(['C', 'B', 'A']);
+    expect(g.nodes().length).toBe(3);
+    expect(g.edges().length).toBe(2);
+
+    const AGraph = g.node('A').graph;
+    const BGraph = g.node('B').graph;
+    const CGraph = g.node('C').graph;
+    // logger.info(CGraph.nodes());
+    const DGraph = CGraph.node('D').graph;
+    // logger.info('DG', CGraph.children('D'));
+
+    logger.info('A', AGraph.nodes());
+    expect(AGraph.nodes().length).toBe(1);
+    expect(AGraph.nodes()).toEqual(['a']);
+    logger.trace('Nodes', BGraph.nodes())
+    expect(BGraph.nodes().length).toBe(1);
+    expect(BGraph.nodes()).toEqual(['b']);
+    expect(CGraph.nodes()).toEqual(['D']);
+    expect(CGraph.nodes().length).toEqual(1);
+
+    expect(AGraph.edges().length).toBe(0);
+    expect(BGraph.edges().length).toBe(0);
+    expect(CGraph.edges().length).toBe(0);
+    expect(DGraph.nodes()).toEqual(['d']);
+    expect(DGraph.edges().length).toBe(0);
+    // expect(CGraph.node('D')).toEqual({ data: 2 });
+    expect(g.edges().length).toBe(2);
+
+    // expect(g.edges().length).toBe(2);
+    // const edgeData = g.edge(g.edges()[1]);
+    // expect(edgeData.data).toBe('link2');
+    // expect(validate(g)).toBe(true);
+  });
+});
+});
+describe('extractDecendants', function () {
+  let g;
+  beforeEach(function () {
+    setLogLevel(1);
+    g = new graphlib.Graph({
+      multigraph: true,
+      compound: true
+    });
+    g.setGraph({
+      rankdir: 'TB',
+      nodesep: 10,
+      ranksep: 10,
+      marginx: 8,
+      marginy: 8
+    });
+    g.setDefaultEdgeLabel(function () {
+      return {};
+    });
+  });
+  it('Simple case of one level decendants GLB9', function () {
+    /*
+    subgraph A
+      a
+    end
+    subgraph B
+      b
+    end
+    subgraph C
+      c
+    end
+    A --> B
+    A --> C
+    */
+    g.setNode('a', { data: 1 });
+    g.setNode('b', { data: 2 });
+    g.setNode('c', { data: 3 });
+    g.setParent('a', 'A');
+    g.setParent('b', 'B');
+    g.setParent('c', 'C');
+    g.setEdge('A', 'B', { data: 'link1' }, '1');
+    g.setEdge('A', 'C', { data: 'link2' }, '2');
+
+    // logger.info(g.edges())
+    const d1 = extractDecendants('A',g)
+    const d2 = extractDecendants('B',g)
+    const d3 = extractDecendants('C',g)
+
+    expect(d1).toEqual(['a']);
+    expect(d2).toEqual(['b']);
+    expect(d3).toEqual(['c']);
+  });
+});
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index f1db09a43f..08a0e36db7 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -248,7 +248,7 @@ const cylinder = (parent, node) => {
 const rect = (parent, node) => {
   const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
 
-  logger.info('Classes = ', node.classes);
+  logger.trace('Classes = ', node.classes);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
@@ -387,11 +387,31 @@ let nodeElems = {};
 export const insertNode = (elem, node) => {
   nodeElems[node.id] = shapes[node.shape](elem, node);
 };
+export const setNodeElem = (elem, node) => {
+  nodeElems[node.id] = elem;
+};
 export const clear = () => {
   nodeElems = {};
 };
 
 export const positionNode = node => {
   const el = nodeElems[node.id];
-  el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
+  logger.trace(
+    'Transforming node',
+    node,
+    'translate(' + (node.x - node.width / 2 - 5) + ', ' + (node.y - node.height / 2 - 5) + ')'
+  );
+  const padding = 8;
+  if (node.clusterNode) {
+    el.attr(
+      'transform',
+      'translate(' +
+        (node.x - node.width / 2 - padding) +
+        ', ' +
+        (node.y - node.height / 2 - padding) +
+        ')'
+    );
+  } else {
+    el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
+  }
 };
diff --git a/src/diagrams/common/common.js b/src/diagrams/common/common.js
index cc91948fcb..975bd61766 100644
--- a/src/diagrams/common/common.js
+++ b/src/diagrams/common/common.js
@@ -25,8 +25,10 @@ export const sanitizeText = (text, config) => {
   return txt;
 };
 
+export const lineBreakRegex = /<br\s*\/?>/gi;
+
 const breakToPlaceholder = s => {
-  return s.replace(/<br\s*\/?>/gi, '#br#');
+  return s.replace(lineBreakRegex, '#br#');
 };
 
 const placeholderToBreak = s => {
@@ -35,5 +37,6 @@ const placeholderToBreak = s => {
 
 export default {
   getRows,
-  sanitizeText
+  sanitizeText,
+  lineBreakRegex
 };
diff --git a/src/diagrams/flowchart/flowChartShapes.js b/src/diagrams/flowchart/flowChartShapes.js
index 8bd4f0b7af..66a7b79d2e 100644
--- a/src/diagrams/flowchart/flowChartShapes.js
+++ b/src/diagrams/flowchart/flowChartShapes.js
@@ -154,6 +154,28 @@ function stadium(parent, bbox, node) {
   return shapeSvg;
 }
 
+function subroutine(parent, bbox, node) {
+  const w = bbox.width;
+  const h = bbox.height;
+  const points = [
+    { x: 0, y: 0 },
+    { x: w, y: 0 },
+    { x: w, y: -h },
+    { x: 0, y: -h },
+    { x: 0, y: 0 },
+    { x: -8, y: 0 },
+    { x: w + 8, y: 0 },
+    { x: w + 8, y: -h },
+    { x: -8, y: -h },
+    { x: -8, y: 0 }
+  ];
+  const shapeSvg = insertPolygonShape(parent, w, h, points);
+  node.intersect = function(point) {
+    return dagreD3.intersect.polygon(node, points, point);
+  };
+  return shapeSvg;
+}
+
 function cylinder(parent, bbox, node) {
   const w = bbox.width;
   const rx = w / 2;
@@ -221,6 +243,7 @@ export function addToRender(render) {
   render.shapes().question = question;
   render.shapes().hexagon = hexagon;
   render.shapes().stadium = stadium;
+  render.shapes().subroutine = subroutine;
   render.shapes().cylinder = cylinder;
 
   // Add custom shape for box with inverted arrow on left side
@@ -246,6 +269,7 @@ export function addToRenderV2(addShape) {
   addShape({ question });
   addShape({ hexagon });
   addShape({ stadium });
+  addShape({ subroutine });
   addShape({ cylinder });
 
   // Add custom shape for box with inverted arrow on left side
diff --git a/src/diagrams/flowchart/flowChartShapes.spec.js b/src/diagrams/flowchart/flowChartShapes.spec.js
index 61e876d4bd..d6446f66ed 100644
--- a/src/diagrams/flowchart/flowChartShapes.spec.js
+++ b/src/diagrams/flowchart/flowChartShapes.spec.js
@@ -65,7 +65,8 @@ describe('flowchart shapes', function() {
     ['lean_right', 4, useWidth, useHeight],
     ['lean_left', 4, useWidth, useHeight],
     ['trapezoid', 4, useWidth, useHeight],
-    ['inv_trapezoid', 4, useWidth, useHeight]
+    ['inv_trapezoid', 4, useWidth, useHeight],
+    ['subroutine', 10, useWidth, useHeight],
   ].forEach(function([shapeType, expectedPointCount, getW, getH]) {
     it(`should add a ${shapeType} shape that renders a properly translated polygon element`, function() {
       const mockRender = MockRender();
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index e8915fc089..e382e01747 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,6 +1,5 @@
 import graphlib from 'graphlib';
 import * as d3 from 'd3';
-import dagre from 'dagre';
 
 import flowDb from './flowDb';
 import flow from './parser/flow';
@@ -9,6 +8,7 @@ import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
+import common from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 
 const conf = {};
@@ -62,7 +62,7 @@ export const addVertices = function(vert, g, svgId) {
       const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
       svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
 
-      const rows = vertexText.split(/<br\s*\/?>/gi);
+      const rows = vertexText.split(common.lineBreakRegex);
 
       for (let j = 0; j < rows.length; j++) {
         const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -119,6 +119,9 @@ export const addVertices = function(vert, g, svgId) {
       case 'stadium':
         _shape = 'stadium';
         break;
+      case 'subroutine':
+        _shape = 'subroutine';
+        break;
       case 'cylinder':
         _shape = 'cylinder';
         break;
@@ -130,10 +133,8 @@ export const addVertices = function(vert, g, svgId) {
     }
     // Add the node
     g.setNode(vertex.id, {
-      labelType: 'svg',
       labelStyle: styles.labelStyle,
       shape: _shape,
-      label: vertexNode,
       labelText: vertexText,
       rx: radious,
       ry: radious,
@@ -146,10 +147,8 @@ export const addVertices = function(vert, g, svgId) {
     });
 
     logger.info('setNode', {
-      labelType: 'svg',
       labelStyle: styles.labelStyle,
       shape: _shape,
-      label: vertexNode,
       labelText: vertexText,
       rx: radious,
       ry: radious,
@@ -190,6 +189,8 @@ export const addEdges = function(edges, g) {
     } else {
       edgeData.arrowhead = 'normal';
     }
+
+    logger.info(edgeData, edge);
     edgeData.arrowType = edge.type;
 
     let style = '';
@@ -243,7 +244,7 @@ export const addEdges = function(edges, g) {
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {
         edgeData.labelType = 'text';
-        edgeData.label = edge.text.replace(/<br\s*\/?>/gi, '\n');
+        edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
         if (typeof edge.style === 'undefined') {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
@@ -318,8 +319,10 @@ export const draw = function(text, id) {
 
   let subG;
   const subGraphs = flowDb.getSubGraphs();
+  logger.info('Subgraphs - ', subGraphs);
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];
+    logger.info('Subgraph - ', subG);
     flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
   }
 
@@ -351,7 +354,7 @@ export const draw = function(text, id) {
   // Run the renderer. This is what draws the final graph.
   const element = d3.select('#' + id + ' g');
   render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
-  dagre.layout(g);
+  // dagre.layout(g);
 
   element.selectAll('g.node').attr('title', function() {
     return flowDb.getTooltip(this.id);
@@ -382,27 +385,27 @@ export const draw = function(text, id) {
   // Index nodes
   flowDb.indexNodes('subGraph' + i);
 
-  // reposition labels
-  for (i = 0; i < subGraphs.length; i++) {
-    subG = subGraphs[i];
-
-    if (subG.title !== 'undefined') {
-      const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
-      const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
-
-      const xPos = clusterRects[0].x.baseVal.value;
-      const yPos = clusterRects[0].y.baseVal.value;
-      const width = clusterRects[0].width.baseVal.value;
-      const cluster = d3.select(clusterEl[0]);
-      const te = cluster.select('.label');
-      te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
-      te.attr('id', id + 'Text');
-
-      for (let j = 0; j < subG.classes.length; j++) {
-        clusterEl[0].classList.add(subG.classes[j]);
-      }
-    }
-  }
+  // // reposition labels
+  // for (i = 0; i < subGraphs.length; i++) {
+  //   subG = subGraphs[i];
+
+  //   if (subG.title !== 'undefined') {
+  //     const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
+  //     const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
+
+  //     const xPos = clusterRects[0].x.baseVal.value;
+  //     const yPos = clusterRects[0].y.baseVal.value;
+  //     const width = clusterRects[0].width.baseVal.value;
+  //     const cluster = d3.select(clusterEl[0]);
+  //     const te = cluster.select('.label');
+  //     te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
+  //     te.attr('id', id + 'Text');
+
+  //     for (let j = 0; j < subG.classes.length; j++) {
+  //       clusterEl[0].classList.add(subG.classes[j]);
+  //     }
+  //   }
+  // }
 
   // Add label rects for non html labels
   if (!conf.htmlLabels) {
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index e572f9188d..bbb8af9440 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -8,6 +8,7 @@ import { getConfig } from '../../config';
 import dagreD3 from 'dagre-d3';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
+import common from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import flowChartShapes from './flowChartShapes';
 
@@ -62,7 +63,7 @@ export const addVertices = function(vert, g, svgId) {
       const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
       svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
 
-      const rows = vertexText.split(/<br\s*\/?>/gi);
+      const rows = vertexText.split(common.lineBreakRegex);
 
       for (let j = 0; j < rows.length; j++) {
         const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@@ -119,6 +120,9 @@ export const addVertices = function(vert, g, svgId) {
       case 'stadium':
         _shape = 'stadium';
         break;
+      case 'subroutine':
+        _shape = 'subroutine';
+        break;
       case 'cylinder':
         _shape = 'cylinder';
         break;
@@ -222,7 +226,7 @@ export const addEdges = function(edges, g) {
         edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
       } else {
         edgeData.labelType = 'text';
-        edgeData.label = edge.text.replace(/<br\s*\/?>/gi, '\n');
+        edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
         if (typeof edge.style === 'undefined') {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
@@ -380,10 +384,6 @@ export const draw = function(text, id) {
   const svgBounds = svg.node().getBBox();
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
-  logger.debug(
-    `new ViewBox 0 0 ${width} ${height}`,
-    `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
-  );
 
   if (conf.useMaxWidth) {
     svg.attr('width', '100%');
@@ -393,10 +393,10 @@ export const draw = function(text, id) {
     svg.attr('width', width);
   }
 
-  svg.attr('viewBox', `0 0 ${width} ${height}`);
-  svg
-    .select('g')
-    .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
+  // Ensure the viewBox includes the whole svgBounds area with extra space for padding
+  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
+  logger.debug(`viewBox ${vBox}`);
+  svg.attr('viewBox', vBox);
 
   // Index nodes
   flowDb.indexNodes('subGraph' + i);
diff --git a/src/diagrams/flowchart/flowRenderer.spec.js b/src/diagrams/flowchart/flowRenderer.spec.js
index 95419a5dfb..41ce5fe557 100644
--- a/src/diagrams/flowchart/flowRenderer.spec.js
+++ b/src/diagrams/flowchart/flowRenderer.spec.js
@@ -23,6 +23,7 @@ describe('the flowchart renderer', function() {
       ['circle', 'circle'],
       ['ellipse', 'ellipse'],
       ['stadium', 'stadium'],
+      ['subroutine', 'subroutine'],
       ['cylinder', 'cylinder'],
       ['group', 'rect']
     ].forEach(function([type, expectedShape, expectedRadios = 0]) {
diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
index 58e4664a66..6cd7c6af81 100644
--- a/src/diagrams/flowchart/parser/flow.jison
+++ b/src/diagrams/flowchart/parser/flow.jison
@@ -87,6 +87,8 @@
 "-)"                  return '-)';
 "(["                  return 'STADIUMSTART';
 "])"                  return 'STADIUMEND';
+"[["                  return 'SUBROUTINESTART';
+"]]"                  return 'SUBROUTINEEND';
 "[("                  return 'CYLINDERSTART';
 ")]"                  return 'CYLINDEREND';
 \-                    return 'MINUS';
@@ -316,6 +318,8 @@ vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'ellipse');}
     | idString STADIUMSTART text STADIUMEND
         {$$ = $1;yy.addVertex($1,$3,'stadium');}
+    | idString SUBROUTINESTART text SUBROUTINEEND
+        {$$ = $1;yy.addVertex($1,$3,'subroutine');}
     | idString CYLINDERSTART text CYLINDEREND
         {$$ = $1;yy.addVertex($1,$3,'cylinder');}
     | idString PS text PE
@@ -474,5 +478,5 @@ alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA |
 
 idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;
 
-graphCodeTokens: STADIUMSTART | STADIUMEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
+graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
 %%
diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index de86c916d4..702dc78b68 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -6,6 +6,7 @@ import { getConfig } from '../../config';
 const config = getConfig();
 let dateFormat = '';
 let axisFormat = '';
+let todayMarker = '';
 let excludes = [];
 let title = '';
 let sections = [];
@@ -27,6 +28,7 @@ export const clear = function() {
   rawTasks = [];
   dateFormat = '';
   axisFormat = '';
+  todayMarker = '';
   excludes = [];
   inclusiveEndDates = false;
 };
@@ -39,6 +41,14 @@ export const getAxisFormat = function() {
   return axisFormat;
 };
 
+export const setTodayMarker = function(txt) {
+  todayMarker = txt;
+};
+
+export const getTodayMarker = function() {
+  return todayMarker;
+};
+
 export const setDateFormat = function(txt) {
   dateFormat = txt;
 };
@@ -572,6 +582,8 @@ export default {
   endDatesAreInclusive,
   setAxisFormat,
   getAxisFormat,
+  setTodayMarker,
+  getTodayMarker,
   setTitle,
   getTitle,
   addSection,
diff --git a/src/diagrams/gantt/ganttDb.spec.js b/src/diagrams/gantt/ganttDb.spec.js
index 5471226854..67e150c15f 100644
--- a/src/diagrams/gantt/ganttDb.spec.js
+++ b/src/diagrams/gantt/ganttDb.spec.js
@@ -21,6 +21,7 @@ describe('when using the ganttDb', function() {
     beforeEach(function() {
       ganttDb.setDateFormat('YYYY-MM-DD');
       ganttDb.enableInclusiveEndDates();
+      ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
       ganttDb.addSection('weekends skip test');
       ganttDb.addTask('test1', 'id1,2019-02-01,1d');
@@ -34,6 +35,7 @@ describe('when using the ganttDb', function() {
       ${'getTitle'}             | ${''}
       ${'getDateFormat'}        | ${''}
       ${'getAxisFormat'}        | ${''}
+      ${'getTodayMarker'}       | ${''}
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
@@ -216,4 +218,13 @@ describe('when using the ganttDb', function() {
       expect(tasks[1].task).toEqual('test2');
     });
   });
+
+  it.each`
+    type       | expected
+    ${'hide'}  | ${'off'}
+    ${'style'} | ${'stoke:stroke-width:5px,stroke:#00f,opacity:0.5'}
+  `('should ${type} today marker', ({ expected }) => {
+    ganttDb.setTodayMarker(expected);
+    expect(ganttDb.getTodayMarker()).toEqual(expected);
+  });
 });
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 050b1cc7be..b12fd5b5ec 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -1,6 +1,7 @@
 import * as d3 from 'd3';
 
 import { parser } from './parser/gantt';
+import common from '../common/common';
 import ganttDb from './ganttDb';
 
 parser.yy = ganttDb;
@@ -358,7 +359,7 @@ export const draw = function(text, id) {
       .data(numOccurances)
       .enter()
       .append(function(d) {
-        const rows = d[0].split(/<br\s*\/?>/gi);
+        const rows = d[0].split(common.lineBreakRegex);
         const dy = -(rows.length - 1) / 2;
 
         const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
@@ -396,17 +397,25 @@ export const draw = function(text, id) {
   }
 
   function drawToday(theSidePad, theTopPad, w, h) {
-    const todayG = svg.append('g').attr('class', 'today');
+    const todayMarker = ganttDb.getTodayMarker();
+    if (todayMarker === 'off') {
+      return;
+    }
 
+    const todayG = svg.append('g').attr('class', 'today');
     const today = new Date();
+    const todayLine = todayG.append('line');
 
-    todayG
-      .append('line')
+    todayLine
       .attr('x1', timeScale(today) + theSidePad)
       .attr('x2', timeScale(today) + theSidePad)
       .attr('y1', conf.titleTopMargin)
       .attr('y2', h - conf.titleTopMargin)
       .attr('class', 'today');
+
+    if (todayMarker !== '') {
+      todayLine.attr('style', todayMarker.replace(/,/g, ';'));
+    }
   }
 
   // from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript
diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison
index ea76b59a19..4a0a0e8893 100644
--- a/src/diagrams/gantt/parser/gantt.jison
+++ b/src/diagrams/gantt/parser/gantt.jison
@@ -55,13 +55,14 @@ that id.
 
 "gantt"                 return 'gantt';
 "dateFormat"\s[^#\n;]+  return 'dateFormat';
-"inclusiveEndDates"			return 'inclusiveEndDates';
+"inclusiveEndDates"     return 'inclusiveEndDates';
 "axisFormat"\s[^#\n;]+  return 'axisFormat';
 "excludes"\s[^#\n;]+    return 'excludes';
+"todayMarker"\s[^\n;]+  return 'todayMarker';
 \d\d\d\d"-"\d\d"-"\d\d  return 'date';
 "title"\s[^#\n;]+       return 'title';
 "section"\s[^#:\n;]+    return 'section';
-[^#:\n;]+             return 'taskTxt';
+[^#:\n;]+               return 'taskTxt';
 ":"[^#\n;]+             return 'taskData';
 ":"                     return ':';
 <<EOF>>                 return 'EOF';
@@ -93,9 +94,10 @@ line
 
 statement
   : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
-	| inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
+  | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
   | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
   | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
+  | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
   | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
   | clickStatement
diff --git a/src/diagrams/gantt/parser/gantt.spec.js b/src/diagrams/gantt/parser/gantt.spec.js
index 463dd26e60..4e7366ab45 100644
--- a/src/diagrams/gantt/parser/gantt.spec.js
+++ b/src/diagrams/gantt/parser/gantt.spec.js
@@ -37,6 +37,14 @@ describe('when parsing a gantt diagram it', function() {
 
     expect(parserFnConstructor(str)).not.toThrow();
   });
+  it('should handle a todayMarker definition', function() {
+    spyOn(ganttDb, 'setTodayMarker');
+    const str =
+      'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\nexcludes weekdays 2019-02-01\ntodayMarker off';
+
+    expect(parserFnConstructor(str)).not.toThrow();
+    expect(ganttDb.setTodayMarker).toHaveBeenCalledWith('off');
+  });
   it('should handle a section definition', function() {
     const str =
       'gantt\n' +
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 96f99d9c29..523e396dc0 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -3,6 +3,7 @@ import * as d3 from 'd3';
 import svgDraw from './svgDraw';
 import { logger } from '../../logger';
 import { parser } from './parser/sequenceDiagram';
+import common from '../common/common';
 import sequenceDb from './sequenceDb';
 
 parser.yy = sequenceDb;
@@ -170,7 +171,7 @@ export const bounds = {
 
 const _drawLongText = (text, x, y, g, width) => {
   let textHeight = 0;
-  const lines = text.split(/<br\s*\/?>/gi);
+  const lines = text.split(common.lineBreakRegex);
   for (const line of lines) {
     const textObj = svgDraw.getTextObj();
     textObj.x = x;
@@ -235,7 +236,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
   let textElems = [];
   let counterBreaklines = 0;
   let breaklineOffset = 17;
-  const breaklines = msg.message.split(/<br\s*\/?>/gi);
+  const breaklines = msg.message.split(common.lineBreakRegex);
   for (const breakline of breaklines) {
     textElems.push(
       g
@@ -362,7 +363,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
     line.attr('marker-start', 'url(' + url + '#sequencenumber)');
     g.append('text')
       .attr('x', startx)
-      .attr('y', verticalPos + 4)
+      .attr('y', verticalPos + 4 + totalOffset)
       .attr('font-family', 'sans-serif')
       .attr('font-size', '12px')
       .attr('text-anchor', 'middle')
diff --git a/src/diagrams/sequence/svgDraw.js b/src/diagrams/sequence/svgDraw.js
index d8047e403b..edcdd160a8 100644
--- a/src/diagrams/sequence/svgDraw.js
+++ b/src/diagrams/sequence/svgDraw.js
@@ -1,3 +1,5 @@
+import common from '../common/common';
+
 export const drawRect = function(elem, rectData) {
   const rectElem = elem.append('rect');
   rectElem.attr('x', rectData.x);
@@ -18,7 +20,7 @@ export const drawRect = function(elem, rectData) {
 
 export const drawText = function(elem, textData) {
   // Remove and ignore br:s
-  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
+  const nText = textData.text.replace(common.lineBreakRegex, ' ');
 
   const textElem = elem.append('text');
   textElem.attr('x', textData.x);
@@ -321,7 +323,7 @@ const _drawTextCandidateFunc = (function() {
   function byTspan(content, g, x, y, width, height, textAttrs, conf) {
     const { actorFontSize, actorFontFamily } = conf;
 
-    const lines = content.split(/<br\s*\/?>/gi);
+    const lines = content.split(common.lineBreakRegex);
     for (let i = 0; i < lines.length; i++) {
       const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
       const text = g
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index a436e23b3c..8de5a03d90 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -282,7 +282,7 @@ const drawForkJoinState = (g, stateDef) => {
 
 export const drawText = function(elem, textData) {
   // Remove and ignore br:s
-  const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
+  const nText = textData.text.replace(common.lineBreakRegex, ' ');
 
   const textElem = elem.append('text');
   textElem.attr('x', textData.x);
@@ -310,7 +310,7 @@ const _drawLongText = (_text, x, y, g) => {
 
   let text = _text.replace(/\r\n/g, '<br/>');
   text = text.replace(/\n/g, '<br/>');
-  const lines = text.split(/<br\s*\/?>/gi);
+  const lines = text.split(common.lineBreakRegex);
 
   let tHeight = 1.25 * getConfig().state.noteMargin;
   for (const line of lines) {
diff --git a/src/diagrams/state/stateDb.js b/src/diagrams/state/stateDb.js
index d72e8f00c7..c56dcd1a33 100644
--- a/src/diagrams/state/stateDb.js
+++ b/src/diagrams/state/stateDb.js
@@ -1,4 +1,7 @@
 import { logger } from '../../logger';
+import { generateId } from '../../utils';
+
+const clone = o => JSON.parse(JSON.stringify(o));
 
 let rootDoc = [];
 const setRootDoc = o => {
@@ -22,6 +25,34 @@ const docTranslator = (parent, node, first) => {
     }
 
     if (node.doc) {
+      const doc = [];
+      // Check for concurrency
+      let i = 0;
+      let currentDoc = [];
+      for (i = 0; i < node.doc.length; i++) {
+        if (node.doc[i].type === 'divider') {
+          // debugger;
+          const newNode = clone(node.doc[i]);
+          newNode.doc = clone(currentDoc);
+          doc.push(newNode);
+          currentDoc = [];
+        } else {
+          currentDoc.push(node.doc[i]);
+        }
+      }
+
+      // If any divider was encountered
+      if (doc.length > 0 && currentDoc.length > 0) {
+        const newNode = {
+          stmt: 'state',
+          id: generateId(),
+          type: 'divider',
+          doc: clone(currentDoc)
+        };
+        doc.push(clone(newNode));
+        node.doc = doc;
+      }
+
       node.doc.forEach(docNode => docTranslator(node, docNode, true));
     }
   }
@@ -31,8 +62,14 @@ const getRootDocV2 = () => {
   return { id: 'root', doc: rootDoc };
 };
 
-const extract = doc => {
+const extract = _doc => {
   // const res = { states: [], relations: [] };
+  let doc;
+  if (_doc.doc) {
+    doc = _doc.doc;
+  } else {
+    doc = _doc;
+  }
   // let doc = root.doc;
   // if (!doc) {
   //   doc = root;
@@ -40,6 +77,8 @@ const extract = doc => {
   logger.info(doc);
   clear();
 
+  logger.info('Extract', doc);
+
   doc.forEach(item => {
     if (item.stmt === 'state') {
       addState(item.id, item.type, item.doc, item.description, item.note);
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index 76dc2f1865..f69d94ed33 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -72,10 +72,8 @@ const setupNode = (g, parent, node, altFlag) => {
     }
 
     const nodeData = {
-      labelType: 'svg',
       labelStyle: '',
       shape: nodeDb[node.id].shape,
-      label: node.id,
       labelText: nodeDb[node.id].description,
       classes: nodeDb[node.id].classes, //classStr,
       style: '', //styles.style,
@@ -87,10 +85,8 @@ const setupNode = (g, parent, node, altFlag) => {
     if (node.note) {
       // Todo: set random id
       const noteData = {
-        labelType: 'svg',
         labelStyle: '',
         shape: 'note',
-        label: node.id,
         labelText: node.note.text,
         classes: 'statediagram-note', //classStr,
         style: '', //styles.style,
@@ -99,10 +95,8 @@ const setupNode = (g, parent, node, altFlag) => {
         padding: 15 //getConfig().flowchart.padding
       };
       const groupData = {
-        labelType: 'svg',
         labelStyle: '',
         shape: 'noteGroup',
-        label: node.id + '----parent',
         labelText: node.note.text,
         classes: nodeDb[node.id].classes, //classStr,
         style: '', //styles.style,
@@ -133,8 +127,7 @@ const setupNode = (g, parent, node, altFlag) => {
         classes: 'note-edge',
         arrowheadStyle: 'fill: #333',
         labelpos: 'c',
-        labelType: 'text',
-        label: ''
+        labelType: 'text'
       });
     } else {
       g.setNode(node.id, nodeData);
@@ -143,12 +136,12 @@ const setupNode = (g, parent, node, altFlag) => {
 
   if (parent) {
     if (parent.id !== 'root') {
-      logger.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
+      logger.info('Setting node ', node.id, ' to be child of its parent ', parent.id);
       g.setParent(node.id, parent.id);
     }
   }
   if (node.doc) {
-    logger.trace('Adding nodes children ');
+    logger.info('Adding nodes children ');
     setupDoc(g, node, node.doc, !altFlag);
   }
 };
@@ -168,8 +161,7 @@ const setupDoc = (g, parent, doc, altFlag) => {
         labelStyle: '',
         arrowheadStyle: 'fill: #333',
         labelpos: 'c',
-        labelType: 'text',
-        label: ''
+        labelType: 'text'
       };
       let startId = item.state1.id;
       let endId = item.state2.id;
@@ -214,7 +206,7 @@ export const draw = function(text, id) {
     compound: true
   })
     .setGraph({
-      rankdir: 'LR',
+      rankdir: 'TB',
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
       marginx: 8,
@@ -224,8 +216,8 @@ export const draw = function(text, id) {
       return {};
     });
 
-  // logger.info(stateDb.getRootDoc());
-  stateDb.extract(stateDb.getRootDocV2().doc);
+  logger.info(stateDb.getRootDocV2());
+  stateDb.extract(stateDb.getRootDocV2());
   logger.info(stateDb.getRootDocV2());
   setupNode(g, undefined, stateDb.getRootDocV2(), true);
 
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index 405bb358a1..03fee04b29 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -75,8 +75,13 @@ export const draw = function(text, id) {
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 
-  // Zoom in a bit
-  diagram.attr('width', width * 1.75);
+  if (conf.useMaxWidth) {
+    diagram.attr('width', '100%');
+    diagram.attr('style', `max-width: ${width * 1.75}px;`);
+  } else {
+    // Zoom in a bit
+    diagram.attr('width', width * 1.75);
+  }
   // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
   diagram.attr(
     'viewBox',
diff --git a/src/logger.js b/src/logger.js
index b54ce69377..3b6b60f161 100644
--- a/src/logger.js
+++ b/src/logger.js
@@ -1,5 +1,5 @@
 import moment from 'moment-mini';
-
+//
 export const LEVELS = {
   debug: 1,
   info: 2,
diff --git a/src/utils.js b/src/utils.js
index 823191ffc4..1adcb86f05 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -210,6 +210,19 @@ export const getStylesFromArray = arr => {
   return { style: style, labelStyle: labelStyle };
 };
 
+let cnt = 0;
+export const generateId = () => {
+  cnt++;
+  return (
+    'id-' +
+    Math.random()
+      .toString(36)
+      .substr(2, 12) +
+    '-' +
+    cnt
+  );
+};
+
 export default {
   detectType,
   isSubstringInArray,
@@ -217,5 +230,6 @@ export default {
   calcLabelPosition,
   calcCardinalityPosition,
   formatUrl,
-  getStylesFromArray
+  getStylesFromArray,
+  generateId
 };