Fix color and arrow for merge commit

packages/mermaid/src/config.type.ts

@@ -576,6 +576,7 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig {
   showCommitLabel?: boolean;
   showBranches?: boolean;
   rotateCommitLabel?: boolean;
+  rotateTagLabel?: boolean;
   /**
    * Controls whether or arrow markers in html code are absolute paths or anchors.
    * This matters if you are using base tag settings.

packages/mermaid/src/diagrams/git/gitGraphRenderer.js

@@ -275,32 +275,36 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
       if (commit.tag) {
-        const rect = gLabels.insert('polygon');
-        const hole = gLabels.append('circle');
-        const tag = gLabels
+        const g = gLabels.append('g');
+        if (gitGraphConfig.rotateTagLabel && dir === 'LR') {
+          g.attr('transform', 'translate(27,1) rotate(-45, ' + pos + ',' + y + ')');
+        }
+        const rect = g.insert('polygon');
+        const hole = g.append('circle');
+        const tag = g
           .append('text')
           // Note that we are delaying setting the x position until we know the width of the text
           .attr('y', y - 16)
           .attr('class', 'tag-label')
           .text(commit.tag);
         let tagBbox = tag.node().getBBox();
-        tag.attr('x', pos + 10 - tagBbox.width / 2);
+        tag.attr('x', pos + 10);
 
         const h2 = tagBbox.height / 2;
         const ly = y - 19.2;
         rect.attr('class', 'tag-label-bkg').attr(
           'points',
           `
-          ${pos - tagBbox.width / 2 - px / 2},${ly + py}
-          ${pos - tagBbox.width / 2 - px / 2},${ly - py}
-          ${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
-          ${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
-          ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py}
-          ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`
+          ${pos - px / 2},${ly + py}
+          ${pos - px / 2},${ly - py}
+          ${pos + 10 - px},${ly - h2 - py}
+          ${pos + 10 + tagBbox.width + px},${ly - h2 - py}
+          ${pos + 10 + tagBbox.width + px},${ly + h2 + py}
+          ${pos + 10 - px},${ly + h2 + py}`
         );
 
         hole
-          .attr('cx', pos - tagBbox.width / 2 + px / 2)
+          .attr('cx', pos + px / 2)
           .attr('cy', ly)
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
@@ -413,6 +417,10 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
   let radius = 0;
   let offset = 0;
   let colorClassNum = branchPos[commitB.branch].index;
+  if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
+    colorClassNum = branchPos[commitA.branch].index;
+  }
+
   let lineDef;
   if (arrowNeedsRerouting) {
     arc = 'A 10 10, 0, 0, 0,';
@@ -427,7 +435,6 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
       if (p1.x < p2.x) {
         // Source commit is on branch position left of destination commit
         // so render arrow rightward with colour of destination branch
-        colorClassNum = branchPos[commitB.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
           p1.y + offset
         } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
@@ -443,7 +450,6 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
       if (p1.y < p2.y) {
         // Source commit is on branch positioned above destination commit
         // so render arrow downward with colour of destination branch
-        colorClassNum = branchPos[commitB.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
           p1.x + offset
         } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
@@ -457,66 +463,69 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
       }
     }
   } else {
+    arc = 'A 20 20, 0, 0, 0,';
+    arc2 = 'A 20 20, 0, 0, 1,';
+    radius = 20;
+    offset = 20;
+
     if (dir === 'TB') {
       if (p1.x < p2.x) {
-        arc = 'A 20 20, 0, 0, 0,';
-        arc2 = 'A 20 20, 0, 0, 1,';
-        radius = 20;
-        offset = 20;
-
-        // Figure out the color of the arrow,arrows going down take the color from the destination branch
-        colorClassNum = branchPos[commitB.branch].index;
-
-        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
-          p1.y + offset
-        } L ${p2.x} ${p2.y}`;
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
+          lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${
+            p2.y
+          } L ${p2.x} ${p2.y}`;
+        } else {
+          lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
+            p1.y + offset
+          } L ${p2.x} ${p2.y}`;
+        }
       }
       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[commitA.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
-          p2.y
-        } L ${p2.x} ${p2.y}`;
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
+          lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
+            p2.y
+          } L ${p2.x} ${p2.y}`;
+        } else {
+          lineDef = `M ${p1.x} ${p1.y} L ${p2.x + radius} ${p1.y} ${arc} ${p2.x} ${
+            p1.y + offset
+          } L ${p2.x} ${p2.y}`;
+        }
       }
 
       if (p1.x === p2.x) {
-        colorClassNum = branchPos[commitA.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
-          p2.y + radius
-        } L ${p2.x} ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
       }
     } else {
       if (p1.y < p2.y) {
-        arc = 'A 20 20, 0, 0, 0,';
-        radius = 20;
-        offset = 20;
-        // Arrows going up take the color from the target branch
-        colorClassNum = branchPos[commitB.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
-          p2.x
-        } ${p2.y}`;
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
+          lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
+            p1.y + offset
+          } L ${p2.x} ${p2.y}`;
+        } else {
+          lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${
+            p2.y
+          } L ${p2.x} ${p2.y}`;
+        }
       }
       if (p1.y > p2.y) {
-        arc = 'A 20 20, 0, 0, 0,';
-        radius = 20;
-        offset = 20;
-        // Arrows going up take the color from the source branch
-        colorClassNum = branchPos[commitA.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
-          p2.x
-        } ${p2.y}`;
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
+          lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${
+            p1.y - offset
+          } L ${p2.x} ${p2.y}`;
+        } else {
+          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.y === p2.y) {
-        colorClassNum = branchPos[commitA.branch].index;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
-          p2.x
-        } ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
       }
     }
   }

packages/mermaid/src/schemas/config.schema.yaml

@@ -786,6 +786,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       rotateCommitLabel:
         type: boolean
         default: true
+      rotateTagLabel:
+        type: boolean
+        default: false
       # YAML anchor reference, don't use $ref since ajv doesn't load defaults
       arrowMarkerAbsolute: *arrowMarkerAbsolute