From de89355a49a7832e672389fe977b572633acca35 Mon Sep 17 00:00:00 2001
From: JingyuMarcelLee <leemar@dickinson.edu>
Date: Wed, 20 Mar 2024 01:20:20 -0400
Subject: [PATCH 1/2] Recommitted Changed due to polluted branch

---
 .../integration/rendering/gitGraph.spec.js    | 446 ++++++++++++++++++
 demos/git.html                                | 182 +++++++
 docs/syntax/gitgraph.md                       |  42 +-
 .../src/diagrams/git/gitGraphParser.spec.js   |  14 +-
 .../src/diagrams/git/gitGraphRenderer.js      | 217 +++++++--
 .../src/diagrams/git/parser/gitGraph.jison    |   3 +-
 packages/mermaid/src/docs/syntax/gitgraph.md  |  27 +-
 7 files changed, 889 insertions(+), 42 deletions(-)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 2184fecf88..4e8f7fdcac 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -1013,4 +1013,450 @@ gitGraph TB:
       { gitGraph: { parallelCommits: true } }
     );
   });
+  describe('Git-Graph Bottom-to-Top Orientation Tests', () => {
+    it('50: should render a simple gitgraph with commit on main branch | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         commit id: "3"
+        `,
+        {}
+      );
+    });
+    it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "One"
+         commit id: "Two"
+         commit id: "Three"
+        `,
+        {}
+      );
+    });
+    it('52: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "Normal Commit"
+         commit id: "Reverse Commit" type: REVERSE
+         commit id: "Highlight Commit" type: HIGHLIGHT
+        `,
+        {}
+      );
+    });
+    it('53: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "Normal Commit with tag" tag: "v1.0.0"
+         commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
+         commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+        `,
+        {}
+      );
+    });
+    it('54: should render a simple gitgraph with two branches | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch develop
+         checkout develop
+         commit id: "3"
+         commit id: "4"
+         checkout main
+         commit id: "5"
+         commit id: "6"
+        `,
+        {}
+      );
+    });
+    it('55: should render a simple gitgraph with two branches and merge commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch develop
+         checkout develop
+         commit id: "3"
+         commit id: "4"
+         checkout main
+         merge develop
+         commit id: "5"
+         commit id: "6"
+        `,
+        {}
+      );
+    });
+    it('56: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch nice_feature
+         checkout nice_feature
+         commit id: "3"
+         checkout main
+         commit id: "4"
+         checkout nice_feature
+         branch very_nice_feature
+         checkout very_nice_feature
+         commit id: "5"
+         checkout main
+         commit id: "6"
+         checkout nice_feature
+         commit id: "7"
+         checkout main
+         merge nice_feature id: "12345" tag: "my merge commit"
+         checkout very_nice_feature
+         commit id: "8"
+         checkout main
+         commit id: "9"
+        `,
+        {}
+      );
+    });
+    it('57: should render a simple gitgraph with more than 8 branches &  overriding variables | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+          'gitBranchLabel0': '#ffffff',
+          'gitBranchLabel1': '#ffffff',
+          'gitBranchLabel2': '#ffffff',
+          'gitBranchLabel3': '#ffffff',
+          'gitBranchLabel4': '#ffffff',
+          'gitBranchLabel5': '#ffffff',
+          'gitBranchLabel6': '#ffffff',
+          'gitBranchLabel7': '#ffffff',
+    } } }%%
+    gitGraph BT:
+      checkout main
+      branch branch1
+      branch branch2
+      branch branch3
+      branch branch4
+      branch branch5
+      branch branch6
+      branch branch7
+      branch branch8
+      branch branch9
+      checkout branch1
+      commit id: "1"
+        `,
+        {}
+      );
+    });
+    it('58: should render a simple gitgraph with rotated labels | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+          'rotateCommitLabel': true
+    } } }%%
+          gitGraph BT:
+          commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
+          commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
+          commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
+          commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
+        `,
+        {}
+      );
+    });
+    it('59: should render a simple gitgraph with horizontal labels | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+          'rotateCommitLabel': false
+    } } }%%
+          gitGraph BT:
+          commit id: "Alpha"
+          commit id: "Beta"
+          commit id: "Gamma"
+          commit id: "Delta"
+        `,
+        {}
+      );
+    });
+    it('60: should render a simple gitgraph with cherry pick commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A"
+         commit id:"THREE"
+         checkout develop
+         commit id:"C"
+        `,
+        {}
+      );
+    });
+    it('61: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A" tag: "snapshot"
+         commit id:"THREE"
+         checkout develop
+         commit id:"C"
+        `,
+        {}
+      );
+    });
+    it('62: should render a gitgraph with cherry pick commit with no tag | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A" tag: ""
+         commit id:"THREE"
+         checkout develop
+         commit id:"C"
+        `,
+        {}
+      );
+    });
+    it('63: should render a simple gitgraph with two cherry pick commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+      gitGraph BT:
+         commit id: "ZERO"
+         branch develop
+         commit id:"A"
+         checkout main
+         commit id:"ONE"
+         checkout develop
+         commit id:"B"
+         branch featureA
+         commit id:"FIX"
+         commit id: "FIX-2"
+         checkout main
+         commit id:"TWO"
+         cherry-pick id:"A"
+         commit id:"THREE"
+         cherry-pick id:"FIX"
+         checkout develop
+         commit id:"C"
+         merge featureA
+        `,
+        {}
+      );
+    });
+    it('64: should render commits for more than 8 branches | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `
+        gitGraph BT:
+        checkout main
+        %% Make sure to manually set the ID of all commits, for consistent visual tests
+        commit id: "1-abcdefg"
+        checkout main
+        branch branch1
+        commit id: "2-abcdefg"
+        checkout main
+        merge branch1
+        branch branch2
+        commit id: "3-abcdefg"
+        checkout main
+        merge branch2
+        branch branch3
+        commit id: "4-abcdefg"
+        checkout main
+        merge branch3
+        branch branch4
+        commit id: "5-abcdefg"
+        checkout main
+        merge branch4
+        branch branch5
+        commit id: "6-abcdefg"
+        checkout main
+        merge branch5
+        branch branch6
+        commit id: "7-abcdefg"
+        checkout main
+        merge branch6
+        branch branch7
+        commit id: "8-abcdefg"
+        checkout main
+        merge branch7
+        branch branch8
+        commit id: "9-abcdefg"
+        checkout main
+        merge branch8
+        branch branch9
+        commit id: "10-abcdefg"
+        `,
+        {}
+      );
+    });
+    it('65: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id: "1"
+         commit id: "2"
+         branch nice_feature
+         checkout nice_feature
+         commit id: "3"
+         checkout main
+         commit id: "4"
+         checkout nice_feature
+         branch very_nice_feature
+         checkout very_nice_feature
+         commit id: "5"
+         checkout main
+         commit id: "6"
+         checkout nice_feature
+         commit id: "7"
+         checkout main
+         merge nice_feature id: "customID" tag: "customTag" type: REVERSE
+         checkout very_nice_feature
+         commit id: "8"
+         checkout main
+         commit id: "9"
+        `,
+        {}
+      );
+    });
+    it('66: should render a simple gitgraph with a title | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `---
+  title: simple gitGraph
+  ---
+  gitGraph BT:
+    commit id: "1-abcdefg"
+  `,
+        {}
+      );
+    });
+    it('67: should render a simple gitgraph overlapping commits | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+         commit id:"s1"
+         commit id:"s2"
+         branch branch1
+         commit id:"s3"
+         commit id:"s4"
+         checkout main
+         commit id:"s5"
+         checkout branch1
+         commit id:"s6"
+         commit id:"s7"
+         merge main
+        `,
+        {}
+      );
+    });
+    it('68: should render a simple gitgraph with two branches from same commit | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        commit id:"2-abcdefg"
+        branch feature-001
+        commit id:"3-abcdefg"
+        commit id:"4-abcdefg"
+        checkout main
+        branch feature-002
+        commit id:"5-abcdefg"
+        checkout feature-001
+        merge feature-002
+        `,
+        {}
+      );
+    });
+    it('69: should render GitGraph with branch that is not used immediately | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        branch x
+        checkout main
+        commit id:"2-abcdefg"
+        checkout x
+        commit id:"3-abcdefg"
+        checkout main
+        merge x
+        `,
+        {}
+      );
+    });
+    it('70: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        branch x
+        checkout main
+        commit id:"2-abcdefg"
+        checkout x
+        commit id:"3-abcdefg"
+        checkout main
+        merge x
+        checkout x
+        branch y
+        checkout x
+        commit id:"4-abcdefg"
+        checkout y
+        commit id:"5-abcdefg"
+        checkout x
+        merge y
+        `,
+        {}
+      );
+    });
+    it('71: should render GitGraph with parallel commits | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id:"1-abcdefg"
+        commit id:"2-abcdefg"
+        branch develop
+        commit id:"3-abcdefg"
+        commit id:"4-abcdefg"
+        checkout main
+        branch feature
+        commit id:"5-abcdefg"
+        commit id:"6-abcdefg"
+        checkout main
+        commit id:"7-abcdefg"
+        commit id:"8-abcdefg"
+        `,
+        { gitGraph: { parallelCommits: true } }
+      );
+    });
+    it('72: should render GitGraph with unconnected branches and parallel commits | Vertical Branch - Bottom-to-top', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        branch dev
+        branch v2
+        branch feat
+        commit id:"1-abcdefg"
+        commit id:"2-abcdefg"
+        checkout main
+        commit id:"3-abcdefg"
+        checkout dev
+        commit id:"4-abcdefg"
+        checkout v2
+        commit id:"5-abcdefg"
+        checkout main
+        commit id:"6-abcdefg"
+        `,
+        { gitGraph: { parallelCommits: true } }
+      );
+    });
+  });
 });
diff --git a/demos/git.html b/demos/git.html
index 92e0e68635..697163ac34 100644
--- a/demos/git.html
+++ b/demos/git.html
@@ -40,6 +40,19 @@ <h2>Simple "branch and merge" graph</h2>
     checkout main
     merge newbranch
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Simple "branch and merge" (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      checkout main
+      merge newbranch
+      </pre
+    >
     <h2>Continuous development graph</h2>
     <pre class="mermaid">
     ---
@@ -73,6 +86,23 @@ <h2>Continuous development graph</h2>
     checkout main
     merge develop
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Continuous development (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      checkout develop
+      commit
+      checkout main
+      merge develop
+      checkout develop
+      commit
+      checkout main
+      merge develop
+      </pre
+    >
     <h2>Merge feature to advanced main graph</h2>
     <pre class="mermaid">
     ---
@@ -100,6 +130,20 @@ <h2>Merge feature to advanced main graph</h2>
     commit
     merge newbranch
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Merge feature to advanced main (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      checkout main
+      commit
+      merge newbranch
+      </pre
+    >
     <h2>Two-way merges</h2>
     <pre class="mermaid">
     ---
@@ -137,6 +181,25 @@ <h2>Two-way merges</h2>
     checkout main
     merge develop
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Two-way merges (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      checkout develop
+      commit
+      checkout main
+      merge develop
+      commit
+      checkout develop
+      merge main
+      commit
+      checkout main
+      merge develop
+      </pre
+    >
     <h2>Cherry-pick from branch graph</h2>
     <pre class="mermaid">
     ---
@@ -170,6 +233,22 @@ <h2>Cherry-pick from branch graph</h2>
     checkout main
     cherry-pick id: "Pick me"
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Cherry-pick from branch (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit id: "Pick me"
+      checkout main
+      commit
+      checkout newbranch
+      commit
+      checkout main
+      cherry-pick id: "Pick me"
+    </pre>
     <h2>Cherry-pick from main graph</h2>
     <pre class="mermaid">
     ---
@@ -199,6 +278,21 @@ <h2>Cherry-pick from main graph</h2>
     commit
     cherry-pick id: "A"
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Cherry-pick from main (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      commit
+      checkout main
+      commit id:"A"
+      checkout develop
+      commit
+      cherry-pick id: "A"
+      </pre
+    >
     <h2>Cherry-pick then merge graph</h2>
     <pre class="mermaid">
     ---
@@ -234,6 +328,24 @@ <h2>Cherry-pick then merge graph</h2>
     cherry-pick id: "Pick me"
     merge newbranch
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Cherry-pick then merge (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch newbranch
+      checkout newbranch
+      commit id: "Pick me"
+      checkout main
+      commit
+      checkout newbranch
+      commit
+      checkout main
+      cherry-pick id: "Pick me"
+      merge newbranch
+      </pre
+    >
     <h2>Merge from main onto undeveloped branch graph</h2>
     <pre class="mermaid">
     ---
@@ -261,6 +373,20 @@ <h2>Merge from main onto undeveloped branch graph</h2>
     checkout develop
     merge main
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Merge from main onto undeveloped branch (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      commit
+      checkout main
+      commit
+      checkout develop
+      merge main
+      </pre
+    >
     <h2>Merge from main onto developed branch graph</h2>
     <pre class="mermaid">
     ---
@@ -290,6 +416,21 @@ <h2>Merge from main onto developed branch graph</h2>
     commit
     merge main
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Merge from main onto developed branch (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      branch develop
+      commit
+      checkout main
+      commit
+      checkout develop
+      commit
+      merge main
+      </pre
+    >
     <h2>Two branches from same commit graph</h2>
     <pre class="mermaid">
     ---
@@ -323,6 +464,23 @@ <h2>Two branches from same commit graph</h2>
     checkout feature-001
     merge feature-002
     </pre>
+    <pre class="mermaid">
+      ---
+      title: Two branches from same commit (bottom-to-top)
+      ---
+      gitGraph BT:
+      commit
+      commit
+      branch feature-001
+      commit
+      commit
+      checkout main
+      branch feature-002
+      commit
+      checkout feature-001
+      merge feature-002
+      </pre
+    >
     <h2>Three branches and a cherry-pick from each graph</h2>
     <pre class="mermaid">
     ---
@@ -372,6 +530,30 @@ <h2>Three branches and a cherry-pick from each graph</h2>
     commit id:"C"
     merge featureA
     </pre>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (bottom-to-top)
+    ---
+    gitGraph BT:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       const ALLOWED_TAGS = [
diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 099d90e5e2..0b81a2ef04 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -836,9 +836,9 @@ Here, we have changed the default main branch name to `MetroLine1`.
 
 ## Orientation (v10.3.0+)
 
-Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**.
+Mermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**.
 
-You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`.
+You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`.
 
 ### Left to Right (default, `LR:`)
 
@@ -916,6 +916,44 @@ Usage example:
        commit
 ```
 
+### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)
+
+In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
+
+To orient the graph this way, you need to add `BT:` after gitGraph.
+
+Usage example:
+
+```mermaid-example
+    gitGraph BT:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+```mermaid
+    gitGraph BT:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 ## Parallel commits (v10.8.0+)
 
 Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.
diff --git a/packages/mermaid/src/diagrams/git/gitGraphParser.spec.js b/packages/mermaid/src/diagrams/git/gitGraphParser.spec.js
index 446f067393..52cb62fa2d 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphParser.spec.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphParser.spec.js
@@ -54,7 +54,7 @@ describe('when parsing a gitGraph', function () {
     expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
   });
 
-  it('should handle set direction', function () {
+  it('should handle set direction top to bottom', function () {
     const str = 'gitGraph TB:\n' + 'commit\n';
 
     parser.parse(str);
@@ -66,6 +66,18 @@ describe('when parsing a gitGraph', function () {
     expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
   });
 
+  it('should handle set direction bottom to top', function () {
+    const str = 'gitGraph BT:\n' + 'commit\n';
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('main');
+    expect(parser.yy.getDirection()).toBe('BT');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+  });
+
   it('should checkout a branch', function () {
     const str = 'gitGraph:\n' + 'branch new\n' + 'checkout new\n';
 
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index fbcaa547a4..7ccc60cd03 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -20,6 +20,7 @@ let commitPos = {};
 let lanes = [];
 let maxPos = 0;
 let dir = 'LR';
+let defaultPos = 30;
 const clear = () => {
   branchPos = {};
   commitPos = {};
@@ -77,7 +78,7 @@ const findClosestParent = (parents) => {
   let maxPosition = 0;
 
   parents.forEach((parent) => {
-    const parentPosition = dir === 'TB' ? commitPos[parent].y : commitPos[parent].x;
+    const parentPosition = dir === 'TB' || dir === 'BT' ? commitPos[parent].y : commitPos[parent].x;
     if (parentPosition >= maxPosition) {
       closestParent = parent;
       maxPosition = parentPosition;
@@ -87,6 +88,83 @@ const findClosestParent = (parents) => {
   return closestParent || undefined;
 };
 
+/**
+ * Searches for the closest parent from the parents list passed as argument for Bottom-to-Top orientation.
+ * The parents list comes from an individual commit. The closest parent is actually
+ * the one farther down the graph, since that means it is closer to its child.
+ *
+ * @param {string[]} parents
+ * @returns {string | undefined}
+ */
+const findClosestParentBT = (parents) => {
+  let closestParent = '';
+  let maxPosition = Infinity;
+
+  parents.forEach((parent) => {
+    const parentPosition = commitPos[parent].y;
+    if (parentPosition <= maxPosition) {
+      closestParent = parent;
+      maxPosition = parentPosition;
+    }
+  });
+
+  return closestParent || undefined;
+};
+
+/**
+ * Sets the position of the commit elements when the orientation is set to BT-Parallel.
+ * This is needed to render the chart in Bottom-to-Top mode while keeping the parallel
+ * commits in the correct position. First, it finds the correct position of the root commit
+ * using the findClosestParent method. Then, it uses the findClosestParentBT to set the position
+ * of the remaining commits.
+ *
+ * @param {any} sortedKeys
+ * @param {any} commits
+ * @param {any} defaultPos
+ * @param {any} commitStep
+ * @param {any} layoutOffset
+ */
+const setParallelBTPos = (sortedKeys, commits, defaultPos, commitStep, layoutOffset) => {
+  let curPos = defaultPos;
+  let maxPosition = defaultPos;
+  let roots = [];
+  sortedKeys.forEach((key) => {
+    const commit = commits[key];
+    if (commit.parents.length) {
+      const closestParent = findClosestParent(commit.parents);
+      curPos = commitPos[closestParent].y + commitStep;
+      if (curPos >= maxPosition) {
+        maxPosition = curPos;
+      }
+    } else {
+      roots.push(commit);
+    }
+    const x = branchPos[commit.branch].pos;
+    const y = curPos + layoutOffset;
+    commitPos[commit.id] = { x: x, y: y };
+  });
+  curPos = maxPosition;
+  roots.forEach((commit) => {
+    const posWithOffset = curPos + defaultPos;
+    const y = posWithOffset;
+    const x = branchPos[commit.branch].pos;
+    commitPos[commit.id] = { x: x, y: y };
+  });
+  sortedKeys.forEach((key) => {
+    const commit = commits[key];
+    if (commit.parents.length) {
+      const closestParent = findClosestParentBT(commit.parents);
+      curPos = commitPos[closestParent].y - commitStep;
+      if (curPos <= maxPosition) {
+        maxPosition = curPos;
+      }
+      const x = branchPos[commit.branch].pos;
+      const y = curPos - layoutOffset;
+      commitPos[commit.id] = { x: x, y: y };
+    }
+  });
+};
+
 /**
  * Draws the commits with its symbol and labels. The function has two modes, one which only
  * calculates the positions and one that does the actual drawing. This for a simple way getting the
@@ -102,39 +180,54 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const gLabels = svg.append('g').attr('class', 'commit-labels');
   let pos = 0;
 
-  if (dir === 'TB') {
-    pos = 30;
+  if (dir === 'TB' || dir === 'BT') {
+    pos = defaultPos;
   }
-
   const keys = Object.keys(commits);
-  const sortedKeys = keys.sort((a, b) => {
-    return commits[a].seq - commits[b].seq;
-  });
-
   const isParallelCommits = gitGraphConfig.parallelCommits;
   const layoutOffset = 10;
   const commitStep = 40;
+  let sortedKeys =
+    dir !== 'BT' || (dir === 'BT' && isParallelCommits)
+      ? keys.sort((a, b) => {
+          return commits[a].seq - commits[b].seq;
+        })
+      : keys
+          .sort((a, b) => {
+            return commits[a].seq - commits[b].seq;
+          })
+          .reverse();
+
+  if (dir === 'BT' && isParallelCommits) {
+    setParallelBTPos(sortedKeys, commits, pos, commitStep, layoutOffset);
+    sortedKeys = sortedKeys.reverse();
+  }
   sortedKeys.forEach((key) => {
     const commit = commits[key];
-
     if (isParallelCommits) {
       if (commit.parents.length) {
-        const closestParent = findClosestParent(commit.parents);
-        pos =
-          dir === 'TB'
-            ? commitPos[closestParent].y + commitStep
-            : commitPos[closestParent].x + commitStep;
+        const closestParent =
+          dir === 'BT' ? findClosestParentBT(commit.parents) : findClosestParent(commit.parents);
+        if (dir === 'TB') {
+          pos = commitPos[closestParent].y + commitStep;
+        } else if (dir === 'BT') {
+          pos = commitPos[key].y - commitStep;
+        } else {
+          pos = commitPos[closestParent].x + commitStep;
+        }
       } else {
-        pos = 0;
         if (dir === 'TB') {
-          pos = 30;
+          pos = defaultPos;
+        } else if (dir === 'BT') {
+          pos = commitPos[key].y - commitStep;
+        } else {
+          pos = 0;
         }
       }
     }
-
-    const posWithOffset = pos + layoutOffset;
-    const y = dir === 'TB' ? posWithOffset : branchPos[commit.branch].pos;
-    const x = dir === 'TB' ? branchPos[commit.branch].pos : posWithOffset;
+    const posWithOffset = dir === 'BT' && isParallelCommits ? pos : pos + layoutOffset;
+    const y = dir === 'TB' || dir === 'BT' ? posWithOffset : branchPos[commit.branch].pos;
+    const x = dir === 'TB' || dir === 'BT' ? branchPos[commit.branch].pos : posWithOffset;
 
     // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
@@ -258,7 +351,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
     }
-    if (dir === 'TB') {
+    if (dir === 'TB' || dir === 'BT') {
       commitPos[commit.id] = { x: x, y: posWithOffset };
     } else {
       commitPos[commit.id] = { x: posWithOffset, y: y };
@@ -295,16 +388,14 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('width', bbox.width + 2 * py)
           .attr('height', bbox.height + 2 * py);
 
-        if (dir === 'TB') {
+        if (dir === 'TB' || dir === 'BT') {
           labelBkg.attr('x', x - (bbox.width + 4 * px + 5)).attr('y', y - 12);
           text.attr('x', x - (bbox.width + 4 * px)).attr('y', y + bbox.height - 12);
-        }
-
-        if (dir !== 'TB') {
+        } else {
           text.attr('x', posWithOffset - bbox.width / 2);
         }
         if (gitGraphConfig.rotateCommitLabel) {
-          if (dir === 'TB') {
+          if (dir === 'TB' || dir === 'BT') {
             text.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
             labelBkg.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
           } else {
@@ -348,7 +439,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
 
-        if (dir === 'TB') {
+        if (dir === 'TB' || dir === 'BT') {
           rect
             .attr('class', 'tag-label-bkg')
             .attr(
@@ -373,7 +464,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
     }
-    pos += commitStep + layoutOffset;
+    pos = dir === 'BT' && isParallelCommits ? pos + commitStep : pos + commitStep + layoutOffset;
     if (pos > maxPos) {
       maxPos = pos;
     }
@@ -389,7 +480,6 @@ const drawCommits = (svg, commits, modifyGraph) => {
  *
  * @param {any} commitA
  * @param {any} commitB
- * @param branchToGetCurve
  * @param p1
  * @param p2
  * @param allCommits
@@ -402,7 +492,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
  * return true
  */
 const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
-  const commitBIsFurthest = dir === 'TB' ? p1.x < p2.x : p1.y < p2.y;
+  const commitBIsFurthest = dir === 'TB' || dir === 'BT' ? p1.x < p2.x : p1.y < p2.y;
   const branchToGetCurve = commitBIsFurthest ? commitB.branch : commitA.branch;
   const isOnBranchToGetCurve = (x) => x.branch === branchToGetCurve;
   const isBetweenCommits = (x) => x.seq > commitA.seq && x.seq < commitB.seq;
@@ -485,6 +575,21 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
           p1.y + offset
         } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
       }
+    } else if (dir === 'BT') {
+      if (p1.x < p2.x) {
+        // Source commit is on branch position left of destination commit
+        // so render arrow rightward with colour of destination branch
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${
+          p1.y - offset
+        } L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+      } else {
+        // Source commit is on branch position right of destination commit
+        // so render arrow leftward with colour of source branch
+        colorClassNum = branchPos[commitA.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}`;
+      }
     } else {
       if (p1.y < p2.y) {
         // Source commit is on branch positioned above destination commit
@@ -524,7 +629,6 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
         arc2 = 'A 20 20, 0, 0, 1,';
         radius = 20;
         offset = 20;
-
         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
@@ -536,6 +640,38 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
         }
       }
 
+      if (p1.x === p2.x) {
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
+      }
+    } else if (dir === 'BT') {
+      if (p1.x < p2.x) {
+        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) {
+        arc = 'A 20 20, 0, 0, 0,';
+        arc2 = 'A 20 20, 0, 0, 1,';
+        radius = 20;
+        offset = 20;
+
+        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} ${arc} ${p2.x} ${
+            p1.y - offset
+          } L ${p2.x} ${p2.y}`;
+        }
+      }
+
       if (p1.x === p2.x) {
         lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
       }
@@ -607,12 +743,16 @@ const drawBranches = (svg, branches) => {
     line.attr('class', 'branch branch' + adjustIndexForTheme);
 
     if (dir === 'TB') {
-      line.attr('y1', 30);
+      line.attr('y1', defaultPos);
       line.attr('x1', pos);
       line.attr('y2', maxPos);
       line.attr('x2', pos);
+    } else if (dir === 'BT') {
+      line.attr('y1', maxPos);
+      line.attr('x1', pos);
+      line.attr('y2', defaultPos);
+      line.attr('x2', pos);
     }
-
     lanes.push(pos);
 
     let name = branch.name;
@@ -646,8 +786,10 @@ const drawBranches = (svg, branches) => {
     if (dir === 'TB') {
       bkg.attr('x', pos - bbox.width / 2 - 10).attr('y', 0);
       label.attr('transform', 'translate(' + (pos - bbox.width / 2 - 5) + ', ' + 0 + ')');
-    }
-    if (dir !== 'TB') {
+    } else if (dir === 'BT') {
+      bkg.attr('x', pos - bbox.width / 2 - 10).attr('y', maxPos);
+      label.attr('transform', 'translate(' + (pos - bbox.width / 2 - 5) + ', ' + maxPos + ')');
+    } else {
       bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
     }
   });
@@ -681,7 +823,10 @@ export const draw = function (txt, id, ver, diagObj) {
     let bbox = labelElement.getBBox();
 
     branchPos[branch.name] = { pos, index };
-    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0) + (dir === 'TB' ? bbox.width / 2 : 0);
+    pos +=
+      50 +
+      (gitGraphConfig.rotateCommitLabel ? 40 : 0) +
+      (dir === 'TB' || dir === 'BT' ? bbox.width / 2 : 0);
     label.remove();
     branchLabel.remove();
     g.remove();
diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
index d74d6072aa..879a074c79 100644
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -44,6 +44,7 @@ cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
 "TB"                                    return 'DIR';
+"BT"                                    return 'DIR';
 ":"                                     return ':';
 "^"                                     return 'CARET'
 "options"\r?\n                          this.begin("options"); //
@@ -84,7 +85,7 @@ options
     | NL
     ;
 body
-    : /*empty*/ {$$ = []}
+    : /*emmpty*/ {$$ = []}
     | body line {$1.push($2); $$=$1;}
     ;
 line
diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index e7ffe6b8b7..ce9aa507e8 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -519,9 +519,9 @@ Here, we have changed the default main branch name to `MetroLine1`.
 
 ## Orientation (v10.3.0+)
 
-Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**.
+Mermaid supports three graph orientations: **Left-to-Right** (default), **Top-to-Bottom**, and **Bottom-to-Top**.
 
-You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`.
+You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)), `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) or `BT:` (for [**Bottom-to-Top**](#bottom-to-top-bt)) after `gitGraph`.
 
 ### Left to Right (default, `LR:`)
 
@@ -569,6 +569,29 @@ Usage example:
        commit
 ```
 
+### Bottom to Top (`BT:`) (v<MERMAID_RELEASE_VERSION>+)
+
+In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
+
+To orient the graph this way, you need to add `BT:` after gitGraph.
+
+Usage example:
+
+```mermaid-example
+    gitGraph BT:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 ## Parallel commits (v10.8.0+)
 
 Commits in Mermaid display temporal information in gitgraph by default. For example if two commits are one commit away from its parent, the commit that was made earlier is rendered closer to its parent. You can turn this off by enabling the `parallelCommits` flag.

From b914f48a91dacfddba0d221ef89f1b507a41fb56 Mon Sep 17 00:00:00 2001
From: JingyuMarcelLee <leemar@dickinson.edu>
Date: Wed, 20 Mar 2024 01:25:43 -0400
Subject: [PATCH 2/2] Minor spelling correction

---
 packages/mermaid/src/diagrams/git/parser/gitGraph.jison | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
index 879a074c79..07d1a3e410 100644
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -85,7 +85,7 @@ options
     | NL
     ;
 body
-    : /*emmpty*/ {$$ = []}
+    : /*empty*/ {$$ = []}
     | body line {$1.push($2); $$=$1;}
     ;
 line