Merge branch 'develop' of https://github.com/mermaid-js/mermaid into …

…5367/architecture-diagram

.github/workflows/e2e.yml

@@ -24,6 +24,7 @@ env:
       ) || 
       github.event.before
     }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -116,22 +117,22 @@ jobs:
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
+        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           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 != '' }}
+          record: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ env.shouldRunParallel == 'true' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
           ARGOS_PARALLEL_TOTAL: 4
           ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 

cypress/helpers/util.ts

@@ -124,7 +124,9 @@ export const verifyScreenshot = (name: string): void => {
     cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
   } else if (useArgos) {
-    cy.argosScreenshot(name);
+    cy.argosScreenshot(name, {
+      threshold: 0.01,
+    });
   } else {
     cy.matchImageSnapshot(name);
   }

cypress/integration/rendering/packet.spec.ts

@@ -10,6 +10,15 @@ describe('packet structure', () => {
     );
   });
 
+  it('should render a simple packet diagram without ranges', () => {
+    imgSnapshotTest(
+      `packet-beta
+  0: "h"
+  1: "i"
+`
+    );
+  });
+
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
       `packet-beta

docs/config/setup/modules/mermaid.md

@@ -97,17 +97,21 @@
 
 ▸ **createIcon**(`icon`, `originalSize`): [`IconResolver`](mermaid.md#iconresolver)
 
+Converts an SVG Icon passed as a string into a properly formatted IconResolver
+
 #### Parameters
 
-| Name           | Type     |
-| :------------- | :------- |
-| `icon`         | `string` |
-| `originalSize` | `number` |
+| Name           | Type     | Description                                                                 |
+| :------------- | :------- | :-------------------------------------------------------------------------- |
+| `icon`         | `string` | html code for the svg icon as a string (the SVG tag should not be included) |
+| `originalSize` | `number` | the original size of the SVG Icon in pixels                                 |
 
 #### Returns
 
 [`IconResolver`](mermaid.md#iconresolver)
 
+IconResolver
+
 #### Defined in
 
-[packages/mermaid/src/rendering-util/svgRegister.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L9)
+[packages/mermaid/src/rendering-util/svgRegister.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/svgRegister.ts#L15)

docs/syntax/stateDiagram.md

@@ -483,8 +483,8 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-```
-    classDef movement font-style:italic;
+```txt
+classDef movement font-style:italic;
 ```
 
 where
@@ -496,8 +496,8 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-```
-    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```txt
+classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
 ```
 
 where
@@ -522,7 +522,7 @@ There are two ways to apply a `classDef` style to a state:
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
 ```txt
-    class [one or more state names, separated by commas] [name of a style defined with classDef]
+class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`:

package.json

@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.42.3",
-    "@argos-ci/cypress": "^2.0.5",
+    "@argos-ci/cypress": "^2.1.0",
     "@cspell/eslint-plugin": "^8.8.4",
     "@cypress/code-coverage": "^3.12.30",
     "@eslint/js": "^9.4.0",

packages/mermaid/src/diagrams/class/classDb.ts

@@ -113,6 +113,7 @@ export const clear = function () {
   functions.push(setupToolTips);
   namespaces = new Map();
   namespaceCounter = 0;
+  direction = 'TB';
   commonClear();
 };
 

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -444,6 +444,17 @@ class C13["With Città foreign language"]
         ]
       `);
     });
+
+    it('should revert direction to default once direction is removed', () => {
+      parser.parse(`classDiagram
+          direction RL
+          class A`);
+      expect(classDb.getDirection()).toBe('RL');
+      classDb.clear();
+      parser.parse(`classDiagram
+          class B`);
+      expect(classDb.getDirection()).toBe('TB');
+    });
   });
 
   describe('when parsing class defined in brackets', function () {

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

@@ -288,8 +288,8 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-```
-    classDef movement font-style:italic;
+```txt
+classDef movement font-style:italic;
 ```
 
 where
@@ -301,8 +301,8 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-```
-    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```txt
+classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
 ```
 
 where
@@ -327,7 +327,7 @@ There are two ways to apply a `classDef` style to a state:
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
 ```txt
-    class [one or more state names, separated by commas] [name of a style defined with classDef]
+class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`: