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 1/3] 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 2/3] 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 3/3] 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