Support old and new syntax

cypress/platform/click_security_loose.html

@@ -16,26 +16,26 @@
   <div id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
-      click Function call clickByFlow() "Add a div"
+      click Function clickByFlow "Add a div"
-      click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
 </div>
 <div id="FirstLine" class="mermaid">
   graph TB
     1Function--->2URL
-    click 1Function call clickByFlow() "Add a div"
+    click 1Function clickByFlow "Add a div"
-    click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
 </div>
   <div id="FirstLine" class="mermaid">
     flowchart TB
       Function-->URL
-      click Function call clickByFlow() "Add a div"
+      click Function clickByFlow "Add a div"
-      click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
 </div>
 <div id="FirstLine" class="mermaid">
   flowchart TB
     1Function--->2URL
-    click 1Function call clickByFlow() "Add a div"
+    click 1Function clickByFlow "Add a div"
-    click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
 </div>
 
 <div id="FirstLine" class="mermaid">

cypress/platform/click_security_other.html

@@ -10,14 +10,14 @@
   <div id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
-      click Function call clickByFlow() "Add a div"
+      click Function clickByFlow "Add a div"
-      click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
 </div>
 <div id="FirstLine" class="mermaid">
   graph TB
     1Function-->2URL
-    click 1Function call clickByFlow() "Add a div"
+    click 1Function clickByFlow "Add a div"
-    click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
 </div>
 
 <div class="mermaid">

cypress/platform/click_security_strict.html

@@ -10,8 +10,8 @@
   <div id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
-      click Function call clickByFlow() "Add a div"
+      click Function clickByFlow "Add a div"
-      click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
 </div>
 <div id="FirstLine" class="mermaid">
   graph TB

cypress/platform/interaction.html

@@ -16,14 +16,14 @@
   <div id="FirstLine" class="mermaid">
     graph TB
       Function-->URL
-      click Function call clickByFlow() "Add a div"
+      click Function clickByFlow "Add a div"
-      click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
 </div>
 <div id="FirstLine" class="mermaid2">
   graph TB
     1Function-->2URL
-    click 1Function call clickByFlow() "Add a div"
+    click 1Function clickByFlow "Add a div"
-    click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
 </div>
 
 <div id="FirstLine" class="mermaid2">

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -139,7 +139,7 @@ graph LR
     id1((This is the text in the circle))
 ```
 
-### A node in an asymetric shape
+### A node in an asymmetric shape
 
 ```
 graph LR
@@ -493,7 +493,7 @@ graph LR
 
 ### Entity codes to escape characters
 
-It is possible to escape characters using the syntax examplified here.
+It is possible to escape characters using the syntax exemplified here.
 
 ```
     graph LR
@@ -541,7 +541,7 @@ graph TB
     end
  ```
 
- You can also set an excplicit id for the subgraph.
+ You can also set an explicit id for the subgraph.
 
 ```
 graph TB
@@ -601,6 +601,7 @@ flowchart TB
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 ```
+click nodeId callback
 click nodeId call callback()
 ```
 
@@ -620,6 +621,10 @@ Examples of tooltip usage below:
 ```
 graph LR;
     A-->B;
+    B-->C;
+    C-->D;
+    click A callback "Tooltip for a callback"
+    click B "http://www.github.com" "This is a tooltip for a link"
     click A call callback() "Tooltip for a callback"
     click B href "http://www.github.com" "This is a tooltip for a link"
 ```
@@ -629,8 +634,12 @@ The tooltip text is surrounded in double quotes. The styles of the tooltip are s
 ```mermaid
 graph LR
     A-->B;
-    click A call callback() "Tooltip"
+    B-->C;
-    click B href "http://www.github.com" "This is a link"
+    C-->D;
+    click A callback "Tooltip"
+    click B "http://www.github.com" "This is a link"
+    click C call callback() "Tooltip"
+    click D href "http://www.github.com" "This is a link"
 ```
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
@@ -641,16 +650,24 @@ Links are opened in the same browser tab/window by default. It is possible to ch
 graph LR;
     A-->B;
     B-->C;
-    click A href "http://www.github.com" _blank
+    C-->D;
-    click B href "http://www.github.com" "Open this in a new tab" _blank
+    D-->E;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+    click C href "http://www.github.com" _blank
+    click D href "http://www.github.com" "Open this in a new tab" _blank
 ```
 
 ```mermaid
 graph LR;
     A-->B;
     B-->C;
-    click A href "http://www.github.com" _blank
+    C-->D;
-    click B href "http://www.github.com" "Open this in a new tab" _blank
+    D-->E;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+    click C href "http://www.github.com" _blank
+    click D href "http://www.github.com" "Open this in a new tab" _blank
 ```
 
 Beginners tip, a full example using interactive links in a html context:
