diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 4cf13b1cf..a8920869a 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -47,12 +47,19 @@
     }
     </div>
     <div class="mermaid">stateDiagram
-      state PilotCockpit {
+      state Pilot {
         state  GParent {
-          state Parent {
+          state Parent1 {
             Child
           }
+          state Parent2 {
+            Child2
+          }
         }
+        state Parent3 {
+          Child4
+        }
+
     }
     </div>
 </div>
diff --git a/src/diagrams/state/shapes.js b/src/diagrams/state/shapes.js
index 422374fec..c50395064 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -221,7 +221,8 @@ export const addTitleAndBox = (g, stateDef) => {
   //   .attr('rx', '0');
 
   title.attr('x', startX + pad);
-  if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
+  // if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
+  if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
 
   // // Title background
   g.insert('rect', ':first-child')
@@ -499,7 +500,7 @@ export const drawEdge = function(elem, path, relation) {
       .insert('rect', ':first-child')
       .attr('class', 'box')
       .attr('x', bounds.x - getConfig().state.padding / 2)
-      .attr('y', bounds.y - getConfig().state.padding / 2)
+      .attr('y', bounds.y + getConfig().state.padding / 2)
       .attr('width', bounds.width + getConfig().state.padding)
       .attr('height', bounds.height + getConfig().state.padding);
 
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index 6d158a1c2..d998b1f77 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -100,7 +100,7 @@ export const draw = function(text, id) {
   // diagram.attr('height', height);
 
   // Zoom in a bit
-  diagram.attr('width', width * );
+  diagram.attr('width', width * 2);
   // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
   diagram.attr(
     'viewBox',
@@ -134,6 +134,15 @@ const renderDoc = (doc, diagram, parentId) => {
     compound: true
   });
 
+  let i;
+  let edgeFreeDoc = true;
+  for (i = 0; i < doc.length; i++) {
+    if (doc[i].stmt === 'relation') {
+      edgeFreeDoc = false;
+      break;
+    }
+  }
+  console.warn('doc', doc, edgeFreeDoc);
   // Set an object for the graph label
   if (parentId)
     graph.setGraph({
@@ -142,8 +151,11 @@ const renderDoc = (doc, diagram, parentId) => {
       compound: true,
       // acyclicer: 'greedy',
       ranker: 'tight-tree',
-      ranksep: conf.edgeLengthFactor
+      ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
+      nodeSep: edgeFreeDoc ? 1 : 50
       // isMultiGraph: false
+      // ranksep: 5,
+      // nodesep: 1
     });
   else {
     graph.setGraph({
@@ -152,7 +164,8 @@ const renderDoc = (doc, diagram, parentId) => {
       // isCompound: true,
       // acyclicer: 'greedy',
       // ranker: 'longest-path'
-      ranksep: conf.edgeLengthFactor,
+      ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
+      nodeSep: edgeFreeDoc ? 1 : 50,
       ranker: 'tight-tree'
       // ranker: 'network-simplex'
       // isMultiGraph: false
@@ -192,7 +205,7 @@ const renderDoc = (doc, diagram, parentId) => {
         sub = addTitleAndBox(sub, stateDef);
         let boxBounds = sub.node().getBBox();
         node.width = boxBounds.width;
-        node.height = boxBounds.height + 2 * conf.padding;
+        node.height = boxBounds.height + conf.padding / 2;
         transformationLog[stateDef.id] = { y: conf.compositTitleSize };
       } else {
         // sub = addIdAndBox(sub, stateDef);