updated config file

.changeset/crazy-loops-matter.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Handle arrows correctly when auto number is enabled

.github/workflows/applitools-tests.yml

@@ -0,0 +1,95 @@
+name: Applitools E2E (Develop Branch) - Fixed
+
+on:
+  push:
+    branches:
+      - develop
+      - applitools_workflow
+
+  workflow_dispatch:
+    # Manual triggering only - to limit Applitools usage
+    inputs:
+      parent_branch:
+        required: true
+        type: string
+        default: master
+        description: 'Parent branch to use for PRs'
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: read
+
+env:
+  # on PRs from forks, this secret will always be empty, for security reasons
+  USE_APPLI: ${{ secrets.APPLITOOLS_API_KEY && 'true' || '' }}
+
+jobs:
+  applitools-e2e:
+    runs-on: ubuntu-latest
+
+    container:
+      image: cypress/browsers:node-22.18.0-chrome-139.0.7258.127-1-ff-141.0.3-edge-139.0.3405.86-1
+      options: --user root --shm-size=2gb
+
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Check Applitools API Key
+        run: |
+          if [ -z "${{ secrets.APPLITOOLS_API_KEY }}" ]; then
+            echo "::error::APPLITOOLS_API_KEY secret is not set. Please add it to your repository secrets."
+            exit 1
+          else
+            echo "✅ Applitools API Key is present"
+          fi
+
+      - name: Setup Node.js and pnpm
+        run: |
+          # Install pnpm globally
+          npm install -g pnpm@10.4.1
+
+          # Verify installations
+          node --version
+          pnpm --version
+
+      - name: Setup Applitools Environment
+        run: |
+          # Set Applitools environment variables for proper CI integration
+          echo "APPLITOOLS_BATCH_ID=${{ github.run_id }}-${{ github.run_attempt }}" >> $GITHUB_ENV
+          echo "APPLITOOLS_BATCH_NAME=GitHub Actions - ${{ github.workflow }}" >> $GITHUB_ENV
+          echo "APPLITOOLS_SERVER_URL=https://eyes.applitools.com" >> $GITHUB_ENV
+          # Force disable local Eyes server
+          echo "APPLITOOLS_DISABLE_LOCAL_EYES_SERVER=true" >> $GITHUB_ENV
+
+      - name: Verify Cypress Installation
+        run: |
+          npx cypress verify
+          npx cypress info
+
+      - name: Run Cypress with Applitools (single spec)
+        uses: cypress-io/github-action@v6
+        with:
+          command: pnpm cypress
+          start: pnpm dev
+          wait-on: http://localhost:9000
+          wait-on-timeout: 180
+          browser: chrome
+          headless: true
+        env:
+          # Ensure these are visible to Cypress + Applitools
+          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
+          APPLITOOLS_BATCH_ID: ${{ env.APPLITOOLS_BATCH_ID }}
+          APPLITOOLS_BATCH_NAME: ${{ env.APPLITOOLS_BATCH_NAME }}
+          APPLITOOLS_SERVER_URL: ${{ env.APPLITOOLS_SERVER_URL }}
+          APPLITOOLS_DISABLE_LOCAL_EYES_SERVER: true
+          USE_APPLI: true
+          # Force Applitools to use cloud service instead of local server
+          APPLITOOLS_DONT_CLOSE_BATCHES: false
+          APPLITOOLS_SAVE_DEBUG_SCREENSHOTS: false
+          # Disable any local server connections
+          APPLITOOLS_PROXY_URL: ''
+          # GitHub Actions CI environment
+          CI: true
+          # Disable Chrome sandbox for container
+          ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-dev-shm-usage'

appli.config.ts

