diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 01b787ca3..c50f11cef 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -254,22 +254,35 @@ const drawCommits = (svg, commits, modifyGraph) => {
 
         if (dir === 'TB') {
           labelBkg
+            .attr('x', x - (bbox.width + 4 * px + 5))
+            .attr('y', y - 12);
+          text
             .attr('x', x - (bbox.width + 4 * px))
-            .attr('y', y - 5);
-          text.attr('x', x - (bbox.width + 4 * px));
-          text.attr('y', y + bbox.height - 5);
+            .attr('y', y + bbox.height - 12);
         }
 
         if (dir !== 'TB') {
           text.attr('x', pos + 10 - bbox.width / 2);
         }
-        if (gitGraphConfig.rotateCommitLabel && dir !== 'TB') {
-          let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
-          let r_y = 10 + (bbox.width / 25) * 8.5;
-          wrapper.attr(
-            'transform',
-            'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
-          );
+        if (gitGraphConfig.rotateCommitLabel) {
+          if (dir === 'TB')
+          {
+            text.attr(
+              'transform',
+              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
+            );
+            labelBkg.attr(
+              'transform',
+              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
+            );
+          } else {
+            let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
+            let r_y = 10 + (bbox.width / 25) * 8.5;
+            wrapper.attr(
+              'transform',
+              'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
+            );
+          }
         }
       }
       if (commit.tag) {
@@ -302,6 +315,31 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('cy', ly)
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
+
+        if (dir === 'TB')
+        {
+          rect
+            .attr('class', 'tag-label-bkg')
+            .attr(
+            'points',
+            `
+            ${x},${pos + py}
+            ${x},${pos - py}
+            ${x + 10},${pos - h2 - py}
+            ${x + 10 + tagBbox.width + px},${pos - h2 - py}
+            ${x + 10 + tagBbox.width + px},${pos + h2 + py}
+            ${x + 10},${pos + h2 + py}`
+            )
+            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
+          hole
+            .attr('cx', x + px/2)
+            .attr('cy', pos)
+            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
+          tag
+            .attr('x', x+5)
+            .attr('y', pos+3)
+            .attr('transform', 'translate(14,14) rotate(45, '+ x + ',' + pos +')');
+        }
       }
     }
     pos += 50;
@@ -428,19 +466,20 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
       }
       if (p1.x > p2.x) {
         arc = 'A 20 20, 0, 0, 0,';
+        arc2 = 'A 20 20, 0, 0, 1,';
         radius = 20;
         offset = 20;
 
         // Arrows going up take the color from the source branch
         colorClassNum = branchPos[commit1.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc2} ${p1.x-offset} ${p2.y} L ${
           p2.x
         } ${p2.y}`;
       }
 
       if (p1.x === p2.x) {
         colorClassNum = branchPos[commit1.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${p2.y + radius} L ${
           p2.x
         } ${p2.y}`;
       }
@@ -588,15 +627,25 @@ export const draw = function (txt, id, ver, diagObj) {
   allCommitsDict = diagObj.db.getCommits();
   const branches = diagObj.db.getBranchesAsObjArray();
   dir = diagObj.db.getDirection();
-
-  // Position branches vertically
+  const diagram = select(`[id="${id}"]`);
+  // Position branches
   let pos = 0;
   branches.forEach((branch, index) => {
+    const labelElement = drawText(branch.name);
+    const g = diagram.append('g');
+    const branchLabel = g.insert('g').attr('class', 'branchLabel');
+    const label = branchLabel.insert('g').attr('class', 'label branch-label');
+    label.node().appendChild(labelElement);
+    let bbox = labelElement.getBBox();
+
     branchPos[branch.name] = { pos, index };
-    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0);
+    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + ((dir === 'TB') ? bbox.width/2 : 0);
+    label.remove();
+    branchLabel.remove();
+    g.remove();
   });
 
-  const diagram = select(`[id="${id}"]`);
+  
 
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {