Adds colors to commit text

mermaid-js · Oct 18, 2024 · fef6bb3 · fef6bb3
1 parent 13fd907
commit fef6bb3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts
@@ -283,6 +283,18 @@ const drawCommitBullet = (
   }
 };
 
+const commitLabelColorClass = (color: number) => {
+  if (color == 1) {
+    return 'commit-label-color-red';
+  } else if (color == 2) {
+    return 'commit-label-color-blue';
+  } else if (color == 3) {
+    return 'commit-label-color-green';
+  } else {
+    return 'commit-label';
+  }
+};
+
 const drawCommitLabel = (
   gLabels: d3.Selection<SVGGElement, unknown, HTMLElement, any>,
   commit: Commit,
@@ -300,7 +312,7 @@ const drawCommitLabel = (
       .append('text')
       .attr('x', pos)
       .attr('y', commitPosition.y + 25)
-      .attr('class', 'commit-label')
+      .attr('class', commitLabelColorClass(commit.color))
       .text(commit.id);
     const bbox = text.node()?.getBBox();
 

diff --git a/packages/mermaid/src/diagrams/git/styles.js b/packages/mermaid/src/diagrams/git/styles.js
@@ -27,6 +27,9 @@ const getStyles = (options) =>
     stroke-dasharray: 2;
   }
   .commit-label { font-size: ${options.commitLabelFontSize}; fill: ${options.commitLabelColor};}
+  .commit-label-color-red { font-size: ${options.commitLabelFontSize}; fill: red;}
+  .commit-label-color-blue { font-size: ${options.commitLabelFontSize}; fill: blue;}
+  .commit-label-color-green { font-size: ${options.commitLabelFontSize}; fill: green;}
   .commit-label-bkg { font-size: ${options.commitLabelFontSize}; fill: ${
     options.commitLabelBackground
   }; opacity: 0.5; }