From 6cbd24f704011a48db95f14f77ab6e5b38c33279 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:50:42 +0300
Subject: [PATCH 01/30] convert file from js into ts

---
 cypress/helpers/{util.js => util.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename cypress/helpers/{util.js => util.ts} (100%)

diff --git a/cypress/helpers/util.js b/cypress/helpers/util.ts
similarity index 100%
rename from cypress/helpers/util.js
rename to cypress/helpers/util.ts

From a2cf41c9c04c2da7c1ebcbc402dfc6d92f65aa4f Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:53:01 +0300
Subject: [PATCH 02/30] convert cypress/helpers/util.js into ts

- add types for parameter and returned value and variables
- change the deperated `unescape` into `decodeURIComponent`
- create `CypressConfig` and `CypressMermaidConfig` and `CodeObject` types
- add default value for some parameter
---
 cypress/helpers/util.ts | 83 +++++++++++++++++++++++++++++------------
 1 file changed, 60 insertions(+), 23 deletions(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index 4d13b3590..f83cb7dba 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -1,18 +1,36 @@
-const utf8ToB64 = (str) => {
-  return window.btoa(unescape(encodeURIComponent(str)));
+import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
+
+type CypressConfig = {
+  listUrl?: boolean;
+  listId?: string;
+  name?: string;
+};
+type CypressMermaidConfig = MermaidConfig & CypressConfig;
+
+interface CodeObject {
+  code: string;
+  mermaid: CypressMermaidConfig;
+}
+
+const utf8ToB64 = (str: string): string => {
+  return window.btoa(decodeURIComponent(encodeURIComponent(str)));
 };
 
-const batchId = 'mermaid-batch' + new Date().getTime();
+const batchId: string = 'mermaid-batch' + new Date().getTime();
 
-export const mermaidUrl = (graphStr, options, api) => {
-  const obj = {
+export const mermaidUrl = (
+  graphStr: string,
+  options: CypressMermaidConfig,
+  api: boolean
+): string => {
+  const codeObject: CodeObject = {
     code: graphStr,
     mermaid: options,
   };
-  const objStr = JSON.stringify(obj);
-  let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr);
+  const objStr: string = JSON.stringify(codeObject);
+  let url: string = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
   if (api) {
-    url = 'http://localhost:9000/xss.html?graph=' + graphStr;
+    url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
   if (options.listUrl) {
@@ -22,9 +40,14 @@ export const mermaidUrl = (graphStr, options, api) => {
   return url;
 };
 
-export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => {
-  cy.log(_options);
-  const options = Object.assign(_options);
+export const imgSnapshotTest = (
+  graphStr: string,
+  _options: CypressMermaidConfig = {},
+  api: boolean = false,
+  validation?: any
+): void => {
+  cy.log(JSON.stringify(_options));
+  const options: CypressMermaidConfig = Object.assign(_options);
   if (!options.fontFamily) {
     options.fontFamily = 'courier';
   }
@@ -44,28 +67,42 @@ export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation
     options.sequence.actorFontFamily = 'courier';
   }
   if (!options.fontSize) {
-    options.fontSize = '16px';
+    options.fontSize = 16;
   }
-  const url = mermaidUrl(graphStr, options, api);
+
+  const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options, validation);
 };
 
-export const urlSnapshotTest = (url, _options, api = false, validation) => {
-  const options = Object.assign(_options);
+export const urlSnapshotTest = (
+  url: string,
+  _options: CypressMermaidConfig,
+  _api: boolean = false,
+  validation?: any
+): void => {
+  const options: CypressMermaidConfig = Object.assign(_options);
   openURLAndVerifyRendering(url, options, validation);
 };
 
-export const renderGraph = (graphStr, options, api) => {
-  const url = mermaidUrl(graphStr, options, api);
+export const renderGraph = (
+  graphStr: string,
+  options: CypressMermaidConfig = {},
+  api: boolean = false
+): void => {
+  const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options);
 };
 
-export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
-  const useAppli = Cypress.env('useAppli');
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+export const openURLAndVerifyRendering = (
+  url: string,
+  options: CypressMermaidConfig,
+  validation?: any
+): void => {
+  const useAppli: boolean = Cypress.env('useAppli');
+  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
-    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
+    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
@@ -83,9 +120,9 @@ export const openURLAndVerifyRendering = (url, options, validation = undefined)
   }
 
   if (useAppli) {
-    cy.log('Check eyes' + Cypress.spec.name);
+    cy.log(`Check eyes ${Cypress.spec.name}`);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes' + Cypress.spec.name);
+    cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);

From 48fc60f8666b597a2b2e134257c45e40df8a7c69 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 20:58:39 +0300
Subject: [PATCH 03/30] fix wrong config paramater in some cypress spec

- flowchart
- mindmap
---
 .../rendering/flowchart-elk.spec.js           | 22 ++++++++---------
 .../rendering/flowchart-v2.spec.js            | 24 +++++++++----------
 cypress/integration/rendering/mindmap.spec.ts |  3 +--
 3 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 4f90646a2..10e95af5c 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -681,7 +681,7 @@ title: Simple flowchart
 flowchart-elk TD
 A --> B
 `,
-      { titleTopMargin: 0 }
+      { flowchart: { titleTopMargin: 0 } }
     );
   });
   it('elk: should include classes on the edges', () => {
@@ -710,7 +710,7 @@ flowchart-elk LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -726,7 +726,7 @@ flowchart-elk LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -736,7 +736,7 @@ flowchart-elk LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -749,7 +749,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -766,7 +766,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
@@ -782,7 +782,7 @@ flowchart-elk LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -798,7 +798,7 @@ flowchart-elk LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -808,7 +808,7 @@ flowchart-elk LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -821,7 +821,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -838,7 +838,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 305c55b21..091482f35 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -671,7 +671,7 @@ title: Simple flowchart
 flowchart TD
 A --> B
 `,
-      { titleTopMargin: 0 }
+      { flowchart: { titleTopMargin: 0 } }
     );
   });
   it('3192: It should be possieble to render flowcharts with invisible edges', () => {
@@ -682,7 +682,7 @@ title: Simple flowchart with invisible edges
 flowchart TD
 A ~~~ B
 `,
-      { titleTopMargin: 0 }
+      { flowchart: { titleTopMargin: 0 } }
     );
   });
   it('4023: Should render html labels with images and-or text correctly', () => {
@@ -707,7 +707,7 @@ flowchart LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -723,7 +723,7 @@ flowchart LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -733,7 +733,7 @@ flowchart LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -746,7 +746,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -763,7 +763,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
@@ -779,7 +779,7 @@ flowchart LR
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
     classDef someclass fill:#f96
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('With formatting in a node', () => {
@@ -795,7 +795,7 @@ flowchart LR
   b --> d(The dog in the hog)
   c --> d
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('New line in node and formatted edge label', () => {
@@ -805,7 +805,7 @@ flowchart LR
 b("\`The dog in **the** hog.(1)
 NL\`") --"\`1o **bold**\`"--> c
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Wrapping long text with a new line', () => {
@@ -818,7 +818,7 @@ Word!
 Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
       it('Sub graphs and markdown strings', () => {
@@ -835,7 +835,7 @@ subgraph "\`**Two**\`"
 end
 
 `,
-          { titleTopMargin: 0 }
+          { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts
index e390beaee..90d5d9edd 100644
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -242,8 +242,7 @@ mindmap
     a second line 😎\`]
       id2[\`The dog in **the** hog... a *very long text* about it
 Word!\`]
-`,
-        { titleTopMargin: 0 }
+`
       );
     });
   });

From 2b0f078c994409883359121322515e906adb40ee Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 27 Jun 2023 21:05:44 +0300
Subject: [PATCH 04/30] resolve lint issues for `no-inferrable-types`

---
 cypress/helpers/util.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index f83cb7dba..e2c330f61 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -28,7 +28,7 @@ export const mermaidUrl = (
     mermaid: options,
   };
   const objStr: string = JSON.stringify(codeObject);
-  let url: string = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
+  let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
   if (api) {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
@@ -43,7 +43,7 @@ export const mermaidUrl = (
 export const imgSnapshotTest = (
   graphStr: string,
   _options: CypressMermaidConfig = {},
-  api: boolean = false,
+  api = false,
   validation?: any
 ): void => {
   cy.log(JSON.stringify(_options));
@@ -77,7 +77,7 @@ export const imgSnapshotTest = (
 export const urlSnapshotTest = (
   url: string,
   _options: CypressMermaidConfig,
-  _api: boolean = false,
+  _api = false,
   validation?: any
 ): void => {
   const options: CypressMermaidConfig = Object.assign(_options);
@@ -87,7 +87,7 @@ export const urlSnapshotTest = (
 export const renderGraph = (
   graphStr: string,
   options: CypressMermaidConfig = {},
-  api: boolean = false
+  api = false
 ): void => {
   const url: string = mermaidUrl(graphStr, options, api);
   openURLAndVerifyRendering(url, options);

From 88856a721f17b4d16337ecb88253d5d7297e22ce Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 11:28:04 +0530
Subject: [PATCH 05/30] Support MERMAID_RELEASE_VERSION in docs

---
 docs/community/development.md                 |  3 ++
 packages/mermaid/package.json                 | 11 +++---
 .../scripts/update-release-version.mts        | 34 +++++++++++++++++++
 packages/mermaid/src/docs.cli.mts             |  3 ++
 packages/mermaid/src/docs.mts                 | 24 ++++++-------
 .../mermaid/src/docs/community/development.md |  3 ++
 6 files changed, 59 insertions(+), 19 deletions(-)
 create mode 100644 packages/mermaid/scripts/update-release-version.mts
 create mode 100644 packages/mermaid/src/docs.cli.mts

diff --git a/docs/community/development.md b/docs/community/development.md
index 90f728e15..0634759f5 100644
--- a/docs/community/development.md
+++ b/docs/community/development.md
@@ -223,6 +223,9 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated to users know that things have changed and added!
+If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+
+eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index afbbed2e6..fd5a459a0 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -25,14 +25,15 @@
   "scripts": {
     "clean": "rimraf dist",
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
-    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
-    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
+    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts",
+    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts --verify",
+    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
-    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
+    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
+    "docs:release-version": "ts-node-esm scripts/update-release-version.mts",
     "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
     "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
     "release": "pnpm build",
diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts
new file mode 100644
index 000000000..edd2017b9
--- /dev/null
+++ b/packages/mermaid/scripts/update-release-version.mts
@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+
+/**
+ * @file Update the MERMAID_RELEASE_VERSION placeholder in the documentation source files with the current version of mermaid.
+ * So contributors adding new features will only have to add the placeholder and not worry about updating the version number.
+ *
+ */
+import { posix } from 'path';
+import {
+  getGlobs,
+  getFilesFromGlobs,
+  SOURCE_DOCS_DIR,
+  readSyncedUTF8file,
+  MERMAID_RELEASE_VERSION,
+} from '../src/docs.mjs';
+import { writeFile } from 'fs/promises';
+
+const main = async () => {
+  const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
+  const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
+  mdFileGlobs.push('!**/community/development.md');
+  const mdFiles = await getFilesFromGlobs(mdFileGlobs);
+  mdFiles.sort();
+  for (const mdFile of mdFiles) {
+    const content = readSyncedUTF8file(mdFile);
+    const updatedContent = content.replace(/<MERMAID_RELEASE_VERSION>/g, MERMAID_RELEASE_VERSION);
+    if (content !== updatedContent) {
+      await writeFile(mdFile, updatedContent);
+      console.log(`Updated MERMAID_RELEASE_VERSION in ${mdFile}`);
+    }
+  }
+};
+
+void main();
diff --git a/packages/mermaid/src/docs.cli.mts b/packages/mermaid/src/docs.cli.mts
new file mode 100644
index 000000000..067eec1c5
--- /dev/null
+++ b/packages/mermaid/src/docs.cli.mts
@@ -0,0 +1,3 @@
+import { processDocs } from './docs.mjs';
+
+void processDocs();
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 356cd3cd1..e11c6104d 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -27,8 +27,6 @@
  *   get their absolute paths. Ensures that the location of those 2 directories is not dependent on
  *   where this file resides.
  *
- * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with
- *   it.)
  */
 import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs';
 import { exec } from 'child_process';
@@ -46,9 +44,9 @@ import mm from 'micromatch';
 import flatmap from 'unist-util-flatmap';
 import { visit } from 'unist-util-visit';
 
-const MERMAID_MAJOR_VERSION = (
-  JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
-).split('.')[0];
+export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8'))
+  .version as string;
+const MERMAID_MAJOR_VERSION = MERMAID_RELEASE_VERSION.split('.')[0];
 const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com';
 
 const MERMAID_KEYWORD = 'mermaid';
@@ -71,7 +69,7 @@ const vitepress: boolean = process.argv.includes('--vitepress');
 const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
 
 // These paths are from the root of the mono-repo, not from the mermaid subdirectory
-const SOURCE_DOCS_DIR = 'src/docs';
+export const SOURCE_DOCS_DIR = 'src/docs';
 const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs';
 
 const LOGMSG_TRANSFORMED = 'transformed';
@@ -158,7 +156,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo
   logWasOrShouldBeTransformed(fileInFinalDocDir, doCopy);
 };
 
-const readSyncedUTF8file = (filename: string): string => {
+export const readSyncedUTF8file = (filename: string): string => {
   return readFileSync(filename, 'utf8');
 };
 
@@ -336,7 +334,7 @@ import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/rea
 /**
  * Transforms the given JSON Schema into Markdown documentation
  */
-async function transormJsonSchema(file: string) {
+async function transformJsonSchema(file: string) {
   const yamlContents = readSyncedUTF8file(file);
   const jsonSchema = load(yamlContents, {
     filename: file,
@@ -480,7 +478,7 @@ const transformHtml = (filename: string) => {
   copyTransformedContents(filename, !verifyOnly, formattedHTML);
 };
 
-const getGlobs = (globs: string[]): string[] => {
+export const getGlobs = (globs: string[]): string[] => {
   globs.push('!**/dist/**', '!**/redirect.spec.ts', '!**/landing/**', '!**/node_modules/**');
   if (!vitepress) {
     globs.push(
@@ -494,12 +492,12 @@ const getGlobs = (globs: string[]): string[] => {
   return globs;
 };
 
-const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
+export const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
   return await globby(globs, { dot: true });
 };
 
 /** Main method (entry point) */
-const main = async () => {
+export const processDocs = async () => {
   if (verifyOnly) {
     console.log('Verifying that all files are in sync with the source files');
   }
@@ -509,7 +507,7 @@ const main = async () => {
 
   if (vitepress) {
     console.log(`${action} 1 .schema.yaml file`);
-    await transormJsonSchema('src/schemas/config.schema.yaml');
+    await transformJsonSchema('src/schemas/config.schema.yaml');
   } else {
     // skip because this creates so many Markdown files that it lags git
     console.log('Skipping 1 .schema.yaml file');
@@ -577,5 +575,3 @@ const main = async () => {
       });
   }
 };
-
-void main();
diff --git a/packages/mermaid/src/docs/community/development.md b/packages/mermaid/src/docs/community/development.md
index a5aa39539..93146f0c3 100644
--- a/packages/mermaid/src/docs/community/development.md
+++ b/packages/mermaid/src/docs/community/development.md
@@ -212,6 +212,9 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated to users know that things have changed and added!
+If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+
+eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 

From 79d38cef4b2dde04899ca8e74cdec20f2a03f03b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 11:32:00 +0530
Subject: [PATCH 06/30] Run `docs:release-version` in CI

---
 .github/workflows/publish-docs.yml | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
index f63e58750..d66d61a26 100644
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -36,6 +36,19 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
+      - name: Update release verion
+        run: |
+          pnpm --filter mermaid run docs:release-version
+          pnpm --filter mermaid run docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        with:
+          add: '["docs", "packages/mermaid/src/docs"]'
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'chore: Update MERMAID_RELEASE_VERSION in docs'
+
       - name: Setup Pages
         uses: actions/configure-pages@v3
 

From 962ff73fc3d6a1813f364359ed3b7aeec176c631 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 15:56:30 +0530
Subject: [PATCH 07/30] Batch by commit

---
 .github/workflows/e2e.yml | 1 +
 cypress/helpers/util.ts   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 6777a1e4f..3e6966677 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -45,6 +45,7 @@ jobs:
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
+          CYPRESS_COMMIT: ${{ github.sha }}
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v3
         # Run step only pushes to develop and pull_requests
diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index e2c330f61..2e9254e6a 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -16,7 +16,7 @@ const utf8ToB64 = (str: string): string => {
   return window.btoa(decodeURIComponent(encodeURIComponent(str)));
 };
 
-const batchId: string = 'mermaid-batch' + new Date().getTime();
+const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();
 
 export const mermaidUrl = (
   graphStr: string,

From 07df9eeb609f9c4f608942a047641c812f442f81 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 15:57:05 +0530
Subject: [PATCH 08/30] Rename docs.cli.mts

---
 .vscode/launch.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 83b80fa40..01ed07046 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -17,7 +17,7 @@
       "name": "Docs generation",
       "type": "node",
       "request": "launch",
-      "args": ["src/docs.mts"],
+      "args": ["src/docs.cli.mts"],
       "runtimeArgs": ["--loader", "ts-node/esm"],
       "cwd": "${workspaceRoot}/packages/mermaid",
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],

From 0cdf801884aacc4cd6bc91ab3d69d5c1bde6b67f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 7 Jul 2023 17:21:18 +0530
Subject: [PATCH 09/30] Fix import file extension

---
 cypress/integration/other/configuration.spec.js           | 2 +-
 cypress/integration/other/external-diagrams.spec.js       | 2 +-
 cypress/integration/other/ghsa.spec.js                    | 2 +-
 cypress/integration/other/xss.spec.js                     | 2 +-
 cypress/integration/rendering/appli.spec.js               | 2 +-
 cypress/integration/rendering/c4.spec.js                  | 2 +-
 cypress/integration/rendering/classDiagram-v2.spec.js     | 2 +-
 cypress/integration/rendering/classDiagram.spec.js        | 2 +-
 cypress/integration/rendering/conf-and-directives.spec.js | 2 +-
 cypress/integration/rendering/current.spec.js             | 2 +-
 cypress/integration/rendering/debug.spec.js               | 2 +-
 cypress/integration/rendering/erDiagram.spec.js           | 2 +-
 cypress/integration/rendering/flowchart-elk.spec.js       | 2 +-
 cypress/integration/rendering/flowchart-v2.spec.js        | 2 +-
 cypress/integration/rendering/flowchart.spec.js           | 2 +-
 cypress/integration/rendering/gantt.spec.js               | 2 +-
 cypress/integration/rendering/gitGraph.spec.js            | 2 +-
 cypress/integration/rendering/info.spec.ts                | 2 +-
 cypress/integration/rendering/journey.spec.js             | 2 +-
 cypress/integration/rendering/mindmap.spec.ts             | 2 +-
 cypress/integration/rendering/pie.spec.js                 | 2 +-
 cypress/integration/rendering/quadrantChart.spec.js       | 2 +-
 cypress/integration/rendering/requirement.spec.js         | 2 +-
 cypress/integration/rendering/sankey.spec.ts              | 2 +-
 cypress/integration/rendering/sequencediagram.spec.js     | 2 +-
 cypress/integration/rendering/stateDiagram-v2.spec.js     | 2 +-
 cypress/integration/rendering/stateDiagram.spec.js        | 2 +-
 cypress/integration/rendering/theme.spec.js               | 2 +-
 cypress/integration/rendering/timeline.spec.ts            | 2 +-
 cypress/integration/rendering/zenuml.spec.js              | 2 +-
 30 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index 6df7edd84..7cbc5d105 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.js';
+import { renderGraph } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
index 4ade11e81..704222f2f 100644
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util.js';
+import { urlSnapshotTest } from '../../helpers/util.ts';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {
diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js
index 912f35728..48eb57a91 100644
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -1,4 +1,4 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';
+import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {
diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
index 76b2c47f2..fa4ca4fc8 100644
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/integration/other/xss.spec.js
@@ -1,4 +1,4 @@
-import { mermaidUrl } from '../../helpers/util.js';
+import { mermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js
index 462fe869c..5def96815 100644
--- a/cypress/integration/rendering/appli.spec.js
+++ b/cypress/integration/rendering/appli.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Git Graph diagram', () => {
   it('1: should render a simple gitgraph with commit on main branch', () => {
diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js
index 0cf128ff6..59af6504b 100644
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('C4 diagram', () => {
   it('should render a simple C4Context diagram', () => {
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 2e7a1cbd7..be6aa643b 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index 427b4cf0b..aa0483ca3 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js
index 3fc0f7f02..bc17f6236 100644
--- a/cypress/integration/rendering/conf-and-directives.spec.js
+++ b/cypress/integration/rendering/conf-and-directives.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Configuration and directives - nodes should be light blue', () => {
   it('No config - use default', () => {
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index e0b36d53a..d7bc08105 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
index afde4af3e..56ad0f15f 100644
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/integration/rendering/debug.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 0c6eaa838..b14c83e6a 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 10e95af5c..221806b07 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 091482f35..4cf563e02 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index d25043d28..4f6d6478e 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index cb65f73b0..6cc7b6391 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Gantt diagram', () => {
   beforeEach(() => {
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 43f91a983..8cf710413 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Git Graph diagram', () => {
   it('1: should render a simple gitgraph with commit on main branch', () => {
diff --git a/cypress/integration/rendering/info.spec.ts b/cypress/integration/rendering/info.spec.ts
index 3db74c980..97b384eb5 100644
--- a/cypress/integration/rendering/info.spec.ts
+++ b/cypress/integration/rendering/info.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('info diagram', () => {
   it('should handle an info definition', () => {
diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js
index 6f9d9bb60..d8bef6d1b 100644
--- a/cypress/integration/rendering/journey.spec.js
+++ b/cypress/integration/rendering/journey.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('User journey diagram', () => {
   it('Simple test', () => {
diff --git a/cypress/integration/rendering/mindmap.spec.ts b/cypress/integration/rendering/mindmap.spec.ts
index 90d5d9edd..a77459f58 100644
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 /**
  * Check whether the SVG Element has a Mindmap root
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index 8a89a0cde..01b248486 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Pie Chart', () => {
   it('should render a simple pie diagram', () => {
diff --git a/cypress/integration/rendering/quadrantChart.spec.js b/cypress/integration/rendering/quadrantChart.spec.js
index 4bcf58b60..50520eb1a 100644
--- a/cypress/integration/rendering/quadrantChart.spec.js
+++ b/cypress/integration/rendering/quadrantChart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Quadrant Chart', () => {
   it('should render if only chart type is provided', () => {
diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js
index 0bf9014bf..f33ae7a0c 100644
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Requirement diagram', () => {
   it('sample', () => {
diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts
index e334b898b..ad0d75f18 100644
--- a/cypress/integration/rendering/sankey.spec.ts
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Sankey Diagram', () => {
   it('should render a simple example', () => {
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 7d36c1ff1..765913824 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 700791621..9a1a27abe 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index 28c24d398..01e7a2b44 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {
diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js
index ef3bd9a4b..c84ad0c4b 100644
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/integration/rendering/theme.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('themeCSS balancing, it', () => {
   it('should not allow unbalanced CSS definitions', () => {
diff --git a/cypress/integration/rendering/timeline.spec.ts b/cypress/integration/rendering/timeline.spec.ts
index 6fae82fb4..68da01d50 100644
--- a/cypress/integration/rendering/timeline.spec.ts
+++ b/cypress/integration/rendering/timeline.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Timeline diagram', () => {
   it('1: should render a simple timeline with no specific sections', () => {
diff --git a/cypress/integration/rendering/zenuml.spec.js b/cypress/integration/rendering/zenuml.spec.js
index f317fbe82..53d8ae346 100644
--- a/cypress/integration/rendering/zenuml.spec.js
+++ b/cypress/integration/rendering/zenuml.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.ts';
 
 describe('Zen UML', () => {
   it('Basic Zen UML diagram', () => {

From 7cb009cd38954f28b68a459e2eddd67596fff7e8 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 13 Jul 2023 23:54:49 +0100
Subject: [PATCH 10/30] build(docs): run remark plugins on MermaidConfig

We use the `unified.stringify()` function on our remark plugins to
stringify the Markdown AST for our MermaidConfig documentation.
However, [`.stringify()`][1] only runs the stringify phase in unified,
not the "run" phase. If we want to run our plugins on the Markdown AST,
we need to also use the [`.run()`][2] function.

[1]: https://github.com/unifiedjs/unified#processorstringifytree-file
[2]: https://github.com/unifiedjs/unified#processorruntree-file-done
---
 packages/mermaid/src/docs.mts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 356cd3cd1..b3f356f34 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -420,7 +420,7 @@ async function transormJsonSchema(file: string) {
       }
     });
 
-    const transformed = remark()
+    const transformer = remark()
       .use(remarkGfm)
       .use(remarkFrontmatter, ['yaml']) // support YAML front-matter in Markdown
       .use(transformMarkdownAst, {
@@ -428,8 +428,9 @@ async function transormJsonSchema(file: string) {
         originalFilename: file,
         addAutogeneratedWarning: !noHeader,
         removeYAML: !noHeader,
-      })
-      .stringify(markdownAst as Root);
+      });
+
+    const transformed = transformer.stringify(await transformer.run(markdownAst as Root));
 
     const formatted = prettier.format(transformed, {
       parser: 'markdown',

From 383bbefa9e34aa5da6f648ea158cce3c5ae11238 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibin.thomas@iiitb.ac.in>
Date: Sat, 15 Jul 2023 18:27:42 +0530
Subject: [PATCH 11/30] Added code for Vertical branches for GitGraph and Added
 TB option in the parser file.

---
 .../src/diagrams/git/gitGraphRenderer.js      | 171 ++++++++++++++----
 .../src/diagrams/git/parser/gitGraph.jison    |   1 +
 2 files changed, 133 insertions(+), 39 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 8d88c601d..01b787ca3 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -19,12 +19,14 @@ let branchPos = {};
 let commitPos = {};
 let lanes = [];
 let maxPos = 0;
+let dir = 'LR';
 const clear = () => {
   branchPos = {};
   commitPos = {};
   allCommitsDict = {};
   maxPos = 0;
   lanes = [];
+  dir = 'LR';
 };
 
 /**
@@ -77,6 +79,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
   const gLabels = svg.append('g').attr('class', 'commit-labels');
   let pos = 0;
 
+  if (dir === 'TB') {
+    pos = 30;
+  }
+
   const keys = Object.keys(commits);
   const sortedKeys = keys.sort((a, b) => {
     return commits[a].seq - commits[b].seq;
@@ -84,8 +90,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
   sortedKeys.forEach((key) => {
     const commit = commits[key];
 
-    const y = branchPos[commit.branch].pos;
-    const x = pos + 10;
+    const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
+    const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
+
     // Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
     if (modifyGraph) {
       let typeClass;
@@ -208,7 +215,11 @@ const drawCommits = (svg, commits, modifyGraph) => {
         }
       }
     }
-    commitPos[commit.id] = { x: pos + 10, y: y };
+    if (dir === 'TB') {
+      commitPos[commit.id] = { x: x, y: pos + 10 };
+    } else {
+      commitPos[commit.id] = { x: pos + 10, y: y };
+    }
 
     // The first iteration over the commits are for positioning purposes, this
     // is required for drawing the lines. The circles and labels is drawn after the labels
@@ -240,8 +251,19 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('y', y + 13.5)
           .attr('width', bbox.width + 2 * py)
           .attr('height', bbox.height + 2 * py);
-        text.attr('x', pos + 10 - bbox.width / 2);
-        if (gitGraphConfig.rotateCommitLabel) {
+
+        if (dir === 'TB') {
+          labelBkg
+            .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);
+        }
+
+        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(
@@ -365,46 +387,94 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
     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 (p1.y < p2.y) {
-      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}`;
+    if (dir === 'TB') {
+      if (p1.x < p2.x) {
+        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 {
+        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 {
-      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}`;
+      if (p1.y < p2.y) {
+        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 {
+        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}`;
+      }
     }
   } else {
-    if (p1.y < p2.y) {
-      arc = 'A 20 20, 0, 0, 0,';
-      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[commit2.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}`;
-    }
-    if (p1.y > p2.y) {
-      arc = 'A 20 20, 0, 0, 0,';
-      radius = 20;
-      offset = 20;
+        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,';
+        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 ${
-        p2.x
-      } ${p2.y}`;
-    }
+        // 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 ${
+          p2.x
+        } ${p2.y}`;
+      }
 
-    if (p1.y === p2.y) {
-      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}`;
+      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 ${
+          p2.x
+        } ${p2.y}`;
+      }
+    } else {
+      if (p1.y < p2.y) {
+        arc = 'A 20 20, 0, 0, 0,';
+        radius = 20;
+        offset = 20;
+
+        // 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}`;
+      }
+      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[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[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}`;
+      }
     }
   }
   svg
@@ -445,6 +515,13 @@ const drawBranches = (svg, branches) => {
     line.attr('y2', pos);
     line.attr('class', 'branch branch' + adjustIndexForTheme);
 
+    if (dir === 'TB') {
+      line.attr('y1', 30);
+      line.attr('x1', pos);
+      line.attr('y2', maxPos);
+      line.attr('x2', pos);
+    }
+
     lanes.push(pos);
 
     let name = branch.name;
@@ -467,7 +544,6 @@ const drawBranches = (svg, branches) => {
       .attr('y', -bbox.height / 2 + 8)
       .attr('width', bbox.width + 18)
       .attr('height', bbox.height + 4);
-
     label.attr(
       'transform',
       'translate(' +
@@ -476,7 +552,23 @@ const drawBranches = (svg, branches) => {
         (pos - bbox.height / 2 - 1) +
         ')'
     );
-    bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
+    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') {
+      bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
+    }
   });
 };
 
@@ -495,6 +587,7 @@ export const draw = function (txt, id, ver, diagObj) {
 
   allCommitsDict = diagObj.db.getCommits();
   const branches = diagObj.db.getBranchesAsObjArray();
+  dir = diagObj.db.getDirection();
 
   // Position branches vertically
   let pos = 0;
diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
index 1c87f3bf3..c0aa3d2d9 100644
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -52,6 +52,7 @@ cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
 "BT"                                    return 'DIR';
+"TB"                                    return 'DIR';
 ":"                                     return ':';
 "^"                                     return 'CARET'
 "options"\r?\n                          this.begin("options"); //

From 57ee181fad6cd3f6be162297e18ad25e37766162 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 13 Jul 2023 23:59:56 +0100
Subject: [PATCH 12/30] build(docs): add `editLink: ` to MD frontmatter

Add a YAML front-matter entry called `editLink` to Markdown files in
Vitepress, e.g.

```markdown
---
editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/schemas/config.schema.yaml"
---

Here is my markdown file!
```

Although Vitepress doesn't officially support adding a URL as a
`editLink:` YAML front-matter, we can add a custom `editLink` function
to our Vitepress config that does allow it.
---
 packages/mermaid/src/docs.mts     | 26 +++++++++++++++++++++++++-
 packages/mermaid/src/docs.spec.ts | 21 +++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index b3f356f34..227449a0a 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -34,7 +34,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync }
 import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
-import type { Code, ListItem, Root, Text } from 'mdast';
+import type { Code, ListItem, Root, Text, YAML } from 'mdast';
 import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
@@ -209,6 +209,8 @@ interface TransformMarkdownAstOptions {
   originalFilename: string;
   /** If `true`, add a warning that the file is autogenerated */
   addAutogeneratedWarning?: boolean;
+  /** If `true`, adds an `editLink: "https://..."` YAML frontmatter field */
+  addEditLink?: boolean;
   /**
    * If `true`, remove the YAML metadata from the Markdown input.
    * Generally, YAML metadata is only used for Vitepress.
@@ -231,6 +233,7 @@ interface TransformMarkdownAstOptions {
 export function transformMarkdownAst({
   originalFilename,
   addAutogeneratedWarning,
+  addEditLink,
   removeYAML,
 }: TransformMarkdownAstOptions) {
   return (tree: Root, _file?: any): Root => {
@@ -270,6 +273,25 @@ export function transformMarkdownAst({
       }
     }
 
+    if (addEditLink) {
+      // add originalFilename as custom editLink in YAML frontmatter
+      let yamlFrontMatter: YAML;
+      if (astWithTransformedBlocks.children[0].type === 'yaml') {
+        yamlFrontMatter = astWithTransformedBlocks.children[0];
+      } else {
+        yamlFrontMatter = {
+          type: 'yaml',
+          value: '',
+        };
+        astWithTransformedBlocks.children.unshift(yamlFrontMatter);
+      }
+      const filePathFromRoot = posix.join('packages/mermaid', originalFilename);
+      // TODO, should we replace this with proper YAML parsing?
+      yamlFrontMatter.value += `\neditLink: ${JSON.stringify(
+        `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`
+      )}`;
+    }
+
     if (removeYAML) {
       const firstNode = astWithTransformedBlocks.children[0];
       if (firstNode.type == 'yaml') {
@@ -306,6 +328,7 @@ const transformMarkdown = (file: string) => {
       // mermaid project specific plugin
       originalFilename: file,
       addAutogeneratedWarning: !noHeader,
+      addEditLink: noHeader,
       removeYAML: !noHeader,
     })
     .processSync(doc)
@@ -427,6 +450,7 @@ async function transormJsonSchema(file: string) {
         // mermaid project specific plugin
         originalFilename: file,
         addAutogeneratedWarning: !noHeader,
+        addEditLink: noHeader,
         removeYAML: !noHeader,
       });
 
diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/src/docs.spec.ts
index 50feaee6a..bea833fd9 100644
--- a/packages/mermaid/src/docs.spec.ts
+++ b/packages/mermaid/src/docs.spec.ts
@@ -105,6 +105,27 @@ This Markdown should be kept.
     });
   });
 
+  it('should add an editLink in the YAML frontmatter if `addEditLink: true`', async () => {
+    const contents = `---
+title: Flowcharts Syntax
+---
+
+This Markdown should be kept.
+`;
+    const withYaml = (
+      await remarkBuilder()
+        .use(transformMarkdownAst, { originalFilename, addEditLink: true })
+        .process(contents)
+    ).toString();
+    expect(withYaml).toEqual(`---
+title: Flowcharts Syntax
+editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md"
+---
+
+This Markdown should be kept.
+`);
+  });
+
   describe('transformToBlockQuote', () => {
     // TODO Is there a way to test this with --vitepress given as a process argument?
 

From af9b3f77cb38e7a51236f0b0cf600e0516e866f4 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sat, 15 Jul 2023 23:09:02 +0100
Subject: [PATCH 13/30] build(docs): allow using custom `editLink`

In Vitepress, allow using a custom `editLink`, if specified in the YAML
frontmatter.
---
 packages/mermaid/src/docs/.vitepress/config.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 330b088d9..2644fa088 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -35,7 +35,12 @@ export default defineConfig({
   themeConfig: {
     nav: nav(),
     editLink: {
-      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
+      pattern: ({ filePath, frontmatter }) => {
+        if (typeof frontmatter.editLink === 'string') {
+          return frontmatter.editLink;
+        }
+        return `https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/${filePath}`;
+      },
       text: 'Edit this page on GitHub',
     },
     sidebar: {

From 662eb431ab867a3246458f412a2f349941addaa0 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 17 Jul 2023 15:53:26 +0300
Subject: [PATCH 14/30] allow ts extension imports in cypress ts files

---
 cypress/tsconfig.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index e3351cebe..baa9a7217 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -2,7 +2,9 @@
   "compilerOptions": {
     "target": "es2020",
     "lib": ["es2020", "dom"],
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node"],
+    "allowImportingTsExtensions": true,
+    "noEmit": true
   },
   "include": ["**/*.ts"]
 }

From d9314a869a40f382f06ee2e767fe6c6501a055c4 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Mon, 17 Jul 2023 15:58:58 +0300
Subject: [PATCH 15/30] change deprecated `btoa` into `Buffer.from`

---
 cypress/helpers/util.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index 2e9254e6a..b042c3ed4 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Buffer } from 'buffer';
 import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
 
 type CypressConfig = {
@@ -13,7 +15,7 @@ interface CodeObject {
 }
 
 const utf8ToB64 = (str: string): string => {
-  return window.btoa(decodeURIComponent(encodeURIComponent(str)));
+  return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
 const batchId: string = 'mermaid-batch-' + Cypress.env('CYPRESS_COMMIT') || Date.now().toString();

From fff3acd0648902f939a50cdb77871c213c264b76 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Jul 2023 21:55:44 +0530
Subject: [PATCH 16/30] Verify release-version on push to release or master

---
 .github/workflows/build-docs.yml              |  8 ++++++
 .github/workflows/publish-docs.yml            | 13 ---------
 packages/mermaid/package.json                 |  1 +
 .../scripts/update-release-version.mts        | 27 ++++++++++++++++---
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/build-docs.yml b/.github/workflows/build-docs.yml
index b25ff89cc..152b177ae 100644
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@@ -1,6 +1,10 @@
 name: Build Vitepress docs
 
 on:
+  push:
+    branches:
+      - master
+      - release/*
   pull_request:
   merge_group:
 
@@ -25,5 +29,9 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
+      - name: Verify release verion
+        if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
+        run: pnpm --filter mermaid run docs:verify-version
+
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml
index d66d61a26..f63e58750 100644
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -36,19 +36,6 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
-      - name: Update release verion
-        run: |
-          pnpm --filter mermaid run docs:release-version
-          pnpm --filter mermaid run docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        with:
-          add: '["docs", "packages/mermaid/src/docs"]'
-          author_name: ${{ github.actor }}
-          author_email: ${{ github.actor }}@users.noreply.github.com
-          message: 'chore: Update MERMAID_RELEASE_VERSION in docs'
-
       - name: Setup Pages
         uses: actions/configure-pages@v3
 
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index fd5a459a0..cf0979d48 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -34,6 +34,7 @@
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "docs:release-version": "ts-node-esm scripts/update-release-version.mts",
+    "docs:verify-version": "ts-node-esm scripts/update-release-version.mts --verify",
     "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
     "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
     "release": "pnpm build",
diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts
index edd2017b9..82fa6442a 100644
--- a/packages/mermaid/scripts/update-release-version.mts
+++ b/packages/mermaid/scripts/update-release-version.mts
@@ -15,20 +15,39 @@ import {
 } from '../src/docs.mjs';
 import { writeFile } from 'fs/promises';
 
+const verifyOnly: boolean = process.argv.includes('--verify');
+const versionPlaceholder = '<MERMAID_RELEASE_VERSION>';
+
 const main = async () => {
   const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
   mdFileGlobs.push('!**/community/development.md');
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   mdFiles.sort();
+  const mdFilesWithPlaceholder: string[] = [];
   for (const mdFile of mdFiles) {
     const content = readSyncedUTF8file(mdFile);
-    const updatedContent = content.replace(/<MERMAID_RELEASE_VERSION>/g, MERMAID_RELEASE_VERSION);
-    if (content !== updatedContent) {
-      await writeFile(mdFile, updatedContent);
-      console.log(`Updated MERMAID_RELEASE_VERSION in ${mdFile}`);
+    if (content.includes(versionPlaceholder)) {
+      mdFilesWithPlaceholder.push(mdFile);
     }
   }
+
+  if (mdFilesWithPlaceholder.length === 0) {
+    return;
+  }
+
+  if (verifyOnly) {
+    console.log(
+      `${mdFilesWithPlaceholder.length} file(s) were found with the placeholder ${versionPlaceholder}. Run \`pnpm --filter mermaid docs:release-version\` to update them.`
+    );
+    process.exit(1);
+  }
+
+  for (const mdFile of mdFilesWithPlaceholder) {
+    const content = readSyncedUTF8file(mdFile);
+    const newContent = content.replace(versionPlaceholder, MERMAID_RELEASE_VERSION);
+    await writeFile(mdFile, newContent);
+  }
 };
 
 void main();

From 483385b2f680fff318f4c9e7c16d7b799917fffc Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Jul 2023 21:59:00 +0530
Subject: [PATCH 17/30] Update PR template

---
 .github/pull_request_template.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 3574c3599..82ca5fd5c 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -13,6 +13,6 @@ Describe the way your implementation works or what design decisions you made if
 Make sure you
 
 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
-- [ ] :computer: have added unit/e2e tests (if appropriate)
-- [ ] :notebook: have added documentation (if appropriate)
+- [ ] :computer: have added necessary unit/e2e tests.
+- [ ] :notebook: have added documentation. Make sure `MERMAID_RELEASE_VERSION` is used for all new features.
 - [ ] :bookmark: targeted `develop` branch

From 3fcb0715925860680eef34e874232567ffebaa45 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Jul 2023 22:06:43 +0530
Subject: [PATCH 18/30] Move docs.cli to scripts

---
 .vscode/launch.json                                 |  2 +-
 packages/mermaid/package.json                       | 10 +++++-----
 packages/mermaid/{src => scripts}/docs.cli.mts      |  0
 packages/mermaid/{src => scripts}/docs.mts          |  0
 packages/mermaid/{src => scripts}/docs.spec.ts      |  0
 packages/mermaid/scripts/update-release-version.mts |  2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/mermaid/{src => scripts}/docs.cli.mts (100%)
 rename packages/mermaid/{src => scripts}/docs.mts (100%)
 rename packages/mermaid/{src => scripts}/docs.spec.ts (100%)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 01ed07046..dc5ec94a1 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -17,7 +17,7 @@
       "name": "Docs generation",
       "type": "node",
       "request": "launch",
-      "args": ["src/docs.cli.mts"],
+      "args": ["scripts/docs.cli.mts"],
       "runtimeArgs": ["--loader", "ts-node/esm"],
       "cwd": "${workspaceRoot}/packages/mermaid",
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index cf0979d48..c2e0d9834 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -25,12 +25,12 @@
   "scripts": {
     "clean": "rimraf dist",
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts",
-    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.cli.mts --verify",
-    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
+    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts",
+    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify",
+    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
-    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.cli.mts --watch --vitepress\"",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
+    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "docs:release-version": "ts-node-esm scripts/update-release-version.mts",
diff --git a/packages/mermaid/src/docs.cli.mts b/packages/mermaid/scripts/docs.cli.mts
similarity index 100%
rename from packages/mermaid/src/docs.cli.mts
rename to packages/mermaid/scripts/docs.cli.mts
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/scripts/docs.mts
similarity index 100%
rename from packages/mermaid/src/docs.mts
rename to packages/mermaid/scripts/docs.mts
diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/scripts/docs.spec.ts
similarity index 100%
rename from packages/mermaid/src/docs.spec.ts
rename to packages/mermaid/scripts/docs.spec.ts
diff --git a/packages/mermaid/scripts/update-release-version.mts b/packages/mermaid/scripts/update-release-version.mts
index 82fa6442a..7f292f21b 100644
--- a/packages/mermaid/scripts/update-release-version.mts
+++ b/packages/mermaid/scripts/update-release-version.mts
@@ -12,7 +12,7 @@ import {
   SOURCE_DOCS_DIR,
   readSyncedUTF8file,
   MERMAID_RELEASE_VERSION,
-} from '../src/docs.mjs';
+} from './docs.mjs';
 import { writeFile } from 'fs/promises';
 
 const verifyOnly: boolean = process.argv.includes('--verify');

From 863d1bfd4d383a535a8f1504de4f54ce4610bbbb Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 20:21:15 +0530
Subject: [PATCH 19/30] removed BT and added TB

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

diff --git a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
index c0aa3d2d9..9ff5623f8 100644
--- a/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
+++ b/packages/mermaid/src/diagrams/git/parser/gitGraph.jison
@@ -51,7 +51,6 @@ cherry\-pick(?=\s|$)                    return 'CHERRY_PICK';
 // "reset"                                 return 'RESET';
 checkout(?=\s|$)                        return 'CHECKOUT';
 "LR"                                    return 'DIR';
-"BT"                                    return 'DIR';
 "TB"                                    return 'DIR';
 ":"                                     return ':';
 "^"                                     return 'CARET'

From d81e4fabd57e4ab2193ef12f70f25898a92189f8 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 20:22:29 +0530
Subject: [PATCH 20/30] positioned tags, tilted commit labels and fixed some
 bugs

---
 .../src/diagrams/git/gitGraphRenderer.js      | 81 +++++++++++++++----
 1 file changed, 65 insertions(+), 16 deletions(-)

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) {

From 52a4f8f077852dee9415ed5d9566f2581d50eccb Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 20:22:59 +0530
Subject: [PATCH 21/30] added tests for vertical branches

---
 .../integration/rendering/gitGraph.spec.js    | 332 ++++++++++++++++++
 1 file changed, 332 insertions(+)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 43f91a983..58e827135 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -329,6 +329,338 @@ title: simple gitGraph
 ---
 gitGraph
   commit id: "1-abcdefg"
+`,
+      {}
+    );
+  });
+  it('15: should render a simple gitgraph with commit on main branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "1"
+       commit id: "2"
+       commit id: "3"
+      `,
+      {}
+    );
+  });
+  it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "One"
+       commit id: "Two"
+       commit id: "Three"
+      `,
+      {}
+    );
+  });
+  it('17: should render a simple gitgraph with different commitTypes on main branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "Normal Commit"
+       commit id: "Reverse Commit" type: REVERSE
+       commit id: "Hightlight Commit" type: HIGHLIGHT
+      `,
+      {}
+    );
+  });
+  it('18: should render a simple gitgraph with tags commitTypes on main branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       commit id: "Normal Commit with tag" tag: "v1.0.0"
+       commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
+       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+      `,
+      {}
+    );
+  });
+  it('19: should render a simple gitgraph with two branches | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       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('20: should render a simple gitgraph with two branches and merge commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       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('21: should render a simple gitgraph with three branches and tagged merge commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       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('22: should render a simple gitgraph with more than 8 branchs &  overriding variables | Vertical Branch', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+        'gitBranchLabel0': '#ffffff',
+        'gitBranchLabel1': '#ffffff',
+        'gitBranchLabel2': '#ffffff',
+        'gitBranchLabel3': '#ffffff',
+        'gitBranchLabel4': '#ffffff',
+        'gitBranchLabel5': '#ffffff',
+        'gitBranchLabel6': '#ffffff',
+        'gitBranchLabel7': '#ffffff',
+  } } }%%
+  gitGraph TB:
+    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('23: should render a simple gitgraph with rotated labels | Vertical Branch', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': true
+  } } }%%
+        gitGraph TB:
+        commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
+        commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
+        commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
+        commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
+      `,
+      {}
+    );
+  });
+  it('24: should render a simple gitgraph with horizontal labels | Vertical Branch', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': false
+  } } }%%
+        gitGraph TB:
+        commit id: "Alpha"
+        commit id: "Beta"
+        commit id: "Gamma"
+        commit id: "Delta"
+      `,
+      {}
+    );
+  });
+  it('25: should render a simple gitgraph with cherry pick commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    gitGraph TB:
+       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('26: should render a gitgraph with cherry pick commit with custom tag | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    gitGraph TB:
+       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('27: should render a gitgraph with cherry pick commit with no tag | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    gitGraph TB:
+       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('28: should render a simple gitgraph with two cherry pick commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+    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
+      `,
+      {}
+    );
+  });
+  it('29: should render commits for more than 8 branches | Vertical Branch', () => {
+    imgSnapshotTest(
+      `
+      gitGraph TB:
+      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('30: should render a simple gitgraph with three branches,custom merge commit id,tag,type | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       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('31: should render a simple gitgraph with a title | Vertical Branch', () => {
+    imgSnapshotTest(
+      `---
+title: simple gitGraph
+---
+gitGraph TB:
+  commit id: "1-abcdefg"
 `,
       {}
     );

From cba5b5a7e339ab91fc0a3a68da2a5184357a5acc Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Wed, 19 Jul 2023 21:55:24 +0530
Subject: [PATCH 22/30] ran preetier

---
 .../src/diagrams/git/gitGraphRenderer.js      | 97 +++++++------------
 1 file changed, 36 insertions(+), 61 deletions(-)

diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index c50f11cef..2b88cfe7e 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -253,28 +253,17 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('height', bbox.height + 2 * py);
 
         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 + bbox.height - 12);
+          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') {
           text.attr('x', pos + 10 - bbox.width / 2);
         }
         if (gitGraphConfig.rotateCommitLabel) {
-          if (dir === 'TB')
-          {
-            text.attr(
-              'transform',
-              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
-            );
-            labelBkg.attr(
-              'transform',
-              'rotate(' + -45 + ', ' + x + ', ' + y + ')'
-            );
+          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;
@@ -316,13 +305,12 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('r', 1.5)
           .attr('class', 'tag-hole');
 
-        if (dir === 'TB')
-        {
+        if (dir === 'TB') {
           rect
             .attr('class', 'tag-label-bkg')
             .attr(
-            'points',
-            `
+              'points',
+              `
             ${x},${pos + py}
             ${x},${pos - py}
             ${x + 10},${pos - h2 - py}
@@ -330,15 +318,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
             ${x + 10 + tagBbox.width + px},${pos + h2 + py}
             ${x + 10},${pos + h2 + py}`
             )
-            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + pos +')');
+            .attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
           hole
-            .attr('cx', x + px/2)
+            .attr('cx', x + px / 2)
             .attr('cy', pos)
-            .attr('transform', 'translate(12,12) rotate(45, '+ x + ',' + 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 +')');
+            .attr('x', x + 5)
+            .attr('y', pos + 3)
+            .attr('transform', 'translate(14,14) rotate(45, ' + x + ',' + pos + ')');
         }
       }
     }
