diff --git a/.cspell/cspell.config.yaml b/.cspell/cspell.config.yaml
index 33d690193..b16040c8c 100644
--- a/.cspell/cspell.config.yaml
+++ b/.cspell/cspell.config.yaml
@@ -28,6 +28,9 @@ dictionaryDefinitions:
- name: suggestions
words:
- none
+ - disp
+ - subproc
+ - tria
suggestWords:
- seperator:separator
- vertice:vertex
diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml
index ef170fb71..f26bf4ab8 100644
--- a/.github/workflows/autofix.yml
+++ b/.github/workflows/autofix.yml
@@ -2,6 +2,8 @@ name: autofix.ci # needed to securely identify the workflow
on:
pull_request:
+ branches-ignore:
+ - 'renovate/**'
permissions:
contents: read
diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts
new file mode 100644
index 000000000..45e51a09b
--- /dev/null
+++ b/cypress/integration/rendering/newShapes.spec.ts
@@ -0,0 +1,135 @@
+import { imgSnapshotTest } from '../../helpers/util.ts';
+
+const looks = ['classic', 'handDrawn'] as const;
+const directions = ['TB', 'BT', 'LR', 'RL'] as const;
+const newShapesSet1 = [
+ 'triangle',
+ 'slopedRect',
+ 'tiltedCylinder',
+ 'flippedTriangle',
+ 'hourglass',
+] as const;
+const newShapesSet2 = [
+ 'taggedRect',
+ 'multiRect',
+ 'lightningBolt',
+ 'filledCircle',
+ 'windowPane',
+] as const;
+
+const newShapesSet3 = [
+ 'halfRoundedRectangle',
+ 'curvedTrapezoid',
+ 'bowTieRect',
+ 'dividedRect',
+ 'crossedCircle',
+] as const;
+
+const newShapesSet4 = [
+ 'waveRectangle',
+ 'trapezoidalPentagon',
+ 'linedCylinder',
+ 'waveEdgedRectangle',
+ 'multiWaveEdgedRectangle',
+] as const;
+
+const newShapesSet5 = [
+ 'linedWaveEdgedRect',
+ 'taggedWaveEdgedRectangle',
+ 'text',
+ 'card',
+ 'shadedProcess',
+] as const;
+
+// Aggregate all shape sets into a single array
+const newShapesSets = [
+ newShapesSet1,
+ newShapesSet2,
+ newShapesSet3,
+ newShapesSet4,
+ newShapesSet5,
+] as const;
+
+looks.forEach((look) => {
+ directions.forEach((direction) => {
+ newShapesSets.forEach((newShapesSet) => {
+ describe(`Test ${newShapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
+ it(`without label`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
+ });
+ imgSnapshotTest(flowchartCode, { look });
+ });
+
+ it(`with label`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label' }@\n`;
+ });
+ imgSnapshotTest(flowchartCode, { look });
+ });
+
+ it(`connect all shapes with each other`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label' }@\n`;
+ });
+ for (let i = 0; i < newShapesSet.length; i++) {
+ for (let j = i + 1; j < newShapesSet.length; j++) {
+ flowchartCode += ` n${i}${i} --> n${j}${j}\n`;
+ }
+ }
+ imgSnapshotTest(flowchartCode, { look });
+ });
+
+ it(`with very long label`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label' }@\n`;
+ });
+ imgSnapshotTest(flowchartCode, { look });
+ });
+
+ it(`with markdown htmlLabels:true`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** and strong' }@\n`;
+ });
+ imgSnapshotTest(flowchartCode, { look });
+ });
+
+ it(`with markdown htmlLabels:false`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** and strong' }@\n`;
+ });
+ imgSnapshotTest(flowchartCode, {
+ look,
+ htmlLabels: false,
+ flowchart: { htmlLabels: false },
+ });
+ });
+
+ it(`with styles`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new shape' }@\n`;
+ flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
+ });
+ imgSnapshotTest(flowchartCode, { look });
+ });
+
+ it(`with classDef`, () => {
+ let flowchartCode = `flowchart ${direction}\n`;
+ flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
+ newShapesSet.forEach((newShape, index) => {
+ flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new shape' }@\n`;
+ flowchartCode += ` n${index}${index}:::customClazz\n`;
+ });
+ imgSnapshotTest(flowchartCode, { look });
+ });
+ });
+ });
+ });
+});
diff --git a/cypress/platform/ash.html b/cypress/platform/ash.html
index b15733d52..6d306390b 100644
--- a/cypress/platform/ash.html
+++ b/cypress/platform/ash.html
@@ -36,12 +36,15 @@
font-family: 'Arial';
/* font-size: 18px !important; */
}
+
h1 {
color: grey;
}
+
.mermaid2 {
display: none;
}
+
.mermaid svg {
/* font-size: 18px !important; */
@@ -54,6 +57,7 @@
10px 10px;
background-repeat: repeat; */
}
+
.malware {
position: fixed;
bottom: 0;
@@ -69,11 +73,13 @@
font-family: monospace;
font-size: 72px;
}
+
/* tspan {
font-size: 6px !important;
} */
+
flowchart
@@ -171,7 +177,7 @@ flowchart LR
+
+