Merge remote-tracking branch 'origin/develop' into feature/3508_color-user-journey-title

Co-authored-by: Pranav Mishra <mishrap@dickinson.edu>

.changeset/gold-shoes-camp.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams

.changeset/honest-trees-dress.md

@@ -0,0 +1,7 @@
+---
+'@mermaid-js/mermaid-zenuml': patch
+---
+
+chore: bump minimum ZenUML version to 3.23.28
+
+commit: 9d06d8f31e7f12af9e9e092214f907f2dc93ad75

.changeset/sad-mails-accept.md

@@ -0,0 +1,6 @@
+---
+'mermaid': patch
+'@mermaid-js/parser': patch
+---
+
+Refactor grammar so that title don't break Architecture Diagrams

.changeset/yellow-mirrors-change.md

@@ -0,0 +1,7 @@
+---
+'@mermaid-js/mermaid-zenuml': patch
+---
+
+fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11
+
+commit: 0ad44c12feead9d20c6a870a49327ada58d6e657

.esbuild/build.ts

@@ -34,6 +34,19 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
   }
+  if (entryName === 'mermaid-zenuml') {
+    const iifeOptions: MermaidBuildOptions = {
+      ...commonOptions,
+      format: 'iife',
+      globalName: 'mermaid-zenuml',
+    };
+    buildConfigs.push(
+      // mermaid-zenuml.js
+      { ...iifeOptions },
+      // mermaid-zenuml.min.js
+      { ...iifeOptions, minify: true, metafile: shouldVisualize }
+    );
+  }
 
   const results = await Promise.all(buildConfigs.map((option) => build(getBuildConfig(option))));
 

.esbuild/util.ts

@@ -58,6 +58,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     format,
     minify,
     options: { name, file, packageName },
+    globalName = 'mermaid',
   } = options;
   const external: string[] = ['require', 'fs', 'path'];
   const outFileName = getFileName(name, options);
@@ -68,6 +69,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     },
     metafile,
     minify,
+    globalName,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
@@ -89,11 +91,12 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   if (format === 'iife') {
     output.format = 'iife';
     output.splitting = false;
-    output.globalName = '__esbuild_esm_mermaid';
+    const originalGlobalName = output.globalName ?? 'mermaid';
+    output.globalName = `__esbuild_esm_mermaid_nm[${JSON.stringify(originalGlobalName)}]`;
     // Workaround for removing the .default access in esbuild IIFE.
     // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
     output.footer = {
-      js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
+      js: `globalThis[${JSON.stringify(originalGlobalName)}] = globalThis.${output.globalName}.default;`,
     };
     output.outExtension = { '.js': '.js' };
   } else {

.github/workflows/e2e-timings.yml

@@ -11,6 +11,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 permissions:
   contents: write
+  pull-requests: write
 
 jobs:
   timings:
@@ -29,6 +30,7 @@ jobs:
         uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
+
       - name: Cypress run
         uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
@@ -44,15 +46,17 @@ jobs:
           SPLIT: 1
           SPLIT_INDEX: 0
           SPLIT_FILE: 'cypress/timings.json'
-      - name: Commit changes
+
-        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
+      - name: Compare timings
+        run: pnpm tsx scripts/compare-timings.ts
+
+      - name: Commit and create pull request
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
-          add: 'cypress/timings.json'
+          add-paths: |
-          author_name: 'github-actions[bot]'
+            cypress/timings.json
-          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
+          commit-message: 'chore: update E2E timings'
-          message: 'chore: update E2E timings'
+          branch: update-timings
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v5
-        with:
-          branch: release-promotion
           title: Update E2E Timings
+          delete-branch: true
+          sign-commits: true

cypress/integration/rendering/architecture.spec.ts

@@ -19,6 +19,25 @@ describe.skip('architecture diagram', () => {
             `
     );
   });
+  it('should render a simple architecture diagram with titleAndAccessabilities', () => {
+    imgSnapshotTest(
+      `architecture-beta
+          title Simple Architecture Diagram
+          accTitle: Accessibility Title
+          accDescr: Accessibility Description
+          group api(cloud)[API]
+
+          service db(database)[Database] in api
+          service disk1(disk)[Storage] in api
+          service disk2(disk)[Storage] in api
+          service server(server)[Server] in api
+
+          db:L -- R:server
+          disk1:T -- B:server
+          disk2:T -- B:db
+      `
+    );
+  });
   it('should render an architecture diagram with groups within groups', () => {
     imgSnapshotTest(
       `architecture-beta
@@ -172,7 +191,7 @@ describe.skip('architecture diagram', () => {
     );
   });
 
-  it('should render an architecture diagram with a resonable height', () => {
+  it('should render an architecture diagram with a reasonable height', () => {
     imgSnapshotTest(
       `architecture-beta
               group federated(cloud)[Federated Environment]

cypress/integration/rendering/journey.spec.js

@@ -64,6 +64,167 @@ section Checkout from website
     );
   });
 
+  it('should initialize with a left margin of 150px for user journeys', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 320
+      ---
+      journey
+        title User Journey Example
+        section Onboarding
+            Sign Up: 5:
+            Browse Features: 3:
+            Use Core Functionality: 4:
+        section Engagement
+            Browse Features: 3
+            Use Core Functionality: 4
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    let diagramStartX;
+
+    cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
+      diagramStartX = parseFloat($diagram.attr('x'));
+      expect(diagramStartX).to.be.closeTo(150, 2);
+    });
+  });
+
+  it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
+    renderGraph(
+      `journey
+      title  Web hook life cycle
+      section Darkoob
+        Make preBuilt:5: Darkoob user
+        register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is  maintained
+        Map slug to a Prebuilt Job:5: Darkoob user
+      section External Service
+        set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
+        listen to the events : 5 :  External Service
+        call darkoob endpoint : 5 : External Service
+      section Darkoob
+        check for inputs : 5 : DarkoobAPI
+        run the prebuilt job : 5 : DarkoobAPI
+        `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    let LabelEndX, diagramStartX;
+
+    // Get right edge of the legend
+    cy.contains('tspan', 'Darkoob userf').then((textBox) => {
+      const bbox = textBox[0].getBBox();
+      LabelEndX = bbox.x + bbox.width;
+    });
+
+    // Get left edge of the diagram
+    cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
+      diagramStartX = parseFloat(rect.attr('x'));
+    });
+
+    // Assert right edge of the diagram is greater than or equal to the right edge of the label
+    cy.then(() => {
+      expect(diagramStartX).to.be.gte(LabelEndX);
+    });
+  });
+
+  it('should wrap a single long word with hyphenation', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 100
+      ---
+      journey
+        title Long Word Test
+        section Test
+          VeryLongWord: 5: Supercalifragilisticexpialidocious
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    // Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
+    cy.get('tspan').then((tspans) => {
+      const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
+      return expect(hasHyphen).to.be.true;
+    });
+  });
+
+  it('should wrap text on whitespace without adding hyphens', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 200
+      ---
+      journey
+        title Whitespace Test
+        section Test
+          TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    // Verify that none of the text spans end with a hyphen.
+    cy.get('tspan').each(($el) => {
+      const text = $el.text();
+      expect(text.trim()).not.to.match(/-$/);
+    });
+  });
+
+  it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
+    renderGraph(
+      `
+      ---
+      config:
+        journey:
+          maxLabelWidth: 320
+      ---
+      journey
+        title User Journey Example
+        section Onboarding
+            Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
+            Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
+            Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
+        section Engagement
+            Browse Features: 3
+            Use Core Functionality: 4
+      `,
+      { journey: { useMaxWidth: true } }
+    );
+
+    let diagramStartX, maxLineWidth;
+
+    // Get the diagram's left edge x-coordinate
+    cy.contains('foreignobject', 'Sign Up')
+      .then(($diagram) => {
+        diagramStartX = parseFloat($diagram.attr('x'));
+      })
+      .then(() => {
+        cy.get('text.legend').then(($lines) => {
+          // Check that there are multiple lines
+          expect($lines.length).to.be.equal(9);
+
+          // Check that all lines are under the maxLabelWidth
+          $lines.each((index, el) => {
+            const bbox = el.getBBox();
+            expect(bbox.width).to.be.lte(320);
+            maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
+          });
+
+          /** The expected margin between the diagram and the legend is 150px, as defined by
+           *  conf.leftMargin in user-journey-config.js
+           */
+          expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
+        });
+      });
+  });
+
   it('should correctly render the user journey diagram title with the specified styling', () => {
     renderGraph(
       `---

cypress/timings.json

@@ -2,151 +2,211 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 4989
+      "duration": 5475
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1382
+      "duration": 2037
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3178
+      "duration": 3207
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1372
+      "duration": 1915
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 8998
+      "duration": 10952
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1249
+      "duration": 1872
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 25664
+      "duration": 26686
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 1928
+      "duration": 2629
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 2330
+      "duration": 104
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 11156
+      "duration": 14765
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 3418
+      "duration": 4913
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
+      "duration": 36667
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
+      "duration": 33813
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 14866
+      "duration": 20441
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
+      "duration": 32504
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 9894
+      "duration": 13772
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 5778
+      "duration": 7978
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 1690
+      "duration": 2101
+    },
+    {
+      "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
+      "duration": 76556
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 9144
+      "duration": 12756
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 1951
+      "duration": 2766
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 2196
+      "duration": 35641
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 21029
+      "duration": 26915
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 16087
+      "duration": 21171
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 27465
+      "duration": 37844
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 20035
+      "duration": 26254
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 11366
+      "duration": 15149
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 34025
+      "duration": 45049
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 185902
+      "duration": 250225
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 41631
+      "duration": 51531
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 1736
+      "duration": 2455
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 2247
+      "duration": 3181
+    },
+    {
+      "spec": "cypress/integration/rendering/kanban.spec.ts",
+      "duration": 6298
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 2144
+      "duration": 3065
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 1646
+      "duration": 2521
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 6406
+      "duration": 9341
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 107219
+      "duration": 132809
+    },
+    {
+      "spec": "cypress/integration/rendering/oldShapes.spec.ts",
+      "duration": 101299
+    },
+    {
+      "spec": "cypress/integration/rendering/packet.spec.ts",
+      "duration": 3481
+    },
+    {
+      "spec": "cypress/integration/rendering/pie.spec.ts",
+      "duration": 4878
+    },
+    {
+      "spec": "cypress/integration/rendering/quadrantChart.spec.js",
+      "duration": 7416
+    },
+    {
+      "spec": "cypress/integration/rendering/radar.spec.js",
+      "duration": 4554
+    },
+    {
+      "spec": "cypress/integration/rendering/requirement.spec.js",
+      "duration": 2068
+    },
+    {
+      "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
+      "duration": 47583
+    },
+    {
+      "spec": "cypress/integration/rendering/sankey.spec.ts",
+      "duration": 5792
+    },
+    {
+      "spec": "cypress/integration/rendering/sequencediagram.spec.js",
+      "duration": 33035
+    },
+    {
+      "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
+      "duration": 22716
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 15834
+      "duration": 13868
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 33240
+      "duration": 26376
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 7122
+      "duration": 5872
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 11127
+      "duration": 9469
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 2391
+      "duration": 2742
     }
   ]
 }

docs/ecosystem/integrations-community.md

@@ -267,7 +267,5 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
-- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 
 <!--- cspell:ignore Blazorade HueHive --->

docs/syntax/entityRelationshipDiagram.md

@@ -625,17 +625,43 @@ erDiagram
 
 ## Configuration
 
-### Renderer
+### Layout
 
-The layout of the diagram is done with the renderer. The default renderer is dagre.
+The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
 
-You can opt to use an alternate renderer named elk by editing the configuration. The elk renderer is better for larger and/or more complex diagrams.
+For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
 
+```yaml
+---
+config:
+  layout: elk
+---
 ```
+
+Your Mermaid code should be similar to the following:
+
+```mermaid-example
 ---
-    config:
+title: Order example
-        layout: elk
+config:
+    layout: elk
 ---
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```
+
+```mermaid
+---
+title: Order example
+config:
+    layout: elk
+---
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```
 
 > **Note**

docs/syntax/flowchart.md

@@ -1193,12 +1193,12 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
 
 ```mermaid-example
 flowchart LR
-  A e1@–> B
+  A e1@--> B
 ```
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
 ```
 
 In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
@@ -1229,13 +1229,13 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
 
 ```mermaid-example
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   e1@{ animation: fast }
 ```
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   e1@{ animation: fast }
 ```
 
@@ -1247,14 +1247,14 @@ You can also animate edges by assigning a class to them and then defining animat
 
 ```mermaid-example
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
 ```
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
 ```

package.json

@@ -67,9 +67,9 @@
     "@argos-ci/cypress": "^3.2.0",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.27.12",
-    "@cspell/eslint-plugin": "^8.8.4",
+    "@cspell/eslint-plugin": "^8.18.1",
     "@cypress/code-coverage": "^3.12.49",
-    "@eslint/js": "^9.4.0",
+    "@eslint/js": "^9.24.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/cors": "^2.8.17",
     "@types/express": "^5.0.0",
@@ -93,12 +93,12 @@
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
-    "eslint": "^9.20.1",
+    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.0.0",
+    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-cypress": "^4.2.1",
     "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-jsdoc": "^50.0.1",
+    "eslint-plugin-jsdoc": "^50.6.9",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.1.0",
@@ -126,7 +126,7 @@
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.24.1",
+    "typescript-eslint": "^8.29.1",
     "vite": "^6.1.1",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"

packages/mermaid/src/config.type.ts

@@ -559,6 +559,10 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
    * Margin between actors
    */
   leftMargin?: number;
+  /**
+   * Maximum width of actor labels
+   */
+  maxLabelWidth?: number;
   /**
    * Width of actor boxes
    */

packages/mermaid/src/diagrams/architecture/architecture.spec.ts

@@ -0,0 +1,70 @@
+import { it, describe, expect } from 'vitest';
+import { db } from './architectureDb.js';
+import { parser } from './architectureParser.js';
+
+const {
+  clear,
+  getDiagramTitle,
+  getAccTitle,
+  getAccDescription,
+  getServices,
+  getGroups,
+  getEdges,
+  getJunctions,
+} = db;
+
+describe('architecture diagrams', () => {
+  beforeEach(() => {
+    clear();
+  });
+
+  describe('architecture diagram definitions', () => {
+    it('should handle the architecture keyword', async () => {
+      const str = `architecture-beta`;
+      await expect(parser.parse(str)).resolves.not.toThrow();
+    });
+
+    it('should handle an simple radar definition', async () => {
+      const str = `architecture-beta
+            service db
+            `;
+      await expect(parser.parse(str)).resolves.not.toThrow();
+    });
+  });
+
+  describe('should handle TitleAndAccessibilities', () => {
+    it('should handle title on the first line', async () => {
+      const str = `architecture-beta title Simple Architecture Diagram`;
+      await expect(parser.parse(str)).resolves.not.toThrow();
+      expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
+    });
+
+    it('should handle title on another line', async () => {
+      const str = `architecture-beta
+            title Simple Architecture Diagram
+            `;
+      await expect(parser.parse(str)).resolves.not.toThrow();
+      expect(getDiagramTitle()).toBe('Simple Architecture Diagram');
+    });
+
+    it('should handle accessibility title and description', async () => {
+      const str = `architecture-beta
+            accTitle: Accessibility Title
+            accDescr: Accessibility Description
+            `;
+      await expect(parser.parse(str)).resolves.not.toThrow();
+      expect(getAccTitle()).toBe('Accessibility Title');
+      expect(getAccDescription()).toBe('Accessibility Description');
+    });
+
+    it('should handle multiline accessibility description', async () => {
+      const str = `architecture-beta
+            accDescr {
+                Accessibility Description
+            }
+            `;
+      await expect(parser.parse(str)).resolves.not.toThrow();
+      expect(getAccDescription()).toBe('Accessibility Description');
+    });
+  });
+});

packages/mermaid/src/diagrams/architecture/architectureDb.ts

@@ -1,6 +1,6 @@
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
+import { getConfig as commonGetConfig } from '../../config.js';
 import type { D3Element } from '../../types.js';
 import { ImperativeState } from '../../utils/imperativeState.js';
 import {
@@ -33,6 +33,7 @@ import {
   isArchitectureService,
   shiftPositionByArchitectureDirectionPair,
 } from './architectureTypes.js';
+import { cleanAndMerge } from '../../utils.js';
 
 const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> =
   DEFAULT_CONFIG.architecture;
@@ -316,6 +317,14 @@ const setElementForId = (id: string, element: D3Element) => {
 };
 const getElementById = (id: string) => state.records.elements[id];
 
+const getConfig = (): Required<ArchitectureDiagramConfig> => {
+  const config = cleanAndMerge({
+    ...DEFAULT_ARCHITECTURE_CONFIG,
+    ...commonGetConfig().architecture,
+  });
+  return config;
+};
+
 export const db: ArchitectureDB = {
   clear,
   setDiagramTitle,
@@ -324,6 +333,7 @@ export const db: ArchitectureDB = {
   getAccTitle,
   setAccDescription,
   getAccDescription,
+  getConfig,
 
   addService,
   getServices,
@@ -348,9 +358,5 @@ export const db: ArchitectureDB = {
 export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
   field: T
 ): Required<ArchitectureDiagramConfig>[T] {
-  const arch = getConfig().architecture;
+  return getConfig()[field];
-  if (arch?.[field]) {
-    return arch[field] as Required<ArchitectureDiagramConfig>[T];
-  }
-  return DEFAULT_ARCHITECTURE_CONFIG[field];
 }

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -500,6 +500,8 @@ function layoutArchitecture(
 }
 
 export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram) => {
+  // TODO: Add title support for architecture diagrams
+
   const db = diagObj.db as ArchitectureDB;
 
   const services = db.getServices();

packages/mermaid/src/diagrams/architecture/architectureTypes.ts

@@ -1,4 +1,4 @@
-import type { DiagramDB } from '../../diagram-api/types.js';
+import type { DiagramDBBase } from '../../diagram-api/types.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import type { D3Element } from '../../types.js';
 import type cytoscape from 'cytoscape';
@@ -242,7 +242,7 @@ export interface ArchitectureEdge<DT = ArchitectureDirection> {
   title?: string;
 }
 
-export interface ArchitectureDB extends DiagramDB {
+export interface ArchitectureDB extends DiagramDBBase<ArchitectureDiagramConfig> {
   clear: () => void;
   addService: (service: Omit<ArchitectureService, 'edges'>) => void;
   getServices: () => ArchitectureService[];

packages/mermaid/src/diagrams/radar/radar.spec.ts

@@ -1,11 +1,9 @@
 import { it, describe, expect } from 'vitest';
 import { db } from './db.js';
 import { parser } from './parser.js';
-import { renderer, relativeRadius, closedRoundCurve } from './renderer.js';
+import { relativeRadius, closedRoundCurve } from './renderer.js';
 import { Diagram } from '../../Diagram.js';
 import mermaidAPI from '../../mermaidAPI.js';
-import { a } from 'vitest/dist/chunks/suite.qtkXWc6R.js';
-import { buildRadarStyleOptions } from './styles.js';
 
 const {
   clear,

packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts

@@ -13,15 +13,17 @@ export const setConf = function (cnf) {
 };
 
 const actors = {};
+let maxWidth = 0;
 
 /** @param diagram - The diagram to draw to. */
 function drawActorLegend(diagram) {
   const conf = getConfig().journey;
-  // Draw the actors
+  const maxLabelWidth = conf.maxLabelWidth;
+  maxWidth = 0;
   let yPos = 60;
+
   Object.keys(actors).forEach((person) => {
     const colour = actors[person].color;
-
     const circleData = {
       cx: 20,
       cy: yPos,
@@ -32,21 +34,90 @@ function drawActorLegend(diagram) {
     };
     svgDraw.drawCircle(diagram, circleData);
 
-    const labelData = {
+    // First, measure the full text width without wrapping.
-      x: 40,
+    let measureText = diagram.append('text').attr('visibility', 'hidden').text(person);
-      y: yPos + 7,
+    const fullTextWidth = measureText.node().getBoundingClientRect().width;
-      fill: '#666',
+    measureText.remove();
-      text: person,
-      textMargin: conf.boxTextMargin | 5,
-    };
-    svgDraw.drawText(diagram, labelData);
 
-    yPos += 20;
+    let lines = [];
+
+    // If the text is naturally within the max width, use it as a single line.
+    if (fullTextWidth <= maxLabelWidth) {
+      lines = [person];
+    } else {
+      // Otherwise, wrap the text using the knuth-plass algorithm.
+      const words = person.split(' '); // Split the text into words.
+      let currentLine = '';
+      measureText = diagram.append('text').attr('visibility', 'hidden');
+
+      words.forEach((word) => {
+        // check the width of the line with the new word.
+        const testLine = currentLine ? `${currentLine} ${word}` : word;
+        measureText.text(testLine);
+        const textWidth = measureText.node().getBoundingClientRect().width;
+
+        if (textWidth > maxLabelWidth) {
+          // If adding the new word exceeds max width, push the current line.
+          if (currentLine) {
+            lines.push(currentLine);
+          }
+          currentLine = word; // Start a new line with the current word.
+
+          // If the word itself is too long, break it with a hyphen.
+          measureText.text(word);
+          if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
+            let brokenWord = '';
+            for (const char of word) {
+              brokenWord += char;
+              measureText.text(brokenWord + '-');
+              if (measureText.node().getBoundingClientRect().width > maxLabelWidth) {
+                // Push the broken part with a hyphen.
+                lines.push(brokenWord.slice(0, -1) + '-');
+                brokenWord = char;
+              }
+            }
+            currentLine = brokenWord;
+          }
+        } else {
+          // If the line with the new word fits, add the new word to the current line.
+          currentLine = testLine;
+        }
+      });
+
+      // Push the last line.
+      if (currentLine) {
+        lines.push(currentLine);
+      }
+      measureText.remove(); // Remove the text element used for measuring.
+    }
+
+    lines.forEach((line, index) => {
+      const labelData = {
+        x: 40,
+        y: yPos + 7 + index * 20,
+        fill: '#666',
+        text: line,
+        textMargin: conf.boxTextMargin ?? 5,
+      };
+
+      // Draw the text and measure the width.
+      const textElement = svgDraw.drawText(diagram, labelData);
+      const lineWidth = textElement.node().getBoundingClientRect().width;
+
+      // Use conf.leftMargin as the initial spacing baseline,
+      // but expand maxWidth if the line is wider.
+      if (lineWidth > maxWidth && lineWidth > conf.leftMargin - lineWidth) {
+        maxWidth = lineWidth;
+      }
+    });
+
+    yPos += Math.max(20, lines.length * 20);
   });
 }
+
 // TODO: Cleanup?
 const conf = getConfig().journey;
-const LEFT_MARGIN = conf.leftMargin;
+let leftMargin = 0;
 export const draw = function (text, id, version, diagObj) {
   const configObject = getConfig();
   const titleColor = configObject.journey.titleColor;
@@ -87,7 +158,8 @@ export const draw = function (text, id, version, diagObj) {
   });
 
   drawActorLegend(diagram);
-  bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50);
+  leftMargin = conf.leftMargin + maxWidth;
+  bounds.insert(0, 0, leftMargin, Object.keys(actors).length * 50);
   drawTasks(diagram, tasks, 0);
 
   const box = bounds.getBounds();
@@ -95,7 +167,7 @@ export const draw = function (text, id, version, diagObj) {
     diagram
       .append('text')
       .text(title)
-      .attr('x', LEFT_MARGIN)
+      .attr('x', leftMargin)
       .attr('font-size', titleFontSize)
       .attr('font-weight', 'bold')
       .attr('y', 25)
@@ -104,16 +176,16 @@ export const draw = function (text, id, version, diagObj) {
   }
 
   const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
-  const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
+  const width = leftMargin + box.stopx + 2 * conf.diagramMarginX;
 
   configureSvgSize(diagram, height, width, conf.useMaxWidth);
 
   // Draw activity line
   diagram
     .append('line')
-    .attr('x1', LEFT_MARGIN)
+    .attr('x1', leftMargin)
     .attr('y1', conf.height * 4) // One section head + one task + margins
-    .attr('x2', width - LEFT_MARGIN - 4) // Subtract stroke width so arrow point is retained
+    .attr('x2', width - leftMargin - 4) // Subtract stroke width so arrow point is retained
     .attr('y2', conf.height * 4)
     .attr('stroke-width', 4)
     .attr('stroke', 'black')
@@ -239,7 +311,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
       }
 
       const section = {
-        x: i * conf.taskMargin + i * conf.width + LEFT_MARGIN,
+        x: i * conf.taskMargin + i * conf.width + leftMargin,
         y: 50,
         text: task.section,
         fill,
@@ -263,7 +335,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
     }, {});
 
     // Add some rendering data to the object
-    task.x = i * conf.taskMargin + i * conf.width + LEFT_MARGIN;
+    task.x = i * conf.taskMargin + i * conf.width + leftMargin;
     task.y = taskPos;
     task.width = conf.diagramMarginX;
     task.height = conf.diagramMarginY;

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -262,7 +262,5 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
-- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 
 <!--- cspell:ignore Blazorade HueHive --->

packages/mermaid/src/docs/syntax/entityRelationshipDiagram.md

@@ -407,17 +407,31 @@ erDiagram
 
 ## Configuration
 
-### Renderer
+### Layout
 
-The layout of the diagram is done with the renderer. The default renderer is dagre.
+The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
 
-You can opt to use an alternate renderer named elk by editing the configuration. The elk renderer is better for larger and/or more complex diagrams.
+For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
 
+```yaml
+---
+config:
+  layout: elk
+---
 ```
+
+Your Mermaid code should be similar to the following:
+
+```mermaid-example
 ---
-    config:
+title: Order example
-        layout: elk
+config:
+    layout: elk
 ---
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```
 
 ```note

packages/mermaid/src/docs/syntax/flowchart.md

@@ -721,7 +721,7 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
 ```
 
 In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
@@ -746,7 +746,7 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   e1@{ animation: fast }
 ```
 
@@ -758,7 +758,7 @@ You can also animate edges by assigning a class to them and then defining animat
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
 ```

packages/mermaid/src/mermaidAPI.spec.ts

@@ -31,6 +31,7 @@ vi.mock('./diagrams/xychart/xychartRenderer.js');
 vi.mock('./diagrams/requirement/requirementRenderer.js');
 vi.mock('./diagrams/sequence/sequenceRenderer.js');
 vi.mock('./diagrams/radar/renderer.js');
+vi.mock('./diagrams/architecture/architectureRenderer.js');
 
 // -------------------------------------
 
@@ -799,6 +800,7 @@ graph TD;A--x|text including URL space|B;`)
       { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
       { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
       { textDiagramType: 'radar-beta', expectedType: 'radar' },
+      { textDiagramType: 'architecture-beta', expectedType: 'architecture' },
     ];
 
     describe('accessibility', () => {

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -562,7 +562,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   }
   let svgPath;
   let linePath = lineFunction(lineData);
-  const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
+  const edgeStyles = Array.isArray(edge.style) ? edge.style : edge.style ? [edge.style] : [];
   let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));
 
   if (edge.look === 'handDrawn') {

packages/mermaid/src/schemas/config.schema.yaml

@@ -1499,6 +1499,10 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
         type: integer
         default: 150
         minimum: 0
+      maxLabelWidth:
+        description: Maximum width of actor labels
+        type: integer
+        default: 360
       width:
         description: Width of actor boxes
         type: integer

packages/parser/src/language/architecture/arch.langium

@@ -0,0 +1,2 @@
+terminal ARCH_ICON: /\([\w-:]+\)/;
+terminal ARCH_TITLE: /\[[\w ]+\]/;

packages/parser/src/language/architecture/architecture.langium

@@ -1,14 +1,15 @@
 grammar Architecture
 import "../common/common";
+import "arch";
 
 entry Architecture:
     NEWLINE*
     "architecture-beta"
     (
-    NEWLINE* TitleAndAccessibilities
+        NEWLINE
-    | NEWLINE* Statement*
+        | TitleAndAccessibilities
-    | NEWLINE*
+        | Statement
-    )
+    )*
 ;
 
 fragment Statement:
@@ -31,25 +32,21 @@ fragment Arrow:
 ;
 
 Group:
-    'group' id=ARCH_ID icon=ARCH_ICON? title=ARCH_TITLE? ('in' in=ARCH_ID)? EOL
+    'group' id=ID icon=ARCH_ICON? title=ARCH_TITLE? ('in' in=ID)? EOL
 ;
 
 Service:
-    'service' id=ARCH_ID (iconText=ARCH_TEXT_ICON | icon=ARCH_ICON)? title=ARCH_TITLE? ('in' in=ARCH_ID)? EOL
+    'service' id=ID (iconText=STRING | icon=ARCH_ICON)? title=ARCH_TITLE? ('in' in=ID)? EOL
 ;
 
 Junction:
-    'junction' id=ARCH_ID ('in' in=ARCH_ID)? EOL
+    'junction' id=ID ('in' in=ID)? EOL
 ;
 
 Edge:
-    lhsId=ARCH_ID lhsGroup?=ARROW_GROUP? Arrow rhsId=ARCH_ID rhsGroup?=ARROW_GROUP? EOL
+    lhsId=ID lhsGroup?=ARROW_GROUP? Arrow rhsId=ID rhsGroup?=ARROW_GROUP? EOL
 ;
 
 terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B';
-terminal ARCH_ID: /[\w]+/;
-terminal ARCH_TEXT_ICON: /\("[^"]+"\)/;
-terminal ARCH_ICON: /\([\w-:]+\)/;
-terminal ARCH_TITLE: /\[[\w ]+\]/;
 terminal ARROW_GROUP: /\{group\}/;
 terminal ARROW_INTO: /<|>/;

packages/parser/src/language/common/common.langium

@@ -1,22 +1,35 @@
-interface Common {
+// Base terminals and fragments for common language constructs
-  accDescr?: string;
+// Terminal Precedence: Lazy to Greedy
-  accTitle?: string;
+// When imported, the terminals are considered after the terminals in the importing grammar
-  title?: string;
+// Note: Hence, to add a terminal greedier than the common terminals, import it separately after the common import
-}
-
-fragment TitleAndAccessibilities:
-  ((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
-;
 
 fragment EOL returns string:
   NEWLINE+ | EOF
 ;
 
-terminal NEWLINE: /\r?\n/;
+fragment TitleAndAccessibilities:
+  ((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
+;
+
+terminal BOOLEAN returns boolean: 'true' | 'false';
+
 terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
 terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
 terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
 
+terminal FLOAT returns number: /[0-9]+\.[0-9]+(?!\.)/;
+terminal INT returns number: /0|[1-9][0-9]*(?!\.)/;
+terminal NUMBER returns number: FLOAT | INT;
+
+terminal STRING returns string: /"([^"\\]|\\.)*"|'([^'\\]|\\.)*'/;
+
+// Alphanumerics with underscores and dashes
+// Must start with an alphanumeric or an underscore
+// Cant end with a dash
+terminal ID returns string: /[\w]([-\w]*\w)?/;
+
+terminal NEWLINE: /\r?\n/;
+
 hidden terminal WHITESPACE: /[\t ]+/;
 hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/;
 hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/;

packages/parser/src/language/gitGraph/gitGraph.langium

@@ -1,39 +1,15 @@
 grammar GitGraph
-
+import "../common/common";
-interface Common {
+import "reference";
-  accDescr?: string;
-  accTitle?: string;
-  title?: string;
-}
-
-fragment TitleAndAccessibilities:
-  ((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
-;
-
-fragment EOL returns string:
-  NEWLINE+ | EOF
-;
-
-terminal NEWLINE: /\r?\n/;
-terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
-terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
-terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
-
-hidden terminal WHITESPACE: /[\t ]+/;
-hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/;
-hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/;
-hidden terminal SINGLE_LINE_COMMENT: /[\t ]*%%[^\n\r]*/;
 
 entry GitGraph:
   NEWLINE*
   ('gitGraph' | 'gitGraph' ':' | 'gitGraph:' | ('gitGraph' Direction ':'))
-  NEWLINE*
   (
-    NEWLINE*
+    NEWLINE
-    (TitleAndAccessibilities |
+    | TitleAndAccessibilities
-    statements+=Statement |
+    | statements+=Statement
-     NEWLINE)*
+  )*
-  )
 ;
 
 Statement
@@ -56,12 +32,12 @@ Commit:
         |'type:' type=('NORMAL' | 'REVERSE' | 'HIGHLIGHT')
     )* EOL;
 Branch:
-    'branch' name=(ID|STRING)
+    'branch' name=(REFERENCE|STRING)
     ('order:' order=INT)?
     EOL;
 
 Merge:
-    'merge' branch=(ID|STRING)
+    'merge' branch=(REFERENCE|STRING)
     (
         'id:' id=STRING
         |'tag:' tags+=STRING
@@ -69,7 +45,7 @@ Merge:
     )* EOL;
 
 Checkout:
-    ('checkout'|'switch') branch=(ID|STRING) EOL;
+    ('checkout'|'switch') branch=(REFERENCE|STRING) EOL;
 
 CherryPicking:
     'cherry-pick' 
@@ -78,10 +54,3 @@ CherryPicking:
         |'tag:' tags+=STRING
         |'parent:' parent=STRING
     )* EOL;
-
-
-
-terminal INT returns number: /[0-9]+(?=\s)/;
-terminal ID returns string: /\w([-\./\w]*[-\w])?/;
-terminal STRING: /"[^"]*"|'[^']*'/;
-

packages/parser/src/language/gitGraph/reference.langium

@@ -0,0 +1,4 @@
+// Alphanumerics with underscores, dashes, slashes, and dots
+// Must start with an alphanumeric or an underscore
+// Cant end with a dash, slash, or dot
+terminal REFERENCE returns string: /\w([-\./\w]*[-\w])?/;

packages/parser/src/language/index.ts

@@ -12,7 +12,6 @@ export {
   Commit,
   Merge,
   Statement,
-  isCommon,
   isInfo,
   isPacket,
   isPacketBlock,

packages/parser/src/language/packet/packet.langium

@@ -5,15 +5,12 @@ entry Packet:
   NEWLINE*
   "packet-beta"
   (
-    NEWLINE* TitleAndAccessibilities blocks+=PacketBlock*
+    TitleAndAccessibilities
-    | NEWLINE+ blocks+=PacketBlock+
+    | blocks+=PacketBlock
-    | NEWLINE*
+    | NEWLINE
-  )
+  )*
 ;
 
 PacketBlock:
   start=INT('-' end=INT)? ':' label=STRING EOL
 ;
-
-terminal INT returns number: /0|[1-9][0-9]*/;
-terminal STRING: /"[^"]*"|'[^']*'/;

packages/parser/src/language/pie/pie.langium

@@ -5,15 +5,12 @@ entry Pie:
   NEWLINE*
   "pie" showData?="showData"?
   (
-    NEWLINE* TitleAndAccessibilities sections+=PieSection*
+    TitleAndAccessibilities 
-    | NEWLINE+ sections+=PieSection+
+    | sections+=PieSection
-    | NEWLINE*
+    | NEWLINE
-  )
+  )*
 ;
 
 PieSection:
-  label=PIE_SECTION_LABEL ":" value=PIE_SECTION_VALUE EOL
+  label=STRING ":" value=NUMBER EOL
 ;
-
-terminal PIE_SECTION_LABEL: /"[^"]+"/;
-terminal PIE_SECTION_VALUE returns number: /(0|[1-9][0-9]*)(\.[0-9]+)?/;