@@ -659,8 +676,12 @@ Beginners tip, a full example using interactive links in a html context:
   <div class="mermaid">
     graph LR;
         A-->B;
-        click A call callback() "Tooltip"
+        B-->C;
-        click B href "http://www.github.com" "This is a link"
+        C-->D;
+        click A callback "Tooltip"
+        click B "http://www.github.com" "This is a link"
+        click C call callback() "Tooltip"
+        click D href "http://www.github.com" "This is a link"
   </div>
 
   <script>
@@ -808,7 +829,7 @@ If a class is named default it will be assigned to all classes without specific
 
 It is possible to add icons from fontawesome.
 
-The icons are acessed via the syntax fa:#icon class name#.
+The icons are accessed via the syntax fa:#icon class name#.
 
 ```
 graph TD

docs/flowchart.md

@@ -349,7 +349,7 @@ graph LR
    a --> b & c--> d
 ```
 
-You can then describe dependencies in a very expressive way. Like the oneliner below:
+You can then describe dependencies in a very expressive way. Like the one-liner below:
 ```
 graph TB
     A & B--> C & D
@@ -594,6 +594,7 @@ flowchart TB
 It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
 
 ```
+click nodeId callback
 click nodeId call callback()
 ```
 
@@ -613,6 +614,10 @@ Examples of tooltip usage below:
 ```
 graph LR;
     A-->B;
+    B-->C;
+    C-->D;
+    click A callback "Tooltip for a callback"
+    click B "http://www.github.com" "This is a tooltip for a link"
     click A call callback() "Tooltip for a callback"
     click B href "http://www.github.com" "This is a tooltip for a link"
 ```
@@ -622,8 +627,12 @@ The tooltip text is surrounded in double quotes. The styles of the tooltip are s
 ```mermaid
 graph LR
     A-->B;
-    click A call callback() "Tooltip"
+    B-->C;
-    click B href "http://www.github.com" "This is a link"
+    C-->D;
+    click A callback "Tooltip"
+    click B "http://www.github.com" "This is a link"
+    click C call callback() "Tooltip"
+    click D href "http://www.github.com" "This is a link"
 ```
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
@@ -634,16 +643,24 @@ Links are opened in the same browser tab/window by default. It is possible to ch
 graph LR;
     A-->B;
     B-->C;
-    click A href "http://www.github.com" _blank
+    C-->D;
-    click B href "http://www.github.com" "Open this in a new tab" _blank
+    D-->E;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+    click C href "http://www.github.com" _blank
+    click D href "http://www.github.com" "Open this in a new tab" _blank
 ```
 
 ```mermaid
 graph LR;
     A-->B;
     B-->C;
-    click A href "http://www.github.com" _blank
+    C-->D;
-    click B href "http://www.github.com" "Open this in a new tab" _blank
+    D-->E;
+    click A "http://www.github.com" _blank
+    click B "http://www.github.com" "Open this in a new tab" _blank
+    click C href "http://www.github.com" _blank
+    click D href "http://www.github.com" "Open this in a new tab" _blank
 ```
 
 Beginners tip, a full example using interactive links in a html context:
@@ -652,8 +669,12 @@ Beginners tip, a full example using interactive links in a html context:
   <div class="mermaid">
     graph LR;
         A-->B;
-        click A call callback() "Tooltip"
+        B-->C;
-        click B href "http://www.github.com" "This is a link"
+        C-->D;
+        click A callback "Tooltip"
+        click B "http://www.github.com" "This is a link"
+        click C call callback() "Tooltip"
+        click D href "http://www.github.com" "This is a link"
   </div>
 
   <script>

src/diagrams/flowchart/parser/flow-interactions.spec.js