@@ -429,19 +417,19 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
 
     if (dir === 'TB') {
       if (p1.x < p2.x) {
-        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}`;
+        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 {
-        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}`;
+        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) {
-        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}`;
+        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 {
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY + radius} ${arc2} ${
           p1.x + offset
@@ -449,8 +437,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
       }
     }
   } else {
-    if (dir === 'TB')
-    {
+    if (dir === 'TB') {
       if (p1.x < p2.x) {
         arc = 'A 20 20, 0, 0, 0,';
         arc2 = 'A 20 20, 0, 0, 1,';
@@ -460,9 +447,9 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
         // 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 ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${p1.y + offset} L ${
-          p2.x
-        } ${p2.y}`;
+        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,';
@@ -472,16 +459,16 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
 
         // Arrows going up take the color from the source branch
         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}`;
+        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 + radius} ${p1.y} ${arc} ${p1.x + offset} ${p2.y + radius} L ${
-          p2.x
-        } ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
+          p2.y + radius
+        } L ${p2.x} ${p2.y}`;
       }
     } else {
       if (p1.y < p2.y) {
@@ -592,18 +579,8 @@ 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) +
-            ')'
-        );
+      bkg.attr('x', pos - bbox.width / 2 - 10).attr('y', 0);
+      label.attr('transform', 'translate(' + (pos - bbox.width / 2 - 5) + ', ' + 0 + ')');
     }
     if (dir !== 'TB') {
       bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
@@ -639,14 +616,12 @@ 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' ? bbox.width / 2 : 0);
     label.remove();
     branchLabel.remove();
     g.remove();
   });
 