packages/parser/src/language/radar/radar.langium

@@ -1,31 +1,5 @@
 grammar Radar
-// import "../common/common";
+import "../common/common";
-// Note: The import statement breaks TitleAndAccessibilities probably because of terminal order definition
-// TODO: May need to change the common.langium to fix this
-
-interface Common {
-  accDescr?: string;
-  accTitle?: string;
-  title?: string;
-}
-
-fragment TitleAndAccessibilities:
-  ((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
-;
-
-fragment EOL returns string:
-  NEWLINE+ | EOF
-;
-
-terminal NEWLINE: /\r?\n/;
-terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
-terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
-terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
-
-hidden terminal WHITESPACE: /[\t ]+/;
-hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/;
-hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/;
-hidden terminal SINGLE_LINE_COMMENT: /[\t ]*%%[^\n\r]*/;
 
 entry Radar:
     NEWLINE*
@@ -78,12 +52,4 @@ Option:
     )
 ;   
 
-
-terminal NUMBER returns number: /(0|[1-9][0-9]*)(\.[0-9]+)?/;
-
-terminal BOOLEAN returns boolean: 'true' | 'false';    
-
 terminal GRATICULE returns string: 'circle' | 'polygon';
-
-terminal ID returns string: /[a-zA-Z_][a-zA-Z0-9\-_]*/; 
-terminal STRING: /"[^"]*"|'[^']*'/;