@@ -13,6 +13,16 @@ describe('[Interactions] when parsing', () => {
   });
 
   it('it should be possible to use click to a callback', function() {
+    spyOn(flowDb, 'setClickEvent');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A callback');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback');
+  });
+
+  it('it should be possible to use click to a click and call callback', function() {
     spyOn(flowDb, 'setClickEvent');
     const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback()');
 
@@ -23,6 +33,18 @@ describe('[Interactions] when parsing', () => {
   });
 
   it('it should be possible to use click to a callback with toolip', function() {
+    spyOn(flowDb, 'setClickEvent');
+    spyOn(flowDb, 'setTooltip');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A callback "tooltip"');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback');
+    expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
+  });
+
+  it('it should be possible to use click to a click and call callback with toolip', function() {
     spyOn(flowDb, 'setClickEvent');
     spyOn(flowDb, 'setTooltip');
     const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback() "tooltip"');
@@ -45,6 +67,16 @@ describe('[Interactions] when parsing', () => {
     });
 
   it('should handle interaction - click to a link', function() {
+    spyOn(flowDb, 'setLink');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html"');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html');
+  });
+
+  it('should handle interaction - click to a click and href link', function() {
     spyOn(flowDb, 'setLink');
     const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html"');
 
@@ -55,6 +87,18 @@ describe('[Interactions] when parsing', () => {
   });
 
   it('should handle interaction - click to a link with tooltip', function() {
+    spyOn(flowDb, 'setLink');
+    spyOn(flowDb, 'setTooltip');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip"');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html');
+    expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
+  });
+
+  it('should handle interaction - click to a click and href link with tooltip', function() {
     spyOn(flowDb, 'setLink');
     spyOn(flowDb, 'setTooltip');
     const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" "tooltip"');
@@ -67,6 +111,16 @@ describe('[Interactions] when parsing', () => {
   });
 
   it('should handle interaction - click to a link with target', function() {
+    spyOn(flowDb, 'setLink');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" _blank');
+
+    const vert = flow.parser.yy.getVertices();
+    const edges = flow.parser.yy.getEdges();
+
+    expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', '_blank');
+  });
+
+  it('should handle interaction - click to a click and href link with target', function() {
     spyOn(flowDb, 'setLink');
     const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" _blank');
 
@@ -79,7 +133,7 @@ describe('[Interactions] when parsing', () => {
   it('should handle interaction - click to a link with tooltip and target', function() {
     spyOn(flowDb, 'setLink');
     spyOn(flowDb, 'setTooltip');
-    const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" "tooltip" _blank');
+    const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip" _blank');
 
     const vert = flow.parser.yy.getVertices();
     const edges = flow.parser.yy.getEdges();
@@ -88,4 +142,16 @@ describe('[Interactions] when parsing', () => {
     expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
   });
 
+  it('should handle interaction - click to a click and href link with tooltip and target', function() {
+      spyOn(flowDb, 'setLink');
+      spyOn(flowDb, 'setTooltip');
+      const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" "tooltip" _blank');
+
+      const vert = flow.parser.yy.getVertices();
+      const edges = flow.parser.yy.getEdges();
+
+      expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', '_blank');
+      expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
+    });
+
 });

src/diagrams/flowchart/parser/flow.jison

@@ -450,14 +450,20 @@ classStatement:CLASS SPACE alphaNum SPACE alphaNum
     ;
 
 clickStatement
-    : CLICK CALLBACKNAME                          {$$ = $1;yy.setClickEvent($1, $2);}
+    : CLICK CALLBACKNAME                           {$$ = $1;yy.setClickEvent($1, $2);}
-    | CLICK CALLBACKNAME SPACE STR                {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4)}
+    | CLICK CALLBACKNAME SPACE STR                 {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
-    | CLICK CALLBACKNAME CALLBACKARGS             {$$ = $1;yy.setClickEvent($1, $2, $3);}
+    | CLICK CALLBACKNAME CALLBACKARGS              {$$ = $1;yy.setClickEvent($1, $2, $3);}
-    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR   {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5)}
+    | CLICK CALLBACKNAME CALLBACKARGS SPACE STR    {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
-    | CLICK HREF                                  {$$ = $1;yy.setLink($1, $2);}
+    | CLICK HREF                                   {$$ = $1;yy.setLink($1, $2);}
-    | CLICK HREF SPACE STR                        {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4)}
+    | CLICK HREF SPACE STR                         {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
-    | CLICK HREF SPACE LINK_TARGET                {$$ = $1;yy.setLink($1, $2, $4);}
+    | CLICK HREF SPACE LINK_TARGET                 {$$ = $1;yy.setLink($1, $2, $4);}
-    | CLICK HREF SPACE STR SPACE LINK_TARGET      {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4)}
+    | CLICK HREF SPACE STR SPACE LINK_TARGET       {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
+    | CLICK SPACE alphaNum                         {$$ = $1;yy.setClickEvent($1, $3);}
+    | CLICK SPACE alphaNum SPACE STR               {$$ = $1;yy.setClickEvent($1, $3);yy.setTooltip($1, $5);}
+    | CLICK SPACE STR                              {$$ = $1;yy.setLink($1, $3);}
+    | CLICK SPACE STR SPACE STR                    {$$ = $1;yy.setLink($1, $3);yy.setTooltip($1, $5);}
+    | CLICK SPACE STR SPACE LINK_TARGET            {$$ = $1;yy.setLink($1, $3, $5);}
+    | CLICK SPACE STR SPACE STR SPACE LINK_TARGET  {$$ = $1;yy.setLink($1, $3, $7);yy.setTooltip($1, $5);}
     ;
 
 styleStatement:STYLE SPACE alphaNum SPACE stylesOpt