diff --git a/dist/www/javascripts/lib/mermaid.js b/dist/www/javascripts/lib/mermaid.js
index fa7427b3d..396adb068 100644
--- a/dist/www/javascripts/lib/mermaid.js
+++ b/dist/www/javascripts/lib/mermaid.js
@@ -53591,6 +53591,7 @@ exports.draw = function (txt, id, ver) {
         log.debug('in gitgraph renderer', txt, id, ver);
         // Parse the graph definition
         parser.parse(txt + "\n");
+        var direction = db.getDirection();
         var commits = db.getCommitsArray();
         log.debug("# of commits: " + commits.length);
         //log.debug("id: " + commits[0].id);
@@ -53599,13 +53600,36 @@ exports.draw = function (txt, id, ver) {
         //log.debug("length:", Object.keys(db.getCommits()).length);
         // Fetch the default direction, use TD if none was found
         var svg = d3.select('#' + id);
-
-        var nodes = svg.selectAll("g").data(commits).enter().append("g").attr("class", "commit").attr("id", function (d) {
+        //<marker id="triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#666" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
+        //<path d="M 0 0 L 10 5 L 0 10 z"></path>
+        //</marker>
+        svg.append("marker").attr({
+            "id": "triangle",
+            "refX": "5",
+            "refY": "5",
+            "markerUnits": "strokeWidth",
+            "fill": "#666",
+            "markerWidth": "4",
+            "markerHeight": "3",
+            "orient": "auto",
+            "viewBox": "0,0,10,10"
+        }).append("svg:path").attr("d", "M 0 0 L 10 5 L 0 10 z");
+        var nodes = svg.selectAll("g.commit").data(commits).enter().append("g").attr("class", "commit").attr("id", function (d) {
             return d.id;
         }).attr("transform", function (d, i) {
-            return "translate(" + (50 + i * 100) + ", 50)";
+            if (direction == "TB" || direction == "BT") return "translate(50," + (50 + i * 100) + ")";
+            if (direction == "LR") return "translate(" + (50 + i * 100) + ", 50)";
         });
 
+        var lines = svg.selectAll("g.arrows").data(commits).enter().append("g").append("line").attr("transform", function (d, i) {
+            if (direction == "TB" || direction == "BT") return "translate(50," + (70 + i * 100) + ")";
+            if (direction == "LR") return "translate(" + (70 + i * 100) + ", 50)";
+        }).attr({
+            "x1": direction == "LR" ? 0 : 0,
+            "y1": direction == "LR" ? 0 : 0,
+            "x2": direction == "LR" ? 60 : 0,
+            "y2": direction == "LR" ? 0 : 60
+        }).attr("marker-end", "url(#triangle)").attr("stroke", "black").attr("stroke-width", "3");
         //g.append('text')      // text label for the x axis
         //.attr('x', 100)
         //.attr('y', 40)
@@ -53615,17 +53639,21 @@ exports.draw = function (txt, id, ver) {
         //.text('mermaid raghu'+ ver);
 
         var circles = svg.selectAll("g.commit").append("circle").attr("r", 15).attr("fill", "yellow").attr("stroke", "grey");
-        var textContainer = svg.selectAll("g.commit").append("g").attr("transform", "translate(-40, 35)").attr("class", "commit-label");
+        var textContainer = svg.selectAll("g.commit").append("g").attr("transform", function () {
+            if (direction == "LR") return "translate(-30, 35)";
+            if (direction == "BT" || direction == "TB") return "translate(200, 0)";
+        }).attr("class", "commit-label");
         textContainer.append("text").text(function (c) {
-            return c.id;
+            return c.id + "," + c.seq;
         });
+
         /*
         var box = exports.bounds.getBounds();
          var height = box.stopy-box.starty+2*conf.diagramMarginY;
         var width  = box.stopx-box.startx+2*conf.diagramMarginX;*/
 
-        svg.attr('height', 100);
-        svg.attr('width', 400);
+        svg.attr('height', 900);
+        svg.attr('width', 1200);
         //svg.attr('viewBox', '0 0 300 150');
     } catch (e) {
         log.error("Error while rendering gitgraph");
diff --git a/src/diagrams/gitGraph/gitGraphRenderer.js b/src/diagrams/gitGraph/gitGraphRenderer.js
index 684e8c12b..3fbc98c5a 100644
--- a/src/diagrams/gitGraph/gitGraphRenderer.js
+++ b/src/diagrams/gitGraph/gitGraphRenderer.js
@@ -1,16 +1,15 @@
-
 var db = require('./gitGraphAst');
 var gitGraphParser = require('./parser/gitGraph');
 var d3 = require('../../d3');
 var Logger = require('../../logger');
 
 var log = new Logger.Log();
-exports.setConf = function(config) {
+exports.setConf = function (config) {
 
 }
 
 exports.draw = function (txt, id, ver) {
-    try{
+    try {
         var parser;
         parser = gitGraphParser.parser;
         parser.yy = db;
@@ -18,6 +17,7 @@ exports.draw = function (txt, id, ver) {
         log.debug('in gitgraph renderer', txt, id, ver);
         // Parse the graph definition
         parser.parse(txt + "\n");
+        var direction = db.getDirection();
         var commits = db.getCommitsArray();
         log.debug("# of commits: " + commits.length);
         //log.debug("id: " + commits[0].id);
@@ -25,19 +25,60 @@ exports.draw = function (txt, id, ver) {
         //log.debug("length:", commits.length);
         //log.debug("length:", Object.keys(db.getCommits()).length);
         // Fetch the default direction, use TD if none was found
-        var svg = d3.select('#'+id);
-
+        var svg = d3.select('#' + id);
+        //<marker id="triangle" refX="5" refY="5" markerUnits="strokeWidth" fill="#666" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">
+        //<path d="M 0 0 L 10 5 L 0 10 z"></path>
+        //</marker>
+        svg.append("marker")
+            .attr({
+                "id": "triangle",
+                "refX": "5",
+                "refY": "5",
+                "markerUnits": "strokeWidth",
+                "fill": "#666",
+                "markerWidth": "4",
+                "markerHeight": "3",
+                "orient": "auto",
+                "viewBox": "0,0,10,10"
+            })
+            .append("svg:path")
+            .attr("d", "M 0 0 L 10 5 L 0 10 z");
         var nodes = svg
-                        .selectAll("g")
-                        .data(commits)
-                        .enter()
-                        .append("g")
-                        .attr("class", "commit")
-                        .attr("id", function(d){return d.id;})
-                        .attr("transform", function(d,i){
-                            return "translate(" + (50 + i*100) + ", 50)";
-                        });
+            .selectAll("g.commit")
+            .data(commits)
+            .enter()
+            .append("g")
+            .attr("class", "commit")
+            .attr("id", function (d) {
+                return d.id;
+            })
+            .attr("transform", function (d, i) {
+                if (direction == "TB" || direction == "BT")
+                    return "translate(50," + (50 + i * 100) + ")";
+                if (direction == "LR")
+                    return "translate(" + (50 + i * 100) + ", 50)";
+            });
 
+        var lines = svg.selectAll("g.arrows")
+            .data(commits)
+            .enter()
+            .append("g")
+            .append("line")
+            .attr("transform", function(d, i) {
+                if (direction == "TB" || direction == "BT")
+                    return "translate(50," + (70 + (i * 100)) + ")";
+                if (direction == "LR")
+                    return "translate(" + (70 + (i * 100)) + ", 50)";
+            })
+            .attr({
+                "x1": direction == "LR" ? 0:0,
+                "y1": direction == "LR" ? 0:0,
+                "x2": direction == "LR" ? 60:0,
+                "y2": direction == "LR" ? 0:60
+            })
+            .attr("marker-end", "url(#triangle)")
+            .attr("stroke", "black")
+            .attr("stroke-width", "3")
         //g.append('text')      // text label for the x axis
         //.attr('x', 100)
         //.attr('y', 40)
@@ -52,22 +93,28 @@ exports.draw = function (txt, id, ver) {
             .attr("fill", "yellow")
             .attr("stroke", "grey");
         var textContainer = svg.selectAll("g.commit")
-                    .append("g")
-                    .attr("transform", "translate(-40, 35)")
-                    .attr("class", "commit-label");
+            .append("g")
+            .attr("transform", function () {
+                if (direction == "LR") return "translate(-30, 35)";
+                if (direction == "BT" || direction == "TB") return "translate(200, 0)";
+            })
+            .attr("class", "commit-label");
         textContainer
-                    .append("text")
-                    .text(function(c){ return c.id; });
+            .append("text")
+            .text(function (c) {
+                return c.id + "," + c.seq;
+            });
+
         /*
         var box = exports.bounds.getBounds();
 
         var height = box.stopy-box.starty+2*conf.diagramMarginY;
         var width  = box.stopx-box.startx+2*conf.diagramMarginX;*/
 
-        svg.attr('height',100);
-        svg.attr('width', 400);
+        svg.attr('height', 900);
+        svg.attr('width', 1200);
         //svg.attr('viewBox', '0 0 300 150');
-    }catch(e) {
+    } catch (e) {
         log.error("Error while rendering gitgraph");
         log.error(e.message);
     }
diff --git a/testgitgraph.mm b/testgitgraph.mm
index c56562450..177bd144d 100644
--- a/testgitgraph.mm
+++ b/testgitgraph.mm
@@ -1,4 +1,4 @@
-gitGraph:
+gitGraph TB:
     commit
     branch newbranch
     checkout newbranch