packages/parser/tests/architecture.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+
+import { Architecture } from '../src/language/index.js';
+import { expectNoErrorsOrAlternatives, architectureParse as parse } from './test-util.js';
+
+describe('architecture', () => {
+  describe('should handle architecture definition', () => {
+    it.each([
+      `architecture-beta`,
+      `  architecture-beta  `,
+      `\tarchitecture-beta\t`,
+      `
+        \tarchitecture-beta
+        `,
+    ])('should handle regular architecture', (context: string) => {
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+    });
+  });
+
+  describe('should handle TitleAndAccessibilities', () => {
+    it.each([
+      `architecture-beta title sample title`,
+      `  architecture-beta  title sample title  `,
+      `\tarchitecture-beta\ttitle sample title\t`,
+      `architecture-beta
+            \ttitle sample title
+            `,
+    ])('should handle regular architecture + title in same line', (context: string) => {
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+
+      const { title } = result.value;
+      expect(title).toBe('sample title');
+    });
+
+    it.each([
+      `architecture-beta
+            title sample title`,
+      `architecture-beta
+            title sample title
+            `,
+    ])('should handle regular architecture + title in next line', (context: string) => {
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+
+      const { title } = result.value;
+      expect(title).toBe('sample title');
+    });
+
+    it('should handle regular architecture + title + accTitle + accDescr', () => {
+      const context = `architecture-beta
+            title sample title
+            accTitle: sample accTitle
+            accDescr: sample accDescr
+            `;
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+
+      const { title, accTitle, accDescr } = result.value;
+      expect(title).toBe('sample title');
+      expect(accTitle).toBe('sample accTitle');
+      expect(accDescr).toBe('sample accDescr');
+    });
+
+    it('should handle regular architecture + title + accTitle + multi-line accDescr', () => {
+      const context = `architecture-beta
+            title sample title
+            accTitle: sample accTitle
+            accDescr {
+                sample accDescr
+            }
+            `;
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Architecture);
+
+      const { title, accTitle, accDescr } = result.value;
+      expect(title).toBe('sample title');
+      expect(accTitle).toBe('sample accTitle');
+      expect(accDescr).toBe('sample accDescr');
+    });
+  });
+});

