diff --git a/dist/index.html b/dist/index.html
index dface957a..a0079fe99 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -20,6 +20,19 @@ click B testClick "click test"
 
   <hr/>
 
+  <div class="mermaid">
+      graph TD
+      A-->B
+      A-->C
+      A-->Z
+      A-->Y
+      B-->Y
+      Z-->Y
+      Y-->A
+  </div>
+
+  <hr/>
+
   <div class="mermaid">
 sequenceDiagram
 Alice ->> Bob: Hello Bob, how are you?
@@ -105,7 +118,12 @@ Class08 <--> C2: Cool label
   </div>
   <script src="./mermaid.js"></script>
   <script>
-    mermaid.initialize({ theme: 'forest', logLevel: 3, gantt: { axisFormat: '%m/%d/%Y' } });
+    mermaid.initialize({
+      theme: 'forest',
+      logLevel: 3,
+      gantt: { axisFormat: '%m/%d/%Y' },
+      sequence: { actorMargin: 50 },
+    });
   </script>
   <script>
     function testClick(nodeId) {
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 28a94cea9..8b5650a0a 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -205,7 +205,7 @@ const config = {
     /**
      * **numberSectionStyles** - the number of alternating section styles
      */
-    numberSectionStyles: 3,
+    numberSectionStyles: 4,
 
     /**
      * **axisFormat** - datetime format of the axis, this might need adjustment to match your locale and preferences