diff --git a/.build/common.ts b/.build/common.ts index e9d0ebfa69..274977fa26 100644 --- a/.build/common.ts +++ b/.build/common.ts @@ -22,4 +22,9 @@ export const packageOptions = { packageName: 'mermaid-zenuml', file: 'detector.ts', }, + 'mermaid-flowchart-elk': { + name: 'mermaid-flowchart-elk', + packageName: 'mermaid-flowchart-elk', + file: 'detector.ts', + }, } as const; diff --git a/.build/types.ts b/.build/types.ts new file mode 100644 index 0000000000..4192407824 --- /dev/null +++ b/.build/types.ts @@ -0,0 +1,18 @@ +import { packageOptions } from './common.js'; +import { execSync } from 'child_process'; + +const buildType = (packageName: string) => { + console.log(`Building types for ${packageName}`); + try { + const out = execSync(`tsc -p ./packages/${packageName}/tsconfig.json --emitDeclarationOnly`); + out.length > 0 && console.log(out.toString()); + } catch (e) { + console.error(e); + e.stdout.length > 0 && console.error(e.stdout.toString()); + e.stderr.length > 0 && console.error(e.stderr.toString()); + } +}; + +for (const { packageName } of Object.values(packageOptions)) { + buildType(packageName); +} diff --git a/.esbuild/server.ts b/.esbuild/server.ts index 63d981b99d..9102c7de83 100644 --- a/.esbuild/server.ts +++ b/.esbuild/server.ts @@ -5,38 +5,25 @@ import { getBuildConfig, defaultOptions } from './util.js'; import { context } from 'esbuild'; import chokidar from 'chokidar'; import { generateLangium } from '../.build/generateLangium.js'; +import { packageOptions } from '../.build/common.js'; -const parserCtx = await context( - getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'parser' }) +const configs = Object.values(packageOptions).map(({ packageName }) => + getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName }) ); -const mermaidCtx = await context( - getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' }) -); -const mermaidIIFECtx = await context( - getBuildConfig({ - ...defaultOptions, - minify: false, - core: false, - entryName: 'mermaid', - format: 'iife', - }) -); -const externalCtx = await context( - getBuildConfig({ - ...defaultOptions, - minify: false, - core: false, - entryName: 'mermaid-example-diagram', - }) -); -const zenumlCtx = await context( - getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid-zenuml' }) -); -const contexts = [parserCtx, mermaidCtx, mermaidIIFECtx, externalCtx, zenumlCtx]; +const mermaidIIFEConfig = getBuildConfig({ + ...defaultOptions, + minify: false, + core: false, + entryName: 'mermaid', + format: 'iife', +}); +configs.push(mermaidIIFEConfig); + +const contexts = await Promise.all(configs.map((config) => context(config))); const rebuildAll = async () => { console.time('Rebuild time'); - await Promise.all(contexts.map((ctx) => ctx.rebuild())); + await Promise.all(contexts.map((ctx) => ctx.rebuild())).catch((e) => console.error(e)); console.timeEnd('Rebuild time'); }; @@ -101,10 +88,9 @@ async function createServer() { app.use(cors()); app.get('/events', eventsHandler); - app.use(express.static('./packages/parser/dist')); - app.use(express.static('./packages/mermaid/dist')); - app.use(express.static('./packages/mermaid-zenuml/dist')); - app.use(express.static('./packages/mermaid-example-diagram/dist')); + for (const { packageName } of Object.values(packageOptions)) { + app.use(express.static(`./packages/${packageName}/dist`)); + } app.use(express.static('demos')); app.use(express.static('cypress/platform')); diff --git a/.esbuild/util.ts b/.esbuild/util.ts index 1efe3bc901..5c21cbf452 100644 --- a/.esbuild/util.ts +++ b/.esbuild/util.ts @@ -65,6 +65,9 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => { minify, logLevel: 'info', chunkNames: `chunks/${outFileName}/[name]-[hash]`, + define: { + 'import.meta.vitest': 'undefined', + }, }); if (core) { diff --git a/.github/codecov.yaml b/.github/codecov.yaml index 950edb6a9a..9450430859 100644 --- a/.github/codecov.yaml +++ b/.github/codecov.yaml @@ -15,3 +15,4 @@ coverage: # Turing off for now as code coverage isn't stable and causes unnecessary build failures. # default: # threshold: 2% + patch: off diff --git a/.github/pr-labeler.yml b/.github/pr-labeler.yml index 0bbd8db66a..15e1843276 100644 --- a/.github/pr-labeler.yml +++ b/.github/pr-labeler.yml @@ -1,4 +1,22 @@ -'Type: Bug / Error': ['bug/*', fix/*] -'Type: Enhancement': ['feature/*', 'feat/*'] -'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*'] -'Area: Documentation': ['docs/*'] +# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json +autolabeler: + - label: 'Type: Bug / Error' + branch: + - '/bug\/.+/' + - '/fix\/.+/' + - label: 'Type: Enhancement' + branch: + - '/feature\/.+/' + - '/feat\/.+/' + - label: 'Type: Other' + branch: + - '/other\/.+/' + - '/chore\/.+/' + - '/test\/.+/' + - '/refactor\/.+/' + - label: 'Area: Documentation' + branch: + - '/docs\/.+/' + +template: | + This field is unused, as we only use this config file for labeling PRs. diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml index e650f8dd11..83138c3d46 100644 --- a/.github/release-drafter.yml +++ b/.github/release-drafter.yml @@ -25,8 +25,6 @@ categories: change-template: '- $TITLE (#$NUMBER) @$AUTHOR' sort-by: title sort-direction: ascending -branches: - - develop exclude-labels: - 'Skip changelog' no-changes-template: 'This release contains minor changes and bugfixes.' diff --git a/.github/workflows/pr-labeler-config-validator.yml b/.github/workflows/pr-labeler-config-validator.yml deleted file mode 100644 index 8bdfed21bc..0000000000 --- a/.github/workflows/pr-labeler-config-validator.yml +++ /dev/null @@ -1,23 +0,0 @@ -name: Validate PR Labeler Configuration -on: - push: - paths: - - .github/workflows/pr-labeler-config-validator.yml - - .github/workflows/pr-labeler.yml - - .github/pr-labeler.yml - pull_request: - paths: - - .github/workflows/pr-labeler-config-validator.yml - - .github/workflows/pr-labeler.yml - - .github/pr-labeler.yml - -jobs: - pr-labeler: - runs-on: ubuntu-latest - steps: - - name: Checkout Repository - uses: actions/checkout@v4 - - name: Validate Configuration - uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3 - with: - configuration-path: .github/pr-labeler.yml diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index 0a53c6e424..b2fc1cc26e 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -1,13 +1,31 @@ name: Apply labels to PR on: pull_request_target: - types: [opened] + # required for pr-labeler to support PRs from forks + # ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ ======================= + # Be very careful what you put in this GitHub Action workflow file to avoid + # malicious PRs from getting access to the Mermaid-js repo. + # + # Please read the following first before reviewing/merging: + # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target + # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ + types: [opened, reopened, synchronize] + +permissions: + contents: read jobs: pr-labeler: runs-on: ubuntu-latest + permissions: + contents: read # read permission is required to read config file + pull-requests: write # write permission is required to label PRs steps: - name: Label PR - uses: TimonVS/pr-labeler-action@v4 + uses: release-drafter/release-drafter@v5 + with: + config-name: pr-labeler.yml + disable-autolabeler: false + disable-releaser: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml index a37b7bcf2a..8ad1b13ecd 100644 --- a/.github/workflows/release-draft.yml +++ b/.github/workflows/release-draft.yml @@ -5,11 +5,19 @@ on: branches: - develop +permissions: + contents: read + jobs: draft-release: runs-on: ubuntu-latest + permissions: + contents: write # write permission is required to create a github release + pull-requests: read # required to read PR titles/labels steps: - name: Draft Release - uses: toolmantim/release-drafter@v5 + uses: release-drafter/release-drafter@v5 + with: + disable-autolabeler: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 3ae66bba2e..231c91f8f4 100644 --- a/.lintstagedrc.mjs +++ b/.lintstagedrc.mjs @@ -6,6 +6,6 @@ export default { // https://prettier.io/docs/en/cli.html#--cache 'prettier --write', ], - 'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'], + 'cSpell.json': ['tsx scripts/fixCSpell.ts'], '**/*.jison': ['pnpm -w run lint:jison'], }; diff --git a/.prettierignore b/.prettierignore index af5c555393..a0cd771e33 100644 --- a/.prettierignore +++ b/.prettierignore @@ -10,6 +10,8 @@ stats .nyc_output # Autogenerated by `pnpm run --filter mermaid types:build-config` packages/mermaid/src/config.type.ts - # autogenereated by langium-cli generated/ +# Ignore the files creates in /demos/dev except for example.html +demos/dev/** +!/demos/dev/example.html diff --git a/.vite/build.ts b/.vite/build.ts index 9cb128eb18..7ce93a497f 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -74,6 +74,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) output, }, }, + define: { + 'import.meta.vitest': 'undefined', + }, resolve: { extensions: [], }, diff --git a/.vite/server.ts b/.vite/server.ts index 838d711910..99d16f6f24 100644 --- a/.vite/server.ts +++ b/.vite/server.ts @@ -1,6 +1,7 @@ import express from 'express'; import cors from 'cors'; import { createServer as createViteServer } from 'vite'; +import { packageOptions } from '../.build/common.js'; async function createServer() { const app = express(); @@ -14,10 +15,9 @@ async function createServer() { }); app.use(cors()); - app.use(express.static('./packages/parser/dist')); - app.use(express.static('./packages/mermaid/dist')); - app.use(express.static('./packages/mermaid-zenuml/dist')); - app.use(express.static('./packages/mermaid-example-diagram/dist')); + for (const { packageName } of Object.values(packageOptions)) { + app.use(express.static(`./packages/${packageName}/dist`)); + } app.use(vite.middlewares); app.use(express.static('demos')); app.use(express.static('cypress/platform')); diff --git a/.vscode/launch.json b/.vscode/launch.json index dc5ec94a10..7d17e55d2d 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -18,7 +18,8 @@ "type": "node", "request": "launch", "args": ["scripts/docs.cli.mts"], - "runtimeArgs": ["--loader", "ts-node/esm"], + // we'll need to change this to --import in Node.JS v20.6.0 and up + "runtimeArgs": ["--loader", "tsx/esm"], "cwd": "${workspaceRoot}/packages/mermaid", "skipFiles": ["/**", "**/node_modules/**"], "smartStep": true, diff --git a/cypress/integration/other/flowchart-elk.spec.js b/cypress/integration/other/flowchart-elk.spec.js new file mode 100644 index 0000000000..22a6efc0f5 --- /dev/null +++ b/cypress/integration/other/flowchart-elk.spec.js @@ -0,0 +1,14 @@ +import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts'; + +describe('Flowchart elk', () => { + it('should use dagre as fallback', () => { + urlSnapshotTest('http://localhost:9000/flow-elk.html', { + name: 'flow-elk fallback to dagre', + }); + }); + it('should allow overriding with external package', () => { + urlSnapshotTest('http://localhost:9000/flow-elk.html?elk=true', { + name: 'flow-elk overriding dagre with elk', + }); + }); +}); diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index aac4a31b17..e23820ffa3 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -729,6 +729,18 @@ A ~~~ B {} ); }); + + it('5064: Should render when subgraph child has links to outside node and subgraph', () => { + imgSnapshotTest( + `flowchart TB + Out --> In + subgraph Sub + In + end + Sub --> In` + ); + }); + describe('Markdown strings flowchart (#4220)', () => { describe('html labels', () => { it('With styling and classes', () => { @@ -874,4 +886,93 @@ end }); }); }); + describe('Subgraph title margins', () => { + it('Should render subgraphs with title margins set (LR)', () => { + imgSnapshotTest( + `flowchart LR + + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 + `, + { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } } + ); + }); + it('Should render subgraphs with title margins set (TD)', () => { + imgSnapshotTest( + `flowchart TD + + subgraph TOP + direction LR + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 + `, + { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } } + ); + }); + it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => { + imgSnapshotTest( + `flowchart LR + + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 -->f1 + end + subgraph B2 + direction BT + i2 -->f2 + end + end + A --> TOP --> B + B1 --> B2 + `, + { + htmlLabels: false, + flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } }, + } + ); + }); + it('Should render subgraphs with title margins and edge labels', () => { + imgSnapshotTest( + `flowchart LR + + subgraph TOP + direction TB + subgraph B1 + direction RL + i1 --lb1-->f1 + end + subgraph B2 + direction BT + i2 --lb2-->f2 + end + end + A --lb3--> TOP --lb4--> B + B1 --lb5--> B2 + `, + { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } } + ); + }); + }); }); diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 9f040a36f0..d3e4dd9dde 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -701,4 +701,129 @@ gitGraph TB: {} ); }); + it('34: should render a simple gitgraph with two branches from same commit', () => { + imgSnapshotTest( + `gitGraph + commit id:"1-abcdefg" + commit id:"2-abcdefg" + branch feature-001 + commit id:"3-abcdefg" + commit id:"4-abcdefg" + checkout main + branch feature-002 + commit id:"5-abcdefg" + checkout feature-001 + merge feature-002 + `, + {} + ); + }); + it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + commit id:"2-abcdefg" + branch feature-001 + commit id:"3-abcdefg" + commit id:"4-abcdefg" + checkout main + branch feature-002 + commit id:"5-abcdefg" + checkout feature-001 + merge feature-002 + `, + {} + ); + }); + it('36: should render GitGraph with branch that is not used immediately', () => { + imgSnapshotTest( + `gitGraph LR: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + `, + {} + ); + }); + it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + `, + {} + ); + }); + it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => { + imgSnapshotTest( + `gitGraph LR: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + checkout x + branch y + checkout x + commit id:"4-abcdefg" + checkout y + commit id:"5-abcdefg" + checkout x + merge y + `, + {} + ); + }); + it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => { + imgSnapshotTest( + `gitGraph TB: + commit id:"1-abcdefg" + branch x + checkout main + commit id:"2-abcdefg" + checkout x + commit id:"3-abcdefg" + checkout main + merge x + checkout x + branch y + checkout x + commit id:"4-abcdefg" + checkout y + commit id:"5-abcdefg" + checkout x + merge y + `, + {} + ); + }); + it('40: should render a simple gitgraph with cherry pick merge commit', () => { + imgSnapshotTest( + `gitGraph + commit id: "ZERO" + branch feature + branch release + checkout feature + commit id: "A" + commit id: "B" + checkout main + merge feature id: "M" + checkout release + cherry-pick id: "M" parent:"B"` + ); + }); }); diff --git a/cypress/integration/rendering/pie.spec.ts b/cypress/integration/rendering/pie.spec.ts index 269efafb26..4a1d774c0a 100644 --- a/cypress/integration/rendering/pie.spec.ts +++ b/cypress/integration/rendering/pie.spec.ts @@ -44,7 +44,7 @@ describe('pie chart', () => { const style = svg.attr('style'); expect(style).to.match(/^max-width: [\d.]+px;$/); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); - expect(maxWidthValue).to.eq(984); + expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI }); }); @@ -59,7 +59,7 @@ describe('pie chart', () => { ); cy.get('svg').should((svg) => { const width = parseFloat(svg.attr('width')); - expect(width).to.eq(984); + expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI expect(svg).to.not.have.attr('style'); }); }); diff --git a/cypress/platform/flow-elk.html b/cypress/platform/flow-elk.html new file mode 100644 index 0000000000..f319f62e28 --- /dev/null +++ b/cypress/platform/flow-elk.html @@ -0,0 +1,28 @@ + + + 
+      flowchart-elk
+      a[hello] --> b[world]
+      b --> c{test}
+      c --> one
+      c --> two
+      c --> three
+
+ + + + diff --git a/demos/flowchart-elk.html b/demos/flowchart-elk.html new file mode 100644 index 0000000000..69ac2d2bc6 --- /dev/null +++ b/demos/flowchart-elk.html @@ -0,0 +1,35 @@ + + + + + + Mermaid Flowchart ELK Test Page + + + +

Flowchart ELK

+ 
+		flowchart-elk TD
+      A([Start]) ==> B[Step 1]
+      B ==> C{Flow 1}
+      C -- Choice 1.1 --> D[Step 2.1]
+      C -- Choice 1.3 --> I[Step 2.3]
+      C == Choice 1.2 ==> E[Step 2.2]
+      D --> F{Flow 2}
+      E ==> F{Flow 2}
+      F{Flow 2} == Choice 2.1 ==> H[Feedback node]
+      H[Feedback node] ==> B[Step 1]
+      F{Flow 2} == Choice 2.2 ==> G((Finish))
+      
+
+ + + + diff --git a/demos/git.html b/demos/git.html index f24217711e..92e0e68635 100644 --- a/demos/git.html +++ b/demos/git.html @@ -14,30 +14,364 @@ -

Git diagram demo

+

Git graph demo

+

Simple "branch and merge" graph

     ---
-    title: Simple Git diagram
+    title: Simple "branch and merge" (left-to-right)
     ---
-    gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
+    gitGraph LR:
     commit
     branch newbranch
     checkout newbranch
     commit
+    checkout main
+    merge newbranch
+
+ 
+    ---
+    title: Simple "branch and merge" (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
+    merge newbranch
+
+

Continuous development graph

+ 
+    ---
+    title: Continuous development (left-to-right)
+    ---
+    gitGraph LR:
     commit
-    checkout master
+    branch develop
+    checkout develop
     commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+
+ 
+    ---
+    title: Continuous development (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+
+

Merge feature to advanced main graph

+ 
+    ---
+    title: Merge feature to advanced main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
     commit
     merge newbranch
- + 
+    ---
+    title: Merge feature to advanced main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
+    commit
+    merge newbranch
+
+

Two-way merges

+ 
+    ---
+    title: Two-way merges (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+
+ 
+    ---
+    title: Two-way merges (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+
+

Cherry-pick from branch graph

+ 
+    ---
+    title: Cherry-pick from branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+
+ 
+    ---
+    title: Cherry-pick from branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+
+

Cherry-pick from main graph

+ 
+    ---
+    title: Cherry-pick from main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+
+ 
+    ---
+    title: Cherry-pick from main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+
+

Cherry-pick then merge graph

+ 
+    ---
+    title: Cherry-pick then merge (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+
+ 
+    ---
+    title: Cherry-pick then merge (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+
+

Merge from main onto undeveloped branch graph

+ 
+    ---
+    title: Merge from main onto undeveloped branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+
+ 
+    ---
+    title: Merge from main onto undeveloped branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+
+

Merge from main onto developed branch graph

+ 
+    ---
+    title: Merge from main onto developed branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+
+ 
+    ---
+    title: Merge from main onto developed branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+
+

Two branches from same commit graph

+ 
+    ---
+    title: Two branches from same commit (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+
+ 
+    ---
+    title: Two branches from same commit (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+
+

Three branches and a cherry-pick from each graph

+ 
+    ---
+    title: Three branches and a cherry-pick from each (left-to-right)
+    ---
+    gitGraph LR:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+
+ 
+    ---
+    title: Three branches and a cherry-pick from each (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+