From d2c82c18022957f8743d656b0e6017be05ba0b53 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 12:06:53 +0530
Subject: [PATCH 01/22] Use cache to store snapshots

---
 .github/workflows/e2e.yml                     | 49 +++++++++++++++++++
 cSpell.json                                   |  1 +
 cypress.config.cjs                            | 11 ++++-
 .../integration/other/configuration.spec.js   |  1 -
 cypress/integration/other/rerender.spec.js    |  2 -
 cypress/integration/rendering/gantt.spec.js   | 13 +++--
 cypress/support/commands.js                   | 12 +++--
 7 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 71806a9c4..09e8546ff 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -9,8 +9,44 @@ permissions:
   contents: read
 
 jobs:
+  cache:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - name: Cache snapshots
+        id: cache-snapshot
+        uses: actions/cache@v4
+        with:
+          save-always: true
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots
+
+      - name: Switch to base branch
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
+  
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        id: cypress-snapshot-gen
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        with:
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
+          browser: chrome
+          spec: |
+            cypress/integration/rendering/flowchart-v2.spec.js
+  
   e2e:
     runs-on: ubuntu-latest
+    needs: cache
     strategy:
       fail-fast: false
       matrix:
@@ -27,6 +63,13 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: Cache snapshots
+        id: cache-snapshot
+        uses: actions/cache/restore@v3
+        with:
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
@@ -38,14 +81,19 @@ jobs:
         with:
           start: pnpm run dev:coverage
           wait-on: 'http://localhost:9000'
+          browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          # TODO: Remove
+          spec: |
+            cypress/integration/rendering/flowchart-v2.spec.js
         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
@@ -57,6 +105,7 @@ jobs:
           fail_ci_if_error: false
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+
       - name: Upload Artifacts
         uses: actions/upload-artifact@v3
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
diff --git a/cSpell.json b/cSpell.json
index 3ea9594f7..82c1c81c4 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -124,6 +124,7 @@
     "sidharth",
     "sidharthv",
     "sphinxcontrib",
+    "ssim",
     "startx",
     "starty",
     "statediagram",
diff --git a/cypress.config.cjs b/cypress.config.cjs
index 30076c56e..c754b465f 100644
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@@ -4,12 +4,21 @@ const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 const coverage = require('@cypress/code-coverage/task');
 
+
 module.exports = defineConfig({
   projectId: 'n2sma2',
+  viewportWidth: 1440,
+  viewportHeight: 1024,
   e2e: {
-    specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/integration/**/*.{js,ts}',
     setupNodeEvents(on, config) {
       coverage(on, config);
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+        }
+        return launchOptions;
+      });
       addMatchImageSnapshotPlugin(on, config);
       // copy any needed variables from process.env to config.env
       config.env.useAppli = process.env.USE_APPLI ? true : false;
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index 7cbc5d105..23338271f 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -117,7 +117,6 @@ describe('Configuration', () => {
     });
     it('should not taint the initial configuration when using multiple directives', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
-      cy.viewport(1440, 1024);
       cy.visit(url);
 
       cy.get('svg');
diff --git a/cypress/integration/other/rerender.spec.js b/cypress/integration/other/rerender.spec.js
index f160a2e27..d14c6257e 100644
--- a/cypress/integration/other/rerender.spec.js
+++ b/cypress/integration/other/rerender.spec.js
@@ -1,14 +1,12 @@
 describe('Rerendering', () => {
   it('should be able to render after an error has occurred', () => {
     const url = 'http://localhost:9000/render-after-error.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graphDiv').should('exist');
   });
 
   it('should be able to render and rerender a graph via API', () => {
     const url = 'http://localhost:9000/rerender.html';
-    cy.viewport(1440, 1024);
     cy.visit(url);
     cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');
 
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 998a092c2..73ff4ee00 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -245,7 +245,10 @@ describe('Gantt diagram', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
     });
   });
 
@@ -285,11 +288,11 @@ describe('Gantt diagram', () => {
       { gantt: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      // use within because the absolute value can be slightly different depending on the environment ±5%
-      // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
-      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
       expect(svg).to.not.have.attr('style');
     });
   });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 3589640d9..7a77b3ba6 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -24,8 +24,14 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-// import '@percy/cypress';
-
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
-addMatchImageSnapshotCommand();
+addMatchImageSnapshotCommand({
+  comparisonMethod: 'ssim',
+  failureThreshold: 0.01,
+  failureThresholdType: 'percent',
+  customDiffConfig: {
+    ssim: 'fast',
+  },
+  blur: 1,
+});

From 76dacf8e90388042cf6171b5aa5aac704d34c7e3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 12:10:39 +0530
Subject: [PATCH 02/22] E2E test

---
 cypress/integration/rendering/flowchart-v2.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index e23820ffa..fa625159d 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -6,7 +6,6 @@ describe('Flowchart v2', () => {
       `flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
-      C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,

From 7805e054957b019efa138ba2bece6889ac62ecf3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 12:15:01 +0530
Subject: [PATCH 03/22] Update lockfile

---
 pnpm-lock.yaml | 121 ++++++++-----------------------------------------
 1 file changed, 19 insertions(+), 102 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9c49e0a0..2484f6312 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -377,7 +377,7 @@ importers:
         version: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
       vitepress-plugin-search:
         specifier: ^1.0.4-alpha.20
-        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8)
+        version: 1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.4.15)
 
   packages/mermaid-example-diagram:
     dependencies:
@@ -464,7 +464,7 @@ importers:
         version: 1.1.0
       unocss:
         specifier: ^0.58.0
-        version: 0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)
+        version: 0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0)
       unplugin-vue-components:
         specifier: ^0.26.0
         version: 0.26.0(rollup@2.79.1)(vue@3.3.4)
@@ -476,7 +476,7 @@ importers:
         version: 0.17.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0)
       vitepress:
         specifier: 1.0.0-rc.39
-        version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6)
+        version: 1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6)
       workbox-window:
         specifier: ^7.0.0
         version: 7.0.0
@@ -5593,7 +5593,7 @@ packages:
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.58.0(postcss@8.4.31):
+  /@unocss/postcss@0.58.0(postcss@8.4.33):
     resolution: {integrity: sha512-2hAwLbfUFqysi8FN1cn3xkHy5GhLMlYy6W4NrAZ2ws7F2MKpsCT2xCj7dT5cI2tW8ulD2YoVbKH15dBhNsMNUA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5605,7 +5605,7 @@ packages:
       css-tree: 2.3.1
       fast-glob: 3.3.2
       magic-string: 0.30.5
-      postcss: 8.4.31
+      postcss: 8.4.33
     dev: true
 
   /@unocss/preset-attributify@0.58.0:
@@ -5876,15 +5876,6 @@ packages:
       estree-walker: 2.0.2
       source-map-js: 1.0.2
 
-  /@vue/compiler-core@3.3.8:
-    resolution: {integrity: sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      source-map-js: 1.0.2
-    dev: true
-
   /@vue/compiler-core@3.4.15:
     resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
     dependencies:
@@ -5901,13 +5892,6 @@ packages:
       '@vue/compiler-core': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/compiler-dom@3.3.8:
-    resolution: {integrity: sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==}
-    dependencies:
-      '@vue/compiler-core': 3.3.8
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/compiler-dom@3.4.15:
     resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
     dependencies:
@@ -5929,21 +5913,6 @@ packages:
       postcss: 8.4.31
       source-map-js: 1.0.2
 
-  /@vue/compiler-sfc@3.3.8:
-    resolution: {integrity: sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/compiler-core': 3.3.8
-      '@vue/compiler-dom': 3.3.8
-      '@vue/compiler-ssr': 3.3.8
-      '@vue/reactivity-transform': 3.3.8
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-      postcss: 8.4.31
-      source-map-js: 1.0.2
-    dev: true
-
   /@vue/compiler-sfc@3.4.15:
     resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
     dependencies:
@@ -5964,13 +5933,6 @@ packages:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/compiler-ssr@3.3.8:
-    resolution: {integrity: sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==}
-    dependencies:
-      '@vue/compiler-dom': 3.3.8
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/compiler-ssr@3.4.15:
     resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
     dependencies:
@@ -5994,27 +5956,11 @@ packages:
       estree-walker: 2.0.2
       magic-string: 0.30.5
 
-  /@vue/reactivity-transform@3.3.8:
-    resolution: {integrity: sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==}
-    dependencies:
-      '@babel/parser': 7.23.5
-      '@vue/compiler-core': 3.3.8
-      '@vue/shared': 3.3.8
-      estree-walker: 2.0.2
-      magic-string: 0.30.5
-    dev: true
-
   /@vue/reactivity@3.3.4:
     resolution: {integrity: sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==}
     dependencies:
       '@vue/shared': 3.3.4
 
-  /@vue/reactivity@3.3.8:
-    resolution: {integrity: sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==}
-    dependencies:
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/reactivity@3.4.15:
     resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
     dependencies:
@@ -6027,13 +5973,6 @@ packages:
       '@vue/reactivity': 3.3.4
       '@vue/shared': 3.3.4
 
-  /@vue/runtime-core@3.3.8:
-    resolution: {integrity: sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==}
-    dependencies:
-      '@vue/reactivity': 3.3.8
-      '@vue/shared': 3.3.8
-    dev: true
-
   /@vue/runtime-core@3.4.15:
     resolution: {integrity: sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==}
     dependencies:
@@ -6048,14 +5987,6 @@ packages:
       '@vue/shared': 3.3.4
       csstype: 3.1.2
 
-  /@vue/runtime-dom@3.3.8:
-    resolution: {integrity: sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==}
-    dependencies:
-      '@vue/runtime-core': 3.3.8
-      '@vue/shared': 3.3.8
-      csstype: 3.1.2
-    dev: true
-
   /@vue/runtime-dom@3.4.15:
     resolution: {integrity: sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==}
     dependencies:
@@ -6073,16 +6004,6 @@ packages:
       '@vue/shared': 3.3.4
       vue: 3.3.4
 
-  /@vue/server-renderer@3.3.8(vue@3.3.8):
-    resolution: {integrity: sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==}
-    peerDependencies:
-      vue: 3.3.8
-    dependencies:
-      '@vue/compiler-ssr': 3.3.8
-      '@vue/shared': 3.3.8
-      vue: 3.3.8(typescript@5.0.4)
-    dev: true
-
   /@vue/server-renderer@3.4.15(vue@3.4.15):
     resolution: {integrity: sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==}
     peerDependencies:
@@ -6090,16 +6011,12 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.4.15
       '@vue/shared': 3.4.15
-      vue: 3.4.15(typescript@5.1.6)
+      vue: 3.4.15(typescript@5.0.4)
     dev: true
 
   /@vue/shared@3.3.4:
     resolution: {integrity: sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==}
 
-  /@vue/shared@3.3.8:
-    resolution: {integrity: sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==}
-    dev: true
-
   /@vue/shared@3.4.15:
     resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
     dev: true
@@ -16175,7 +16092,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.58.0(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0):
+  /unocss@0.58.0(postcss@8.4.33)(rollup@2.79.1)(vite@4.5.0):
     resolution: {integrity: sha512-MSPRHxBqWN+1AHGV+J5uUy4//e6ZBK6O+ISzD0qrXcCD/GNtxk1+lYjOK2ltkUiKX539+/KF91vNxzhhwEf+xA==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -16191,7 +16108,7 @@ packages:
       '@unocss/cli': 0.58.0(rollup@2.79.1)
       '@unocss/core': 0.58.0
       '@unocss/extractor-arbitrary-variants': 0.58.0
-      '@unocss/postcss': 0.58.0(postcss@8.4.31)
+      '@unocss/postcss': 0.58.0(postcss@8.4.33)
       '@unocss/preset-attributify': 0.58.0
       '@unocss/preset-icons': 0.58.0
       '@unocss/preset-mini': 0.58.0
@@ -16530,7 +16447,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.8):
+  /vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.4.15):
     resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
     peerDependencies:
@@ -16544,7 +16461,7 @@ packages:
       glob-to-regexp: 0.4.1
       markdown-it: 13.0.1
       vitepress: 1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
-      vue: 3.3.8(typescript@5.0.4)
+      vue: 3.4.15(typescript@5.0.4)
     dev: true
 
   /vitepress@1.0.0-alpha.72(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0):
@@ -16578,7 +16495,7 @@ packages:
       - terser
     dev: true
 
-  /vitepress@1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6):
+  /vitepress@1.0.0-rc.39(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.33)(search-insights@2.7.0)(typescript@5.1.6):
     resolution: {integrity: sha512-EcgoRlAAp37WOxUOYv45oxyhLrcy3Upey+mKpqW3ldsg6Ol4trPndRBk2GO0QiSvEKlb9BMerk49D/bFICN6kg==}
     hasBin: true
     peerDependencies:
@@ -16600,7 +16517,7 @@ packages:
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.3.0
-      postcss: 8.4.31
+      postcss: 8.4.33
       shikiji: 0.9.19
       shikiji-core: 0.9.19
       shikiji-transformers: 0.9.19
@@ -16788,19 +16705,19 @@ packages:
       '@vue/server-renderer': 3.3.4(vue@3.3.4)
       '@vue/shared': 3.3.4
 
-  /vue@3.3.8(typescript@5.0.4):
-    resolution: {integrity: sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==}
+  /vue@3.4.15(typescript@5.0.4):
+    resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@vue/compiler-dom': 3.3.8
-      '@vue/compiler-sfc': 3.3.8
-      '@vue/runtime-dom': 3.3.8
-      '@vue/server-renderer': 3.3.8(vue@3.3.8)
-      '@vue/shared': 3.3.8
+      '@vue/compiler-dom': 3.4.15
+      '@vue/compiler-sfc': 3.4.15
+      '@vue/runtime-dom': 3.4.15
+      '@vue/server-renderer': 3.4.15(vue@3.4.15)
+      '@vue/shared': 3.4.15
       typescript: 5.0.4
     dev: true
 

From 448756ab54480e5e82b5290c00ec3350c6f34879 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 12:17:20 +0530
Subject: [PATCH 04/22] Fix lint

---
 .github/workflows/e2e.yml | 4 ++--
 cypress.config.cjs        | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 09e8546ff..a357c1c99 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -32,7 +32,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
-  
+
       - name: Cypress run
         uses: cypress-io/github-action@v4
         id: cypress-snapshot-gen
@@ -43,7 +43,7 @@ jobs:
           browser: chrome
           spec: |
             cypress/integration/rendering/flowchart-v2.spec.js
-  
+
   e2e:
     runs-on: ubuntu-latest
     needs: cache
diff --git a/cypress.config.cjs b/cypress.config.cjs
index c754b465f..33633920a 100644
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@@ -4,7 +4,6 @@ const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 const coverage = require('@cypress/code-coverage/task');
 
-
 module.exports = defineConfig({
   projectId: 'n2sma2',
   viewportWidth: 1440,

From d6e738ac4cf2e208326b0ca3a8702d940cb846ec Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 12:21:51 +0530
Subject: [PATCH 05/22] Run all tests

---
 .github/workflows/e2e.yml                          | 5 -----
 cypress/integration/rendering/flowchart-v2.spec.js | 1 +
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index a357c1c99..996fc6673 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -41,8 +41,6 @@ jobs:
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
-          spec: |
-            cypress/integration/rendering/flowchart-v2.spec.js
 
   e2e:
     runs-on: ubuntu-latest
@@ -86,9 +84,6 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          # TODO: Remove
-          spec: |
-            cypress/integration/rendering/flowchart-v2.spec.js
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index fa625159d..e23820ffa 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -6,6 +6,7 @@ describe('Flowchart v2', () => {
       `flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
+      C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,

From cb0ee5aa419849427b4de5b553ef734d22840cae Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 13:17:14 +0530
Subject: [PATCH 06/22] Use pixelmatch for image comparison

---
 cSpell.json                 |  1 +
 cypress/support/commands.js | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/cSpell.json b/cSpell.json
index 82c1c81c4..4b8772347 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -102,6 +102,7 @@
     "pathe",
     "pbrolin",
     "phpbb",
+    "pixelmatch",
     "plantuml",
     "playfair",
     "pnpm",
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 7a77b3ba6..6fc1fe17d 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -26,12 +26,16 @@
 
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
-addMatchImageSnapshotCommand({
-  comparisonMethod: 'ssim',
-  failureThreshold: 0.01,
-  failureThresholdType: 'percent',
-  customDiffConfig: {
-    ssim: 'fast',
-  },
-  blur: 1,
-});
+// The SSIM comparison method can be used if the pixelmatch is throwing lots of false positives.
+// SSIM actually does not catch minute changes in the image, so it is not as accurate as pixelmatch.
+// addMatchImageSnapshotCommand({
+//   comparisonMethod: 'ssim',
+//   failureThreshold: 0.01,
+//   failureThresholdType: 'percent',
+//   customDiffConfig: {
+//     ssim: 'fast',
+//   },
+//   blur: 1,
+// });
+
+addMatchImageSnapshotCommand();

From 658af081ee2781cc159dbc2826857def3765f281 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 14:42:51 +0530
Subject: [PATCH 07/22] Flatten uploaded images

---
 .github/workflows/e2e.yml | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 996fc6673..436624968 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -102,8 +102,30 @@ jobs:
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
 
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
         with:
-          name: error-snapshots
+          name: error-snapshots-${{ matrix.containers }}
+          retention-days: 1
           path: cypress/snapshots/**/__diff_output__/*
+
+  combineArtifacts:
+    needs: e2e
+    runs-on: ubuntu-latest
+    steps:
+    - name: Download All Artifacts
+      uses: actions/download-artifact@v4
+      with:
+        path: snapshots
+        pattern: error-snapshots-*
+        merge-multiple: true
+    - run: |
+        mkdir errors
+        cd snapshots
+        find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
+    - name: Upload Artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: error-snapshots
+        retention-days: 10
+        path: errors/
\ No newline at end of file

From 4ce5d071250ec7b281ad9009e557551bc68ceeca Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 14:46:21 +0530
Subject: [PATCH 08/22] Flatten uploaded images

---
 .github/workflows/e2e.yml | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 436624968..29bd6eab5 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -113,19 +113,19 @@ jobs:
     needs: e2e
     runs-on: ubuntu-latest
     steps:
-    - name: Download All Artifacts
-      uses: actions/download-artifact@v4
-      with:
-        path: snapshots
-        pattern: error-snapshots-*
-        merge-multiple: true
-    - run: |
-        mkdir errors
-        cd snapshots
-        find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
-    - name: Upload Artifacts
-      uses: actions/upload-artifact@v4
-      with:
-        name: error-snapshots
-        retention-days: 10
-        path: errors/
\ No newline at end of file
+      - name: Download All Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: snapshots
+          pattern: error-snapshots-*
+          merge-multiple: true
+      - run: |
+          mkdir errors
+          cd snapshots
+          find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: error-snapshots
+          retention-days: 10
+          path: errors/

From f58a86d747ab5a773fddf905e23176ebf8581c5e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 15:30:18 +0530
Subject: [PATCH 09/22] Notify users

---
 .github/workflows/e2e.yml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 29bd6eab5..cfc8a45d2 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -111,6 +111,7 @@ jobs:
 
   combineArtifacts:
     needs: e2e
+    if: ${{ failure() }}
     runs-on: ubuntu-latest
     steps:
       - name: Download All Artifacts
@@ -125,7 +126,12 @@ jobs:
           find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
       - name: Upload Artifacts
         uses: actions/upload-artifact@v4
+        id: upload-artifacts
         with:
           name: error-snapshots
           retention-days: 10
           path: errors/
+      - name: Notify Users
+        run: |
+          echo "::error,title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
+        

From a9a8a208a6dc011db8c737cbee4c0eb228af2abb Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 15:50:40 +0530
Subject: [PATCH 10/22] Update cache key

---
 .github/workflows/e2e.yml | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index cfc8a45d2..3b983589d 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -8,6 +8,9 @@ on:
 permissions:
   contents: read
 
+env:
+  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || github.event.before }}
+
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -25,13 +28,13 @@ jobs:
         with:
           save-always: true
           path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots
+          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Switch to base branch
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
         uses: actions/checkout@v4
         with:
-          ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
+          ref: ${{ env.targetHash }}
 
       - name: Cypress run
         uses: cypress-io/github-action@v4
@@ -66,7 +69,7 @@ jobs:
         uses: actions/cache/restore@v3
         with:
           path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots
+          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
@@ -109,6 +112,14 @@ jobs:
           retention-days: 1
           path: cypress/snapshots/**/__diff_output__/*
 
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' }}
+        uses: actions/cache/save@v3
+        with:
+          path: ./cypress/snapshots
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
   combineArtifacts:
     needs: e2e
     if: ${{ failure() }}

From be4721b24db004317f451ac406bb094379ce0f59 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 16:18:07 +0530
Subject: [PATCH 11/22] Fix cache save

---
 .github/workflows/e2e.yml | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 3b983589d..9f4fd86b2 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -108,34 +108,38 @@ jobs:
         uses: actions/upload-artifact@v4
         if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
         with:
-          name: error-snapshots-${{ matrix.containers }}
+          name: snapshots-${{ matrix.containers }}
           retention-days: 1
-          path: cypress/snapshots/**/__diff_output__/*
-
-      - name: Save snapshots cache
-        id: cache-upload
-        if: ${{ github.event_name == 'push' }}
-        uses: actions/cache/save@v3
-        with:
           path: ./cypress/snapshots
-          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
 
   combineArtifacts:
     needs: e2e
-    if: ${{ failure() }}
     runs-on: ubuntu-latest
     steps:
       - name: Download All Artifacts
         uses: actions/download-artifact@v4
         with:
           path: snapshots
-          pattern: error-snapshots-*
+          pattern: snapshots-*
           merge-multiple: true
-      - run: |
+      
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' }}
+        uses: actions/cache/save@v3
+        with:
+          path: |
+            ./cypress/snapshots
+            !./**/__diff_output__/*
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
+      - if: ${{ failure() }}
+        run: |
           mkdir errors
           cd snapshots
-          find . -mindepth 2 -type f -print -exec mv {} ../errors/ \;
-      - name: Upload Artifacts
+          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+      - name: Upload Error snapshots
+        if: ${{ failure() }}
         uses: actions/upload-artifact@v4
         id: upload-artifacts
         with:
@@ -143,6 +147,7 @@ jobs:
           retention-days: 10
           path: errors/
       - name: Notify Users
+        if: ${{ failure() }}
         run: |
           echo "::error,title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
         

From 35b3192c2bf69cd3d15e35cb4422ab5c5f7afbd5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 16:23:26 +0530
Subject: [PATCH 12/22] Fix error message

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 9f4fd86b2..5326cb457 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -149,5 +149,5 @@ jobs:
       - name: Notify Users
         if: ${{ failure() }}
         run: |
-          echo "::error,title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
+          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
         

From 6f205f89b22d82af5d56fb1613307e2b7b50db69 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 16:24:42 +0530
Subject: [PATCH 13/22] Always run combineArtifacts

---
 .github/workflows/e2e.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 5326cb457..754f9ada1 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -115,6 +115,7 @@ jobs:
   combineArtifacts:
     needs: e2e
     runs-on: ubuntu-latest
+    if: ${{ always() }}
     steps:
       - name: Download All Artifacts
         uses: actions/download-artifact@v4

From a964af67ec5f1954342cd0b2711b97ee26a7c963 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:04:25 +0530
Subject: [PATCH 14/22] Handle edge cases in E2E

---
 .github/workflows/e2e.yml                   | 38 +++++++++++++++------
 cypress/integration/rendering/debug.spec.js | 12 -------
 2 files changed, 27 insertions(+), 23 deletions(-)
 delete mode 100644 cypress/integration/rendering/debug.spec.js

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 754f9ada1..90769858e 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -1,3 +1,9 @@
+# We use github cache to save snapshots between runs.
+# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
+# These are then downloaded before running the E2E, providing the reference snapshots.
+# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
+
 name: E2E
 
 on:
@@ -9,7 +15,8 @@ permissions:
   contents: read
 
 env:
-  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || github.event.before }}
+  # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
 
 jobs:
   cache:
@@ -30,6 +37,7 @@ jobs:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
+      # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
       - name: Switch to base branch
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
         uses: actions/checkout@v4
@@ -44,6 +52,8 @@ jobs:
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
+          spec:
+            cypress/integration/rendering/sequencediagram.spec.js
 
   e2e:
     runs-on: ubuntu-latest
@@ -64,6 +74,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
         uses: actions/cache/restore@v3
@@ -87,6 +98,8 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          spec:
+            cypress/integration/rendering/sequencediagram.spec.js
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
@@ -104,9 +117,10 @@ jobs:
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
 
+      # We upload the artifacts into numbered archives to prevent overwriting
       - name: Upload Artifacts
         uses: actions/upload-artifact@v4
-        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        if: ${{ always() }}
         with:
           name: snapshots-${{ matrix.containers }}
           retention-days: 1
@@ -117,38 +131,40 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ always() }}
     steps:
+      # Download all snapshot artifacts and merge them into a single folder
       - name: Download All Artifacts
         uses: actions/download-artifact@v4
         with:
           path: snapshots
           pattern: snapshots-*
           merge-multiple: true
-      
+
+      # For successful push events, we save the snapshots cache
       - name: Save snapshots cache
         id: cache-upload
-        if: ${{ github.event_name == 'push' }}
+        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
         uses: actions/cache/save@v3
         with:
-          path: |
-            ./cypress/snapshots
-            !./**/__diff_output__/*
+          path: ./snapshots
           key: ${{ runner.os }}-snapshots-${{ github.event.after }}
 
-      - if: ${{ failure() }}
+      - name: Flatten images to a folder
+        if: ${{ needs.e2e.result == 'failure'  }}
         run: |
           mkdir errors
           cd snapshots
           find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+
       - name: Upload Error snapshots
-        if: ${{ failure() }}
+        if: ${{ needs.e2e.result == 'failure' }}
         uses: actions/upload-artifact@v4
         id: upload-artifacts
         with:
           name: error-snapshots
           retention-days: 10
           path: errors/
+
       - name: Notify Users
-        if: ${{ failure() }}
+        if: ${{ needs.e2e.result == 'failure' }}
         run: |
           echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
-        
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/integration/rendering/debug.spec.js
deleted file mode 100644
index 56ad0f15f..000000000
--- a/cypress/integration/rendering/debug.spec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Flowchart', () => {
-  it('34: testing the label width in percy', () => {
-    imgSnapshotTest(
-      `graph TD
-      A[Christmas]
-      `,
-      { theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
-    );
-  });
-});

From a871a68f3c8bce5419bcd6f04deaeddd0defa473 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:05:06 +0530
Subject: [PATCH 15/22] Remove spec selector

---
 .github/workflows/e2e.yml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 90769858e..817635cbf 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -52,8 +52,6 @@ jobs:
           start: pnpm run dev
           wait-on: 'http://localhost:9000'
           browser: chrome
-          spec:
-            cypress/integration/rendering/sequencediagram.spec.js
 
   e2e:
     runs-on: ubuntu-latest
@@ -98,8 +96,6 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          spec:
-            cypress/integration/rendering/sequencediagram.spec.js
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true

From f1fc874da8d4bdef88add516c7e6c046fdb9b755 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:20:39 +0530
Subject: [PATCH 16/22] Debug

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 817635cbf..56bdd30a0 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -16,12 +16,13 @@ permissions:
 
 env:
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
+  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base_sha || github.event.before }}
 
 jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
+      - run: echo "${{ github.event }}"
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From 279e31bc559caade5d63ce0712273f02a77f244d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:23:13 +0530
Subject: [PATCH 17/22] Debug

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 56bdd30a0..674f27672 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -22,7 +22,7 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: echo "${{ github.event }}"
+      - run: echo "${{ toJSON(github) }}"
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From f5dd24bce4488cb636f384b949c0ea5583eda860 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:29:45 +0530
Subject: [PATCH 18/22] Remove ::

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 674f27672..30c25cb91 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -22,7 +22,7 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: echo "${{ toJSON(github) }}"
+      - run: echo "${{ toJSON(github) }}" | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From 3935f6b389e715382c0701c499ca6825fe34b299 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:31:25 +0530
Subject: [PATCH 19/22] Remove ::

---
 .github/workflows/e2e.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 30c25cb91..7d3bd3628 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -22,7 +22,8 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: echo "${{ toJSON(github) }}" | sed 's/::/:/g'
+      - run: |
+          echo "${{ toJSON(github) }}" | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From 8bfb269b373611d3b4884177c47f1c9ed71289ce Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:33:59 +0530
Subject: [PATCH 20/22] Remove ::

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 7d3bd3628..aab0e1fac 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -23,7 +23,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - run: |
-          echo "${{ toJSON(github) }}" | sed 's/::/:/g'
+          echo '${{ toJSON(github) }}' | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js

From aadf32ab3edfc48ba48445e828349cb7b74f3be8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:45:55 +0530
Subject: [PATCH 21/22] Ignore push events on merge queue

---
 .github/workflows/e2e.yml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index aab0e1fac..36ec672a2 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -8,6 +8,8 @@ name: E2E
 
 on:
   push:
+    branches-ignore:
+      - 'gh-readonly-queue/**'
   pull_request:
   merge_group:
 
@@ -16,7 +18,7 @@ permissions:
 
 env:
   # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-  targetHash: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base_sha || github.event.before }}
+  targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
 
 jobs:
   cache:

From d0224b23b0e112c37debff62d685510117e226a5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 19 Jan 2024 19:47:42 +0530
Subject: [PATCH 22/22] Cleanup e2e.yml

---
 .github/workflows/e2e.yml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 36ec672a2..c23dc88ba 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -24,8 +24,6 @@ jobs:
   cache:
     runs-on: ubuntu-latest
     steps:
-      - run: |
-          echo '${{ toJSON(github) }}' | sed 's/::/:/g'
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
       - name: Setup Node.js