diff --git a/.changeset/chatty-elephants-warn.md b/.changeset/chatty-elephants-warn.md new file mode 100644 index 000000000..225047ece --- /dev/null +++ b/.changeset/chatty-elephants-warn.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +Fix for issue #6195 - allowing @ signs inside node labels diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index dfcd8aa4f..90ecd20ea 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -78,9 +78,11 @@ font-family: monospace; font-size: 72px; } + pre { width: 100%; } + /* tspan { font-size: 6px !important; } */ @@ -103,16 +105,20 @@ - 
+    
       flowchart LR
-        A --> B
+        AB["apa@apa@"] --> B(("`apa@apa`"))
+    

+    
+      flowchart
+        D(("for D"))
     

     
       flowchart LR
         A e1@==> B
         e1@{ animate: true}
     

-    
+    
 flowchart LR
   A e1@--> B
   classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
@@ -126,7 +132,7 @@ flowchart LR
   class e1 animate
     

     
Mermaid - edge-animation-slow

-    
+    
 flowchart LR
   A e1@--> B
 e1@{ animation: fast}
@@ -428,7 +434,10 @@ kanban
       window.callback = function () {
         alert('A callback was triggered');
       };
-      mermaid.initialize({
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
         // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
@@ -440,9 +449,11 @@ kanban
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
+
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
         // fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',
@@ -454,10 +465,9 @@ kanban
         fontSize: 12,
         logLevel: 0,
         securityLevel: 'loose',
+        callback,
       });
-      function callback() {
-        alert('It worked');
-      }
+
       mermaid.parseError = function (err, hash) {
         console.error('In parse error:');
         console.error(err);
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 879572209..0125572ae 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
@@ -317,6 +317,32 @@ describe('when parsing directions', function () {
     expect(data4Layout.nodes[3].label).toEqual('for E');
     expect(data4Layout.nodes[4].label).toEqual('for D');
   });
+
+  it('should be possible to use @  syntax in labels', function () {
+    const res = flow.parser.parse(`flowchart TD
+    A["@A@"] --> B["@for@ B@"] & C@{ label: "@for@ c@"} & E{"\`@for@ E@\`"} & D(("@for@ D@"))
+      H1{{"@for@ H@"}}
+      H2{{"\`@for@ H@\`"}}
+      Q1{"@for@ Q@"}
+      Q2{"\`@for@ Q@\`"}
+      AS1>"@for@ AS@"]
+      AS2>"\`@for@ AS@\`"]
+      `);
+
+    const data4Layout = flow.parser.yy.getData();
+    expect(data4Layout.nodes.length).toBe(11);
+    expect(data4Layout.nodes[0].label).toEqual('@A@');
+    expect(data4Layout.nodes[1].label).toEqual('@for@ B@');
+    expect(data4Layout.nodes[2].label).toEqual('@for@ c@');
+    expect(data4Layout.nodes[3].label).toEqual('@for@ E@');
+    expect(data4Layout.nodes[4].label).toEqual('@for@ D@');
+    expect(data4Layout.nodes[5].label).toEqual('@for@ H@');
+    expect(data4Layout.nodes[6].label).toEqual('@for@ H@');
+    expect(data4Layout.nodes[7].label).toEqual('@for@ Q@');
+    expect(data4Layout.nodes[8].label).toEqual('@for@ Q@');
+    expect(data4Layout.nodes[9].label).toEqual('@for@ AS@');
+    expect(data4Layout.nodes[10].label).toEqual('@for@ AS@');
+  });
   it.skip(' should be possible to use @  syntax to add labels with trail spaces', function () {
     const res = flow.parser.parse(
       `flowchart TB
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
index c3ac2b04b..7b2f4386a 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison
@@ -141,7 +141,7 @@ that id.
 .*direction\s+RL[^\n]*       return 'direction_rl';
 .*direction\s+LR[^\n]*       return 'direction_lr';
 
-[^\s]+\@(?=[^\{])               { return 'LINK_ID'; }
+[^\s\"]+\@(?=[^\{\"])               { return 'LINK_ID'; }
 [0-9]+                       return 'NUM';
 \#                           return 'BRKT';
 ":::"                        return 'STYLE_SEPARATOR';