From bfd8c63daaa8420e57da9953922b9f0c94123064 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 12 Sep 2024 11:05:32 +0200
Subject: [PATCH 01/15] #5787 Fix for issue with labels in firefox

---
 .changeset/dry-plums-glow.md                      | 5 +++++
 packages/mermaid/src/rendering-util/createText.ts | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/dry-plums-glow.md

diff --git a/.changeset/dry-plums-glow.md b/.changeset/dry-plums-glow.md
new file mode 100644
index 000000000..810c6c5c8
--- /dev/null
+++ b/.changeset/dry-plums-glow.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+Fix for issue with calculation of label width when using in firefox
diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts
index 845705210..4b6633493 100644
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@@ -20,6 +20,11 @@ function applyStyle(dom, styleFn) {
 
 async function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
+  // This is not the final width but used in order to make sure the foreign
+  // object in firefox gets a width at all. The final width is fetched from the div
+  fo.attr('width', `${10 * width}px`);
+  fo.attr('height', `${10 * width}px`);
+
   const div = fo.append('xhtml:div');
   let label = node.label;
   if (node.label && hasKatex(node.label)) {
@@ -201,7 +206,7 @@ export const createText = async (
   } = {},
   config: MermaidConfig
 ) => {
-  log.info(
+  log.debug(
     'XYZ createText',
     text,
     style,

From 8bb70ea4934567208c9444911e11e9dc60f210d6 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 12 Sep 2024 11:49:21 +0200
Subject: [PATCH 02/15] Removing the ending @ sign in the shape data

---
 packages/mermaid/src/diagrams/flowchart/parser/flow.jison | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 977613f0e..27253be4f 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -48,10 +48,10 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
                                                     const re = /\n\s*/g;
                                                     yytext = yytext.replace(re,"<br/>");
                                                     return 'SHAPE_DATA'}
-<shapeData>[^@^"]+                                {
+<shapeData>[^}]+                                {
                                                     return 'SHAPE_DATA';
                                                 }
-<shapeData>\@+                                    {
+<shapeData>"}"                                    {
                                                     this.popState();
                                                 }
 

From 8b6fb94835f211e717527893b96f677c589ff0ff Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 12 Sep 2024 12:10:41 +0200
Subject: [PATCH 03/15] WIP

---
 cypress/platform/knsv2.html                   |   4 +
 .../mermaid/src/diagrams/flowchart/flowDb.ts  |   5 +-
 .../flowchart/parser/flow-node-data.spec.js   | 103 +++++++++++++++---
 .../src/diagrams/flowchart/parser/flow.jison  |  10 +-
 4 files changed, 99 insertions(+), 23 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fe587b8d2..52c2286e6 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -421,6 +421,10 @@ flowchart LR
 
     </pre>
 
+    <pre id="diagram4" class="mermaid">
+      flowchart
+      D@{ shape: circle, label: "circle" } & E
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       import layouts from './mermaid-layout-elk.esm.mjs';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index a0a2f5656..4eb503c5c 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -123,10 +123,10 @@ export const addVertex = function (
   if (shapeData !== undefined) {
     let yamlData;
     // detect if shapeData contains a newline character
-
+    console.log('shapeData', shapeData);
     if (!shapeData.includes('\n')) {
       // console.log('yamlData shapeData has no new lines', shapeData);
-      yamlData = '{\n' + shapeData + '\n';
+      yamlData = '{\n' + shapeData + '\n}';
     } else {
       // console.log('yamlData shapeData has new lines', shapeData);
       yamlData = shapeData + '\n';
@@ -136,6 +136,7 @@ export const addVertex = function (
         yamlData = yamlData.substring(0, lastPos) + '\n';
       }
     }
+    console.log('yamlData', yamlData);
     const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
     // console.log('yamlData doc', doc);
     if (doc?.shape) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
index ee461de9b..05773a842 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
@@ -15,7 +15,16 @@ describe('when parsing directions', function () {
 
   it('should handle basic shape data statements', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{ shape: rounded }@`);
+      D@{ shape: rounded}`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(1);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+  });
+  it('should handle basic shape data statements', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded }`);
 
     const data4Layout = flow.parser.yy.getData();
     expect(data4Layout.nodes.length).toBe(1);
@@ -23,9 +32,69 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].label).toEqual('D');
   });
 
+  it('should handle basic shape data statements with &', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(2);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle shape data statements with edges', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } --> E`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(2);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 1', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E --> F`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(3);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 2', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E@{ shape: rounded } --> F`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(3);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 3', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E@{ shape: rounded } --> F & G@{ shape: rounded }`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(4);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
+  it('should handle basic shape data statements with amp and edges 4', function () {
+    const res = flow.parser.parse(`flowchart TB
+      D@{ shape: rounded } & E@{ shape: rounded } --> F@{ shape: rounded } & G@{ shape: rounded }`);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(4);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
   it('should no matter of there are no leading spaces', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{shape: rounded }@`);
+      D@{shape: rounded}`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -36,7 +105,7 @@ describe('when parsing directions', function () {
 
   it('should no matter of there are many leading spaces', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{       shape: rounded }@`);
+      D@{       shape: rounded}`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -47,7 +116,7 @@ describe('when parsing directions', function () {
 
   it('should be forgiving with many spaces before teh end', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{ shape: rounded          }@`);
+      D@{ shape: rounded         }`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -57,7 +126,7 @@ describe('when parsing directions', function () {
   });
   it('should be possible to add multiple properties on the same line', function () {
     const res = flow.parser.parse(`flowchart TB
-      D@{ shape: rounded , label: "DD" }@`);
+      D@{ shape: rounded , label: "DD"}`);
 
     const data4Layout = flow.parser.yy.getData();
 
@@ -70,7 +139,7 @@ describe('when parsing directions', function () {
       A --> D@{
         shape: circle
         icon: "clock"
-      }@
+     }
 
       `);
 
@@ -89,11 +158,11 @@ describe('when parsing directions', function () {
       B@{
         shape: circle
         icon: "clock"
-      }@
+     }
       C[Hello]@{
         shape: circle
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -105,12 +174,12 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[2].shape).toEqual('circle');
     expect(data4Layout.nodes[2].label).toEqual('Hello');
   });
-  it('should use handle bracket end (}) character inside the shape data', function () {
+  it.only('should use handle bracket end (}) character inside the shape data', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is }"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -135,7 +204,7 @@ describe('when parsing directions', function () {
           This is a
           multiline string
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -149,7 +218,7 @@ describe('when parsing directions', function () {
         label: "This is a
           multiline string"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -162,7 +231,7 @@ describe('when parsing directions', function () {
       A@{
         label: "This is a string with }"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -175,7 +244,7 @@ describe('when parsing directions', function () {
       A@{
         label: "This is a string with @"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
@@ -186,14 +255,14 @@ describe('when parsing directions', function () {
   it(' should be possible to use @ in strings', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
-        label: "This is a string with }@"
+        label: "This is a string with}"
         icon: "clock"
-      }@
+     }
       `);
 
     const data4Layout = flow.parser.yy.getData();
     expect(data4Layout.nodes.length).toBe(1);
     expect(data4Layout.nodes[0].shape).toEqual('squareRect');
-    expect(data4Layout.nodes[0].label).toEqual('This is a string with }@');
+    expect(data4Layout.nodes[0].label).toEqual('This is a string with}');
   });
 });
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 27253be4f..7dad0dfdf 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -39,12 +39,12 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
 
 
 \@\{                                            { this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
-<shapeData>["]                                   {
+<shapeData>["]                                  {
                                                     this.pushState("shapeDataStr");
                                                     return 'SHAPE_DATA';
                                                 }
-<shapeDataStr>["]                                { this.popState(); return 'SHAPE_DATA'}
-<shapeDataStr>[^\"]+                             {
+<shapeDataStr>["]                               { this.popState(); return 'SHAPE_DATA'}
+<shapeDataStr>[^\"]+                            {
                                                     const re = /\n\s*/g;
                                                     yytext = yytext.replace(re,"<br/>");
                                                     return 'SHAPE_DATA'}
@@ -404,8 +404,10 @@ vertexStatement: vertexStatement link node shapeData
 
 node: styledVertex
         { /*console.warn('nod', $styledVertex);*/ $$ = [$styledVertex];}
+    | node shapeData spaceList AMP spaceList styledVertex
+        {  yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); console.warn('pip2', $node[0], $styledVertex, $$);  }
     | node spaceList AMP spaceList styledVertex
-        { $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
+        { $$ = $node.concat($styledVertex); console.warn('pip', $node[0], $styledVertex, $$);  }
     ;
 
 styledVertex: vertex

From 4162a2542541f8b3b1c5eabbf8f11714f816e0ff Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 12 Sep 2024 16:58:52 +0200
Subject: [PATCH 04/15] Fix for amp and adjusted tests

---
 .../rendering/flowchart-shape-alias.spec.ts   |   2 +-
 .../integration/rendering/iconShape.spec.ts   |  16 +-
 .../integration/rendering/imageShape.spec.ts  |  14 +-
 .../integration/rendering/newShapes.spec.ts   |  16 +-
 .../integration/rendering/oldShapes.spec.ts   |  16 +-
 cypress/platform/knsv2.html                   |  66 +++---
 cypress/platform/saurabh.html                 |  16 +-
 docs/syntax/flowchart.md                      | 202 +++++++++---------
 .../mermaid/src/diagrams/flowchart/flowDb.ts  |   9 +-
 .../flowchart/parser/flow-node-data.spec.js   |  30 ++-
 .../src/diagrams/flowchart/parser/flow.jison  |  18 +-
 packages/mermaid/src/docs/syntax/flowchart.md | 102 ++++-----
 12 files changed, 261 insertions(+), 246 deletions(-)

diff --git a/cypress/integration/rendering/flowchart-shape-alias.spec.ts b/cypress/integration/rendering/flowchart-shape-alias.spec.ts
index 3e6d9092d..c4f9efede 100644
--- a/cypress/integration/rendering/flowchart-shape-alias.spec.ts
+++ b/cypress/integration/rendering/flowchart-shape-alias.spec.ts
@@ -126,7 +126,7 @@ aliasSets.forEach((aliasSet) => {
     it(`All ${aliasSet.join(',')} should render same shape`, () => {
       let flowchartCode = `flowchart \n`;
       aliasSet.forEach((alias, index) => {
-        flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }@\n`;
+        flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }\n`;
       });
       imgSnapshotTest(flowchartCode);
     });
diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts
index 9a01932fb..98e0e39e1 100644
--- a/cypress/integration/rendering/iconShape.spec.ts
+++ b/cypress/integration/rendering/iconShape.spec.ts
@@ -16,7 +16,7 @@ looks.forEach((look) => {
             if (form) {
               flowchartCode += `, form: '${form}'`;
             }
-            flowchartCode += ` }@\n`;
+            flowchartCode += ` }\n`;
             imgSnapshotTest(flowchartCode, { look });
           });
 
@@ -29,7 +29,7 @@ looks.forEach((look) => {
             if (pos) {
               flowchartCode += `, pos: '${pos}'`;
             }
-            flowchartCode += ` }@\n`;
+            flowchartCode += ` }\n`;
             imgSnapshotTest(flowchartCode, { look });
           });
 
@@ -42,7 +42,7 @@ looks.forEach((look) => {
             if (pos) {
               flowchartCode += `, pos: '${pos}'`;
             }
-            flowchartCode += ` }@\n`;
+            flowchartCode += ` }\n`;
             imgSnapshotTest(flowchartCode, { look });
           });
 
@@ -55,7 +55,7 @@ looks.forEach((look) => {
             if (pos) {
               flowchartCode += `, pos: '${pos}'`;
             }
-            flowchartCode += ` }@\n`;
+            flowchartCode += ` }\n`;
             imgSnapshotTest(flowchartCode, { look });
           });
 
@@ -68,7 +68,7 @@ looks.forEach((look) => {
             if (pos) {
               flowchartCode += `, pos: '${pos}'`;
             }
-            flowchartCode += ` }@\n`;
+            flowchartCode += ` }\n`;
             imgSnapshotTest(flowchartCode, {
               look,
               htmlLabels: false,
@@ -85,7 +85,7 @@ looks.forEach((look) => {
             if (pos) {
               flowchartCode += `, pos: '${pos}'`;
             }
-            flowchartCode += ` }@\n`;
+            flowchartCode += ` }\n`;
             flowchartCode += `  style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
             imgSnapshotTest(flowchartCode, { look });
           });
@@ -100,7 +100,7 @@ looks.forEach((look) => {
             if (pos) {
               flowchartCode += `, pos: '${pos}'`;
             }
-            flowchartCode += ` }@\n`;
+            flowchartCode += ` }\n`;
             flowchartCode += `  nAA:::customClazz\n`;
             imgSnapshotTest(flowchartCode, { look });
           });
@@ -115,7 +115,7 @@ describe('Test iconShape with different h', () => {
     let flowchartCode = `flowchart TB\n`;
     const icon = 'fa:bell';
     const iconHeight = 64;
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }@\n`;
+    flowchartCode += `  nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }\n`;
     imgSnapshotTest(flowchartCode);
   });
 });
diff --git a/cypress/integration/rendering/imageShape.spec.ts b/cypress/integration/rendering/imageShape.spec.ts
index 5f6d972cb..cf3d1ff16 100644
--- a/cypress/integration/rendering/imageShape.spec.ts
+++ b/cypress/integration/rendering/imageShape.spec.ts
@@ -10,7 +10,7 @@ looks.forEach((look) => {
       describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
         it(`without label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }@\n`;
+          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`;
           imgSnapshotTest(flowchartCode, { look });
         });
 
@@ -22,7 +22,7 @@ looks.forEach((look) => {
           if (pos) {
             flowchartCode += `, pos: '${pos}'`;
           }
-          flowchartCode += ` }@\n`;
+          flowchartCode += ` }\n`;
           imgSnapshotTest(flowchartCode, { look });
         });
 
@@ -34,7 +34,7 @@ looks.forEach((look) => {
           if (pos) {
             flowchartCode += `, pos: '${pos}'`;
           }
-          flowchartCode += ` }@\n`;
+          flowchartCode += ` }\n`;
           imgSnapshotTest(flowchartCode, { look });
         });
 
@@ -46,7 +46,7 @@ looks.forEach((look) => {
           if (pos) {
             flowchartCode += `, pos: '${pos}'`;
           }
-          flowchartCode += ` }@\n`;
+          flowchartCode += ` }\n`;
           imgSnapshotTest(flowchartCode, { look, htmlLabels: true });
         });
 
@@ -58,7 +58,7 @@ looks.forEach((look) => {
           if (pos) {
             flowchartCode += `, pos: '${pos}'`;
           }
-          flowchartCode += ` }@\n`;
+          flowchartCode += ` }\n`;
           imgSnapshotTest(flowchartCode, {
             look,
             htmlLabels: false,
@@ -74,7 +74,7 @@ looks.forEach((look) => {
           if (pos) {
             flowchartCode += `, pos: '${pos}'`;
           }
-          flowchartCode += ` }@\n`;
+          flowchartCode += ` }\n`;
           flowchartCode += `  style A fill:#f9f,stroke:#333,stroke-width:4px \n`;
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -88,7 +88,7 @@ looks.forEach((look) => {
           if (pos) {
             flowchartCode += `, pos: '${pos}'`;
           }
-          flowchartCode += ` }@\n`;
+          flowchartCode += ` }\n`;
           flowchartCode += `  A:::customClazz\n`;
           imgSnapshotTest(flowchartCode, { look });
         });
diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts
index 906a04da3..ac3b8c044 100644
--- a/cypress/integration/rendering/newShapes.spec.ts
+++ b/cypress/integration/rendering/newShapes.spec.ts
@@ -59,7 +59,7 @@ looks.forEach((look) => {
         it(`without label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape} }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -67,7 +67,7 @@ looks.forEach((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 for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -75,7 +75,7 @@ looks.forEach((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 for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           for (let i = 0; i < newShapesSet.length; i++) {
             for (let j = i + 1; j < newShapesSet.length; j++) {
@@ -88,7 +88,7 @@ looks.forEach((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 for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -96,7 +96,7 @@ looks.forEach((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** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -104,7 +104,7 @@ looks.forEach((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** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, {
             look,
@@ -116,7 +116,7 @@ looks.forEach((look) => {
         it(`with styles`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
           });
           imgSnapshotTest(flowchartCode, { look });
@@ -126,7 +126,7 @@ looks.forEach((look) => {
           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 ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  n${index}${index}:::customClazz\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
diff --git a/cypress/integration/rendering/oldShapes.spec.ts b/cypress/integration/rendering/oldShapes.spec.ts
index 87615ed6d..9d92fad57 100644
--- a/cypress/integration/rendering/oldShapes.spec.ts
+++ b/cypress/integration/rendering/oldShapes.spec.ts
@@ -23,7 +23,7 @@ looks.forEach((look) => {
         it(`without label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -31,7 +31,7 @@ looks.forEach((look) => {
         it(`with label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -39,7 +39,7 @@ looks.forEach((look) => {
         it(`connect all shapes with each other`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           for (let i = 0; i < shapesSet.length; i++) {
             for (let j = i + 1; j < shapesSet.length; j++) {
@@ -52,7 +52,7 @@ looks.forEach((look) => {
         it(`with very long label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -60,7 +60,7 @@ looks.forEach((look) => {
         it(`with markdown htmlLabels:true`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -68,7 +68,7 @@ looks.forEach((look) => {
         it(`with markdown htmlLabels:false`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, {
             look,
@@ -80,7 +80,7 @@ looks.forEach((look) => {
         it(`with styles`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
           });
           imgSnapshotTest(flowchartCode, { look });
@@ -90,7 +90,7 @@ looks.forEach((look) => {
           let flowchartCode = `flowchart ${direction}\n`;
           flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
           shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  n${index}${index}:::customClazz\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 52c2286e6..d93881018 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -252,40 +252,40 @@ config:
 ---
 flowchart RL
     subgraph "   "
-        A5@{ shape: manual-file, label: "a label"}@
-        B5@{ shape: manual-input, label: "a label" }@
-        C5@{ shape: mul-doc, label: "a label" }@
-        D5@{ shape: mul-proc, label: "a label" }@
-        E5@{ shape: paper-tape, label: "a label" }@
-        B3@{ shape: das, label: "a label" }@
-        C3@{ shape: disk, label: "a label" }@
-        D4@{ shape: lin-doc, label: "a label" }@
-        E4@{ shape: loop-limit, label: "a label" }@
+        A5@{ shape: manual-file, label: "a label"}
+        B5@{ shape: manual-input, label: "a label" }
+        C5@{ shape: mul-doc, label: "a label" }
+        D5@{ shape: mul-proc, label: "a label" }
+        E5@{ shape: paper-tape, label: "a label" }
+        B3@{ shape: das, label: "a label" }
+        C3@{ shape: disk, label: "a label" }
+        D4@{ shape: lin-doc, label: "a label" }
+        E4@{ shape: loop-limit, label: "a label" }
     end
     subgraph "   "
-        B6@{ shape: summary, label: "a label" }@
-        C6@{ shape: tag-we-rect, label: "a label" }@
-        D6@{ shape: tag-rect, label: "a label" }@
-        A2@{ shape: fork}@
-        B2@{ shape: hourglass }@
-        C2@{ shape: comment, label: "I am a comment" }@
-        D2@{ shape: bolt }@
-        D3@{ shape: disp, label: "a label" }@
-        C4@{ shape: junction, label: "a label" }@
-        A4@{ shape: extract, label: "a label"}@
-        B52[a fr]@{ shape: fr }@
+        B6@{ shape: summary, label: "a label" }
+        C6@{ shape: tag-we-rect, label: "a label" }
+        D6@{ shape: tag-rect, label: "a label" }
+        A2@{ shape: fork}
+        B2@{ shape: hourglass }
+        C2@{ shape: comment, label: "I am a comment" }
+        D2@{ shape: bolt }
+        D3@{ shape: disp, label: "a label" }
+        C4@{ shape: junction, label: "a label" }
+        A4@{ shape: extract, label: "a label"}
+        B52[a fr]@{ shape: fr }
     end
     subgraph " "
-        A1@{ shape: text, label: This is a textblock}@
-        B1@{ shape: card, label: "a label" }@
-        C1@{ shape: lined-proc, label: "a label" }@
-        D1@{ shape: start, label: "a label" }@
-        E1@{ shape: stop, label: "a label" }@
-        E2@{ shape: doc, label: "a label" }@
-        A6@{ shape: stored-data, label: "a label"}@
-        A3@{ shape: delay, label: "a label" }@
-        E3@{ shape: div-proc, label: "a label" }@
-        B4[a label]@{ shape: win-pane }@
+        A1@{ shape: text, label: This is a textblock}
+        B1@{ shape: card, label: "a label" }
+        C1@{ shape: lined-proc, label: "a label" }
+        D1@{ shape: start, label: "a label" }
+        E1@{ shape: stop, label: "a label" }
+        E2@{ shape: doc, label: "a label" }
+        A6@{ shape: stored-data, label: "a label"}
+        A3@{ shape: delay, label: "a label" }
+        E3@{ shape: div-proc, label: "a label" }
+        B4[a label]@{ shape: win-pane }
     end
       </pre>
       <pre id="diagram" class="mermaid2">
@@ -422,8 +422,10 @@ flowchart LR
     </pre>
 
     <pre id="diagram4" class="mermaid">
-      flowchart
-      D@{ shape: circle, label: "circle" } & E
+flowchart TB
+  A@{
+    label: "aksljhf kasjdh"
+  }
     </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index 45c350756..b83aa2a3b 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -63,8 +63,8 @@
   <body style="display: flex; gap: 2rem; flex-direction: row">
     <pre id="diagram4" class="mermaid">
       flowchart TD
-       B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "t", h: 80 }@
-       
+       B2@{ icon: "fa:bell", form: "square", pos: "t", h: 80 }
+
 
        W --> B2
        X --> B2
@@ -76,7 +76,7 @@
     </pre>
     <pre id="diagram4" class="mermaid2">
       flowchart TB
-       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@
+       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
        B2 --test--> C
        D --> B2 --> E
        style B2 fill:#f9f,stroke:#333,stroke-width:4px
@@ -84,31 +84,31 @@
     >
     <pre id="diagram43" class="mermaid2">
       flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }@
+       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
        B2 --test--> C
        D --> B2 --> E
   </pre
     >
     <pre id="diagram4" class="mermaid2">
       flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }@
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
        B2 --test--> C
   </pre
     >
     <pre id="diagram43" class="mermaid2">
       flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }@
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
        B2 --test--> C
   </pre
     >
     <pre id="diagram6" class="mermaid2">
       flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 }@ --> C
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
   </pre
     >
     <pre id="diagram6" class="mermaid2">
       flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 }@ --> C
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
        D --> B2 --> E
   </pre
     >
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index b511c7cb4..2c55ccc93 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -307,7 +307,7 @@ New Syntax for Shape Definition
 Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
 
 ```
-A@{ shape: rect }@
+A@{ shape: rect }
 ```
 
 This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
@@ -370,560 +370,560 @@ Here’s an example flowchart that utilizes some of the newly introduced shapes:
 
 ```mermaid-example
 flowchart RL
-    A5@{ shape: manual-file, label: "File Handling"}@
-    B5@{ shape: manual-input, label: "User Input"}@
-    C5@{ shape: mul-doc, label: "Multiple Documents"}@
-    D5@{ shape: mul-proc, label: "Process Automation"}@
-    E5@{ shape: paper-tape, label: "Paper Records"}@
+    A5@{ shape: manual-file, label: "File Handling"}
+    B5@{ shape: manual-input, label: "User Input"}
+    C5@{ shape: mul-doc, label: "Multiple Documents"}
+    D5@{ shape: mul-proc, label: "Process Automation"}
+    E5@{ shape: paper-tape, label: "Paper Records"}
 ```
 
 ```mermaid
 flowchart RL
-    A5@{ shape: manual-file, label: "File Handling"}@
-    B5@{ shape: manual-input, label: "User Input"}@
-    C5@{ shape: mul-doc, label: "Multiple Documents"}@
-    D5@{ shape: mul-proc, label: "Process Automation"}@
-    E5@{ shape: paper-tape, label: "Paper Records"}@
+    A5@{ shape: manual-file, label: "File Handling"}
+    B5@{ shape: manual-input, label: "User Input"}
+    C5@{ shape: mul-doc, label: "Multiple Documents"}
+    D5@{ shape: mul-proc, label: "Process Automation"}
+    E5@{ shape: paper-tape, label: "Paper Records"}
 ```
 
 ### Process
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: rect, label: "This is a process" }@
+    A@{ shape: rect, label: "This is a process" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: rect, label: "This is a process" }@
+    A@{ shape: rect, label: "This is a process" }
 ```
 
 ### Event
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: rounded, label: "This is an event" }@
+    A@{ shape: rounded, label: "This is an event" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: rounded, label: "This is an event" }@
+    A@{ shape: rounded, label: "This is an event" }
 ```
 
 ### Terminal Point (Stadium)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: stadium, label: "Terminal point" }@
+    A@{ shape: stadium, label: "Terminal point" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: stadium, label: "Terminal point" }@
+    A@{ shape: stadium, label: "Terminal point" }
 ```
 
 ### Subprocess
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fr, label: "This is a subprocess" }@
+    A@{ shape: fr, label: "This is a subprocess" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: fr, label: "This is a subprocess" }@
+    A@{ shape: fr, label: "This is a subprocess" }
 ```
 
 ### Database (Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cyl, label: "Database" }@
+    A@{ shape: cyl, label: "Database" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: cyl, label: "Database" }@
+    A@{ shape: cyl, label: "Database" }
 ```
 
 ### Start (Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: circle, label: "Start" }@
+    A@{ shape: circle, label: "Start" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: circle, label: "Start" }@
+    A@{ shape: circle, label: "Start" }
 ```
 
 ### Odd
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: odd, label: "Odd shape" }@
+    A@{ shape: odd, label: "Odd shape" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: odd, label: "Odd shape" }@
+    A@{ shape: odd, label: "Odd shape" }
 ```
 
 ### Decision (Diamond)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: diamond, label: "Decision" }@
+    A@{ shape: diamond, label: "Decision" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: diamond, label: "Decision" }@
+    A@{ shape: diamond, label: "Decision" }
 ```
 
 ### Prepare Conditional (Hexagon)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: hex, label: "Prepare conditional" }@
+    A@{ shape: hex, label: "Prepare conditional" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: hex, label: "Prepare conditional" }@
+    A@{ shape: hex, label: "Prepare conditional" }
 ```
 
 ### Data Input/Output (Lean Right)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-r, label: "Input/Output" }@
+    A@{ shape: l-r, label: "Input/Output" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: l-r, label: "Input/Output" }@
+    A@{ shape: l-r, label: "Input/Output" }
 ```
 
 ### Data Input/Output (Lean Left)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-l, label: "Output/Input" }@
+    A@{ shape: l-l, label: "Output/Input" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: l-l, label: "Output/Input" }@
+    A@{ shape: l-l, label: "Output/Input" }
 ```
 
 ### Priority Action (Trapezoid Base Bottom)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: trap-b, label: "Priority action" }@
+    A@{ shape: trap-b, label: "Priority action" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: trap-b, label: "Priority action" }@
+    A@{ shape: trap-b, label: "Priority action" }
 ```
 
 ### Manual Operation (Trapezoid Base Top)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: trap-t, label: "Manual operation" }@
+    A@{ shape: trap-t, label: "Manual operation" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: trap-t, label: "Manual operation" }@
+    A@{ shape: trap-t, label: "Manual operation" }
 ```
 
 ### Stop (Double Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: dc, label: "Stop" }@
+    A@{ shape: dc, label: "Stop" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: dc, label: "Stop" }@
+    A@{ shape: dc, label: "Stop" }
 ```
 
 ### Text Block
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: text, label: "This is a text block" }@
+    A@{ shape: text, label: "This is a text block" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: text, label: "This is a text block" }@
+    A@{ shape: text, label: "This is a text block" }
 ```
 
 ### Card (Notched Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: notched-rect, label: "Card" }@
+    A@{ shape: notched-rect, label: "Card" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: notched-rect, label: "Card" }@
+    A@{ shape: notched-rect, label: "Card" }
 ```
 
 ### Lined/Shaded Process
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lined-rect, label: "Lined process" }@
+    A@{ shape: lined-rect, label: "Lined process" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: lined-rect, label: "Lined process" }@
+    A@{ shape: lined-rect, label: "Lined process" }
 ```
 
 ### Start (Small Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sm-circ, label: "Small start" }@
+    A@{ shape: sm-circ, label: "Small start" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: sm-circ, label: "Small start" }@
+    A@{ shape: sm-circ, label: "Small start" }
 ```
 
 ### Stop (Framed Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: framed-circle, label: "Stop" }@
+    A@{ shape: framed-circle, label: "Stop" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: framed-circle, label: "Stop" }@
+    A@{ shape: framed-circle, label: "Stop" }
 ```
 
 ### Fork/Join (Long Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fork, label: "Fork or Join" }@
+    A@{ shape: fork, label: "Fork or Join" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: fork, label: "Fork or Join" }@
+    A@{ shape: fork, label: "Fork or Join" }
 ```
 
 ### Collate (Hourglass)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: hourglass, label: "Collate" }@
+    A@{ shape: hourglass, label: "Collate" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: hourglass, label: "Collate" }@
+    A@{ shape: hourglass, label: "Collate" }
 ```
 
 ### Comment (Curly Brace)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: comment, label: "Comment" }@
+    A@{ shape: comment, label: "Comment" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: comment, label: "Comment" }@
+    A@{ shape: comment, label: "Comment" }
 ```
 
 ### Comment Right (Curly Brace Right)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: brace-r, label: "Comment" }@
+    A@{ shape: brace-r, label: "Comment" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: brace-r, label: "Comment" }@
+    A@{ shape: brace-r, label: "Comment" }
 ```
 
 ### Comment with braces on both sides
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: braces, label: "Comment" }@
+    A@{ shape: braces, label: "Comment" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: braces, label: "Comment" }@
+    A@{ shape: braces, label: "Comment" }
 ```
 
 ### Com Link (Lightning Bolt)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: bolt, label: "Communication link" }@
+    A@{ shape: bolt, label: "Communication link" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: bolt, label: "Communication link" }@
+    A@{ shape: bolt, label: "Communication link" }
 ```
 
 ### Document (Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: we-rect, label: "Document" }@
+    A@{ shape: we-rect, label: "Document" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: we-rect, label: "Document" }@
+    A@{ shape: we-rect, label: "Document" }
 ```
 
 ### Delay (Half-Rounded Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: delay, label: "Delay" }@
+    A@{ shape: delay, label: "Delay" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: delay, label: "Delay" }@
+    A@{ shape: delay, label: "Delay" }
 ```
 
 ### Direct Access Storage (Tilted Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: t-cyl, label: "Direct access storage" }@
+    A@{ shape: t-cyl, label: "Direct access storage" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: t-cyl, label: "Direct access storage" }@
+    A@{ shape: t-cyl, label: "Direct access storage" }
 ```
 
 ### Disk Storage (Lined Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-cyl, label: "Disk storage" }@
+    A@{ shape: l-cyl, label: "Disk storage" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: l-cyl, label: "Disk storage" }@
+    A@{ shape: l-cyl, label: "Disk storage" }
 ```
 
 ### Display (Curved Trapezoid)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cur-trap, label: "Display" }@
+    A@{ shape: cur-trap, label: "Display" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: cur-trap, label: "Display" }@
+    A@{ shape: cur-trap, label: "Display" }
 ```
 
 ### Divided Process (Divided Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: div-rect, label: "Divided process" }@
+    A@{ shape: div-rect, label: "Divided process" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: div-rect, label: "Divided process" }@
+    A@{ shape: div-rect, label: "Divided process" }
 ```
 
 ### Extract (Small Triangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sm-tri, label: "Extract" }@
+    A@{ shape: sm-tri, label: "Extract" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: sm-tri, label: "Extract" }@
+    A@{ shape: sm-tri, label: "Extract" }
 ```
 
 ### Internal Storage (Window Pane)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: win-pane, label: "Internal storage" }@
+    A@{ shape: win-pane, label: "Internal storage" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: win-pane, label: "Internal storage" }@
+    A@{ shape: win-pane, label: "Internal storage" }
 ```
 
 ### Junction (Filled Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fc, label: "Junction" }@
+    A@{ shape: fc, label: "Junction" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: fc, label: "Junction" }@
+    A@{ shape: fc, label: "Junction" }
 ```
 
 ### Lined Document (Lined Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lin-we-rect, label: "Lined document" }@
+    A@{ shape: lin-we-rect, label: "Lined document" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: lin-we-rect, label: "Lined document" }@
+    A@{ shape: lin-we-rect, label: "Lined document" }
 ```
 
 ### Loop Limit (Trapezoidal Pentagon)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: not-pent, label: "Loop limit" }@
+    A@{ shape: not-pent, label: "Loop limit" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: not-pent, label: "Loop limit" }@
+    A@{ shape: not-pent, label: "Loop limit" }
 ```
 
 ### Manual File (Flipped Triangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: flip-tria, label: "Manual file" }@
+    A@{ shape: flip-tria, label: "Manual file" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: flip-tria, label: "Manual file" }@
+    A@{ shape: flip-tria, label: "Manual file" }
 ```
 
 ### Manual Input (Sloped Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sloped-rect, label: "Manual input" }@
+    A@{ shape: sloped-rect, label: "Manual input" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: sloped-rect, label: "Manual input" }@
+    A@{ shape: sloped-rect, label: "Manual input" }
 ```
 
 ### Multi-Document (Multi-Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-we-rect, label: "Multiple documents" }@
+    A@{ shape: mul-we-rect, label: "Multiple documents" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: mul-we-rect, label: "Multiple documents" }@
+    A@{ shape: mul-we-rect, label: "Multiple documents" }
 ```
 
 ### Multi-Process (Multi-Rect)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-rect, label: "Multiple processes" }@
+    A@{ shape: mul-rect, label: "Multiple processes" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: mul-rect, label: "Multiple processes" }@
+    A@{ shape: mul-rect, label: "Multiple processes" }
 ```
 
 ### Paper Tape (Flag)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: flag, label: "Paper tape" }@
+    A@{ shape: flag, label: "Paper tape" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: flag, label: "Paper tape" }@
+    A@{ shape: flag, label: "Paper tape" }
 ```
 
 ### Stored Data (Bow Tie Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: bt-rect, label: "Stored data" }@
+    A@{ shape: bt-rect, label: "Stored data" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: bt-rect, label: "Stored data" }@
+    A@{ shape: bt-rect, label: "Stored data" }
 ```
 
 ### Summary (Crossed Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cross-circle, label: "Summary" }@
+    A@{ shape: cross-circle, label: "Summary" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: cross-circle, label: "Summary" }@
+    A@{ shape: cross-circle, label: "Summary" }
 ```
 
 ### Tagged Document (Tagged Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: tag-we-rect, label: "Tagged document" }@
+    A@{ shape: tag-we-rect, label: "Tagged document" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: tag-we-rect, label: "Tagged document" }@
+    A@{ shape: tag-we-rect, label: "Tagged document" }
 ```
 
 ### Tagged Process (Tagged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: tag-rect, label: "Tagged process" }@
+    A@{ shape: tag-rect, label: "Tagged process" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: tag-rect, label: "Tagged process" }@
+    A@{ shape: tag-rect, label: "Tagged process" }
 ```
 
 ## Links between nodes
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index eb870f647..cf744e5e4 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -123,20 +123,15 @@ export const addVertex = function (
   if (shapeData !== undefined) {
     let yamlData;
     // detect if shapeData contains a newline character
-    console.log('shapeData', shapeData);
+    // console.log('shapeData', shapeData);
     if (!shapeData.includes('\n')) {
       // console.log('yamlData shapeData has no new lines', shapeData);
       yamlData = '{\n' + shapeData + '\n}';
     } else {
       // console.log('yamlData shapeData has new lines', shapeData);
       yamlData = shapeData + '\n';
-      // Find the position of the last } and replace it with a newline
-      const lastPos = yamlData.lastIndexOf('}');
-      if (lastPos !== -1) {
-        yamlData = yamlData.substring(0, lastPos) + '\n';
-      }
     }
-    console.log('yamlData', yamlData);
+    // console.log('yamlData', yamlData);
     const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
     // console.log('yamlData doc', doc);
     if (doc?.shape) {
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
index 05773a842..42e3bbbb4 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
@@ -92,6 +92,16 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[0].label).toEqual('D');
     expect(data4Layout.nodes[1].label).toEqual('E');
   });
+  it('should handle basic shape data statements with amp and edges 5, trailing space', function () {
+    const res = flow.parser.parse(`flowchart TB
+         D@{ shape: rounded } & E@{ shape: rounded } --> F{ shape: rounded } & G{ shape: rounded }    `);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(4);
+    expect(data4Layout.nodes[0].shape).toEqual('rounded');
+    expect(data4Layout.nodes[0].label).toEqual('D');
+    expect(data4Layout.nodes[1].label).toEqual('E');
+  });
   it('should no matter of there are no leading spaces', function () {
     const res = flow.parser.parse(`flowchart TB
       D@{shape: rounded}`);
@@ -138,7 +148,7 @@ describe('when parsing directions', function () {
     const res = flow.parser.parse(`flowchart TB
       A --> D@{
         shape: circle
-        icon: "clock"
+        other: "clock"
      }
 
       `);
@@ -157,11 +167,11 @@ describe('when parsing directions', function () {
       A[hello]
       B@{
         shape: circle
-        icon: "clock"
+        other: "clock"
      }
       C[Hello]@{
         shape: circle
-        icon: "clock"
+        other: "clock"
      }
       `);
 
@@ -174,11 +184,11 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[2].shape).toEqual('circle');
     expect(data4Layout.nodes[2].label).toEqual('Hello');
   });
-  it.only('should use handle bracket end (}) character inside the shape data', function () {
+  it('should use handle bracket end (}) character inside the shape data', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is }"
-        icon: "clock"
+        other: "clock"
      }
       `);
 
@@ -203,7 +213,7 @@ describe('when parsing directions', function () {
         label: |
           This is a
           multiline string
-        icon: "clock"
+        other: "clock"
      }
       `);
 
@@ -217,7 +227,7 @@ describe('when parsing directions', function () {
       A@{
         label: "This is a
           multiline string"
-        icon: "clock"
+        other: "clock"
      }
       `);
 
@@ -230,7 +240,7 @@ describe('when parsing directions', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is a string with }"
-        icon: "clock"
+        other: "clock"
      }
       `);
 
@@ -243,7 +253,7 @@ describe('when parsing directions', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is a string with @"
-        icon: "clock"
+        other: "clock"
      }
       `);
 
@@ -256,7 +266,7 @@ describe('when parsing directions', function () {
     const res = flow.parser.parse(`flowchart TB
       A@{
         label: "This is a string with}"
-        icon: "clock"
+        other: "clock"
      }
       `);
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index 7dad0dfdf..b3df82fa5 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -38,20 +38,28 @@ accDescr\s*"{"\s*                               { this.begin("acc_descr_multilin
 // <acc_descr_multiline>.*[^\n]*                {  return "acc_descr_line"}
 
 
-\@\{                                            { this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
+\@\{                                            {
+                                                    // console.log('=> shapeData', yytext);
+                                                    this.pushState("shapeData"); yytext=""; return 'SHAPE_DATA' }
 <shapeData>["]                                  {
+                                                    // console.log('=> shapeDataStr', yytext);
                                                     this.pushState("shapeDataStr");
                                                     return 'SHAPE_DATA';
                                                 }
-<shapeDataStr>["]                               { this.popState(); return 'SHAPE_DATA'}
+<shapeDataStr>["]                               {
+                                                    // console.log('shapeData <==', yytext);
+                                                    this.popState(); return 'SHAPE_DATA'}
 <shapeDataStr>[^\"]+                            {
+                                                    // console.log('shapeData', yytext);
                                                     const re = /\n\s*/g;
                                                     yytext = yytext.replace(re,"<br/>");
                                                     return 'SHAPE_DATA'}
-<shapeData>[^}]+                                {
+<shapeData>[^}^"]+                                {
+                                                    // console.log('shapeData', yytext);
                                                     return 'SHAPE_DATA';
                                                 }
 <shapeData>"}"                                    {
+                                                    // console.log('<== root', yytext)
                                                     this.popState();
                                                 }
 
@@ -405,9 +413,9 @@ vertexStatement: vertexStatement link node shapeData
 node: styledVertex
         { /*console.warn('nod', $styledVertex);*/ $$ = [$styledVertex];}
     | node shapeData spaceList AMP spaceList styledVertex
-        {  yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); console.warn('pip2', $node[0], $styledVertex, $$);  }
+        {  yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$shapeData); $$ = $node.concat($styledVertex); /*console.warn('pip2', $node[0], $styledVertex, $$);*/  }
     | node spaceList AMP spaceList styledVertex
-        { $$ = $node.concat($styledVertex); console.warn('pip', $node[0], $styledVertex, $$);  }
+        { $$ = $node.concat($styledVertex); /*console.warn('pip', $node[0], $styledVertex, $$);*/  }
     ;
 
 styledVertex: vertex
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 046c53e65..4fd178e3b 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -203,7 +203,7 @@ New Syntax for Shape Definition
 Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
 
 ```
-A@{ shape: rect }@
+A@{ shape: rect }
 ```
 
 This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
@@ -266,326 +266,326 @@ Here’s an example flowchart that utilizes some of the newly introduced shapes:
 
 ```mermaid-example
 flowchart RL
-    A5@{ shape: manual-file, label: "File Handling"}@
-    B5@{ shape: manual-input, label: "User Input"}@
-    C5@{ shape: mul-doc, label: "Multiple Documents"}@
-    D5@{ shape: mul-proc, label: "Process Automation"}@
-    E5@{ shape: paper-tape, label: "Paper Records"}@
+    A5@{ shape: manual-file, label: "File Handling"}
+    B5@{ shape: manual-input, label: "User Input"}
+    C5@{ shape: mul-doc, label: "Multiple Documents"}
+    D5@{ shape: mul-proc, label: "Process Automation"}
+    E5@{ shape: paper-tape, label: "Paper Records"}
 ```
 
 ### Process
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: rect, label: "This is a process" }@
+    A@{ shape: rect, label: "This is a process" }
 ```
 
 ### Event
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: rounded, label: "This is an event" }@
+    A@{ shape: rounded, label: "This is an event" }
 ```
 
 ### Terminal Point (Stadium)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: stadium, label: "Terminal point" }@
+    A@{ shape: stadium, label: "Terminal point" }
 ```
 
 ### Subprocess
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fr, label: "This is a subprocess" }@
+    A@{ shape: fr, label: "This is a subprocess" }
 ```
 
 ### Database (Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cyl, label: "Database" }@
+    A@{ shape: cyl, label: "Database" }
 ```
 
 ### Start (Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: circle, label: "Start" }@
+    A@{ shape: circle, label: "Start" }
 ```
 
 ### Odd
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: odd, label: "Odd shape" }@
+    A@{ shape: odd, label: "Odd shape" }
 ```
 
 ### Decision (Diamond)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: diamond, label: "Decision" }@
+    A@{ shape: diamond, label: "Decision" }
 ```
 
 ### Prepare Conditional (Hexagon)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: hex, label: "Prepare conditional" }@
+    A@{ shape: hex, label: "Prepare conditional" }
 ```
 
 ### Data Input/Output (Lean Right)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-r, label: "Input/Output" }@
+    A@{ shape: l-r, label: "Input/Output" }
 ```
 
 ### Data Input/Output (Lean Left)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-l, label: "Output/Input" }@
+    A@{ shape: l-l, label: "Output/Input" }
 ```
 
 ### Priority Action (Trapezoid Base Bottom)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: trap-b, label: "Priority action" }@
+    A@{ shape: trap-b, label: "Priority action" }
 ```
 
 ### Manual Operation (Trapezoid Base Top)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: trap-t, label: "Manual operation" }@
+    A@{ shape: trap-t, label: "Manual operation" }
 ```
 
 ### Stop (Double Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: dc, label: "Stop" }@
+    A@{ shape: dc, label: "Stop" }
 ```
 
 ### Text Block
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: text, label: "This is a text block" }@
+    A@{ shape: text, label: "This is a text block" }
 ```
 
 ### Card (Notched Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: notched-rect, label: "Card" }@
+    A@{ shape: notched-rect, label: "Card" }
 ```
 
 ### Lined/Shaded Process
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lined-rect, label: "Lined process" }@
+    A@{ shape: lined-rect, label: "Lined process" }
 ```
 
 ### Start (Small Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sm-circ, label: "Small start" }@
+    A@{ shape: sm-circ, label: "Small start" }
 ```
 
 ### Stop (Framed Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: framed-circle, label: "Stop" }@
+    A@{ shape: framed-circle, label: "Stop" }
 ```
 
 ### Fork/Join (Long Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fork, label: "Fork or Join" }@
+    A@{ shape: fork, label: "Fork or Join" }
 ```
 
 ### Collate (Hourglass)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: hourglass, label: "Collate" }@
+    A@{ shape: hourglass, label: "Collate" }
 ```
 
 ### Comment (Curly Brace)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: comment, label: "Comment" }@
+    A@{ shape: comment, label: "Comment" }
 ```
 
 ### Comment Right (Curly Brace Right)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: brace-r, label: "Comment" }@
+    A@{ shape: brace-r, label: "Comment" }
 ```
 
 ### Comment with braces on both sides
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: braces, label: "Comment" }@
+    A@{ shape: braces, label: "Comment" }
 ```
 
 ### Com Link (Lightning Bolt)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: bolt, label: "Communication link" }@
+    A@{ shape: bolt, label: "Communication link" }
 ```
 
 ### Document (Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: we-rect, label: "Document" }@
+    A@{ shape: we-rect, label: "Document" }
 ```
 
 ### Delay (Half-Rounded Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: delay, label: "Delay" }@
+    A@{ shape: delay, label: "Delay" }
 ```
 
 ### Direct Access Storage (Tilted Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: t-cyl, label: "Direct access storage" }@
+    A@{ shape: t-cyl, label: "Direct access storage" }
 ```
 
 ### Disk Storage (Lined Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-cyl, label: "Disk storage" }@
+    A@{ shape: l-cyl, label: "Disk storage" }
 ```
 
 ### Display (Curved Trapezoid)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cur-trap, label: "Display" }@
+    A@{ shape: cur-trap, label: "Display" }
 ```
 
 ### Divided Process (Divided Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: div-rect, label: "Divided process" }@
+    A@{ shape: div-rect, label: "Divided process" }
 ```
 
 ### Extract (Small Triangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sm-tri, label: "Extract" }@
+    A@{ shape: sm-tri, label: "Extract" }
 ```
 
 ### Internal Storage (Window Pane)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: win-pane, label: "Internal storage" }@
+    A@{ shape: win-pane, label: "Internal storage" }
 ```
 
 ### Junction (Filled Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fc, label: "Junction" }@
+    A@{ shape: fc, label: "Junction" }
 ```
 
 ### Lined Document (Lined Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lin-we-rect, label: "Lined document" }@
+    A@{ shape: lin-we-rect, label: "Lined document" }
 ```
 
 ### Loop Limit (Trapezoidal Pentagon)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: not-pent, label: "Loop limit" }@
+    A@{ shape: not-pent, label: "Loop limit" }
 ```
 
 ### Manual File (Flipped Triangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: flip-tria, label: "Manual file" }@
+    A@{ shape: flip-tria, label: "Manual file" }
 ```
 
 ### Manual Input (Sloped Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sloped-rect, label: "Manual input" }@
+    A@{ shape: sloped-rect, label: "Manual input" }
 ```
 
 ### Multi-Document (Multi-Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-we-rect, label: "Multiple documents" }@
+    A@{ shape: mul-we-rect, label: "Multiple documents" }
 ```
 
 ### Multi-Process (Multi-Rect)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-rect, label: "Multiple processes" }@
+    A@{ shape: mul-rect, label: "Multiple processes" }
 ```
 
 ### Paper Tape (Flag)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: flag, label: "Paper tape" }@
+    A@{ shape: flag, label: "Paper tape" }
 ```
 
 ### Stored Data (Bow Tie Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: bt-rect, label: "Stored data" }@
+    A@{ shape: bt-rect, label: "Stored data" }
 ```
 
 ### Summary (Crossed Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cross-circle, label: "Summary" }@
+    A@{ shape: cross-circle, label: "Summary" }
 ```
 
 ### Tagged Document (Tagged Wave-Edged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: tag-we-rect, label: "Tagged document" }@
+    A@{ shape: tag-we-rect, label: "Tagged document" }
 ```
 
 ### Tagged Process (Tagged Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: tag-rect, label: "Tagged process" }@
+    A@{ shape: tag-rect, label: "Tagged process" }
 ```
 
 ## Links between nodes

From 8456d7b1006216929aa09671a79532c5588068b3 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Fri, 13 Sep 2024 14:11:13 +0530
Subject: [PATCH 05/15] Updated insertNode to pass optional config

---
 packages/mermaid-layout-elk/src/render.ts     |  5 +--
 packages/mermaid/src/dagre-wrapper/index.js   |  2 +-
 .../src/diagrams/block/renderHelpers.ts       |  6 ++--
 .../rendering-util/insertElementsForSize.js   | 32 +++++++++++--------
 .../layout-algorithms/dagre/index.js          |  2 +-
 .../rendering-elements/nodes.js               |  9 +++---
 .../rendering-elements/shapes/filledCircle.ts |  9 ++++--
 .../rendering-elements/shapes/iconCircle.ts   | 14 +++++---
 .../rendering-elements/shapes/iconRounded.ts  | 13 +++++---
 .../rendering-elements/shapes/iconSquare.ts   | 11 ++++---
 .../rendering-elements/shapes/stateEnd.ts     |  9 ++++--
 .../rendering-elements/shapes/stateStart.ts   |  9 ++++--
 12 files changed, 74 insertions(+), 47 deletions(-)

diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index e647422ec..58be637ab 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -33,10 +33,11 @@ export const render = async (
     };
     graph.children.push(child);
     nodeDb[node.id] = child;
+    const config = getConfig();
 
     // Add the element to the DOM
     if (!node.isGroup) {
-      const childNodeEl = await insertNode(nodeEl, node, node.dir);
+      const childNodeEl = await insertNode(nodeEl, node, { config });
       boundingBox = childNodeEl.node().getBBox();
       child.domId = childNodeEl;
       child.width = boundingBox.width;
@@ -50,7 +51,7 @@ export const render = async (
         // @ts-ignore TODO: fix this
         const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
         labelData.width = bbox.width;
-        labelData.wrappingWidth = getConfig().flowchart!.wrappingWidth;
+        labelData.wrappingWidth = config.flowchart!.wrappingWidth;
         // Give some padding for elk
         labelData.height = bbox.height - 2;
         labelData.labelNode = shapeSvg.node();
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index fa2b70ca2..76f3113df 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -87,7 +87,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           // insertCluster(clusters, graph.node(v));
         } else {
           log.info('Node - the non recursive path', v, node.id, node);
-          await insertNode(nodes, graph.node(v), dir);
+          await insertNode(nodes, graph.node(v), { config: siteConfig });
         }
       }
     })
diff --git a/packages/mermaid/src/diagrams/block/renderHelpers.ts b/packages/mermaid/src/diagrams/block/renderHelpers.ts
index 97eca4074..8957b4d8f 100644
--- a/packages/mermaid/src/diagrams/block/renderHelpers.ts
+++ b/packages/mermaid/src/diagrams/block/renderHelpers.ts
@@ -124,7 +124,8 @@ async function calculateBlockSize(
   }
 
   // Add the element to the DOM to size it
-  const nodeEl = await insertNode(elem, node);
+  const config = getConfig();
+  const nodeEl = await insertNode(elem, node, { config });
   const boundingBox = nodeEl.node().getBBox();
   const obj = db.getBlock(node.id);
   obj.size = { width: boundingBox.width, height: boundingBox.height, x: 0, y: 0, node: nodeEl };
@@ -138,7 +139,8 @@ export async function insertBlockPositioned(elem: any, block: Block, db: any) {
   // Add the element to the DOM to size it
   const obj = db.getBlock(node.id);
   if (obj.type !== 'space') {
-    await insertNode(elem, node);
+    const config = getConfig();
+    await insertNode(elem, node, { config });
     block.intersect = node?.intersect;
     positionNode(node);
   }
diff --git a/packages/mermaid/src/rendering-util/insertElementsForSize.js b/packages/mermaid/src/rendering-util/insertElementsForSize.js
index 162551058..7e8b88ac8 100644
--- a/packages/mermaid/src/rendering-util/insertElementsForSize.js
+++ b/packages/mermaid/src/rendering-util/insertElementsForSize.js
@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import { insertNode } from '../dagre-wrapper/nodes.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 
 export const getDiagramElement = (id, securityLevel) => {
   let sandboxElement;
@@ -22,20 +23,25 @@ export function insertElementsForSize(el, data) {
   const nodesElem = el.insert('g').attr('class', 'nodes');
   el.insert('g').attr('class', 'edges');
   data.nodes.forEach(async (item) => {
+    const config = getConfig();
     item.shape = 'rect';
-    await insertNode(nodesElem, {
-      ...item,
-      class: 'default flowchart-label',
-      labelStyle: '',
-      x: 0,
-      y: 0,
-      width: 100,
-      rx: 0,
-      ry: 0,
-      height: 100,
-      shape: 'rect',
-      padding: 8,
-    });
+    await insertNode(
+      nodesElem,
+      {
+        ...item,
+        class: 'default flowchart-label',
+        labelStyle: '',
+        x: 0,
+        y: 0,
+        width: 100,
+        rx: 0,
+        ry: 0,
+        height: 100,
+        shape: 'rect',
+        padding: 8,
+      },
+      { config }
+    );
     // Create a new DOM element
     // const element = document.createElement('div');
 
diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
index 9367a65a5..6dbd62590 100644
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -125,7 +125,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           // insertCluster(clusters, graph.node(v));
         } else {
           log.trace('Node - the non recursive path XAX', v, nodes, graph.node(v), dir);
-          await insertNode(nodes, graph.node(v), dir);
+          await insertNode(nodes, graph.node(v), { config: siteConfig });
         }
       }
     })
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index cb8c1493f..52cef6cfe 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -9,7 +9,6 @@ import { choice } from './shapes/choice.ts';
 import { note } from './shapes/note.ts';
 import { stadium } from './shapes/stadium.js';
 import { rectWithTitle } from './shapes/rectWithTitle.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { subroutine } from './shapes/subroutine.js';
 import { cylinder } from './shapes/cylinder.js';
 import { circle } from './shapes/circle.js';
@@ -229,7 +228,7 @@ export const shapes = {
 
 const nodeElems = new Map();
 
-export const insertNode = async (elem, node, dir) => {
+export const insertNode = async (elem, node, config) => {
   let newEl;
   let el;
 
@@ -247,15 +246,15 @@ export const insertNode = async (elem, node, dir) => {
   // Add link when appropriate
   if (node.link) {
     let target;
-    if (getConfig().securityLevel === 'sandbox') {
+    if (config.securityLevel === 'sandbox') {
       target = '_top';
     } else if (node.linkTarget) {
       target = node.linkTarget || '_blank';
     }
     newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = await shapes[node.shape](newEl, node, dir);
+    el = await shapes[node.shape](newEl, node, config);
   } else {
-    el = await shapes[node.shape](elem, node, dir);
+    el = await shapes[node.shape](elem, node, config);
     newEl = el;
   }
   if (node.tooltip) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
index 1585b0c03..cf41f4bf3 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -5,9 +5,13 @@ import type { SVG } from '../../../diagram-api/types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
-import { getConfig } from '../../../config.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const filledCircle = (parent: SVG, node: Node) => {
+export const filledCircle = (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.label = '';
   node.labelStyle = labelStyles;
@@ -20,7 +24,6 @@ export const filledCircle = (parent: SVG, node: Node) => {
 
   // @ts-ignore - rough is not typed
   const rc = rough.svg(shapeSvg);
-  const { themeVariables } = getConfig();
   const { nodeBorder } = themeVariables;
   const options = userNodeOverrides(node, { fillStyle: 'solid' });
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index ab61dd65c..26dcef863 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -6,16 +6,21 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
-  const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
+export const iconCircle = async (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+) => {
+  const translateHorizontal =
+    node.dir === 'TB' || node.dir === 'BT' || node.dir === 'TD' || node.dir === 'DT';
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
     parent,
@@ -27,7 +32,6 @@ export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
   const topLabel = node.pos === 't';
 
   const diameter = iconSize + halfPadding * 2;
-  const { themeVariables } = getConfig();
   const { mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index 958a93dc3..9e85196cb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -6,16 +6,20 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const iconRounded = async (parent: SVG, node: Node) => {
+export const iconRounded = async (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
     parent,
@@ -28,7 +32,6 @@ export const iconRounded = async (parent: SVG, node: Node) => {
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { themeVariables } = getConfig();
   const { mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
@@ -58,7 +61,7 @@ export const iconRounded = async (parent: SVG, node: Node) => {
     const iconHeight = iconBBox.height;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
+      `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
     );
   }
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 908210f3d..663897cb2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -6,15 +6,19 @@ import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShap
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const iconSquare = async (parent: SVG, node: Node) => {
+export const iconSquare = async (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
     parent,
@@ -27,7 +31,6 @@ export const iconSquare = async (parent: SVG, node: Node) => {
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { themeVariables } = getConfig();
   const { mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index 54a6bfaee..1ad8fbf59 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -4,13 +4,16 @@ import type { Node } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const stateEnd = (parent: SVG, node: Node) => {
+export const stateEnd = (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables } }: { config: MermaidConfig }
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { cssStyles } = node;
-  const { themeVariables } = getConfig();
   const { lineColor } = themeVariables;
   const shapeSvg = parent
     .insert('g')
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
index 30d606a84..d0844b21c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -4,10 +4,13 @@ import type { Node } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
+import type { MermaidConfig } from '../../../config.type.js';
 
-export const stateStart = (parent: SVG, node: Node) => {
-  const { themeVariables } = getConfig();
+export const stateStart = (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables } }: { config: MermaidConfig }
+) => {
   const { lineColor } = themeVariables;
 
   const shapeSvg = parent

From d8c340d9c5fc107b79def393352aec2077c37fd7 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 13 Sep 2024 11:23:28 +0200
Subject: [PATCH 06/15] Throwing error for invalid shape

---
 .../mermaid/src/rendering-util/rendering-elements/nodes.js   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index cb8c1493f..05a37cdeb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -244,8 +244,11 @@ export const insertNode = async (elem, node, dir) => {
     }
   }
 
-  // Add link when appropriate
+  if (!shapes[node.shape]) {
+    throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
+  }
   if (node.link) {
+    // Add link when appropriate
     let target;
     if (getConfig().securityLevel === 'sandbox') {
       target = '_top';

From 9f2f3bd780cef9a228232e9a49c2eaa3e61fea64 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Fri, 13 Sep 2024 15:41:53 +0530
Subject: [PATCH 07/15] Updated type

---
 packages/mermaid/src/dagre-wrapper/nodes.js       |  6 +++---
 .../src/rendering-util/insertElementsForSize.js   |  2 +-
 .../rendering-util/rendering-elements/nodes.js    |  8 ++++----
 .../rendering-elements/shapes/filledCircle.ts     |  5 ++---
 .../rendering-elements/shapes/iconCircle.ts       | 15 +++++----------
 .../rendering-elements/shapes/iconRounded.ts      |  5 ++---
 .../rendering-elements/shapes/iconSquare.ts       |  5 ++---
 .../rendering-elements/shapes/stateEnd.ts         |  5 ++---
 .../rendering-elements/shapes/stateStart.ts       |  5 ++---
 packages/mermaid/src/rendering-util/types.ts      |  4 ++++
 10 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index b841064b6..2677fd785 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -1131,7 +1131,7 @@ const shapes = {
 
 let nodeElems = {};
 
-export const insertNode = async (elem, node, dir) => {
+export const insertNode = async (elem, node, renderOptions) => {
   let newEl;
   let el;
 
@@ -1144,9 +1144,9 @@ export const insertNode = async (elem, node, dir) => {
       target = node.linkTarget || '_blank';
     }
     newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = await shapes[node.shape](newEl, node, dir);
+    el = await shapes[node.shape](newEl, node, renderOptions);
   } else {
-    el = await shapes[node.shape](elem, node, dir);
+    el = await shapes[node.shape](elem, node, renderOptions);
     newEl = el;
   }
   if (node.tooltip) {
diff --git a/packages/mermaid/src/rendering-util/insertElementsForSize.js b/packages/mermaid/src/rendering-util/insertElementsForSize.js
index 7e8b88ac8..058db7cf7 100644
--- a/packages/mermaid/src/rendering-util/insertElementsForSize.js
+++ b/packages/mermaid/src/rendering-util/insertElementsForSize.js
@@ -22,8 +22,8 @@ export const getDiagramElement = (id, securityLevel) => {
 export function insertElementsForSize(el, data) {
   const nodesElem = el.insert('g').attr('class', 'nodes');
   el.insert('g').attr('class', 'edges');
+  const config = getConfig();
   data.nodes.forEach(async (item) => {
-    const config = getConfig();
     item.shape = 'rect';
     await insertNode(
       nodesElem,
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 583892708..5fd70b7b6 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -228,7 +228,7 @@ export const shapes = {
 
 const nodeElems = new Map();
 
-export const insertNode = async (elem, node, config) => {
+export const insertNode = async (elem, node, renderOptions) => {
   let newEl;
   let el;
 
@@ -249,15 +249,15 @@ export const insertNode = async (elem, node, config) => {
   if (node.link) {
     // Add link when appropriate
     let target;
-    if (config.securityLevel === 'sandbox') {
+    if (renderOptions.config.securityLevel === 'sandbox') {
       target = '_top';
     } else if (node.linkTarget) {
       target = node.linkTarget || '_blank';
     }
     newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);
-    el = await shapes[node.shape](newEl, node, config);
+    el = await shapes[node.shape](newEl, node, renderOptions);
   } else {
-    el = await shapes[node.shape](elem, node, config);
+    el = await shapes[node.shape](elem, node, renderOptions);
     newEl = el;
   }
   if (node.tooltip) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
index cf41f4bf3..ab8f5b9b0 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -1,16 +1,15 @@
 import { log } from '../../../logger.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node, RenderOptions } from '../../types.d.ts';
 import type { SVG } from '../../../diagram-api/types.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
-import type { MermaidConfig } from '../../../config.type.js';
 
 export const filledCircle = (
   parent: SVG,
   node: Node,
-  { config: { themeVariables } }: { config: MermaidConfig }
+  { config: { themeVariables } }: RenderOptions
 ) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.label = '';
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 26dcef863..8d1294a49 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -1,20 +1,17 @@
 import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node, RenderOptions } from '../../types.d.ts';
 import type { SVG } from '../../../diagram-api/types.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import type { MermaidConfig } from '../../../config.type.js';
 
 export const iconCircle = async (
   parent: SVG,
   node: Node,
-  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+  { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
-  const translateHorizontal =
-    node.dir === 'TB' || node.dir === 'BT' || node.dir === 'TD' || node.dir === 'DT';
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
@@ -58,18 +55,16 @@ export const iconCircle = async (
     const iconHeight = iconBBox.height;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + (translateHorizontal ? bbox.height / 2 : 0) : -diameter / 2 + halfPadding - (translateHorizontal ? bbox.height / 2 : 0)})`
+      `translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + bbox.height / 2 : -diameter / 2 + halfPadding - bbox.height / 2})`
     );
   }
 
   label.attr(
     'transform',
-    `translate(${-diameter / 2 + diameter / 2 - bbox.width / 2},${topLabel ? -diameter / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : diameter / 2 + 5 - (translateHorizontal ? bbox.height / 2 : 0)})`
+    `translate(${-diameter / 2 + diameter / 2 - bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 : diameter / 2 - bbox.height / 2})`
   );
 
-  if (translateHorizontal) {
-    iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
-  }
+  iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
 
   if (cssStyles && node.look !== 'handDrawn') {
     iconShape.selectAll('path').attr('style', cssStyles);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index 9e85196cb..3793c986c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -1,18 +1,17 @@
 import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
-import type { Node } from '../../types.js';
+import type { Node, RenderOptions } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
-import type { MermaidConfig } from '../../../config.type.js';
 
 export const iconRounded = async (
   parent: SVG,
   node: Node,
-  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+  { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 663897cb2..39fcc102c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -1,17 +1,16 @@
 import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node, RenderOptions } from '../../types.d.ts';
 import type { SVG } from '../../../diagram-api/types.js';
 import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import type { MermaidConfig } from '../../../config.type.js';
 
 export const iconSquare = async (
   parent: SVG,
   node: Node,
-  { config: { themeVariables, flowchart } }: { config: MermaidConfig }
+  { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index 1ad8fbf59..1fc554657 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -1,15 +1,14 @@
 import { updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '../../types.js';
+import type { Node, RenderOptions } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
-import type { MermaidConfig } from '../../../config.type.js';
 
 export const stateEnd = (
   parent: SVG,
   node: Node,
-  { config: { themeVariables } }: { config: MermaidConfig }
+  { config: { themeVariables } }: RenderOptions
 ) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
index d0844b21c..d29b42be4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -1,15 +1,14 @@
 import { updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '../../types.js';
+import type { Node, RenderOptions } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import type { MermaidConfig } from '../../../config.type.js';
 
 export const stateStart = (
   parent: SVG,
   node: Node,
-  { config: { themeVariables } }: { config: MermaidConfig }
+  { config: { themeVariables } }: RenderOptions
 ) => {
   const { lineColor } = themeVariables;
 
diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts
index a9b063d1d..0d24f6fdf 100644
--- a/packages/mermaid/src/rendering-util/types.ts
+++ b/packages/mermaid/src/rendering-util/types.ts
@@ -140,3 +140,7 @@ export type LayoutMethod =
   | 'fdp'
   | 'osage'
   | 'grid';
+
+export interface RenderOptions {
+  config: MermaidConfig;
+}

From 61af74609a57796f163c681d040f7d1455ffa083 Mon Sep 17 00:00:00 2001
From: Ashish Jain <ashishjain0512@gmail.com>
Date: Fri, 13 Sep 2024 12:58:28 +0200
Subject: [PATCH 08/15] Updated shape aliases

---
 .cspell/code-terms.txt                        |   1 +
 .cspell/mermaid-terms.txt                     |   2 +
 .../rendering/flowchart-shape-alias.spec.ts   |  68 ++--
 .../integration/rendering/newShapes.spec.ts   |  27 +-
 docs/syntax/flowchart.md                      | 208 ++++++------
 packages/mermaid/src/docs/syntax/flowchart.md | 158 +++++-----
 .../rendering-elements/nodes.js               | 297 +++++++++++-------
 .../rendering-elements/nodes.spec.js          | 114 ++++---
 8 files changed, 478 insertions(+), 397 deletions(-)

diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt
index 8e4c02261..f4862006f 100644
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -26,6 +26,7 @@ concat
 controlx
 controly
 CSSCLASS
+curv
 CYLINDEREND
 CYLINDERSTART
 DAGA
diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt
index 59a3d108f..8551bd196 100644
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -5,6 +5,7 @@ bmatrix
 braintree
 catmull
 compositTitleSize
+curv
 doublecircle
 elems
 gantt
@@ -24,6 +25,7 @@ multigraph
 nodesep
 NOTEGROUP
 Pinterest
+procs
 rankdir
 ranksep
 rect
diff --git a/cypress/integration/rendering/flowchart-shape-alias.spec.ts b/cypress/integration/rendering/flowchart-shape-alias.spec.ts
index c4f9efede..86aef718c 100644
--- a/cypress/integration/rendering/flowchart-shape-alias.spec.ts
+++ b/cypress/integration/rendering/flowchart-shape-alias.spec.ts
@@ -4,79 +4,87 @@ const aliasSet1 = ['process', 'rect', 'proc', 'rectangle'] as const;
 
 const aliasSet2 = ['event', 'rounded'] as const;
 
-const aliasSet3 = ['stadium', 'pill', 'term'] as const;
+const aliasSet3 = ['stadium', 'pill', 'terminal'] as const;
 
-const aliasSet4 = ['fr', 'subproc', 'framed-rectangle', 'subroutine'] as const;
+const aliasSet4 = ['fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'] as const;
 
-const aliasSet5 = ['db', 'cylinder', 'cyl'] as const;
+const aliasSet5 = ['db', 'database', 'cylinder', 'cyl'] as const;
 
 const aliasSet6 = ['diam', 'decision', 'diamond'] as const;
 
 const aliasSet7 = ['hex', 'hexagon', 'prepare'] as const;
 
-const aliasSet8 = ['l-r', 'lean-right', 'in-out'] as const;
+const aliasSet8 = ['lean-r', 'lean-right', 'in-out'] as const;
 
-const aliasSet9 = ['l-l', 'lean-left', 'out-in'] as const;
+const aliasSet9 = ['lean-l', 'lean-left', 'out-in'] as const;
 
-const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority', 'trapezoid'] as const;
+const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority'] as const;
 
-const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual', 'inv-trapezoid'] as const;
+const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual'] as const;
 
-const aliasSet12 = ['dc', 'double-circle'] as const;
+const aliasSet12 = ['dbl-circ', 'double-circle'] as const;
 
-const aliasSet13 = ['notched-rect', 'card', 'notch-rect'] as const;
+const aliasSet13 = ['notched-rectangle', 'card', 'notch-rect'] as const;
 
-const aliasSet14 = ['lined-rect', 'lined-proc', 'shaded-proc'] as const;
+const aliasSet14 = [
+  'lin-rect',
+  'lined-rectangle',
+  'lin-proc',
+  'lined-process',
+  'shaded-process',
+] as const;
 
 const aliasSet15 = ['sm-circ', 'small-circle', 'start'] as const;
 
-const aliasSet16 = ['framed-circle', 'stop'] as const;
+const aliasSet16 = ['fr-circ', 'framed-circle', 'stop'] as const;
 
-const aliasSet17 = ['fork', 'join', 'long-rect'] as const;
-
-const aliasSet18 = ['brace', 'comment', 'brace-l'] as const;
+const aliasSet17 = ['fork', 'join'] as const;
+// brace-r', 'braces'
+const aliasSet18 = ['comment', 'brace-l'] as const;
 
 const aliasSet19 = ['bolt', 'com-link', 'lightning-bolt'] as const;
 
-const aliasSet20 = ['we-rect', 'doc', 'wave-edge-rect', 'wave-edged-rectangle'] as const;
+const aliasSet20 = ['doc', 'document'] as const;
 
-const aliasSet21 = ['delay', 'half-rounded-rect'] as const;
+const aliasSet21 = ['delay', 'half-rounded-rectangle'] as const;
 
-const aliasSet22 = ['t-cyl', 'das', 'tilted-cylinder'] as const;
+const aliasSet22 = ['h-cyl', 'das', 'horizontal-cylinder'] as const;
 
-const aliasSet23 = ['l-cyl', 'disk', 'lined-cylinder'] as const;
+const aliasSet23 = ['lin-cyl', 'disk', 'lined-cylinder'] as const;
 
-const aliasSet24 = ['cur-trap', 'disp', 'display', 'curved-trapezoid'] as const;
+const aliasSet24 = ['curv-trap', 'display', 'curved-trapezoid'] as const;
 
-const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle'] as const;
+const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle', 'divided-process'] as const;
 
-const aliasSet26 = ['sm-tri', 'extract', 'small-triangle', 'triangle'] as const;
+const aliasSet26 = ['extract', 'tri', 'triangle'] as const;
 
 const aliasSet27 = ['win-pane', 'internal-storage', 'window-pane'] as const;
 
-const aliasSet28 = ['fc', 'junction', 'filled-circle'] as const;
+const aliasSet28 = ['f-circ', 'junction', 'filled-circle'] as const;
 
-const aliasSet29 = ['lin-we-rect', 'lin-doc', 'lined-wave-edged-rect'] as const;
+const aliasSet29 = ['lin-doc', 'lined-document'] as const;
 
 const aliasSet30 = ['notch-pent', 'loop-limit', 'notched-pentagon'] as const;
 
 const aliasSet31 = ['flip-tri', 'manual-file', 'flipped-triangle'] as const;
 
-const aliasSet32 = ['sloped-rect', 'manual-input', 'sloped-rectangle'] as const;
+const aliasSet32 = ['sl-rect', 'manual-input', 'sloped-rectangle'] as const;
 
-const aliasSet33 = ['mul-we-rect', 'mul-doc', 'multi-wave-edged-rectangle'] as const;
+const aliasSet33 = ['docs', 'documents', 'st-doc', 'stacked-document'] as const;
 
-const aliasSet34 = ['mul-rect', 'mul-proc', 'multi-rect'] as const;
+const aliasSet34 = ['procs', 'processes', 'st-rect', 'stacked-rectangle'] as const;
 
 const aliasSet35 = ['flag', 'paper-tape'] as const;
 
-const aliasSet36 = ['bt-rect', 'stored-data', 'bow-tie-rect'] as const;
+const aliasSet36 = ['bow-rect', 'stored-data', 'bow-tie-rectangle'] as const;
 
-const aliasSet37 = ['cross-circle', 'summary', 'crossed-circle'] as const;
+const aliasSet37 = ['cross-circ', 'summary', 'crossed-circle'] as const;
 
-const aliasSet38 = ['tag-we-rect', 'tag-doc', 'tagged-wave-edged-rectangle'] as const;
+const aliasSet38 = ['tag-doc', 'tagged-document'] as const;
 
-const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rect'] as const;
+const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rectangle', 'tagged-process'] as const;
+
+const aliasSet40 = ['collate', 'hourglass'] as const;
 
 // Aggregate all alias sets into a single array
 const aliasSets = [
diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts
index ac3b8c044..0f539f09c 100644
--- a/cypress/integration/rendering/newShapes.spec.ts
+++ b/cypress/integration/rendering/newShapes.spec.ts
@@ -4,14 +4,14 @@ const looks = ['classic'] as const;
 const directions = ['TB'] as const;
 const newShapesSet1 = [
   'triangle',
-  'sloped-rect',
-  'tilted-cylinder',
+  'sloped-rectangle',
+  'horizontal-cylinder',
   'flipped-triangle',
   'hourglass',
 ] as const;
 const newShapesSet2 = [
-  'tagged-rect',
-  'multi-rect',
+  'tagged-rectangle',
+  'documents',
   'lightning-bolt',
   'filled-circle',
   'window-pane',
@@ -19,26 +19,27 @@ const newShapesSet2 = [
 
 const newShapesSet3 = [
   'curved-trapezoid',
-  'bow-tie-rect',
-  'wave-edge-rect',
+  'bow-rect',
+  'tagged-document',
   'divided-rectangle',
   'crossed-circle',
 ] as const;
 
 const newShapesSet4 = [
-  'wave-rectangle',
+  'document',
   'notched-pentagon',
   'lined-cylinder',
-  'multi-wave-edged-rectangle',
-  'half-rounded-rect',
+  'stacked-document',
+  'half-rounded-rectangle',
 ] as const;
 
 const newShapesSet5 = [
-  'lined-wave-edged-rect',
-  'tagged-wave-edged-rectangle',
+  'lined-document',
+  'tagged-document',
   'brace-l',
-  'curved-trapezoid',
-  'wave-rectangle',
+  'comment',
+  'braces',
+  'brace-r',
 ] as const;
 
 const newShapesSet6 = ['brace-r', 'braces'] as const;
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 2c55ccc93..bc08136c0 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -316,53 +316,53 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
 
 Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
 
-| **Semantic Name**                     | **Shape Name**              | **Short Name**  | **Description**                | **Alias Supported**                         |
-| ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ------------------------------------------- |
-| **Process**                           | Rectangle                   | `rect`          | Standard process shape         | `proc`, `process`, `rectangle`              |
-| **Event**                             | Rounded Rectangle           | `rounded`       | Represents an event            | `event`                                     |
-| **Terminal Point**                    | Stadium                     | `stadium`       | Terminal point                 | `term`, `pill`                              |
-| **Subprocess**                        | Framed Rectangle            | `fr`            | Subprocess                     | `subproc`, `framed-rectangle`, `subroutine` |
-| **Database**                          | Cylinder                    | `cyl`           | Database storage               | `db`, `cylinder`                            |
-| **Start**                             | Circle                      | `circle`        | Starting point                 |                                             |
-| **Odd**                               | Odd                         | `odd`           | Odd shape                      |                                             |
-| **Decision**                          | Diamond                     | `diam`          | Decision-making step           | `decision`, `diamond`                       |
-| **Prepare Conditional**               | Hexagon                     | `hex`           | Preparation or condition step  | `hexagon`, `prepare`                        |
-| **Data Input/Output**                 | Lean Right                  | `l-r`           | Represents input or output     | `lean-right`, `in-out`                      |
-| **Data Input/Output**                 | Lean Left                   | `l-l`           | Represents output or input     | `lean-left`, `out-in`                       |
-| **Priority Action**                   | Trapezoid Base Bottom       | `trap-b`        | Priority action                | `priority`, `trapezoid-bottom`, `trapezoid` |
-| **Manual Operation**                  | Trapezoid Base Top          | `trap-t`        | Represents a manual task       | `manual`, `trapezoid-top`, `inv-trapezoid`  |
-| **Stop**                              | Double Circle               | `dc`            | Represents a stop point        | `double-circle`                             |
-| **Text Block**                        | Text Block                  | `text`          | Text block                     | -                                           |
-| **Card**                              | Notched Rectangle           | `notched-rect`  | Represents a card              | `card`, `notch-rect`, `notched-rect`        |
-| **Lined/Shaded Process**              | Lined Rectangle             | `lined-rect`    | Lined process shape            | `lined-proc`, `shaded-proc`                 |
-| **Start**                             | Small Circle                | `sm-circ`       | Small starting point           | `start`, `small-circle`                     |
-| **Stop**                              | Framed Circle               | `framed-circle` | Stop point                     | `stop`, `framed-circle`                     |
-| **Fork/Join**                         | Long Rectangle              | `fork`          | Fork or join in process flow   | `join`, `long-rect`                         |
-| **Collate**                           | Hourglass                   | `hourglass`     | Represents a collate operation | -                                           |
-| **Comment**                           | Curly Brace                 | `brace`         | Adds a comment                 | `comment`, `brace-l`                        |
-| **Comment Right**                     | Curly Brace                 | `brace-r`       | Adds a comment                 | -                                           |
-| **Comment with braces on both sides** | Curly Braces                | `braces`        | Adds a comment                 | -                                           |
-| **Com Link**                          | Lightning Bolt              | `bolt`          | Communication link             | `com-link`, `lightning-bolt`                |
-| **Document**                          | Wave-Edged Rectangle        | `we-rect`       | Represents a document          | `doc`, `wave-edge-rect`                     |
-| **Delay**                             | Half-Rounded Rectangle      | `delay`         | Represents a delay             | `half-rounded-rect`                         |
-| **Direct Access Storage**             | Tilted Cylinder             | `t-cyl`         | Direct access storage          | `das`, `tilted-cylinder`                    |
-| **Disk Storage**                      | Lined Cylinder              | `l-cyl`         | Disk storage                   | `disk`, `lined-cylinder`                    |
-| **Display**                           | Curved Trapezoid            | `cur-trap`      | Represents a display           | `disp`, `curved-trapezoid`, `display`       |
-| **Divided Process**                   | Divided Rectangle           | `div-rect`      | Divided process shape          | `div-proc`, `divided-rectangle`             |
-| **Extract**                           | Small Triangle              | `sm-tri`        | Extraction process             | `extract`, `small-triangle`                 |
-| **Internal Storage**                  | Window Pane                 | `win-pane`      | Internal storage               | `internal-storage`, `window-pane`           |
-| **Junction**                          | Filled Circle               | `fc`            | Junction point                 | `junction`, `filled-circle`                 |
-| **Lined Document**                    | Lined Wave-Edged Rectangle  | `lin-we-rect`   | Lined document                 | `lin-doc`, `lined-wave-edged-rect`          |
-| **Loop Limit**                        | Trapezoidal Pentagon        | `notch-pent`    | Loop limit step                | `loop-limit`, `notched-pentagon`            |
-| **Manual File**                       | Flipped Triangle            | `flip-tri`      | Manual file operation          | `manual-file`, `flipped-triangle`           |
-| **Manual Input**                      | Sloped Rectangle            | `sloped-rect`   | Manual input step              | `manual-input`, `sloped-rectangle`          |
-| **Multi-Document**                    | Multi-Wave-Edged Rectangle  | `mul-we-rect`   | Multiple documents             | `mul-doc`, `multi-wave-edged-rectangle`     |
-| **Multi-Process**                     | Multi-Rect                  | `mul-rect`      | Multiple processes             | `mul-proc`, `multi-rect`                    |
-| **Paper Tape**                        | Flag                        | `flag`          | Paper tape                     | `paper-tape`                                |
-| **Stored Data**                       | Bow Tie Rectangle           | `bt-rect`       | Stored data                    | `stored-data`, `bow-tie-rect`               |
-| **Summary**                           | Crossed Circle              | `cross-circle`  | Summary                        | `summary`, `crossed-circle`                 |
-| **Tagged Document**                   | Tagged Wave-Edged Rectangle | `tag-we-rect`   | Tagged document                | `tag-doc`, `tagged-wave-edged-rectangle`    |
-| **Tagged Process**                    | Tagged Rectangle            | `tag-rect`      | Tagged process                 | `tag-proc`, `tagged-rect`                   |
+| **Semantic Name**                     | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                         |
+| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | ----------------------------------------------------------- |
+| **Process**                           | Rectangle              | `rect`         | Standard process shape         | `proc`, `process`, `rectangle`                              |
+| **Event**                             | Rounded Rectangle      | `rounded`      | Represents an event            | `event`                                                     |
+| **Terminal Point**                    | Stadium                | `stadium`      | Terminal point                 | `terminal`, `pill`                                          |
+| **Subprocess**                        | Framed Rectangle       | `fr-rect`      | Subprocess                     | `subprocess`,`subproc`, `framed-rectangle`, `subroutine`    |
+| **Database**                          | Cylinder               | `cyl`          | Database storage               | `db`, `database`, `cylinder`                                |
+| **Start**                             | Circle                 | `circle`       | Starting point                 | `circ`                                                      |
+| **Odd**                               | Odd                    | `odd`          | Odd shape                      |                                                             |
+| **Decision**                          | Diamond                | `diam`         | Decision-making step           | `decision`, `diamond`                                       |
+| **Prepare Conditional**               | Hexagon                | `hex`          | Preparation or condition step  | `hexagon`, `prepare`                                        |
+| **Data Input/Output**                 | Lean Right             | `lean-r`       | Represents input or output     | `lean-right`, `in-out`                                      |
+| **Data Input/Output**                 | Lean Left              | `lean-l`       | Represents output or input     | `lean-left`, `out-in`                                       |
+| **Priority Action**                   | Trapezoid Base Bottom  | `trap-b`       | Priority action                | `priority`, `trapezoid-bottom`                              |
+| **Manual Operation**                  | Trapezoid Base Top     | `trap-t`       | Represents a manual task       | `manual`, `trapezoid-top`                                   |
+| **Stop**                              | Double Circle          | `dbl-circ`     | Represents a stop point        | `double-circle`                                             |
+| **Text Block**                        | Text Block             | `text`         | Text block                     | -                                                           |
+| **Card**                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                 |
+| **Lined/Shaded Process**              | Lined Rectangle        | `lin-rect`     | Lined process shape            | `lined-rectangle`,`lined-proc`, `lin-proc`,`shaded-process` |
+| **Start**                             | Small Circle           | `sm-circ`      | Small starting point           | `start`, `small-circle`                                     |
+| **Stop**                              | Framed Circle          | `fr-circ`      | Stop point                     | `stop`, `framed-circle`                                     |
+| **Fork/Join**                         | Filled Rectangle       | `fork`         | Fork or join in process flow   | `join`                                                      |
+| **Collate**                           | Hourglass              | `hourglass`    | Represents a collate operation | `hourglass`                                                 |
+| **Comment**                           | Curly Brace            | `brace`        | Adds a comment                 | `comment`, `brace-l`                                        |
+| **Comment Right**                     | Curly Brace            | `brace-r`      | Adds a comment                 | -                                                           |
+| **Comment with braces on both sides** | Curly Braces           | `braces`       | Adds a comment                 | -                                                           |
+| **Com Link**                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                |
+| **Document**                          | Document               | `doc`          | Represents a document          | `doc`, `document`                                           |
+| **Delay**                             | Half-Rounded Rectangle | `delay`        | Represents a delay             | `half-rounded-rectangle`                                    |
+| **Direct Access Storage**             | Horizontal Cylinder    | `h-cyl`        | Direct access storage          | `das`, `horizontal-cylinder`                                |
+| **Disk Storage**                      | Lined Cylinder         | `lin-cyl`      | Disk storage                   | `disk`, `lined-cylinder`                                    |
+| **Display**                           | Curved Trapezoid       | `curv-trap`    | Represents a display           | `curved-trapezoid`, `display`                               |
+| **Divided Process**                   | Divided Rectangle      | `div-rect`     | Divided process shape          | `div-proc`, `divided-rectangle`, `divided-process`          |
+| **Extract**                           | Triangle               | `tri`          | Extraction process             | `extract`, `triangle`                                       |
+| **Internal Storage**                  | Window Pane            | `win-pane`     | Internal storage               | `internal-storage`, `window-pane`                           |
+| **Junction**                          | Filled Circle          | `f-circ`       | Junction point                 | `junction`, `filled-circle`                                 |
+| **Lined Document**                    | Lined Document         | `lin-doc`      | Lined document                 | `lined-document`                                            |
+| **Loop Limit**                        | Trapezoidal Pentagon   | `notch-pent`   | Loop limit step                | `loop-limit`, `notched-pentagon`                            |
+| **Manual File**                       | Flipped Triangle       | `flip-tri`     | Manual file operation          | `manual-file`, `flipped-triangle`                           |
+| **Manual Input**                      | Sloped Rectangle       | `sl-rect`      | Manual input step              | `manual-input`, `sloped-rectangle`                          |
+| **Multi-Document**                    | Stacked Document       | `docs`         | Multiple documents             | `documents`, `st-doc`, `stacked-document`                   |
+| **Multi-Process**                     | Stacked Rectangle      | `st-rect`      | Multiple processes             | `procs`, `processes`, `stacked-rect`                        |
+| **Paper Tape**                        | Flag                   | `flag`         | Paper tape                     | `paper-tape`                                                |
+| **Stored Data**                       | Bow Tie Rectangle      | `bow-rect`     | Stored data                    | `stored-data`, `bow-tie-rectangle`                          |
+| **Summary**                           | Crossed Circle         | `cross-circ`   | Summary                        | `summary`, `crossed-circle`                                 |
+| **Tagged Document**                   | Tagged Document        | `tag-doc`      | Tagged document                | `tag-doc`, `tagged-document`                                |
+| **Tagged Process**                    | Tagged Rectangle       | `tag-rect`     | Tagged process                 | `tagged-rectangle`,`tag-proc`, `tagged-process`             |
 
 ### Example Flowchart with New Shapes
 
@@ -370,20 +370,20 @@ Here’s an example flowchart that utilizes some of the newly introduced shapes:
 
 ```mermaid-example
 flowchart RL
-    A5@{ shape: manual-file, label: "File Handling"}
-    B5@{ shape: manual-input, label: "User Input"}
-    C5@{ shape: mul-doc, label: "Multiple Documents"}
-    D5@{ shape: mul-proc, label: "Process Automation"}
-    E5@{ shape: paper-tape, label: "Paper Records"}
+    A@{ shape: manual-file, label: "File Handling"}
+    B@{ shape: manual-input, label: "User Input"}
+    C@{ shape: docs, label: "Multiple Documents"}
+    D@{ shape: procs, label: "Process Automation"}
+    E@{ shape: paper-tape, label: "Paper Records"}
 ```
 
 ```mermaid
 flowchart RL
-    A5@{ shape: manual-file, label: "File Handling"}
-    B5@{ shape: manual-input, label: "User Input"}
-    C5@{ shape: mul-doc, label: "Multiple Documents"}
-    D5@{ shape: mul-proc, label: "Process Automation"}
-    E5@{ shape: paper-tape, label: "Paper Records"}
+    A@{ shape: manual-file, label: "File Handling"}
+    B@{ shape: manual-input, label: "User Input"}
+    C@{ shape: docs, label: "Multiple Documents"}
+    D@{ shape: procs, label: "Process Automation"}
+    E@{ shape: paper-tape, label: "Paper Records"}
 ```
 
 ### Process
@@ -498,24 +498,24 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-r, label: "Input/Output" }
+    A@{ shape: lean-r, label: "Input/Output" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: l-r, label: "Input/Output" }
+    A@{ shape: lean-r, label: "Input/Output" }
 ```
 
 ### Data Input/Output (Lean Left)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-l, label: "Output/Input" }
+    A@{ shape: lean-l, label: "Output/Input" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: l-l, label: "Output/Input" }
+    A@{ shape: lean-l, label: "Output/Input" }
 ```
 
 ### Priority Action (Trapezoid Base Bottom)
@@ -546,12 +546,12 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: dc, label: "Stop" }
+    A@{ shape: dbl-circ, label: "Stop" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: dc, label: "Stop" }
+    A@{ shape: dbl-circ, label: "Stop" }
 ```
 
 ### Text Block
@@ -570,24 +570,24 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: notched-rect, label: "Card" }
+    A@{ shape: notch-rect, label: "Card" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: notched-rect, label: "Card" }
+    A@{ shape: notch-rect, label: "Card" }
 ```
 
 ### Lined/Shaded Process
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lined-rect, label: "Lined process" }
+    A@{ shape: lin-rect, label: "Lined process" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: lined-rect, label: "Lined process" }
+    A@{ shape: lin-rect, label: "Lined process" }
 ```
 
 ### Start (Small Circle)
@@ -686,16 +686,16 @@ flowchart TD
     A@{ shape: bolt, label: "Communication link" }
 ```
 
-### Document (Wave-Edged Rectangle)
+### Document
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: we-rect, label: "Document" }
+    A@{ shape: doc, label: "Document" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: we-rect, label: "Document" }
+    A@{ shape: doc, label: "Document" }
 ```
 
 ### Delay (Half-Rounded Rectangle)
@@ -710,40 +710,40 @@ flowchart TD
     A@{ shape: delay, label: "Delay" }
 ```
 
-### Direct Access Storage (Tilted Cylinder)
+### Direct Access Storage (Horizontal Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: t-cyl, label: "Direct access storage" }
+    A@{ shape: das, label: "Direct access storage" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: t-cyl, label: "Direct access storage" }
+    A@{ shape: das, label: "Direct access storage" }
 ```
 
 ### Disk Storage (Lined Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-cyl, label: "Disk storage" }
+    A@{ shape: lin-cyl, label: "Disk storage" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: l-cyl, label: "Disk storage" }
+    A@{ shape: lin-cyl, label: "Disk storage" }
 ```
 
 ### Display (Curved Trapezoid)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cur-trap, label: "Display" }
+    A@{ shape: curv-trap, label: "Display" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: cur-trap, label: "Display" }
+    A@{ shape: curv-trap, label: "Display" }
 ```
 
 ### Divided Process (Divided Rectangle)
@@ -762,12 +762,12 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sm-tri, label: "Extract" }
+    A@{ shape: tri, label: "Extract" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: sm-tri, label: "Extract" }
+    A@{ shape: tri, label: "Extract" }
 ```
 
 ### Internal Storage (Window Pane)
@@ -786,84 +786,84 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fc, label: "Junction" }
+    A@{ shape: f-circ, label: "Junction" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: fc, label: "Junction" }
+    A@{ shape: f-circ, label: "Junction" }
 ```
 
-### Lined Document (Lined Wave-Edged Rectangle)
+### Lined Document
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lin-we-rect, label: "Lined document" }
+    A@{ shape: lin-doc, label: "Lined document" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: lin-we-rect, label: "Lined document" }
+    A@{ shape: lin-doc, label: "Lined document" }
 ```
 
-### Loop Limit (Trapezoidal Pentagon)
+### Loop Limit (Notched Pentagon)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: not-pent, label: "Loop limit" }
+    A@{ shape: notch-pent, label: "Loop limit" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: not-pent, label: "Loop limit" }
+    A@{ shape: notch-pent, label: "Loop limit" }
 ```
 
 ### Manual File (Flipped Triangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: flip-tria, label: "Manual file" }
+    A@{ shape: flip-tri, label: "Manual file" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: flip-tria, label: "Manual file" }
+    A@{ shape: flip-tri, label: "Manual file" }
 ```
 
 ### Manual Input (Sloped Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sloped-rect, label: "Manual input" }
+    A@{ shape: sl-rect, label: "Manual input" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: sloped-rect, label: "Manual input" }
+    A@{ shape: sl-rect, label: "Manual input" }
 ```
 
-### Multi-Document (Multi-Wave-Edged Rectangle)
+### Multi-Document (Stacked Document)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-we-rect, label: "Multiple documents" }
+    A@{ shape: docs, label: "Multiple documents" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: mul-we-rect, label: "Multiple documents" }
+    A@{ shape: docs, label: "Multiple documents" }
 ```
 
-### Multi-Process (Multi-Rect)
+### Multi-Process (Stacked Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-rect, label: "Multiple processes" }
+    A@{ shape: processes, label: "Multiple processes" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: mul-rect, label: "Multiple processes" }
+    A@{ shape: processes, label: "Multiple processes" }
 ```
 
 ### Paper Tape (Flag)
@@ -882,36 +882,36 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: bt-rect, label: "Stored data" }
+    A@{ shape: bow-rect, label: "Stored data" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: bt-rect, label: "Stored data" }
+    A@{ shape: bow-rect, label: "Stored data" }
 ```
 
 ### Summary (Crossed Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cross-circle, label: "Summary" }
+    A@{ shape: cross-circ, label: "Summary" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: cross-circle, label: "Summary" }
+    A@{ shape: cross-circ, label: "Summary" }
 ```
 
-### Tagged Document (Tagged Wave-Edged Rectangle)
+### Tagged Document
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: tag-we-rect, label: "Tagged document" }
+    A@{ shape: tag-doc, label: "Tagged document" }
 ```
 
 ```mermaid
 flowchart TD
-    A@{ shape: tag-we-rect, label: "Tagged document" }
+    A@{ shape: tag-doc, label: "Tagged document" }
 ```
 
 ### Tagged Process (Tagged Rectangle)
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 4fd178e3b..0dfc748f5 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -212,53 +212,53 @@ This syntax creates a node A as a rectangle. It renders in the same way as `A["A
 
 Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
 
-| **Semantic Name**                     | **Shape Name**              | **Short Name**  | **Description**                | **Alias Supported**                         |
-| ------------------------------------- | --------------------------- | --------------- | ------------------------------ | ------------------------------------------- |
-| **Process**                           | Rectangle                   | `rect`          | Standard process shape         | `proc`, `process`, `rectangle`              |
-| **Event**                             | Rounded Rectangle           | `rounded`       | Represents an event            | `event`                                     |
-| **Terminal Point**                    | Stadium                     | `stadium`       | Terminal point                 | `term`, `pill`                              |
-| **Subprocess**                        | Framed Rectangle            | `fr`            | Subprocess                     | `subproc`, `framed-rectangle`, `subroutine` |
-| **Database**                          | Cylinder                    | `cyl`           | Database storage               | `db`, `cylinder`                            |
-| **Start**                             | Circle                      | `circle`        | Starting point                 |                                             |
-| **Odd**                               | Odd                         | `odd`           | Odd shape                      |                                             |
-| **Decision**                          | Diamond                     | `diam`          | Decision-making step           | `decision`, `diamond`                       |
-| **Prepare Conditional**               | Hexagon                     | `hex`           | Preparation or condition step  | `hexagon`, `prepare`                        |
-| **Data Input/Output**                 | Lean Right                  | `l-r`           | Represents input or output     | `lean-right`, `in-out`                      |
-| **Data Input/Output**                 | Lean Left                   | `l-l`           | Represents output or input     | `lean-left`, `out-in`                       |
-| **Priority Action**                   | Trapezoid Base Bottom       | `trap-b`        | Priority action                | `priority`, `trapezoid-bottom`, `trapezoid` |
-| **Manual Operation**                  | Trapezoid Base Top          | `trap-t`        | Represents a manual task       | `manual`, `trapezoid-top`, `inv-trapezoid`  |
-| **Stop**                              | Double Circle               | `dc`            | Represents a stop point        | `double-circle`                             |
-| **Text Block**                        | Text Block                  | `text`          | Text block                     | -                                           |
-| **Card**                              | Notched Rectangle           | `notched-rect`  | Represents a card              | `card`, `notch-rect`, `notched-rect`        |
-| **Lined/Shaded Process**              | Lined Rectangle             | `lined-rect`    | Lined process shape            | `lined-proc`, `shaded-proc`                 |
-| **Start**                             | Small Circle                | `sm-circ`       | Small starting point           | `start`, `small-circle`                     |
-| **Stop**                              | Framed Circle               | `framed-circle` | Stop point                     | `stop`, `framed-circle`                     |
-| **Fork/Join**                         | Long Rectangle              | `fork`          | Fork or join in process flow   | `join`, `long-rect`                         |
-| **Collate**                           | Hourglass                   | `hourglass`     | Represents a collate operation | -                                           |
-| **Comment**                           | Curly Brace                 | `brace`         | Adds a comment                 | `comment`, `brace-l`                        |
-| **Comment Right**                     | Curly Brace                 | `brace-r`       | Adds a comment                 | -                                           |
-| **Comment with braces on both sides** | Curly Braces                | `braces`        | Adds a comment                 | -                                           |
-| **Com Link**                          | Lightning Bolt              | `bolt`          | Communication link             | `com-link`, `lightning-bolt`                |
-| **Document**                          | Wave-Edged Rectangle        | `we-rect`       | Represents a document          | `doc`, `wave-edge-rect`                     |
-| **Delay**                             | Half-Rounded Rectangle      | `delay`         | Represents a delay             | `half-rounded-rect`                         |
-| **Direct Access Storage**             | Tilted Cylinder             | `t-cyl`         | Direct access storage          | `das`, `tilted-cylinder`                    |
-| **Disk Storage**                      | Lined Cylinder              | `l-cyl`         | Disk storage                   | `disk`, `lined-cylinder`                    |
-| **Display**                           | Curved Trapezoid            | `cur-trap`      | Represents a display           | `disp`, `curved-trapezoid`, `display`       |
-| **Divided Process**                   | Divided Rectangle           | `div-rect`      | Divided process shape          | `div-proc`, `divided-rectangle`             |
-| **Extract**                           | Small Triangle              | `sm-tri`        | Extraction process             | `extract`, `small-triangle`                 |
-| **Internal Storage**                  | Window Pane                 | `win-pane`      | Internal storage               | `internal-storage`, `window-pane`           |
-| **Junction**                          | Filled Circle               | `fc`            | Junction point                 | `junction`, `filled-circle`                 |
-| **Lined Document**                    | Lined Wave-Edged Rectangle  | `lin-we-rect`   | Lined document                 | `lin-doc`, `lined-wave-edged-rect`          |
-| **Loop Limit**                        | Trapezoidal Pentagon        | `notch-pent`    | Loop limit step                | `loop-limit`, `notched-pentagon`            |
-| **Manual File**                       | Flipped Triangle            | `flip-tri`      | Manual file operation          | `manual-file`, `flipped-triangle`           |
-| **Manual Input**                      | Sloped Rectangle            | `sloped-rect`   | Manual input step              | `manual-input`, `sloped-rectangle`          |
-| **Multi-Document**                    | Multi-Wave-Edged Rectangle  | `mul-we-rect`   | Multiple documents             | `mul-doc`, `multi-wave-edged-rectangle`     |
-| **Multi-Process**                     | Multi-Rect                  | `mul-rect`      | Multiple processes             | `mul-proc`, `multi-rect`                    |
-| **Paper Tape**                        | Flag                        | `flag`          | Paper tape                     | `paper-tape`                                |
-| **Stored Data**                       | Bow Tie Rectangle           | `bt-rect`       | Stored data                    | `stored-data`, `bow-tie-rect`               |
-| **Summary**                           | Crossed Circle              | `cross-circle`  | Summary                        | `summary`, `crossed-circle`                 |
-| **Tagged Document**                   | Tagged Wave-Edged Rectangle | `tag-we-rect`   | Tagged document                | `tag-doc`, `tagged-wave-edged-rectangle`    |
-| **Tagged Process**                    | Tagged Rectangle            | `tag-rect`      | Tagged process                 | `tag-proc`, `tagged-rect`                   |
+| **Semantic Name**                     | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                         |
+| ------------------------------------- | ---------------------- | -------------- | ------------------------------ | ----------------------------------------------------------- |
+| **Process**                           | Rectangle              | `rect`         | Standard process shape         | `proc`, `process`, `rectangle`                              |
+| **Event**                             | Rounded Rectangle      | `rounded`      | Represents an event            | `event`                                                     |
+| **Terminal Point**                    | Stadium                | `stadium`      | Terminal point                 | `terminal`, `pill`                                          |
+| **Subprocess**                        | Framed Rectangle       | `fr-rect`      | Subprocess                     | `subprocess`,`subproc`, `framed-rectangle`, `subroutine`    |
+| **Database**                          | Cylinder               | `cyl`          | Database storage               | `db`, `database`, `cylinder`                                |
+| **Start**                             | Circle                 | `circle`       | Starting point                 | `circ`                                                      |
+| **Odd**                               | Odd                    | `odd`          | Odd shape                      |                                                             |
+| **Decision**                          | Diamond                | `diam`         | Decision-making step           | `decision`, `diamond`                                       |
+| **Prepare Conditional**               | Hexagon                | `hex`          | Preparation or condition step  | `hexagon`, `prepare`                                        |
+| **Data Input/Output**                 | Lean Right             | `lean-r`       | Represents input or output     | `lean-right`, `in-out`                                      |
+| **Data Input/Output**                 | Lean Left              | `lean-l`       | Represents output or input     | `lean-left`, `out-in`                                       |
+| **Priority Action**                   | Trapezoid Base Bottom  | `trap-b`       | Priority action                | `priority`, `trapezoid-bottom`                              |
+| **Manual Operation**                  | Trapezoid Base Top     | `trap-t`       | Represents a manual task       | `manual`, `trapezoid-top`                                   |
+| **Stop**                              | Double Circle          | `dbl-circ`     | Represents a stop point        | `double-circle`                                             |
+| **Text Block**                        | Text Block             | `text`         | Text block                     | -                                                           |
+| **Card**                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                 |
+| **Lined/Shaded Process**              | Lined Rectangle        | `lin-rect`     | Lined process shape            | `lined-rectangle`,`lined-proc`, `lin-proc`,`shaded-process` |
+| **Start**                             | Small Circle           | `sm-circ`      | Small starting point           | `start`, `small-circle`                                     |
+| **Stop**                              | Framed Circle          | `fr-circ`      | Stop point                     | `stop`, `framed-circle`                                     |
+| **Fork/Join**                         | Filled Rectangle       | `fork`         | Fork or join in process flow   | `join`                                                      |
+| **Collate**                           | Hourglass              | `hourglass`    | Represents a collate operation | `hourglass`                                                 |
+| **Comment**                           | Curly Brace            | `brace`        | Adds a comment                 | `comment`, `brace-l`                                        |
+| **Comment Right**                     | Curly Brace            | `brace-r`      | Adds a comment                 | -                                                           |
+| **Comment with braces on both sides** | Curly Braces           | `braces`       | Adds a comment                 | -                                                           |
+| **Com Link**                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                |
+| **Document**                          | Document               | `doc`          | Represents a document          | `doc`, `document`                                           |
+| **Delay**                             | Half-Rounded Rectangle | `delay`        | Represents a delay             | `half-rounded-rectangle`                                    |
+| **Direct Access Storage**             | Horizontal Cylinder    | `h-cyl`        | Direct access storage          | `das`, `horizontal-cylinder`                                |
+| **Disk Storage**                      | Lined Cylinder         | `lin-cyl`      | Disk storage                   | `disk`, `lined-cylinder`                                    |
+| **Display**                           | Curved Trapezoid       | `curv-trap`    | Represents a display           | `curved-trapezoid`, `display`                               |
+| **Divided Process**                   | Divided Rectangle      | `div-rect`     | Divided process shape          | `div-proc`, `divided-rectangle`, `divided-process`          |
+| **Extract**                           | Triangle               | `tri`          | Extraction process             | `extract`, `triangle`                                       |
+| **Internal Storage**                  | Window Pane            | `win-pane`     | Internal storage               | `internal-storage`, `window-pane`                           |
+| **Junction**                          | Filled Circle          | `f-circ`       | Junction point                 | `junction`, `filled-circle`                                 |
+| **Lined Document**                    | Lined Document         | `lin-doc`      | Lined document                 | `lined-document`                                            |
+| **Loop Limit**                        | Trapezoidal Pentagon   | `notch-pent`   | Loop limit step                | `loop-limit`, `notched-pentagon`                            |
+| **Manual File**                       | Flipped Triangle       | `flip-tri`     | Manual file operation          | `manual-file`, `flipped-triangle`                           |
+| **Manual Input**                      | Sloped Rectangle       | `sl-rect`      | Manual input step              | `manual-input`, `sloped-rectangle`                          |
+| **Multi-Document**                    | Stacked Document       | `docs`         | Multiple documents             | `documents`, `st-doc`, `stacked-document`                   |
+| **Multi-Process**                     | Stacked Rectangle      | `st-rect`      | Multiple processes             | `procs`, `processes`, `stacked-rect`                        |
+| **Paper Tape**                        | Flag                   | `flag`         | Paper tape                     | `paper-tape`                                                |
+| **Stored Data**                       | Bow Tie Rectangle      | `bow-rect`     | Stored data                    | `stored-data`, `bow-tie-rectangle`                          |
+| **Summary**                           | Crossed Circle         | `cross-circ`   | Summary                        | `summary`, `crossed-circle`                                 |
+| **Tagged Document**                   | Tagged Document        | `tag-doc`      | Tagged document                | `tag-doc`, `tagged-document`                                |
+| **Tagged Process**                    | Tagged Rectangle       | `tag-rect`     | Tagged process                 | `tagged-rectangle`,`tag-proc`, `tagged-process`             |
 
 ### Example Flowchart with New Shapes
 
@@ -266,11 +266,11 @@ Here’s an example flowchart that utilizes some of the newly introduced shapes:
 
 ```mermaid-example
 flowchart RL
-    A5@{ shape: manual-file, label: "File Handling"}
-    B5@{ shape: manual-input, label: "User Input"}
-    C5@{ shape: mul-doc, label: "Multiple Documents"}
-    D5@{ shape: mul-proc, label: "Process Automation"}
-    E5@{ shape: paper-tape, label: "Paper Records"}
+    A@{ shape: manual-file, label: "File Handling"}
+    B@{ shape: manual-input, label: "User Input"}
+    C@{ shape: docs, label: "Multiple Documents"}
+    D@{ shape: procs, label: "Process Automation"}
+    E@{ shape: paper-tape, label: "Paper Records"}
 ```
 
 ### Process
@@ -340,14 +340,14 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-r, label: "Input/Output" }
+    A@{ shape: lean-r, label: "Input/Output" }
 ```
 
 ### Data Input/Output (Lean Left)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-l, label: "Output/Input" }
+    A@{ shape: lean-l, label: "Output/Input" }
 ```
 
 ### Priority Action (Trapezoid Base Bottom)
@@ -368,7 +368,7 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: dc, label: "Stop" }
+    A@{ shape: dbl-circ, label: "Stop" }
 ```
 
 ### Text Block
@@ -382,14 +382,14 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: notched-rect, label: "Card" }
+    A@{ shape: notch-rect, label: "Card" }
 ```
 
 ### Lined/Shaded Process
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lined-rect, label: "Lined process" }
+    A@{ shape: lin-rect, label: "Lined process" }
 ```
 
 ### Start (Small Circle)
@@ -448,11 +448,11 @@ flowchart TD
     A@{ shape: bolt, label: "Communication link" }
 ```
 
-### Document (Wave-Edged Rectangle)
+### Document
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: we-rect, label: "Document" }
+    A@{ shape: doc, label: "Document" }
 ```
 
 ### Delay (Half-Rounded Rectangle)
@@ -462,25 +462,25 @@ flowchart TD
     A@{ shape: delay, label: "Delay" }
 ```
 
-### Direct Access Storage (Tilted Cylinder)
+### Direct Access Storage (Horizontal Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: t-cyl, label: "Direct access storage" }
+    A@{ shape: das, label: "Direct access storage" }
 ```
 
 ### Disk Storage (Lined Cylinder)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: l-cyl, label: "Disk storage" }
+    A@{ shape: lin-cyl, label: "Disk storage" }
 ```
 
 ### Display (Curved Trapezoid)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cur-trap, label: "Display" }
+    A@{ shape: curv-trap, label: "Display" }
 ```
 
 ### Divided Process (Divided Rectangle)
@@ -494,7 +494,7 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sm-tri, label: "Extract" }
+    A@{ shape: tri, label: "Extract" }
 ```
 
 ### Internal Storage (Window Pane)
@@ -508,49 +508,49 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: fc, label: "Junction" }
+    A@{ shape: f-circ, label: "Junction" }
 ```
 
-### Lined Document (Lined Wave-Edged Rectangle)
+### Lined Document
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: lin-we-rect, label: "Lined document" }
+    A@{ shape: lin-doc, label: "Lined document" }
 ```
 
-### Loop Limit (Trapezoidal Pentagon)
+### Loop Limit (Notched Pentagon)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: not-pent, label: "Loop limit" }
+    A@{ shape: notch-pent, label: "Loop limit" }
 ```
 
 ### Manual File (Flipped Triangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: flip-tria, label: "Manual file" }
+    A@{ shape: flip-tri, label: "Manual file" }
 ```
 
 ### Manual Input (Sloped Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: sloped-rect, label: "Manual input" }
+    A@{ shape: sl-rect, label: "Manual input" }
 ```
 
-### Multi-Document (Multi-Wave-Edged Rectangle)
+### Multi-Document (Stacked Document)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-we-rect, label: "Multiple documents" }
+    A@{ shape: docs, label: "Multiple documents" }
 ```
 
-### Multi-Process (Multi-Rect)
+### Multi-Process (Stacked Rectangle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: mul-rect, label: "Multiple processes" }
+    A@{ shape: processes, label: "Multiple processes" }
 ```
 
 ### Paper Tape (Flag)
@@ -564,21 +564,21 @@ flowchart TD
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: bt-rect, label: "Stored data" }
+    A@{ shape: bow-rect, label: "Stored data" }
 ```
 
 ### Summary (Crossed Circle)
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: cross-circle, label: "Summary" }
+    A@{ shape: cross-circ, label: "Summary" }
 ```
 
-### Tagged Document (Tagged Wave-Edged Rectangle)
+### Tagged Document
 
 ```mermaid-example
 flowchart TD
-    A@{ shape: tag-we-rect, label: "Tagged document" }
+    A@{ shape: tag-doc, label: "Tagged document" }
 ```
 
 ### Tagged Process (Tagged Rectangle)
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 5fd70b7b6..5138b1ede 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -61,161 +61,236 @@ export const shapes = {
   // States
   state,
   stateStart,
-  'small-circle': stateStart,
-  'sm-circ': stateStart,
-  start: stateStart,
   stateEnd,
-  'framed-circle': stateEnd,
-  stop: stateEnd,
+  forkJoin,
+  choice,
+  note,
 
   // Rectangles
   rectWithTitle,
   roundedRect,
-  rounded: roundedRect,
-  event: roundedRect,
   squareRect,
+
+  // Rectangle with alias: 'process', 'rect', 'proc', 'rectangle'
   rectangle: squareRect,
   rect: squareRect,
   process: squareRect,
   proc: squareRect,
+
+  // Rounded Rectangle with alias: 'event', 'rounded'
+  rounded: roundedRect,
+  event: roundedRect,
+
+  // Stadium with alias: 'terminal','pill', 'stadium'
   stadium,
   pill: stadium,
-  term: stadium,
-  'window-pane': windowPane,
-  'win-pane': windowPane,
-  'internal-storage': windowPane,
-  'divided-rectangle': dividedRectangle,
-  'div-rect': dividedRectangle,
-  'div-proc': dividedRectangle,
-  'tagged-rect': taggedRect,
-  'tag-rect': taggedRect,
-  'tag-proc': taggedRect,
-  'multi-rect': multiRect,
-  'mul-rect': multiRect,
-  'mul-proc': multiRect,
+  terminal: stadium,
 
-  // Subroutine
+  // Subprocess with alias: 'fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'
   subroutine,
   'framed-rectangle': subroutine,
-  fr: subroutine,
+  'fr-rect': subroutine,
+  subprocess: subroutine,
   subproc: subroutine,
 
-  // Cylinders
+  // Cylinder with alias: 'db', 'database', 'cylinder', 'cyl'
   cylinder,
-  cyl: cylinder,
   db: cylinder,
-  'tilted-cylinder': tiltedCylinder,
-  't-cyl': tiltedCylinder,
-  das: tiltedCylinder,
-  'lined-cylinder': linedCylinder,
-  'l-cyl': linedCylinder,
-  disk: linedCylinder,
+  cyl: cylinder,
+  database: cylinder,
 
-  // Circles
-  circle,
-  'double-circle': doublecircle,
-  dc: doublecircle,
-  'crossed-circle': crossedCircle,
-  'cross-circle': crossedCircle,
-  summary: crossedCircle,
-  'filled-circle': filledCircle,
-  fc: filledCircle,
-  junction: filledCircle,
-  'lined-proc': shadedProcess,
-  'lined-rect': shadedProcess,
-  'shaded-proc': shadedProcess,
+  // Diamond with alias: 'diam', 'decision', 'diamond'
+  question,
+  diam: question,
+  diamond: question,
+  decision: question,
 
-  // Trapezoids
-  trapezoid,
-  'trapezoid-bottom': trapezoid,
+  // Hexagon with alias: 'hex', 'hexagon', 'prepare'
+  hexagon,
+  hex: hexagon,
+  prepare: hexagon,
+
+  // Lean Right with alias: 'lean-r', 'lean-right', 'in-out'
+  lean_right, // used in old syntax for flowchart
+  'lean-r': lean_right,
+  'lean-right': lean_right,
+  'in-out': lean_right,
+
+  // Lean Left with alias: 'lean-l', 'lean-left', 'out-in'
+  lean_left, // used in old syntax for flowchart
+  'lean-l': lean_left,
+  'lean-left': lean_left,
+  'out-in': lean_left,
+
+  // Trapezoid with alias: 'trap-b', 'trapezoid-bottom', 'priority'
+  trapezoid, // used in old syntax for flowchart
   'trap-b': trapezoid,
+  'trapezoid-bottom': trapezoid,
   priority: trapezoid,
-  inv_trapezoid,
+
+  // Inverted Trapezoid with alias: 'inv-trapezoid', 'trapezoid-top', 'trap-t', 'manual'
+  inv_trapezoid, // used in old syntax for flowchart
   'inv-trapezoid': inv_trapezoid,
   'trapezoid-top': inv_trapezoid,
   'trap-t': inv_trapezoid,
   manual: inv_trapezoid,
+
+  // Double Circle with alias: 'dbl-circ', 'double-circle'
+  doublecircle, // used in old syntax for flowchart
+  'dbl-circ': doublecircle,
+  'double-circle': doublecircle,
+
+  // circle with alias: 'circ', 'circle'
+  circle,
+  circ: circle,
+
+  // Rect Left Inv Arrow with alias: 'odd', 'rect-left-inv-arrow'
+  rect_left_inv_arrow,
+  odd: rect_left_inv_arrow,
+
+  // Notched Rectangle with alias: 'notched-rectangle', 'notch-rect', 'card'
+  card,
+  'notched-rectangle': card,
+  'notch-rect': card,
+
+  // Lined rectangle with alias: 'lin-rect', 'lined-rectangle', 'lin-proc', lined-process', 'shaded-process'
+  'lined-rectangle': shadedProcess,
+  'lin-rect': shadedProcess,
+  'lin-proc': shadedProcess,
+  'lined-process': shadedProcess,
+  'shaded-process': shadedProcess,
+
+  //  Small circle with alias: 'sm-circ', 'small-circle', 'start'
+  'small-circle': stateStart,
+  'sm-circ': stateStart,
+  start: stateStart,
+
+  // framed circle with alias: 'stop', 'framed-circle', 'fr-circ'
+  stop: stateEnd,
+  'framed-circle': stateEnd,
+  'fr-circ': stateEnd,
+
+  // fork with alias: 'join', 'fork'
+  join: forkJoin,
+  fork: forkJoin,
+
+  // comment with alias: 'comment', 'brace-l'
+  comment: curlyBraceLeft,
+  'brace-l': curlyBraceLeft,
+
+  // lightening bolt with alias: 'bolt', 'com-link', 'lightning-bolt'
+  bolt: lightningBolt,
+  'com-link': lightningBolt,
+  'lightning-bolt': lightningBolt,
+
+  // document with alias: 'doc', 'document'
+  doc: waveEdgedRectangle,
+  document: waveEdgedRectangle,
+
+  // delay with alias: 'delay', 'half-rounded-rectangle'
+  delay: halfRoundedRectangle,
+  'half-rounded-rectangle': halfRoundedRectangle,
+
+  // horizontal cylinder with alias: 'h-cyl', 'das', 'horizontal-cylinder'
+  'horizontal-cylinder': tiltedCylinder,
+  'h-cyl': tiltedCylinder,
+  das: tiltedCylinder,
+
+  // lined cylinder with alias: 'lin-cyl', 'lined-cylinder', 'disk'
+  'lined-cylinder': linedCylinder,
+  'lin-cyl': linedCylinder,
+  disk: linedCylinder,
+
+  // curved trapezoid with alias: 'curv-trap', 'curved-trapezoid', 'display'
   'curved-trapezoid': curvedTrapezoid,
-  'cur-trap': curvedTrapezoid,
-  disp: curvedTrapezoid,
+  'curv-trap': curvedTrapezoid,
   display: curvedTrapezoid,
 
-  // Hexagons & Misc Geometric
-  hexagon,
-  hex: hexagon,
-  prepare: hexagon,
+  // divided rectangle with alias: 'div-rect', 'divided-rectangle', 'div-proc', 'divided-process'
+  'divided-rectangle': dividedRectangle,
+  'div-rect': dividedRectangle,
+  'div-proc': dividedRectangle,
+  'divided-process': dividedRectangle,
+
+  // triangle with alias: 'tri', 'triangle', 'extract'
   triangle,
-  'small-triangle': triangle,
-  'sm-tri': triangle,
+  tri: triangle,
   extract: triangle,
-  'flipped-triangle': flippedTriangle,
-  'flip-tri': flippedTriangle,
-  'manual-file': flippedTriangle,
+
+  // window pane with alias: 'window-pane', 'win-pane', 'internal-storage'
+  'window-pane': windowPane,
+  'win-pane': windowPane,
+  'internal-storage': windowPane,
+
+  // filled circle with alias: 'f-circ', 'filled-circle', 'junction'
+  'f-circ': filledCircle,
+  junction: filledCircle,
+  'filled-circle': filledCircle,
+
+  // lined document with alias: 'lin-doc', 'lined-document'
+  'lin-doc': linedWaveEdgedRect,
+  'lined-document': linedWaveEdgedRect,
+
+  // notched pentagon with alias: 'notch-pent', 'notched-pentagon', 'loop-limit'
   'notched-pentagon': trapezoidalPentagon,
   'notch-pent': trapezoidalPentagon,
   'loop-limit': trapezoidalPentagon,
 
-  //wave Edged Rectangles
-  'wave-rectangle': waveRectangle,
-  'w-rect': waveRectangle,
+  // flipped triangle with alias: 'flip-tri', 'flipped-triangle', 'manual-file'
+  'flipped-triangle': flippedTriangle,
+  'flip-tri': flippedTriangle,
+  'manual-file': flippedTriangle,
+
+  // sloped rectangle with alias: 'sl-rect', 'sloped-rectangle', 'manual-input'
+  'sloped-rectangle': slopedRect,
+  'sl-rect': slopedRect,
+  'manual-input': slopedRect,
+
+  // documents with alias: 'docs', 'documents', 'st-doc', 'stacked-document'
+  docs: multiWaveEdgedRectangle,
+  documents: multiWaveEdgedRectangle,
+  'st-doc': multiWaveEdgedRectangle,
+  'stacked-document': multiWaveEdgedRectangle,
+
+  // 'processes' with alias: 'procs', 'processes', 'st-rect', 'stacked-rectangle'
+  processes: multiRect,
+  procs: multiRect,
+  'stacked-rectangle': multiRect,
+  'st-rect': multiRect,
+
+  // flag with alias: 'flag', 'paper-tape'
   flag: waveRectangle,
   'paper-tape': waveRectangle,
-  'wave-edge-rect': waveEdgedRectangle,
-  'wave-edged-rectangle': waveEdgedRectangle,
-  'wave-rect': waveEdgedRectangle,
-  'we-rect': waveEdgedRectangle,
-  doc: waveEdgedRectangle,
-  'multi-wave-edged-rectangle': multiWaveEdgedRectangle,
-  'mul-we-rect': multiWaveEdgedRectangle,
-  'mul-doc': multiWaveEdgedRectangle,
-  'lined-wave-edged-rect': linedWaveEdgedRect,
-  'lin-we-rect': linedWaveEdgedRect,
-  'lin-doc': linedWaveEdgedRect,
-  'tagged-wave-edged-rectangle': taggedWaveEdgedRectangle,
-  'tag-we-rect': taggedWaveEdgedRectangle,
-  'tag-doc': taggedWaveEdgedRectangle,
 
-  // Custom Rectangles
-  'bow-tie-rect': bowTieRect,
-  'bt-rect': bowTieRect,
+  // bow tie rectangle with alias: 'bow-rect', 'bow-tie-rectangle', 'stored-data'
+  'bow-tie-rectangle': bowTieRect,
+  'bow-rect': bowTieRect,
   'stored-data': bowTieRect,
-  'sloped-rectangle': slopedRect,
-  'sloped-rect': slopedRect,
-  'manual-input': slopedRect,
-  'half-rounded-rect': halfRoundedRectangle,
-  delay: halfRoundedRectangle,
-  card,
-  'notched-rect': card,
-  'notch-rect': card,
-  'lean-right': lean_right,
-  lean_right: lean_right,
-  'l-r': lean_right,
-  'in-out': lean_right,
-  'lean-left': lean_left,
-  lean_left: lean_left,
-  'l-l': lean_left,
-  'out-in': lean_left,
 
-  // Miscellaneous
-  forkJoin,
-  'long-rect': forkJoin,
-  fork: forkJoin,
-  join: forkJoin,
-  choice,
-  note,
+  // crossed circle with alias: 'cross-circ', 'crossed-circle', 'summary'
+  'crossed-circle': crossedCircle,
+  'cross-circ': crossedCircle,
+  summary: crossedCircle,
+
+  // tagged document with alias: 'tag-doc', 'tagged-document'
+  'tag-doc': taggedWaveEdgedRectangle,
+  'tagged-document': taggedWaveEdgedRectangle,
+
+  // tagged rectangle with alias: 'tag-rect', 'tagged-rectangle', 'tag-proc', 'tagged-process'
+  'tag-rect': taggedRect,
+  'tagged-rectangle': taggedRect,
+  'tag-proc': taggedRect,
+  'tagged-process': taggedRect,
+
+  // hourglass with alias: 'hourglass', 'collate'
+  hourglass,
+  collate: hourglass,
+
   text,
   anchor,
-  diamond: question,
-  diam: question,
-  decision: question,
-  'lightning-bolt': lightningBolt,
-  bolt: lightningBolt,
-  'com-link': lightningBolt,
-  'brace-l': curlyBraceLeft,
+
   brace: curlyBraceLeft,
-  comment: curlyBraceLeft,
-  hourglass,
-  odd: rect_left_inv_arrow,
+
   labelRect,
   'brace-r': curlyBraceRight,
   braces: curlyBraces,
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js
index 2a0e7664c..4b878093b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.spec.js
@@ -18,14 +18,14 @@ describe('Test Alias for shapes', function () {
   // stadium | pill | term
   it('should support alias for stadium shape ', function () {
     expect(shapes.pill).toBe(shapes.stadium);
-    expect(shapes.term).toBe(shapes.stadium);
+    expect(shapes.terminal).toBe(shapes.stadium);
   });
 
-  // fr | subproc | framed-rectangle | subroutine
+  // fr-rect | subproc | framed-rectangle | subroutine
   it('should support alias for subroutine shape ', function () {
-    expect(shapes['framed-rectangle']).toBe(shapes.fr);
-    expect(shapes.subproc).toBe(shapes.fr);
-    expect(shapes.subroutine).toBe(shapes.fr);
+    expect(shapes['framed-rectangle']).toBe(shapes['fr-rect']);
+    expect(shapes.subproc).toBe(shapes['fr-rect']);
+    expect(shapes.subroutine).toBe(shapes['fr-rect']);
   });
 
   // cyl | db | cylinder
@@ -48,13 +48,13 @@ describe('Test Alias for shapes', function () {
 
   // l-r | lean-right | in-out
   it('should support alias for lean-right shape ', function () {
-    expect(shapes['l-r']).toBe(shapes['lean-right']);
+    expect(shapes['lean-r']).toBe(shapes['lean-right']);
     expect(shapes['in-out']).toBe(shapes['lean-right']);
   });
 
   // l-l | lean-left | out-in
   it('should support alias for lean-left shape ', function () {
-    expect(shapes['l-l']).toBe(shapes['lean-left']);
+    expect(shapes['lean-l']).toBe(shapes['lean-left']);
     expect(shapes['out-in']).toBe(shapes['lean-left']);
   });
 
@@ -72,15 +72,15 @@ describe('Test Alias for shapes', function () {
     expect(shapes['inv-trapezoid']).toBe(shapes['trap-t']);
   });
 
-  // dc | double-circle
+  // dbl-circ| double-circle
   it('should support alias for doublecircle shape ', function () {
-    expect(shapes['double-circle']).toBe(shapes.dc);
+    expect(shapes['double-circle']).toBe(shapes['dbl-circ']);
   });
 
-  // notched-rect | card | notch-rect
+  // notched-rectangle | card | notch-rect
   it('should support alias for notched-rectangle shape ', function () {
-    expect(shapes.card).toBe(shapes['notched-rect']);
-    expect(shapes['notch-rect']).toBe(shapes['notched-rect']);
+    expect(shapes.card).toBe(shapes['notched-rectangle']);
+    expect(shapes['notch-rect']).toBe(shapes['notched-rectangle']);
   });
 
   // lined-rect | lined-proc | shaded-proc
@@ -100,10 +100,9 @@ describe('Test Alias for shapes', function () {
     expect(shapes.stop).toBe(shapes['framed-circle']);
   });
 
-  // fork | join | long-rect
+  // fork | join
   it('should support alias for fork shape ', function () {
     expect(shapes.join).toBe(shapes.fork);
-    expect(shapes['long-rect']).toBe(shapes.fork);
   });
 
   // brace | comment | brace-l
@@ -118,35 +117,32 @@ describe('Test Alias for shapes', function () {
     expect(shapes['lightning-bolt']).toBe(shapes.bolt);
   });
 
-  // we-rect | doc | wave-edge-rect | wave-edged-rectangle
+  // document | doc
   it('should support alias for waveEdgedRectangle shape ', function () {
-    expect(shapes.doc).toBe(shapes['we-rect']);
-    expect(shapes['wave-edge-rect']).toBe(shapes['we-rect']);
-    expect(shapes['wave-edged-rectangle']).toBe(shapes['we-rect']);
+    expect(shapes.doc).toBe(shapes.document);
   });
 
-  // delay | half-rounded-rect
+  // delay | half-rounded-rectangle
   it('should support alias for halfRoundedRectangle shape ', function () {
-    expect(shapes.delay).toBe(shapes['half-rounded-rect']);
+    expect(shapes.delay).toBe(shapes['half-rounded-rectangle']);
   });
 
-  // t-cyl | das | titled-cylinder
-  it('should support alias for tilted-cylinder shape ', function () {
-    expect(shapes.das).toBe(shapes['t-cyl']);
-    expect(shapes['tilted-cylinder']).toBe(shapes['t-cyl']);
+  // h-cyl | das | horizontal-cylinder
+  it('should support alias for horizontal-cylinder shape ', function () {
+    expect(shapes.das).toBe(shapes['h-cyl']);
+    expect(shapes['horizontal-cylinder']).toBe(shapes['h-cyl']);
   });
 
-  // l-cyl | disk | lined-cylinder
+  // lin-cyl | disk | lined-cylinder
   it('should support alias for linedCylinder shape ', function () {
-    expect(shapes.disk).toBe(shapes['l-cyl']);
-    expect(shapes['lined-cylinder']).toBe(shapes['l-cyl']);
+    expect(shapes.disk).toBe(shapes['lin-cyl']);
+    expect(shapes['lined-cylinder']).toBe(shapes['lin-cyl']);
   });
 
-  // cur-trap | disp | display | curved-trapezoid
+  // curv-trap | display | curved-trapezoid
   it('should support alias for curvedTrapezoid shape ', function () {
-    expect(shapes.disp).toBe(shapes['cur-trap']);
-    expect(shapes['curved-trapezoid']).toBe(shapes['cur-trap']);
-    expect(shapes.display).toBe(shapes['cur-trap']);
+    expect(shapes.display).toBe(shapes['curv-trap']);
+    expect(shapes['curved-trapezoid']).toBe(shapes['curv-trap']);
   });
 
   // div-rect | div-proc | divided-rectangle
@@ -157,9 +153,8 @@ describe('Test Alias for shapes', function () {
 
   // sm-tri | extract | small-triangle | triangle
   it('should support alias for smallTriangle shape ', function () {
-    expect(shapes.extract).toBe(shapes['sm-tri']);
-    expect(shapes['small-triangle']).toBe(shapes['sm-tri']);
-    expect(shapes.triangle).toBe(shapes['sm-tri']);
+    expect(shapes.extract).toBe(shapes.tri);
+    expect(shapes.triangle).toBe(shapes.tri);
   });
 
   // win-pane | internal-storage | window-pane
@@ -170,14 +165,13 @@ describe('Test Alias for shapes', function () {
 
   // fc | junction | filled-circle
   it('should support alias for filledCircle shape ', function () {
-    expect(shapes.junction).toBe(shapes.fc);
-    expect(shapes['filled-circle']).toBe(shapes.fc);
+    expect(shapes.junction).toBe(shapes['f-circ']);
+    expect(shapes['filled-circle']).toBe(shapes['f-circ']);
   });
 
-  //lin-we-rect | lin-doc | lined-wave-edged-rect
+  // | lin-doc | lined-document
   it('should support alias for linedWaveEdgedRectangle shape ', function () {
-    expect(shapes['lin-doc']).toBe(shapes['lin-we-rect']);
-    expect(shapes['lined-wave-edged-rect']).toBe(shapes['lin-we-rect']);
+    expect(shapes['lin-doc']).toBe(shapes['lined-document']);
   });
 
   // notch-pent | loop-limit | notched-pentagon
@@ -192,22 +186,22 @@ describe('Test Alias for shapes', function () {
     expect(shapes['flipped-triangle']).toBe(shapes['flip-tri']);
   });
 
-  //sloped-rect | manual-input | sloped-rectangle
+  //sl-rect | manual-input | sloped-rectangle
   it('should support alias for slopedRectangle shape ', function () {
-    expect(shapes['manual-input']).toBe(shapes['sloped-rect']);
-    expect(shapes['sloped-rectangle']).toBe(shapes['sloped-rect']);
+    expect(shapes['manual-input']).toBe(shapes['sl-rect']);
+    expect(shapes['sloped-rectangle']).toBe(shapes['sl-rect']);
   });
 
-  // mul-we-rect | mul-doc | multi-wave-edged-rectangle
+  // docs | documents | st-doc | stacked-document
   it('should support alias for multiWaveEdgedRectangle shape ', function () {
-    expect(shapes['mul-doc']).toBe(shapes['mul-we-rect']);
-    expect(shapes['multi-wave-edged-rectangle']).toBe(shapes['mul-we-rect']);
+    expect(shapes.docs).toBe(shapes.documents);
+    expect(shapes['st-doc']).toBe(shapes['stacked-document']);
   });
 
-  // mul-rect | mul-proc | multi-rect
+  // procs | processes | st-rect | stacked-rectangle
   it('should support alias for multiRect shape ', function () {
-    expect(shapes['mul-proc']).toBe(shapes['mul-rect']);
-    expect(shapes['multi-rect']).toBe(shapes['mul-rect']);
+    expect(shapes.procs).toBe(shapes.processes);
+    expect(shapes['st-rect']).toBe(shapes['stacked-rectangle']);
   });
 
   // flag | paper-tape
@@ -215,27 +209,27 @@ describe('Test Alias for shapes', function () {
     expect(shapes['paper-tape']).toBe(shapes.flag);
   });
 
-  // bt-rect| stored-data | bow-tie-rect
+  // bow-rect| stored-data | bow-tie-rectangle
   it('should support alias for bowTieRect shape ', function () {
-    expect(shapes['stored-data']).toBe(shapes['bt-rect']);
-    expect(shapes['bow-tie-rect']).toBe(shapes['bt-rect']);
+    expect(shapes['stored-data']).toBe(shapes['bow-rect']);
+    expect(shapes['bow-tie-rectangle']).toBe(shapes['bow-rect']);
   });
 
-  // cross-circle | summary | crossed-circle
+  // cross-circ | summary | crossed-circle
   it('should support alias for crossedCircle shape ', function () {
-    expect(shapes.summary).toBe(shapes['cross-circle']);
-    expect(shapes['crossed-circle']).toBe(shapes['cross-circle']);
+    expect(shapes.summary).toBe(shapes['cross-circ']);
+    expect(shapes['crossed-circle']).toBe(shapes['cross-circ']);
   });
 
-  // tag-we-rect | tag-doc | tagged-wave-edged-rectangle
-  it('should support alias for taggedWaveEdgedRectangle shape ', function () {
-    expect(shapes['tag-doc']).toBe(shapes['tag-we-rect']);
-    expect(shapes['tagged-wave-edged-rectangle']).toBe(shapes['tag-we-rect']);
+  // tag-doc| tag-document
+  it('should support alias for taggedDocument shape ', function () {
+    expect(shapes['tag-doc']).toBe(shapes['tagged-document']);
   });
 
-  // tag-rect | tag-proc | tagged-rect
+  // tag-rect | tag-proc | tagged-rectangle | tagged-process
   it('should support alias for taggedRect shape ', function () {
     expect(shapes['tag-proc']).toBe(shapes['tag-rect']);
-    expect(shapes['tagged-rect']).toBe(shapes['tag-rect']);
+    expect(shapes['tagged-rectangle']).toBe(shapes['tag-rect']);
+    expect(shapes['tagged-process']).toBe(shapes['tag-rect']);
   });
 });

From 4c26fe224bda24d6807e86073730ea6f40bcc8d1 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 13 Sep 2024 14:02:11 +0200
Subject: [PATCH 09/15] Adding case check

---
 .../mermaid/src/rendering-util/rendering-elements/nodes.js     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 5138b1ede..960d93016 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -321,6 +321,9 @@ export const insertNode = async (elem, node, renderOptions) => {
   if (!shapes[node.shape]) {
     throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
   }
+  if (node.shape !== node.shape.toLowerCase()) {
+    throw new Error(`No such shape: ${node.shape}. Shape names should be lowercase.`);
+  }
   if (node.link) {
     // Add link when appropriate
     let target;

From 44561f57d399b978789975cf4f947ab43aef01b2 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 13 Sep 2024 14:18:46 +0200
Subject: [PATCH 10/15] Moving case check to parsing

---
 packages/mermaid/src/diagrams/flowchart/flowDb.ts             | 4 ++++
 .../mermaid/src/rendering-util/rendering-elements/nodes.js    | 4 +---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index cf744e5e4..b47daee11 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -133,6 +133,10 @@ export const addVertex = function (
     }
     // console.log('yamlData', yamlData);
     const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
+    if (doc.shape && doc.shape !== doc.shape.toLowerCase()) {
+      throw new Error(`No such shape: ${node.shape}. Shape names should be lowercase.`);
+    }
+
     // console.log('yamlData doc', doc);
     if (doc?.shape) {
       vertex.type = doc?.shape;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 960d93016..55deb1b78 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -321,9 +321,7 @@ export const insertNode = async (elem, node, renderOptions) => {
   if (!shapes[node.shape]) {
     throw new Error(`No such shape: ${node.shape}. Please check your syntax.`);
   }
-  if (node.shape !== node.shape.toLowerCase()) {
-    throw new Error(`No such shape: ${node.shape}. Shape names should be lowercase.`);
-  }
+
   if (node.link) {
     // Add link when appropriate
     let target;

From e83a95d3eded827e09ea66548ff2b6f3209b27c5 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Fri, 13 Sep 2024 23:22:14 +0530
Subject: [PATCH 11/15] Updated icon shape for background colour and icon
 colour

---
 .../rendering-elements/shapes/icon.ts          | 16 +++++++++++-----
 .../rendering-elements/shapes/iconCircle.ts    | 18 ++++--------------
 .../rendering-elements/shapes/iconRounded.ts   | 14 +++-----------
 .../rendering-elements/shapes/iconSquare.ts    | 14 +++-----------
 4 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
index 96c2df848..051ae3119 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -1,21 +1,26 @@
 import { log } from '../../../logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
-import type { Node } from '../../types.d.ts';
+import type { Node, RenderOptions } from '../../types.d.ts';
 import type { SVG } from '../../../diagram-api/types.js';
-import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
-import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
-export const icon = async (parent: SVG, node: Node) => {
+export const icon = async (
+  parent: SVG,
+  node: Node,
+  { config: { themeVariables, flowchart } }: RenderOptions
+) => {
   const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
   const iconSize = Math.max(assetHeight, assetWidth);
-  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  const defaultWidth = flowchart?.wrappingWidth;
   node.width = Math.max(iconSize, defaultWidth ?? 0);
+  const { nodeBorder } = themeVariables;
+  const { stylesMap } = compileStyles(node);
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
 
   const topLabel = node.pos === 't';
@@ -51,6 +56,7 @@ export const icon = async (parent: SVG, node: Node) => {
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 8d1294a49..2d0072d11 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -12,7 +12,7 @@ export const iconCircle = async (
   node: Node,
   { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
@@ -24,14 +24,12 @@ export const iconCircle = async (
     node,
     'icon-shape default'
   );
-  const { cssStyles } = node;
 
   const topLabel = node.pos === 't';
 
   const diameter = iconSize + halfPadding * 2;
-  const { mainBkg } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
-
   // @ts-ignore - rough is not typed
   const rc = rough.svg(shapeSvg);
   const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
@@ -44,9 +42,8 @@ export const iconCircle = async (
   const iconNode = rc.circle(0, 0, diameter, options);
 
   const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
-
+  const iconElem = shapeSvg.append('g');
   if (node.icon) {
-    const iconElem = shapeSvg.append('g');
     iconElem.html(
       `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
     );
@@ -57,6 +54,7 @@ export const iconCircle = async (
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + bbox.height / 2 : -diameter / 2 + halfPadding - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
@@ -66,14 +64,6 @@ export const iconCircle = async (
 
   iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
 
-  if (cssStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', cssStyles);
-  }
-
-  if (nodeStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, shapeSvg);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index 3793c986c..8aca67682 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -13,7 +13,7 @@ export const iconRounded = async (
   node: Node,
   { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
@@ -25,13 +25,12 @@ export const iconRounded = async (
     node,
     'icon-shape default'
   );
-  const { cssStyles } = node;
 
   const topLabel = node.pos === 't';
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { mainBkg } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -62,6 +61,7 @@ export const iconRounded = async (
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
@@ -71,14 +71,6 @@ export const iconRounded = async (
 
   iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
 
-  if (cssStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', cssStyles);
-  }
-
-  if (nodeStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, shapeSvg);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index 39fcc102c..9d0375874 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -12,7 +12,7 @@ export const iconSquare = async (
   node: Node,
   { config: { themeVariables, flowchart } }: RenderOptions
 ) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const assetHeight = node.assetHeight ?? 48;
   const assetWidth = node.assetWidth ?? 48;
@@ -24,13 +24,12 @@ export const iconSquare = async (
     node,
     'icon-shape default'
   );
-  const { cssStyles } = node;
 
   const topLabel = node.pos === 't';
 
   const height = iconSize + halfPadding * 2;
   const width = iconSize + halfPadding * 2;
-  const { mainBkg } = themeVariables;
+  const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
   const x = -width / 2;
@@ -61,6 +60,7 @@ export const iconSquare = async (
       'transform',
       `translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})`
     );
+    iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
 
   label.attr(
@@ -70,14 +70,6 @@ export const iconSquare = async (
 
   iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
 
-  if (cssStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', cssStyles);
-  }
-
-  if (nodeStyles && node.look !== 'handDrawn') {
-    iconShape.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, shapeSvg);
 
   node.intersect = function (point) {

From 7f2044024b818c27213f5979b43682325de29881 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 16 Sep 2024 12:59:33 +0530
Subject: [PATCH 12/15] Updated readme for renderOptions parameter and renamed
 to use kabab case

---
 docs/{adding_new_shape => adding-new-shape}/Readme.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)
 rename docs/{adding_new_shape => adding-new-shape}/Readme.md (97%)

diff --git a/docs/adding_new_shape/Readme.md b/docs/adding-new-shape/Readme.md
similarity index 97%
rename from docs/adding_new_shape/Readme.md
rename to docs/adding-new-shape/Readme.md
index 74e0f45ba..8cfbfa663 100644
--- a/docs/adding_new_shape/Readme.md
+++ b/docs/adding-new-shape/Readme.md
@@ -101,9 +101,13 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node } from '../../types.d.ts';
+  import { Node, RenderOptions } from '../../types.d.ts';
 
-  export const myNewShape = async (parent: SVGAElement, node: Node) => {
+  export const myNewShape = async (
+    parent: SVGAElement,
+    node: Node,
+    renderOptions: RenderOptions
+  ) => {
     // Create your shape here
     const shape = parent.insert('g').attr('class', 'my-new-shape');
     // Add other elements or styles as needed

From 5ca4fccbb01cf3c4c1975ba343e043c641b9903f Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 16 Sep 2024 13:03:46 +0530
Subject: [PATCH 13/15] fixed build error

---
 packages/mermaid/src/diagrams/flowchart/flowDb.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index b47daee11..e321f3a0b 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -134,7 +134,7 @@ export const addVertex = function (
     // console.log('yamlData', yamlData);
     const doc = yaml.load(yamlData, { schema: yaml.JSON_SCHEMA }) as NodeMetaData;
     if (doc.shape && doc.shape !== doc.shape.toLowerCase()) {
-      throw new Error(`No such shape: ${node.shape}. Shape names should be lowercase.`);
+      throw new Error(`No such shape: ${doc.shape}. Shape names should be lowercase.`);
     }
 
     // console.log('yamlData doc', doc);

From 78f923886584de8141ddb8c6ed09bac6262e9be2 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 16 Sep 2024 07:39:10 +0000
Subject: [PATCH 14/15] [autofix.ci] apply automated fixes

---
 docs/{adding-new-shape => adding_new_shape}/Readme.md | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)
 rename docs/{adding-new-shape => adding_new_shape}/Readme.md (97%)

diff --git a/docs/adding-new-shape/Readme.md b/docs/adding_new_shape/Readme.md
similarity index 97%
rename from docs/adding-new-shape/Readme.md
rename to docs/adding_new_shape/Readme.md
index 8cfbfa663..74e0f45ba 100644
--- a/docs/adding-new-shape/Readme.md
+++ b/docs/adding_new_shape/Readme.md
@@ -101,13 +101,9 @@ To add a new shape:
 - **Example**:
 
   ```typescript
-  import { Node, RenderOptions } from '../../types.d.ts';
+  import { Node } from '../../types.d.ts';
 
-  export const myNewShape = async (
-    parent: SVGAElement,
-    node: Node,
-    renderOptions: RenderOptions
-  ) => {
+  export const myNewShape = async (parent: SVGAElement, node: Node) => {
     // Create your shape here
     const shape = parent.insert('g').attr('class', 'my-new-shape');
     // Add other elements or styles as needed

From aa0836aeccd4d18b98d727f21ecea732a4cbb8af Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 16 Sep 2024 13:19:41 +0530
Subject: [PATCH 15/15] update type check for getTypeFromVertex

---
 packages/mermaid/src/diagrams/flowchart/flowDb.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index e321f3a0b..1105c9ef3 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -820,13 +820,13 @@ const getTypeFromVertex = (vertex: FlowVertex) => {
     return 'imageSquare';
   }
   if (vertex?.icon) {
-    if (vertex.form === 'circle') {
+    if (vertex?.form === 'circle') {
       return 'iconCircle';
     }
-    if (vertex.form === 'square') {
+    if (vertex?.form === 'square') {
       return 'iconSquare';
     }
-    if (vertex.form === 'rounded') {
+    if (vertex?.form === 'rounded') {
       return 'iconRounded';
     }
     return 'icon';