-  
-
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {
     drawBranches(diagram, branches);

From e25faeee4c234e97b270f97467af8b78777dfeed Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 19 Jul 2023 22:36:55 +0530
Subject: [PATCH 23/30] Update cypress/helpers/util.ts

---
 cypress/helpers/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index b042c3ed4..170b3fc3a 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -2,7 +2,7 @@
 import { Buffer } from 'buffer';
 import type { MermaidConfig } from '../../packages/mermaid/src/config.type.js';
 
-type CypressConfig = {
+interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;

From 8cd8714aaf9c1b344ce3359fd192536525303df6 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Wed, 19 Jul 2023 23:45:02 +0300
Subject: [PATCH 24/30] run pnpm lint:fix

---
 cypress/helpers/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts
index 170b3fc3a..ea217b4fc 100644
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -6,7 +6,7 @@ interface CypressConfig {
   listUrl?: boolean;
   listId?: string;
   name?: string;
-};
+}
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
 interface CodeObject {

From 4d2d790cc8de03adde3fb5b820e1da7f4fd29bae Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Wed, 19 Jul 2023 23:36:13 +0100
Subject: [PATCH 25/30] build(docs): handle YAML edgecases in markdown

Our current method of adding a entry using `+=` is not safe in YAML,
since it's valid to make a YAML object entirely in JSON,
see https://github.com/mermaid-js/mermaid/pull/4640#discussion_r1265133463

We're already using `js-yaml` elsewhere in this file, so we may as well
use it for parsing/stringifying.

Reported-by: Remco Haszing <remcohaszing@gmail.com>
---
 packages/mermaid/src/docs.mts     | 29 +++++++++++++++--------------
 packages/mermaid/src/docs.spec.ts |  4 +++-
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 227449a0a..f62c44f07 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -30,10 +30,19 @@
  * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with
  *   it.)
  */
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js';
+// @ts-ignore: we're importing internal jsonschema2md functions
+import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js';
 import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs';
 import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
+import { dump, load, JSON_SCHEMA } from 'js-yaml';
 import type { Code, ListItem, Root, Text, YAML } from 'mdast';
 import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
@@ -286,10 +295,12 @@ export function transformMarkdownAst({
         astWithTransformedBlocks.children.unshift(yamlFrontMatter);
       }
       const filePathFromRoot = posix.join('packages/mermaid', originalFilename);
-      // TODO, should we replace this with proper YAML parsing?
-      yamlFrontMatter.value += `\neditLink: ${JSON.stringify(
-        `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`
-      )}`;
+      yamlFrontMatter.value = dump({
+        ...(load(yamlFrontMatter.value, { schema: JSON_SCHEMA }) as
+          | Record<string, unknown>
+          | undefined),
+        editLink: `https://github.com/mermaid-js/mermaid/edit/develop/${filePathFromRoot}`,
+      });
     }
 
     if (removeYAML) {
@@ -346,16 +357,6 @@ const transformMarkdown = (file: string) => {
   copyTransformedContents(file, !verifyOnly, formatted);
 };
 
-import { load, JSON_SCHEMA } from 'js-yaml';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as schemaLoader } from '@adobe/jsonschema2md/lib/schemaProxy.js';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as traverseSchemas } from '@adobe/jsonschema2md/lib/traverseSchema.js';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as buildMarkdownFromSchema } from '@adobe/jsonschema2md/lib/markdownBuilder.js';
-// @ts-ignore: we're importing internal jsonschema2md functions
-import { default as jsonSchemaReadmeBuilder } from '@adobe/jsonschema2md/lib/readmeBuilder.js';
-
 /**
  * Transforms the given JSON Schema into Markdown documentation
  */