@@ -0,0 +1,38 @@
+export default {
+  // Explicitly set the server URL to use Applitools cloud service
+  serverUrl: 'https://eyes.applitools.com',
+
+  // API key from environment variable
+  apiKey: process.env.APPLITOOLS_API_KEY,
+
+  // Batch configuration
+  batch: {
+    name: 'Cypress Tests',
+    id: process.env.APPLITOOLS_BATCH_ID,
+  },
+
+  // Browser configuration for CI
+  browser: [{ name: 'chrome', width: 1440, height: 1024 }],
+
+  // Test concurrency (reduce for stability in CI)
+  testConcurrency: 1,
+
+  // Viewport size
+  viewportSize: { width: 1440, height: 1024 },
+
+  // Force full page screenshots
+  forceFullPageScreenshot: true,
+
+  // Don't fail tests on visual differences (optional)
+  exitcode: false,
+
+  // Additional settings for CI stability
+  matchTimeout: 2000,
+
+  // Disable local Eyes server
+  // cspell:ignore dont
+  dontCloseBatches: false,
+
+  // Save debug screenshots on failure
+  saveDebugScreenshots: process.env.CI ? false : true,
+} as const;

cypress.config.ts

@@ -1,42 +1,90 @@
-import eyesPlugin from '@applitools/eyes-cypress';
+// cypress.config.ts
+import { defineConfig } from 'cypress';
 import { registerArgosTask } from '@argos-ci/cypress/task';
 import coverage from '@cypress/code-coverage/task.js';
-import { defineConfig } from 'cypress';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
 import cypressSplit from 'cypress-split';
+import eyesPlugin from '@applitools/eyes-cypress';
 
-export default eyesPlugin(
-  defineConfig({
-    projectId: 'n2sma2',
-    viewportWidth: 1440,
-    viewportHeight: 1024,
-    e2e: {
-      specPattern: 'cypress/integration/**/*.{js,ts}',
-      setupNodeEvents(on, config) {
-        coverage(on, config);
-        cypressSplit(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;
-        });
-        // copy any needed variables from process.env to config.env
-        config.env.useAppli = process.env.USE_APPLI ? true : false;
-        config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
+// --- Base Cypress config ---
+const baseConfig = defineConfig({
+  projectId: 'n2sma2',
+  viewportWidth: 1440,
+  viewportHeight: 1024,
+  e2e: {
+    specPattern: 'cypress/integration/**/*.{js,ts}',
+    setupNodeEvents(on, config) {
+      // Code coverage
+      coverage(on, config);
 
-        if (config.env.useArgos) {
-          registerArgosTask(on, config, {
-            // Enable upload to Argos only when it runs on CI.
-            uploadToArgos: !!process.env.CI,
-          });
-        } else {
-          addMatchImageSnapshotPlugin(on, config);
+      // Test splitting
+      cypressSplit(on, config);
+
+      // Browser tweaks for CI
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push(
+            '--window-size=1440,1024',
+            '--force-device-scale-factor=1',
+            '--no-sandbox',
+            '--disable-dev-shm-usage',
+            '--disable-gpu',
+            '--disable-web-security'
+          );
         }
-        // do not forget to return the changed config object!
-        return config;
-      },
+        return launchOptions;
+      });
+
+      // Env flags
+      config.env.useAppli = process.env.USE_APPLI === 'true';
+      config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
+
+      if (config.env.useArgos) {
+        registerArgosTask(on, config, { uploadToArgos: !!process.env.CI });
+      } else {
+        addMatchImageSnapshotPlugin(on, config);
+      }
+
+      return config;
     },
-    video: false,
-  })
-);
+  },
+  video: false,
+  defaultCommandTimeout: 10000,
+  requestTimeout: 10000,
+  responseTimeout: 10000,
+  pageLoadTimeout: 30000,
+});
+
+// --- Conditional Applitools wrapper ---
+function withApplitools(config: Cypress.ConfigOptions): Cypress.ConfigOptions {
+  const shouldLoadApplitools = !!process.env.APPLITOOLS_API_KEY && process.env.USE_APPLI === 'true';
+
+  if (shouldLoadApplitools) {
+    return eyesPlugin(config, {
+      serverUrl: 'https://eyes.applitools.com',
+      batch: {
+        name:
+          process.env.APPLITOOLS_BATCH_NAME ||
+          `GitHub Actions - ${process.env.GITHUB_WORKFLOW || 'Cypress Tests'}`,
+        id:
+          process.env.APPLITOOLS_BATCH_ID ||
+          `${process.env.GITHUB_RUN_ID}-${process.env.GITHUB_RUN_ATTEMPT}`,
+      },
+      testConcurrency: 1,
+      browser: { name: 'chrome', width: 1440, height: 1024 },
+      viewportSize: { width: 1440, height: 1024 },
+      matchTimeout: 2000,
+      forceFullPageScreenshot: true,
+      // cspell:ignore dont
+      dontCloseBatches: false,
+      saveDebugScreenshots: false,
+      saveDiffs: false,
+      concurrency: 1,
+    });
+  }
+
+  return config;
+}
+
+// --- Export final config ---
+export default withApplitools(baseConfig);