packages/parser/tests/gitGraph.test.ts

@@ -63,6 +63,12 @@ describe('Parsing Branch Statements', () => {
     expect(branch.name).toBe('master');
   });
 
+  it('should parse a branch name starting with numbers', () => {
+    const result = parse(`gitGraph\n commit\n branch 1.0.1\n`);
+    const branch = result.value.statements[1] as Branch;
+    expect(branch.name).toBe('1.0.1');
+  });
+
   it('should parse a branch with an order property', () => {
     const result = parse(`gitGraph\n commit\n  branch feature order:1\n`);
     const branch = result.value.statements[1] as Branch;

packages/parser/tests/pie.test.ts

@@ -4,226 +4,247 @@ import { Pie } from '../src/language/index.js';
 import { expectNoErrorsOrAlternatives, pieParse as parse } from './test-util.js';
 
 describe('pie', () => {
-  it.each([
+  describe('should handle pie definition with or without showData', () => {
-    `pie`,
+    it.each([
-    `  pie  `,
+      `pie`,
-    `\tpie\t`,
+      `  pie  `,
-    `
+      `\tpie\t`,
+      `
     \tpie
     `,
-  ])('should handle regular pie', (context: string) => {
+    ])('should handle regular pie', (context: string) => {
-    const result = parse(context);
+      const result = parse(context);
-    expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-    expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
-  });
+    });
 
-  it.each([
+    it.each([
-    `pie showData`,
+      `pie showData`,
-    `  pie  showData  `,
+      `  pie  showData  `,
-    `\tpie\tshowData\t`,
+      `\tpie\tshowData\t`,
-    `
+      `
     pie\tshowData
     `,
-  ])('should handle regular showData', (context: string) => {
+    ])('should handle regular showData', (context: string) => {
-    const result = parse(context);
+      const result = parse(context);
-    expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-    expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
 
-    const { showData } = result.value;
+      const { showData } = result.value;
-    expect(showData).toBeTruthy();
+      expect(showData).toBeTruthy();
+    });
   });
+  describe('should handle TitleAndAccessibilities', () => {
+    describe('should handle TitleAndAccessibilities without showData', () => {
+      it.each([
+        `pie title sample title`,
+        `  pie  title sample title  `,
+        `\tpie\ttitle sample title\t`,
+        `pie
+        \ttitle sample title
+        `,
+      ])('should handle regular pie + title in same line', (context: string) => {
+        const result = parse(context);
+        expectNoErrorsOrAlternatives(result);
+        expect(result.value.$type).toBe(Pie);
 
-  it.each([
+        const { title } = result.value;
-    `pie title sample title`,
+        expect(title).toBe('sample title');
-    `  pie  title sample title  `,
+      });
-    `\tpie\ttitle sample title\t`,
-    `pie
-    \ttitle sample title
-    `,
-  ])('should handle regular pie + title in same line', (context: string) => {
-    const result = parse(context);
-    expectNoErrorsOrAlternatives(result);
-    expect(result.value.$type).toBe(Pie);
 
-    const { title } = result.value;
-    expect(title).toBe('sample title');
-  });
-
-  it.each([
-    `pie
-    title sample title`,
-    `pie
-    title sample title
-    `,
-    `pie
-    title sample title`,
-    `pie
-    title sample title
-    `,
-  ])('should handle regular pie + title in different line', (context: string) => {
-    const result = parse(context);
-    expectNoErrorsOrAlternatives(result);
-    expect(result.value.$type).toBe(Pie);
-
-    const { title } = result.value;
-    expect(title).toBe('sample title');
-  });
-
-  it.each([
-    `pie showData title sample title`,
-    `pie showData title sample title
-    `,
-  ])('should handle regular pie + showData + title', (context: string) => {
-    const result = parse(context);
-    expectNoErrorsOrAlternatives(result);
-    expect(result.value.$type).toBe(Pie);
-
-    const { showData, title } = result.value;
-    expect(showData).toBeTruthy();
-    expect(title).toBe('sample title');
-  });
-
-  it.each([
-    `pie showData
-    title sample title`,
-    `pie showData
-    title sample title
-    `,
-    `pie showData
-    title sample title`,
-    `pie showData
-    title sample title
-    `,
-  ])('should handle regular showData + title in different line', (context: string) => {
-    const result = parse(context);
-    expectNoErrorsOrAlternatives(result);
-    expect(result.value.$type).toBe(Pie);
-
-    const { showData, title } = result.value;
-    expect(showData).toBeTruthy();
-    expect(title).toBe('sample title');
-  });
-
-  describe('sections', () => {
-    describe('normal', () => {
       it.each([
         `pie
+        title sample title`,
+        `pie
+        title sample title
+        `,
+        `pie
+        title sample title`,
+        `pie
+        title sample title
+        `,
+      ])('should handle regular pie + title in different line', (context: string) => {
+        const result = parse(context);
+        expectNoErrorsOrAlternatives(result);
+        expect(result.value.$type).toBe(Pie);
+
+        const { title } = result.value;
+        expect(title).toBe('sample title');
+      });
+    });
+
+    describe('should handle TitleAndAccessibilities with showData', () => {
+      it.each([
+        `pie showData title sample title`,
+        `pie showData title sample title
+        `,
+      ])('should handle regular pie + showData + title', (context: string) => {
+        const result = parse(context);
+        expectNoErrorsOrAlternatives(result);
+        expect(result.value.$type).toBe(Pie);
+
+        const { showData, title } = result.value;
+        expect(showData).toBeTruthy();
+        expect(title).toBe('sample title');
+      });
+
+      it.each([
+        `pie showData
+        title sample title`,
+        `pie showData
+        title sample title
+        `,
+        `pie showData
+        title sample title`,
+        `pie showData
+        title sample title
+        `,
+      ])('should handle regular showData + title in different line', (context: string) => {
+        const result = parse(context);
+        expectNoErrorsOrAlternatives(result);
+        expect(result.value.$type).toBe(Pie);
+
+        const { showData, title } = result.value;
+        expect(showData).toBeTruthy();
+        expect(title).toBe('sample title');
+      });
+    });
+  });
+
+  describe('should handle sections', () => {
+    it.each([
+      `pie
         "GitHub":100
         "GitLab":50`,
-        `pie
+      `pie
         "GitHub"   :   100
         "GitLab"   :   50`,
-        `pie
+      `pie
         "GitHub"\t:\t100
         "GitLab"\t:\t50`,
-        `pie
+      `pie
         \t"GitHub" \t : \t 100
         \t"GitLab" \t : \t  50
         `,
-      ])('should handle regular sections', (context: string) => {
+    ])('should handle regular sections', (context: string) => {
-        const result = parse(context);
+      const result = parse(context);
-        expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-        expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
 
-        const { sections } = result.value;
+      const { sections } = result.value;
-        expect(sections[0].label).toBe('GitHub');
+      expect(sections[0].label).toBe('GitHub');
-        expect(sections[0].value).toBe(100);
+      expect(sections[0].value).toBe(100);
 
-        expect(sections[1].label).toBe('GitLab');
+      expect(sections[1].label).toBe('GitLab');
-        expect(sections[1].value).toBe(50);
+      expect(sections[1].value).toBe(50);
-      });
+    });
 
-      it('should handle sections with showData', () => {
+    it('should handle sections with showData', () => {
-        const context = `pie showData
+      const context = `pie showData
         "GitHub": 100
         "GitLab": 50`;
-        const result = parse(context);
+      const result = parse(context);
-        expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-        expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
 
-        const { showData, sections } = result.value;
+      const { showData, sections } = result.value;
-        expect(showData).toBeTruthy();
+      expect(showData).toBeTruthy();
 
-        expect(sections[0].label).toBe('GitHub');
+      expect(sections[0].label).toBe('GitHub');
-        expect(sections[0].value).toBe(100);
+      expect(sections[0].value).toBe(100);
 
-        expect(sections[1].label).toBe('GitLab');
+      expect(sections[1].label).toBe('GitLab');
-        expect(sections[1].value).toBe(50);
+      expect(sections[1].value).toBe(50);
-      });
+    });
 
-      it('should handle sections with title', () => {
+    it('should handle sections with title', () => {
-        const context = `pie title sample wow
+      const context = `pie title sample wow
         "GitHub": 100
         "GitLab": 50`;
-        const result = parse(context);
+      const result = parse(context);
-        expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-        expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
 
-        const { title, sections } = result.value;
+      const { title, sections } = result.value;
-        expect(title).toBe('sample wow');
+      expect(title).toBe('sample wow');
 
-        expect(sections[0].label).toBe('GitHub');
+      expect(sections[0].label).toBe('GitHub');
-        expect(sections[0].value).toBe(100);
+      expect(sections[0].value).toBe(100);
 
-        expect(sections[1].label).toBe('GitLab');
+      expect(sections[1].label).toBe('GitLab');
-        expect(sections[1].value).toBe(50);
+      expect(sections[1].value).toBe(50);
-      });
+    });
 
-      it('should handle sections with accTitle', () => {
+    it('should handle value with positive decimal', () => {
-        const context = `pie accTitle: sample wow
+      const context = `pie
+        "ash": 60.67
+        "bat": 40`;
+      const result = parse(context);
+      expectNoErrorsOrAlternatives(result);
+      expect(result.value.$type).toBe(Pie);
+
+      const { sections } = result.value;
+      expect(sections[0].label).toBe('ash');
+      expect(sections[0].value).toBe(60.67);
+
+      expect(sections[1].label).toBe('bat');
+      expect(sections[1].value).toBe(40);
+    });
+
+    it('should handle sections with accTitle', () => {
+      const context = `pie accTitle: sample wow
         "GitHub": 100
         "GitLab": 50`;
-        const result = parse(context);
+      const result = parse(context);
-        expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-        expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
 
-        const { accTitle, sections } = result.value;
+      const { accTitle, sections } = result.value;
-        expect(accTitle).toBe('sample wow');
+      expect(accTitle).toBe('sample wow');
 
-        expect(sections[0].label).toBe('GitHub');
+      expect(sections[0].label).toBe('GitHub');
-        expect(sections[0].value).toBe(100);
+      expect(sections[0].value).toBe(100);
 
-        expect(sections[1].label).toBe('GitLab');
+      expect(sections[1].label).toBe('GitLab');
-        expect(sections[1].value).toBe(50);
+      expect(sections[1].value).toBe(50);
-      });
+    });
 
-      it('should handle sections with single line accDescr', () => {
+    it('should handle sections with single line accDescr', () => {
-        const context = `pie accDescr: sample wow
+      const context = `pie accDescr: sample wow
         "GitHub": 100
         "GitLab": 50`;
-        const result = parse(context);
+      const result = parse(context);
-        expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-        expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
 
-        const { accDescr, sections } = result.value;
+      const { accDescr, sections } = result.value;
-        expect(accDescr).toBe('sample wow');
+      expect(accDescr).toBe('sample wow');
 
-        expect(sections[0].label).toBe('GitHub');
+      expect(sections[0].label).toBe('GitHub');
-        expect(sections[0].value).toBe(100);
+      expect(sections[0].value).toBe(100);
 
-        expect(sections[1].label).toBe('GitLab');
+      expect(sections[1].label).toBe('GitLab');
-        expect(sections[1].value).toBe(50);
+      expect(sections[1].value).toBe(50);
-      });
+    });
 
-      it('should handle sections with multi line accDescr', () => {
+    it('should handle sections with multi line accDescr', () => {
-        const context = `pie accDescr {
+      const context = `pie accDescr {
             sample wow
         }
         "GitHub": 100
         "GitLab": 50`;
-        const result = parse(context);
+      const result = parse(context);
-        expectNoErrorsOrAlternatives(result);
+      expectNoErrorsOrAlternatives(result);
-        expect(result.value.$type).toBe(Pie);
+      expect(result.value.$type).toBe(Pie);
 
-        const { accDescr, sections } = result.value;
+      const { accDescr, sections } = result.value;
-        expect(accDescr).toBe('sample wow');
+      expect(accDescr).toBe('sample wow');
 
-        expect(sections[0].label).toBe('GitHub');
+      expect(sections[0].label).toBe('GitHub');
-        expect(sections[0].value).toBe(100);
+      expect(sections[0].value).toBe(100);
 
-        expect(sections[1].label).toBe('GitLab');
+      expect(sections[1].label).toBe('GitLab');
-        expect(sections[1].value).toBe(50);
+      expect(sections[1].value).toBe(50);
-      });
     });
   });
 });

packages/parser/tests/test-util.ts

@@ -1,6 +1,8 @@
 import type { LangiumParser, ParseResult } from 'langium';
 import { expect, vi } from 'vitest';
 import type {
+  Architecture,
+  ArchitectureServices,
   Info,
   InfoServices,
   Pie,
@@ -13,6 +15,7 @@ import type {
   GitGraphServices,
 } from '../src/language/index.js';
 import {
+  createArchitectureServices,
   createInfoServices,
   createPieServices,
   createRadarServices,
@@ -47,6 +50,17 @@ export function createInfoTestServices() {
 }
 export const infoParse = createInfoTestServices().parse;
 
+const architectureServices: ArchitectureServices = createArchitectureServices().Architecture;
+const architectureParser: LangiumParser = architectureServices.parser.LangiumParser;
+export function createArchitectureTestServices() {
+  const parse = (input: string) => {
+    return architectureParser.parse<Architecture>(input);
+  };
+
+  return { services: architectureServices, parse };
+}
+export const architectureParse = createArchitectureTestServices().parse;
+
 const pieServices: PieServices = createPieServices().Pie;
 const pieParser: LangiumParser = pieServices.parser.LangiumParser;
 export function createPieTestServices() {

scripts/compare-timings.ts

@@ -0,0 +1,115 @@
+/**
+ * Compares new E2E test timings with previous timings and determines whether to keep the new timings.
+ *
+ * The script will:
+ * 1. Read old timings from git HEAD
+ * 2. Read new timings from the current file
+ * 3. Compare the timings and specs
+ * 4. Keep new timings if:
+ *    - Specs were added/removed
+ *    - Any timing changed by 20% or more
+ * 5. Revert to old timings if:
+ *    - No significant timing changes
+ *
+ * This helps prevent unnecessary timing updates when test performance hasn't changed significantly.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { execSync } from 'node:child_process';
+
+interface Timing {
+  spec: string;
+  duration: number;
+}
+
+interface TimingsFile {
+  durations: Timing[];
+}
+
+interface CleanupOptions {
+  keepNew: boolean;
+  reason: string;
+}
+
+const TIMINGS_FILE = 'cypress/timings.json';
+const TIMINGS_PATH = path.join(process.cwd(), TIMINGS_FILE);
+
+function log(message: string): void {
+  // eslint-disable-next-line no-console
+  console.log(message);
+}
+
+function readOldTimings(): TimingsFile {
+  try {
+    const oldContent = execSync(`git show HEAD:${TIMINGS_FILE}`, { encoding: 'utf8' });
+    return JSON.parse(oldContent);
+  } catch {
+    log('Error getting old timings, using empty file');
+    return { durations: [] };
+  }
+}
+
+function readNewTimings(): TimingsFile {
+  return JSON.parse(fs.readFileSync(TIMINGS_PATH, 'utf8'));
+}
+
+function cleanupFiles({ keepNew, reason }: CleanupOptions): void {
+  if (keepNew) {
+    log(`Keeping new timings: ${reason}`);
+  } else {
+    log(`Reverting to old timings: ${reason}`);
+    execSync(`git checkout HEAD -- ${TIMINGS_FILE}`);
+  }
+}
+
+function compareTimings(): void {
+  const oldTimings = readOldTimings();
+  const newTimings = readNewTimings();
+
+  const oldSpecs = new Set(oldTimings.durations.map((d) => d.spec));
+  const newSpecs = new Set(newTimings.durations.map((d) => d.spec));
+
+  // Check if specs were added or removed
+  const addedSpecs = [...newSpecs].filter((spec) => !oldSpecs.has(spec));
+  const removedSpecs = [...oldSpecs].filter((spec) => !newSpecs.has(spec));
+
+  if (addedSpecs.length > 0 || removedSpecs.length > 0) {
+    log('Specs changed:');
+    if (addedSpecs.length > 0) {
+      log(`Added: ${addedSpecs.join(', ')}`);
+    }
+    if (removedSpecs.length > 0) {
+      log(`Removed: ${removedSpecs.join(', ')}`);
+    }
+    return cleanupFiles({ keepNew: true, reason: 'Specs were added or removed' });
+  }
+
+  // Check timing variations
+  const timingChanges = newTimings.durations.map((newTiming) => {
+    const oldTiming = oldTimings.durations.find((d) => d.spec === newTiming.spec);
+    if (!oldTiming) {
+      throw new Error(`Could not find old timing for spec: ${newTiming.spec}`);
+    }
+    const change = Math.abs(newTiming.duration - oldTiming.duration);
+    const changePercent = change / oldTiming.duration;
+    return { spec: newTiming.spec, change, changePercent };
+  });
+
+  // Filter changes that's more than 5 seconds and 20% different
+  const significantChanges = timingChanges.filter((t) => t.change > 5000 && t.changePercent >= 0.2);
+
+  if (significantChanges.length === 0) {
+    log('No significant timing changes detected (threshold: 5s and 20%)');
+    return cleanupFiles({ keepNew: false, reason: 'No significant timing changes' });
+  }
+
+  log('Significant timing changes:');
+  significantChanges.forEach((t) => {
+    log(`${t.spec}: ${t.change.toFixed(1)}ms (${(t.changePercent * 100).toFixed(1)}%)`);
+  });
+
+  cleanupFiles({ keepNew: true, reason: 'Significant timing changes detected' });
+}
+
+compareTimings();