diff --git a/packages/mermaid/src/docs.spec.ts b/packages/mermaid/src/docs.spec.ts
index bea833fd9..c84bc1bac 100644
--- a/packages/mermaid/src/docs.spec.ts
+++ b/packages/mermaid/src/docs.spec.ts
@@ -119,7 +119,9 @@ This Markdown should be kept.
     ).toString();
     expect(withYaml).toEqual(`---
 title: Flowcharts Syntax
-editLink: "https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md"
+editLink: >-
+  https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/example-input-filename.md
+
 ---
 
 This Markdown should be kept.

From a171903088b08c2d7748ce2b9b34f7805a5cf3ea Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Thu, 20 Jul 2023 13:15:05 +0530
Subject: [PATCH 26/30] added tests for overlapping commits

---
 .../integration/rendering/gitGraph.spec.js    | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 58e827135..f2d8f44b8 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -665,4 +665,40 @@ gitGraph TB:
       {}
     );
   });
+  it('32: should render a simple gitgraph overlapping commits | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+       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('33: should render a simple gitgraph overlapping commits', () => {
+    imgSnapshotTest(
+      `gitGraph
+       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
+      `,
+      {}
+    );
+  });
 });

From 478d3501889d5bc8d0ff9c1536c579ebd1453939 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 20 Jul 2023 20:48:12 +0530
Subject: [PATCH 27/30] Update .github/pull_request_template.md

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 .github/pull_request_template.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 82ca5fd5c..ff34d24fd 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -14,5 +14,5 @@ Make sure you
 
 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 - [ ] :computer: have added necessary unit/e2e tests.
-- [ ] :notebook: have added documentation. Make sure `MERMAID_RELEASE_VERSION` is used for all new features.
+- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features.
 - [ ] :bookmark: targeted `develop` branch

From 8ae35c13823900cc66afee8e336f36ec797e48b2 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Thu, 20 Jul 2023 21:27:34 +0530
Subject: [PATCH 28/30] updated documentation for vertical branches

---
 packages/mermaid/src/docs/syntax/gitgraph.md | 44 ++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md
index f1930bb27..a9b99e684 100644
--- a/packages/mermaid/src/docs/syntax/gitgraph.md
+++ b/packages/mermaid/src/docs/syntax/gitgraph.md
@@ -511,6 +511,50 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
+## Orientation
+
+In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
+
+Usage example:
+
+```mermaid-example
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
+
+In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
+
+Usage example:
+
+```mermaid-example
+    gitGraph TB:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 ## Themes
 
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).

From df89b92e2c6d353357887dce7677a2315bad65f2 Mon Sep 17 00:00:00 2001
From: Sibin Thomas <sibinjordaan@gmail.com>
Date: Thu, 20 Jul 2023 21:45:47 +0530
Subject: [PATCH 29/30] ran docs:build for documentation

---
 docs/syntax/gitgraph.md | 76 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md
index 964fe3886..e93071851 100644
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -825,6 +825,82 @@ NOTE: Because we have overridden the `mainBranchOrder` to `2`, the `main` branch
 
 Here, we have changed the default main branch name to `MetroLine1`.
 
+## Orientation
+
+In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
+
+Usage example:
+
+```mermaid-example
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+```mermaid
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
+
+In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
+
+Usage example:
+
+```mermaid-example
+    gitGraph TB:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
+```mermaid
+    gitGraph TB:
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+       merge develop
+       commit
+       commit
+```
+
 ## Themes
 
 Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).

From cd0da4e060e376d389dac621352617f47dde639a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 20 Jul 2023 17:44:05 +0000
Subject: [PATCH 30/30] build(deps-dev): bump word-wrap from 1.2.3 to 1.2.4

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 pnpm-lock.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f258400a6..db8f628cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12469,7 +12469,7 @@ packages:
       levn: 0.3.0
       prelude-ls: 1.1.2
       type-check: 0.3.2
-      word-wrap: 1.2.3
+      word-wrap: 1.2.4
     dev: true
 
   /optionator@0.9.1:
@@ -12481,7 +12481,7 @@ packages:
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
-      word-wrap: 1.2.3
+      word-wrap: 1.2.4
     dev: true
 
   /ospath@1.2.2:
@@ -16073,8 +16073,8 @@ packages:
     resolution: {integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==}
     dev: true
 
-  /word-wrap@1.2.3:
-    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
+  /word-wrap@1.2.4:
+    resolution: {integrity: sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==}
     engines: {node: '>=0.10.0'}
     dev: true