From 66f388801670ff11da95299ccea2d7285287c4d3 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 15 Jan 2024 22:02:35 -0300
Subject: [PATCH] Revert merge

---
 .github/pr-labeler.yml                        |  26 +-
 .github/release-drafter.yml                   |   2 +
 .../workflows/pr-labeler-config-validator.yml |  23 ++
 .github/workflows/pr-labeler.yml              |  22 +-
 .github/workflows/release-draft.yml           |  10 +-
 README.md                                     |  16 -
 .../integration/rendering/gitGraph.spec.js    | 110 ------
 demos/git.html                                | 358 +-----------------
 demos/sequence.html                           |   7 -
 .../src/diagrams/class/classTypes.spec.ts     |  79 ----
 .../mermaid/src/diagrams/class/classTypes.ts  |   2 +-
 .../mermaid/src/diagrams/flowchart/flowDb.js  |   7 -
 .../flowchart/parser/flow-style.spec.js       |  24 --
 .../src/diagrams/git/gitGraphRenderer.js      |  91 ++---
 .../src/diagrams/sequence/sequenceRenderer.ts |  11 +-
 .../mermaid/src/diagrams/sequence/svgDraw.js  |   2 +-
 16 files changed, 87 insertions(+), 703 deletions(-)
 create mode 100644 .github/workflows/pr-labeler-config-validator.yml

diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml
index 15e1843276..0bbd8db66a 100644
--- a/.github/pr-labeler.yml
+++ b/.github/pr-labeler.yml
@@ -1,22 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json
-autolabeler:
-  - label: 'Type: Bug / Error'
-    branch:
-      - '/bug\/.+/'
-      - '/fix\/.+/'
-  - label: 'Type: Enhancement'
-    branch:
-      - '/feature\/.+/'
-      - '/feat\/.+/'
-  - label: 'Type: Other'
-    branch:
-      - '/other\/.+/'
-      - '/chore\/.+/'
-      - '/test\/.+/'
-      - '/refactor\/.+/'
-  - label: 'Area: Documentation'
-    branch:
-      - '/docs\/.+/'
-
-template: |
-  This field is unused, as we only use this config file for labeling PRs.
+'Type: Bug / Error': ['bug/*', fix/*]
+'Type: Enhancement': ['feature/*', 'feat/*']
+'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
+'Area: Documentation': ['docs/*']
diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
index 83138c3d46..e650f8dd11 100644
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -25,6 +25,8 @@ categories:
 change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
 sort-by: title
 sort-direction: ascending
+branches:
+  - develop
 exclude-labels:
   - 'Skip changelog'
 no-changes-template: 'This release contains minor changes and bugfixes.'
diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml
new file mode 100644
index 0000000000..8bdfed21bc
--- /dev/null
+++ b/.github/workflows/pr-labeler-config-validator.yml
@@ -0,0 +1,23 @@
+name: Validate PR Labeler Configuration
+on:
+  push:
+    paths:
+      - .github/workflows/pr-labeler-config-validator.yml
+      - .github/workflows/pr-labeler.yml
+      - .github/pr-labeler.yml
+  pull_request:
+    paths:
+      - .github/workflows/pr-labeler-config-validator.yml
+      - .github/workflows/pr-labeler.yml
+      - .github/pr-labeler.yml
+
+jobs:
+  pr-labeler:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      - name: Validate Configuration
+        uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
+        with:
+          configuration-path: .github/pr-labeler.yml
diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml
index b2fc1cc26e..0a53c6e424 100644
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@@ -1,31 +1,13 @@
 name: Apply labels to PR
 on:
   pull_request_target:
-    # required for pr-labeler to support PRs from forks
-    # ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ =======================
-    # Be very careful what you put in this GitHub Action workflow file to avoid
-    # malicious PRs from getting access to the Mermaid-js repo.
-    #
-    # Please read the following first before reviewing/merging:
-    # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target
-    # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
-    types: [opened, reopened, synchronize]
-
-permissions:
-  contents: read
+    types: [opened]
 
 jobs:
   pr-labeler:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read # read permission is required to read config file
-      pull-requests: write # write permission is required to label PRs
     steps:
       - name: Label PR
-        uses: release-drafter/release-drafter@v5
-        with:
-          config-name: pr-labeler.yml
-          disable-autolabeler: false
-          disable-releaser: true
+        uses: TimonVS/pr-labeler-action@v4
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml
index 8ad1b13ecd..a37b7bcf2a 100644
--- a/.github/workflows/release-draft.yml
+++ b/.github/workflows/release-draft.yml
@@ -5,19 +5,11 @@ on:
     branches:
       - develop
 
-permissions:
-  contents: read
-
 jobs:
   draft-release:
     runs-on: ubuntu-latest
-    permissions:
-      contents: write # write permission is required to create a github release
-      pull-requests: read # required to read PR titles/labels
     steps:
       - name: Draft Release
-        uses: release-drafter/release-drafter@v5
-        with:
-          disable-autolabeler: true
+        uses: toolmantim/release-drafter@v5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/README.md b/README.md
index cf21fdb8e6..ab2aeb2e73 100644
--- a/README.md
+++ b/README.md
@@ -44,22 +44,6 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 
 <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
-## Table of content
-
-<details>
-<summary>Expand contents</summary>
-
-- [About](#about)
-- [Examples](#examples)
-- [Release](#release)
-- [Related projects](#related-projects)
-- [Contributors](#contributors)
-- [Security and safe diagrams](#security-and-safe-diagrams)
-- [Reporting vulnerabilities](#reporting-vulnerabilities)
-- [Appreciation](#appreciation)
-
-</details>
-
 ## About
 
 <!-- <Main description>   -->
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 2aab34c343..9f040a36f0 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -701,114 +701,4 @@ gitGraph TB:
       {}
     );
   });
-  it('34: should render a simple gitgraph with two branches from same commit', () => {
-    imgSnapshotTest(
-      `gitGraph
-      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('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      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('36: should render GitGraph with branch that is not used immediately', () => {
-    imgSnapshotTest(
-      `gitGraph LR:
-      commit id:"1-abcdefg"
-      branch x
-      checkout main
-      commit id:"2-abcdefg"
-      checkout x
-      commit id:"3-abcdefg"
-      checkout main
-      merge x
-      `,
-      {}
-    );
-  });
-  it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      commit id:"1-abcdefg"
-      branch x
-      checkout main
-      commit id:"2-abcdefg"
-      checkout x
-      commit id:"3-abcdefg"
-      checkout main
-      merge x
-      `,
-      {}
-    );
-  });
-  it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
-    imgSnapshotTest(
-      `gitGraph LR:
-      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('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
-    imgSnapshotTest(
-      `gitGraph TB:
-      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
-      `,
-      {}
-    );
-  });
 });
diff --git a/demos/git.html b/demos/git.html
index 92e0e68635..f24217711e 100644
--- a/demos/git.html
+++ b/demos/git.html
@@ -14,364 +14,30 @@
   </head>
 
   <body>
-    <h1>Git graph demo</h1>
-    <h2>Simple "branch and merge" graph</h2>
+    <h1>Git diagram demo</h1>
     <pre class="mermaid">
     ---
-    title: Simple "branch and merge" (left-to-right)
+    title: Simple Git diagram
     ---
-    gitGraph LR:
+    gitGraph:
+    options
+    {
+    "nodeSpacing": 50,
+    "nodeRadius": 5
+    }
+    end
+    branch master
     commit
     branch newbranch
     checkout newbranch
     commit
-    checkout main
-    merge newbranch
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Simple "branch and merge" (top-to-bottom)
-    ---
-    gitGraph TB:
-    commit
-    branch newbranch
-    checkout newbranch
-    commit
-    checkout main
-    merge newbranch
-    </pre>
-    <h2>Continuous development graph</h2>
-    <pre class="mermaid">
-    ---
-    title: Continuous development (left-to-right)
-    ---
-    gitGraph LR:
     commit
-    branch develop
-    checkout develop
+    checkout master
     commit
-    checkout main
-    merge develop
-    checkout develop
-    commit
-    checkout main
-    merge develop
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Continuous development (top-to-bottom)
-    ---
-    gitGraph TB:
-    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">
-    ---
-    title: Merge feature to advanced main (left-to-right)
-    ---
-    gitGraph LR:
-    commit
-    branch newbranch
-    checkout newbranch
-    commit
-    checkout main
     commit
     merge newbranch
     </pre>
-    <pre class="mermaid">
-    ---
-    title: Merge feature to advanced main (top-to-bottom)
-    ---
-    gitGraph TB:
-    commit
-    branch newbranch
-    checkout newbranch
-    commit
-    checkout main
-    commit
-    merge newbranch
-    </pre>
-    <h2>Two-way merges</h2>
-    <pre class="mermaid">
-    ---
-    title: Two-way merges (left-to-right)
-    ---
-    gitGraph LR:
-    commit
-    branch develop
-    checkout develop
-    commit
-    checkout main
-    merge develop
-    commit
-    checkout develop
-    merge main
-    commit
-    checkout main
-    merge develop
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Two-way merges (top-to-bottom)
-    ---
-    gitGraph TB:
-    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">
-    ---
-    title: Cherry-pick from branch (left-to-right)
-    ---
-    gitGraph LR:
-    commit
-    branch newbranch
-    checkout newbranch
-    commit id: "Pick me"
-    checkout main
-    commit
-    checkout newbranch
-    commit
-    checkout main
-    cherry-pick id: "Pick me"
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Cherry-pick from branch (top-to-bottom)
-    ---
-    gitGraph TB:
-    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">
-    ---
-    title: Cherry-pick from main (left-to-right)
-    ---
-    gitGraph LR:
-    commit
-    branch develop
-    commit
-    checkout main
-    commit id:"A"
-    checkout develop
-    commit
-    cherry-pick id: "A"
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Cherry-pick from main (top-to-bottom)
-    ---
-    gitGraph TB:
-    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">
-    ---
-    title: Cherry-pick then merge (left-to-right)
-    ---
-    gitGraph LR:
-    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>
-    <pre class="mermaid">
-    ---
-    title: Cherry-pick then merge (top-to-bottom)
-    ---
-    gitGraph TB:
-    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">
-    ---
-    title: Merge from main onto undeveloped branch (left-to-right)
-    ---
-    gitGraph LR:
-    commit
-    branch develop
-    commit
-    checkout main
-    commit
-    checkout develop
-    merge main
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Merge from main onto undeveloped branch (top-to-bottom)
-    ---
-    gitGraph TB:
-    commit
-    branch develop
-    commit
-    checkout main
-    commit
-    checkout develop
-    merge main
-    </pre>
-    <h2>Merge from main onto developed branch graph</h2>
-    <pre class="mermaid">
-    ---
-    title: Merge from main onto developed branch (left-to-right)
-    ---
-    gitGraph LR:
-    commit
-    branch develop
-    commit
-    checkout main
-    commit
-    checkout develop
-    commit
-    merge main
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Merge from main onto developed branch (top-to-bottom)
-    ---
-    gitGraph TB:
-    commit
-    branch develop
-    commit
-    checkout main
-    commit
-    checkout develop
-    commit
-    merge main
-    </pre>
-    <h2>Two branches from same commit graph</h2>
-    <pre class="mermaid">
-    ---
-    title: Two branches from same commit (left-to-right)
-    ---
-    gitGraph LR:
-    commit
-    commit
-    branch feature-001
-    commit
-    commit
-    checkout main
-    branch feature-002
-    commit
-    checkout feature-001
-    merge feature-002
-    </pre>
-    <pre class="mermaid">
-    ---
-    title: Two branches from same commit (top-to-bottom)
-    ---
-    gitGraph TB:
-    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">
-    ---
-    title: Three branches and a cherry-pick from each (left-to-right)
-    ---
-    gitGraph LR:
-    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>
-    <pre class="mermaid">
-    ---
-    title: Three branches and a cherry-pick from each (top-to-bottom)
-    ---
-    gitGraph TB:
-    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/demos/sequence.html b/demos/sequence.html
index 3345fed17a..b2733a384e 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -164,13 +164,6 @@ <h1>Sequence diagram demos</h1>
       end
     </pre>
 
-    <pre class="mermaid">
-    sequenceDiagram
-      actor Alice
-      actor John
-      Alice-xJohn: Hello John, how are you?
-      John--xAlice: Great!
-    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
diff --git a/packages/mermaid/src/diagrams/class/classTypes.spec.ts b/packages/mermaid/src/diagrams/class/classTypes.spec.ts
index 5a5ffa4dbd..2b360d4473 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.spec.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.spec.ts
@@ -681,82 +681,3 @@ describe('given text representing a method, ', function () {
     });
   });
 });
-
-describe('given text representing an attribute', () => {
-  describe('when the attribute has no modifiers', () => {
-    it('should parse the display text correctly', () => {
-      const str = 'name String';
-
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-  });
-
-  describe('when the attribute has public "+" modifier', () => {
-    it('should parse the display text correctly', () => {
-      const str = '+name String';
-
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('+name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-  });
-
-  describe('when the attribute has protected "#" modifier', () => {
-    it('should parse the display text correctly', () => {
-      const str = '#name String';
-
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('#name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-  });
-
-  describe('when the attribute has private "-" modifier', () => {
-    it('should parse the display text correctly', () => {
-      const str = '-name String';
-
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('-name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-  });
-
-  describe('when the attribute has internal "~" modifier', () => {
-    it('should parse the display text correctly', () => {
-      const str = '~name String';
-
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('~name String');
-      expect(displayDetails.cssStyle).toBe('');
-    });
-  });
-
-  describe('when the attribute has static "$" modifier', () => {
-    it('should parse the display text correctly and apply static css style', () => {
-      const str = 'name String$';
-
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('name String');
-      expect(displayDetails.cssStyle).toBe(staticCssStyle);
-    });
-  });
-
-  describe('when the attribute has abstract "*" modifier', () => {
-    it('should parse the display text correctly and apply abstract css style', () => {
-      const str = 'name String*';
-
-      const displayDetails = new ClassMember(str, 'attribute').getDisplayDetails();
-
-      expect(displayDetails.displayText).toBe('name String');
-      expect(displayDetails.cssStyle).toBe(abstractCssStyle);
-    });
-  });
-});
diff --git a/packages/mermaid/src/diagrams/class/classTypes.ts b/packages/mermaid/src/diagrams/class/classTypes.ts
index f112dd4dde..e288eefde8 100644
--- a/packages/mermaid/src/diagrams/class/classTypes.ts
+++ b/packages/mermaid/src/diagrams/class/classTypes.ts
@@ -106,7 +106,7 @@ export class ClassMember {
         this.visibility = firstChar as Visibility;
       }
 
-      if (lastChar.match(/[$*]/)) {
+      if (lastChar.match(/[*?]/)) {
         potentialClassifier = lastChar;
       }
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 9a693aabf5..da67248f12 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -201,13 +201,6 @@ export const updateLinkInterpolate = function (positions, interp) {
  */
 export const updateLink = function (positions, style) {
   positions.forEach(function (pos) {
-    if (pos >= edges.length) {
-      throw new Error(
-        `The index ${pos} for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and ${
-          edges.length - 1
-        }. (Help: Ensure that the index is within the range of existing edges.)`
-      );
-    }
     if (pos === 'default') {
       edges.defaultStyle = style;
     } else {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
index 5b0f740bd9..1ab7543085 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-style.spec.js
@@ -286,30 +286,6 @@ describe('[Style] when parsing', () => {
     expect(edges[0].type).toBe('arrow_point');
   });
 
-  it('should handle style definitions within number of edges', function () {
-    expect(() =>
-      flow.parser
-        .parse(
-          `graph TD
-    A-->B
-    linkStyle 1 stroke-width:1px;`
-        )
-        .toThrow(
-          'The index 1 for linkStyle is out of bounds. Valid indices for linkStyle are between 0 and 0. (Help: Ensure that the index is within the range of existing edges.)'
-        )
-    );
-  });
-
-  it('should handle style definitions within number of edges', function () {
-    const res = flow.parser.parse(`graph TD
-    A-->B
-    linkStyle 0 stroke-width:1px;`);
-
-    const edges = flow.parser.yy.getEdges();
-
-    expect(edges[0].style[0]).toBe('stroke-width:1px');
-  });
-
   it('should handle multi-numbered style definitions with more then 1 digit in a row', function () {
     const res = flow.parser.parse(
       'graph TD\n' +
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 66e2277dee..2b88cfe7ef 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -338,34 +338,26 @@ const drawCommits = (svg, commits, modifyGraph) => {
 };
 
 /**
- * Detect if there are commits
- * between commitA's x-position
- * and commitB's x-position on the
- * same branch as commitA, where
- * commitA isn't main
+ * Detect if there are other commits between commit1's x-position and commit2's x-position on the
+ * same branch as commit2.
  *
- * @param {any} commitA
- * @param {any} commitB
- * @param branchToGetCurve
- * @param p1
- * @param p2
+ * @param {any} commit1
+ * @param {any} commit2
  * @param allCommits
- * @returns {boolean}
- * If there are commits between
- * commitA's x-position
- * and commitB's x-position
- * on the source branch, where
- * source branch is not main
- * return true
+ * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position
  */
-const shouldRerouteArrow = (commitA, commitB, p1, p2, allCommits) => {
-  const commitBIsFurthest = dir === 'TB' ? 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;
-  return Object.values(allCommits).some((commitX) => {
-    return isBetweenCommits(commitX) && isOnBranchToGetCurve(commitX);
+const hasOverlappingCommits = (commit1, commit2, allCommits) => {
+  // Find commits on the same branch as commit2
+  const keys = Object.keys(allCommits);
+  const overlappingComits = keys.filter((key) => {
+    return (
+      allCommits[key].branch === commit2.branch &&
+      allCommits[key].seq > commit1.seq &&
+      allCommits[key].seq < commit2.seq
+    );
   });
+
+  return overlappingComits.length > 0;
 };
 
 /**
@@ -396,61 +388,49 @@ const findLane = (y1, y2, depth = 0) => {
  * Draw the lines between the commits. They were arrows initially.
  *
  * @param {any} svg
- * @param {any} commitA
- * @param {any} commitB
+ * @param {any} commit1
+ * @param {any} commit2
  * @param {any} allCommits
  */
-const drawArrow = (svg, commitA, commitB, allCommits) => {
-  const p1 = commitPos[commitA.id]; // arrowStart
-  const p2 = commitPos[commitB.id]; // arrowEnd
-  const arrowNeedsRerouting = shouldRerouteArrow(commitA, commitB, p1, p2, allCommits);
-  // log.debug('drawArrow', p1, p2, arrowNeedsRerouting, commitA.id, commitB.id);
-
-  // Lower-right quadrant logic; top-left is 0,0
+const drawArrow = (svg, commit1, commit2, allCommits) => {
+  const p1 = commitPos[commit1.id];
+  const p2 = commitPos[commit2.id];
+  const overlappingCommits = hasOverlappingCommits(commit1, commit2, allCommits);
+  // log.debug('drawArrow', p1, p2, overlappingCommits, commit1.id, commit2.id);
 
   let arc = '';
   let arc2 = '';
   let radius = 0;
   let offset = 0;
-  let colorClassNum = branchPos[commitB.branch].index;
+  let colorClassNum = branchPos[commit2.branch].index;
   let lineDef;
-  if (arrowNeedsRerouting) {
+  if (overlappingCommits) {
     arc = 'A 10 10, 0, 0, 0,';
     arc2 = 'A 10 10, 0, 0, 1,';
     radius = 10;
     offset = 10;
+    // Figure out the color of the arrow,arrows going down take the color from the destination branch
+    colorClassNum = branchPos[commit2.branch].index;
 
     const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y);
     const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x);
 
     if (dir === 'TB') {
       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}`;
       } 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} ${arc} ${lineX} ${
           p1.y + offset
         } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
       }
     } else {
       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}`;
       } else {
-        // Source commit is on branch positioned below destination commit
-        // so render arrow upward with colour of source branch
-        colorClassNum = branchPos[commitA.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
           p1.x + offset
         } ${lineY} L ${p2.x - radius} ${lineY} ${arc} ${p2.x} ${lineY - offset} L ${p2.x} ${p2.y}`;
@@ -465,7 +445,7 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
         offset = 20;
 
         // Figure out the color of the arrow,arrows going down take the color from the destination branch
-        colorClassNum = branchPos[commitB.branch].index;
+        colorClassNum = branchPos[commit2.branch].index;
 
         lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
           p1.y + offset
@@ -478,14 +458,14 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
         offset = 20;
 
         // Arrows going up take the color from the source branch
-        colorClassNum = branchPos[commitA.branch].index;
+        colorClassNum = branchPos[commit1.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 (p1.x === p2.x) {
-        colorClassNum = branchPos[commitA.branch].index;
+        colorClassNum = branchPos[commit1.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}`;
@@ -495,8 +475,10 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
         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;
+
+        // Figure out the color of the arrow,arrows going down take the color from the destination branch
+        colorClassNum = branchPos[commit2.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}`;
@@ -505,15 +487,16 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
         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;
+        colorClassNum = branchPos[commit1.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 (p1.y === p2.y) {
-        colorClassNum = branchPos[commitA.branch].index;
+        colorClassNum = branchPos[commit1.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}`;
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 7c38a80163..b8962395ee 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -829,11 +829,6 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
   }
 
-  log.debug('createdActors', createdActors);
-  log.debug('destroyedActors', destroyedActors);
-
-  drawActors(diagram, actors, actorKeys, false);
-
   // Draw the messages/signals
   let sequenceIndex = 1;
   let sequenceIndexStep = 1;
@@ -1033,12 +1028,14 @@ export const draw = function (_text: string, id: string, _version: string, diagO
     }
   });
 
-  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
+  log.debug('createdActors', createdActors);
+  log.debug('destroyedActors', destroyedActors);
 
+  drawActors(diagram, actors, actorKeys, false);
+  messagesToDraw.forEach((e) => drawMessage(diagram, e.messageModel, e.lineStartY, diagObj));
   if (conf.mirrorActors) {
     drawActors(diagram, actors, actorKeys, true);
   }
-
   backgrounds.forEach((e) => svgDraw.drawBackgroundRect(diagram, e));
   fixLifeLineHeights(diagram, actors, actorKeys, conf);
 
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index 31e6dc2a89..f81147c10c 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -324,7 +324,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 5;
 
-  const boxpluslineGroup = elem.append('g');
+  const boxpluslineGroup = elem.append('g').lower();
   var g = boxpluslineGroup;
 
   if (!isFooter) {