cypress/integration/rendering/sequencediagram.spec.js

@@ -893,17 +893,6 @@ describe('Sequence diagram', () => {
         }
       );
     });
-
-    it('should handle bidirectional arrows with autonumber', () => {
-      imgSnapshotTest(`
-       sequenceDiagram
-       autonumber
-       participant A
-       participant B
-       A<<->>B: This is a bidirectional message
-       A->B: This is a normal message`);
-    });
-
     it('should support actor links and properties when not mirrored EXPERIMENTAL: USE WITH CAUTION', () => {
       //Be aware that the syntax for "properties" is likely to be changed.
       imgSnapshotTest(

package.json

@@ -31,7 +31,7 @@
     "lint:fix": "eslint --cache --cache-strategy content --fix . && prettier --write . && tsx scripts/fixCSpell.ts",
     "lint:jison": "tsx ./scripts/jison/lint.mts",
     "contributors": "tsx scripts/updateContributors.ts",
-    "cypress": "cypress run",
+    "cypress": "cypress run --spec ./cypress/integration/rendering/appli.spec.js",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "e2e:coverage": "start-server-and-test dev:coverage http://localhost:9000/ cypress",
@@ -69,7 +69,7 @@
     "@changesets/cli": "^2.27.12",
     "@cspell/eslint-plugin": "^8.19.4",
     "@cypress/code-coverage": "^3.12.49",
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/cors": "^2.8.17",
     "@types/express": "^5.0.0",
@@ -93,7 +93,7 @@
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
-    "eslint": "^9.34.0",
+    "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-cypress": "^4.3.0",
     "eslint-plugin-html": "^8.1.3",
@@ -126,7 +126,7 @@
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.40.0",
+    "typescript-eslint": "^8.38.0",
     "vite": "^7.0.3",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -476,29 +476,7 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
 
   // add node number
   if (sequenceVisible || conf.showSequenceNumbers) {
-    const isBidirectional =
-      type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
-      type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED;
-
-    if (isBidirectional) {
-      const SEQUENCE_NUMBER_RADIUS = 6;
-
-      if (startx < stopx) {
-        line.attr('x1', startx + 2 * SEQUENCE_NUMBER_RADIUS);
-      } else {
-        line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
-      }
-    }
-
-    diagram
-      .append('line')
-      .attr('x1', startx)
-      .attr('y1', lineStartY)
-      .attr('x2', startx)
-      .attr('y2', lineStartY)
-      .attr('stroke-width', 0)
-      .attr('marker-start', 'url(' + url + '#sequencenumber)');
-
+    line.attr('marker-start', 'url(' + url + '#sequencenumber)');
     diagram
       .append('text')
       .attr('x', startx)

tsconfig.eslint.json

@@ -18,6 +18,7 @@
     "./demos/dev",
     "./vite.config.ts",
     "./vitest.workspace.js",
-    "eslint.config.js"
+    "eslint.config.js",
+    "./appli.config.ts"
   ]
 }