From 0b8561711b41acd37ac75eb0b31bf98c47ec04a2 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Sun, 6 Dec 2020 22:23:13 +0100
Subject: [PATCH 01/12] align click on href or function syntax with other
 diagrams

---
 cypress/platform/class.html                  | 12 ++---
 cypress/platform/click_security_loose.html   |  8 ++--
 cypress/platform/interaction.html            |  8 ++--
 src/diagrams/class/classDb.js                | 43 +++++++++++++-----
 src/diagrams/class/classDiagram.spec.js      | 30 ++++++++-----
 src/diagrams/class/parser/classDiagram.jison | 47 +++++++++++++++++---
 6 files changed, 107 insertions(+), 41 deletions(-)

diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index f3c0a43b1..663edb610 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -35,7 +35,7 @@
         +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
-   
+
     </div>
     <div class="mermaid" style="width: 100%; height: 20%;">
       %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
@@ -47,7 +47,7 @@
         +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
-   
+
     </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
         %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
@@ -69,8 +69,8 @@
               int id
               test()
             }
-            callback Class01 "callback" "A Tooltip"  
-     
+            click Class01 call callback() "A Tooltip"
+
       </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
       flowchart TB
@@ -79,7 +79,7 @@
       classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
       class a_a apa;
       click a_a "http://www.aftonbladet.se" "apa"
-        
+
       </div>
 
       <div class="mermaid2" style="width: 100%; height: 20%;">
@@ -110,7 +110,7 @@
 
         class Shape
         callback Shape "callbackFunction" "This is a tooltip for a callback"
-        
+
       </div>
       <script src="./mermaid.js"></script>
     <script>
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 79c0ac2f2..896962687 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -41,16 +41,16 @@
 <div id="FirstLine" class="mermaid">
   classDiagram
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
-    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
+    click ShapeCallback call clickByClass() "This is a tooltip for a callback"
 </div>
 <div id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink2
-    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    click ShapeLink2 href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback2
-    callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
+    click ShapeCallback2 call clickByClass() "This is a tooltip for a callback"
 </div>
 
 </div>
diff --git a/cypress/platform/interaction.html b/cypress/platform/interaction.html
index 76150c93a..a2c76dfc2 100644
--- a/cypress/platform/interaction.html
+++ b/cypress/platform/interaction.html
@@ -30,19 +30,19 @@
   classDiagram
     class Test
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
-    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
+    click ShapeCallback call clickByClass() "This is a tooltip for a callback"
 </div>
 <div id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeCallback
-    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
+    click ShapeCallback call clickByClass() "This is a tooltip for a callback"
 </div>
 <div id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink
-    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
 </div>
 </div>
 
diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index 32fc832dd..44207c071 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -167,23 +167,29 @@ export const setCssClass = function(ids, className) {
   });
 };
 
+
+const setTooltip = function(ids, tooltip) {
+  const config = configApi.getConfig();
+  ids.split(',').forEach(function(id) {
+    if (typeof tooltip !== 'undefined') {
+      classes[id].tooltip = common.sanitizeText(tooltip, config);
+    }
+  });
+};
+
 /**
  * Called by parser when a link is found. Adds the URL to the vertex data.
  * @param ids Comma separated list of ids
  * @param linkStr URL to create a link for
  * @param tooltip Tooltip for the clickable element
  */
-export const setLink = function(ids, linkStr, tooltip) {
+export const setLink = function(ids, linkStr) {
   const config = configApi.getConfig();
   ids.split(',').forEach(function(_id) {
     let id = _id;
     if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof classes[id] !== 'undefined') {
       classes[id].link = utils.formatUrl(linkStr, config);
-
-      if (tooltip) {
-        classes[id].tooltip = common.sanitizeText(tooltip, config);
-      }
     }
   });
   setCssClass(ids, 'clickable');
@@ -193,9 +199,9 @@ export const setLink = function(ids, linkStr, tooltip) {
  * Called by parser when a click definition is found. Registers an event handler.
  * @param ids Comma separated list of ids
  * @param functionName Function to be called on click
- * @param tooltip Tooltip for the clickable element
+ * @param functionArgs Function args the function should be called with
  */
-export const setClickEvent = function(ids, functionName, tooltip) {
+export const setClickEvent = function(ids, functionName, functionArgs) {
   ids.split(',').forEach(function(id) {
     setClickFunc(id, functionName, tooltip);
     classes[id].haveCallback = true;
@@ -215,8 +221,24 @@ const setClickFunc = function(domId, functionName, tooltip) {
     return;
   }
   if (typeof classes[id] !== 'undefined') {
-    if (tooltip) {
-      classes[id].tooltip = common.sanitizeText(tooltip, config);
+    let argList = [];
+    if (typeof functionArgs === 'string') {
+      /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */
+      argList = functionArgs.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
+      for (let i = 0; i < argList.length; i++) {
+        let item = argList[i].trim();
+        /* Removes all double quotes at the start and end of an argument */
+        /* This preserves all starting and ending whitespace inside */
+        if (item.charAt(0) === '"' && item.charAt(item.length - 1) === '"') {
+          item = item.substr(1, item.length - 2);
+        }
+        argList[i] = item;
+      }
+    }
+
+    /* if no arguments passed into callback, default to passing in id */
+    if (argList.length === 0) {
+      argList.push(elemId);
     }
 
     funs.push(function() {
@@ -225,7 +247,7 @@ const setClickFunc = function(domId, functionName, tooltip) {
         elem.addEventListener(
           'click',
           function() {
-            utils.runFunc(functionName, elemId);
+            utils.runFunc(functionName, ...argList);
           },
           false
         );
@@ -314,5 +336,6 @@ export default {
   setClickEvent,
   setCssClass,
   setLink,
+  setTooltip,
   lookUpDomId
 };
diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
index dd0d29452..42a251c45 100644
--- a/src/diagrams/class/classDiagram.spec.js
+++ b/src/diagrams/class/classDiagram.spec.js
@@ -338,7 +338,7 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'link Class01 "google.com" ';
+        'click Class01 href "google.com" ';
 
       parser.parse(str);
     });
@@ -353,7 +353,7 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'link Class01 "google.com" "A Tooltip" ';
+        'click Class01 href "google.com" "A Tooltip" ';
 
       parser.parse(str);
     });
@@ -368,7 +368,7 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'callback Class01 "functionCall" ';
+        'click Class01 call functionCall() ';
 
       parser.parse(str);
     });
@@ -383,7 +383,7 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'callback Class01 "functionCall" "A Tooltip" ';
+        'click Class01 call functionCall() "A Tooltip" ';
 
       parser.parse(str);
     });
@@ -637,7 +637,7 @@ foo()
     });
 
     it('should associate link and css appropriately', function () {
-      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com"';
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com"';
       parser.parse(str);
 
       const testClass = parser.yy.getClass('Class1');
@@ -647,7 +647,7 @@ foo()
     });
 
     it('should associate link with tooltip', function () {
-      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com" "A tooltip"';
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" "A tooltip"';
       parser.parse(str);
 
       const testClass = parser.yy.getClass('Class1');
@@ -659,18 +659,28 @@ foo()
 
     it('should associate callback appropriately', function () {
       spyOn(classDb, 'setClickEvent');
-      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"';
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 call functionCall()';
       parser.parse(str);
 
-      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', undefined);
+      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
+    });
+
+    it('should associate callback appropriately with an arbitrary number of args', function () {
+      spyOn(classDb, 'setClickEvent');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 call functionCall("test0", test1, test2)';
+      parser.parse(str);
+
+      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall','"test0", test1, test2');
     });
 
     it('should associate callback with tooltip', function () {
       spyOn(classDb, 'setClickEvent');
-      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall" "A tooltip"';
+      spyOn(classDb, 'setTooltip');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 functionCall() "A tooltip"';
       parser.parse(str);
 
-      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', 'A tooltip');
+      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
+      expect(classDb.setTooltip).toHaveBeenCalledWith('Class1', 'A tooltip');
     });
   });
 });
diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison
index b3affe07a..1aedeb7c1 100644
--- a/src/diagrams/class/parser/classDiagram.jison
+++ b/src/diagrams/class/parser/classDiagram.jison
@@ -6,7 +6,15 @@
 
 /* lexical grammar */
 %lex
-%x string generic struct open_directive type_directive arg_directive
+%x string
+%x generic
+%x struct
+%x href
+%x callbackname
+%x callbackargs
+%x open_directive
+%x type_directive
+%x arg_directive
 
 %%
 \%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
@@ -29,8 +37,7 @@
 
 "class"               return 'CLASS';
 "cssClass"            return 'CSSCLASS';
-"callback"            return 'CALLBACK';
-"link"                return 'LINK';
+"click"               return 'CLICK';
 "<<"                  return 'ANNOTATION_START';
 ">>"                  return 'ANNOTATION_END';
 [~]                   this.begin("generic");
@@ -40,6 +47,30 @@
 <string>["]           this.popState();
 <string>[^"]*         return "STR";
 
+/*
+---interactivity command---
+'href' adds a link to the specified task. 'href' can only be specified when the
+line was introduced with 'click'.
+'href "<link>"' attaches the specified link to the node that was specified by 'click'.
+*/
+"href"[\s]+["]          this.begin("href");
+<href>["]               this.popState();
+<href>[^"]*             return 'HREF';
+
+/*
+---interactivity command---
+'call' adds a callback to the specified task. 'call' can only be specified when
+the line was introduced with 'click'.
+'call <callbackname>(<args>)' attaches the function 'callbackname' with the specified
+arguments to the task that was specified by 'click'.
+Function arguments are optional: 'call <callbackname>()' simply executes 'callbackname' without any arguments.
+*/
+"call"[\s]+             this.begin("callbackname");
+<callbackname>\([\s]*\) this.popState();
+<callbackname>\(        this.popState(); this.begin("callbackargs");
+<callbackname>[^(]*     return 'CALLBACKNAME';
+<callbackargs>\)        this.popState();
+<callbackargs>[^)]*     return 'CALLBACKARGS';
 
 \s*\<\|               return 'EXTENSION';
 \s*\|\>               return 'EXTENSION';
@@ -243,10 +274,12 @@ lineType
     ;
 
 clickStatement
-    : CALLBACK className STR        {$$ = $1;yy.setClickEvent($2, $3, undefined);}
-    | CALLBACK className STR STR    {$$ = $1;yy.setClickEvent($2, $3, $4);}
-    | LINK className STR            {$$ = $1;yy.setLink($2, $3, undefined);}
-    | LINK className STR STR        {$$ = $1;yy.setLink($2, $3, $4);}
+    : CLICK className CALLBACKNAME                     {$$ = $1;yy.setClickEvent($2, $3);}
+    | CLICK className CALLBACKNAME STR                 {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
+    | CLICK className CALLBACKNAME CALLBACKARGS        {$$ = $1;yy.setClickEvent($2, $3, $4);}
+    | CLICK className CALLBACKNAME CALLBACKARGS STR    {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
+    | CLICK className HREF                             {$$ = $1;yy.setLink($2, $3);}
+    | CLICK className HREF STR                         {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
     ;
 
 cssClassStatement

From 3e8b6dd1c1ac1888632d8241735006adcf7d0fdd Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Sun, 6 Dec 2020 22:33:32 +0100
Subject: [PATCH 02/12] change argument from tooltip to functionArgs

---
 src/diagrams/class/classDb.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index 44207c071..5a74af0f6 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -167,7 +167,11 @@ export const setCssClass = function(ids, className) {
   });
 };
 
-
+/**
+ * Called by parser when a tooltip is found, e.g. a clickable element.
+ * @param ids Comma separated list of ids
+ * @param tooltip Tooltip to add
+ */
 const setTooltip = function(ids, tooltip) {
   const config = configApi.getConfig();
   ids.split(',').forEach(function(id) {
@@ -203,13 +207,13 @@ export const setLink = function(ids, linkStr) {
  */
 export const setClickEvent = function(ids, functionName, functionArgs) {
   ids.split(',').forEach(function(id) {
-    setClickFunc(id, functionName, tooltip);
+    setClickFunc(id, functionName, functionArgs);
     classes[id].haveCallback = true;
   });
   setCssClass(ids, 'clickable');
 };
 
-const setClickFunc = function(domId, functionName, tooltip) {
+const setClickFunc = function(domId, functionName, functionArgs) {
   const config = configApi.getConfig();
   let id = domId;
   let elemId = lookUpDomId(id);

From 619b9f230f73914aef7b21a404449c4f9b2d9174 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Sun, 6 Dec 2020 22:40:22 +0100
Subject: [PATCH 03/12] missing call keyword

---
 src/diagrams/class/classDiagram.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
index 42a251c45..5a27c255b 100644
--- a/src/diagrams/class/classDiagram.spec.js
+++ b/src/diagrams/class/classDiagram.spec.js
@@ -676,7 +676,7 @@ foo()
     it('should associate callback with tooltip', function () {
       spyOn(classDb, 'setClickEvent');
       spyOn(classDb, 'setTooltip');
-      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 functionCall() "A tooltip"';
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 call functionCall() "A tooltip"';
       parser.parse(str);
 
       expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');

From 7f22d155f20c1d7694ff6acb0bd01a4da2c64271 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Sun, 6 Dec 2020 22:48:01 +0100
Subject: [PATCH 04/12] Update documentation

---
 docs/classDiagram.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 177e67d31..6c930437a 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -450,13 +450,13 @@ It is possible to bind a click event to a node, the click can lead to either a j
 You would define these actions on a separate line after all classes have been declared.
 
 ```
-action className "reference" "tooltip"
+click className call callback() "tooltip"
+click className href "url" "tooltip"
 ```
 
-- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
 - _className_ is the id of the node that the action will be associated with
-- _reference_ is either the url link, or the function name for callback. (note: callback function will be called with the nodeId as parameter).
 - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
+- note: callback function will be called with the nodeId as parameter.
 
 ### Examples
 
@@ -465,7 +465,7 @@ _URL Link:_
 ```
 classDiagram
 class Shape
-link Shape "http://www.github.com" "This is a tooltip for a link"
+click Shape href "http://www.github.com" "This is a tooltip for a link"
 ```
 
 _Callback:_
@@ -473,7 +473,7 @@ _Callback:_
 ```
 classDiagram
 class Shape
-callback Shape "callbackFunction" "This is a tooltip for a callback"
+click Shape call callbackFunction() "This is a tooltip for a callback"
 ```
 
 ```
@@ -488,8 +488,8 @@ callback Shape "callbackFunction" "This is a tooltip for a callback"
 classDiagram
     class Class01
     class Class02
-    callback Class01 "callbackFunction" "Callback tooltip"
-    link Class02 "http://www.github.com" "This is a link"
+    click Class01 call callbackFunction() "Callback tooltip"
+    click Class02 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.
@@ -521,8 +521,8 @@ Beginners tip, a full example using interactive links in an html context:
       +run()
       }
 
-      callback Duck callback "Tooltip"
-      click Zebra "http://www.github.com" "This is a link"
+      click Duck call callback() "Tooltip"
+      click Zebra href "http://www.github.com" "This is a link"
   </div>
 
   <script>

From f03efefac509d77e1337ef6d1c20a114445e38f9 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Tue, 8 Dec 2020 08:44:55 +0100
Subject: [PATCH 05/12] Wording : node instead of task in Class Diagram

---
 src/diagrams/class/parser/classDiagram.jison | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison
index 1aedeb7c1..599910648 100644
--- a/src/diagrams/class/parser/classDiagram.jison
+++ b/src/diagrams/class/parser/classDiagram.jison
@@ -49,7 +49,7 @@
 
 /*
 ---interactivity command---
-'href' adds a link to the specified task. 'href' can only be specified when the
+'href' adds a link to the specified node. 'href' can only be specified when the
 line was introduced with 'click'.
 'href "<link>"' attaches the specified link to the node that was specified by 'click'.
 */
@@ -59,10 +59,10 @@ line was introduced with 'click'.
 
 /*
 ---interactivity command---
-'call' adds a callback to the specified task. 'call' can only be specified when
+'call' adds a callback to the specified node. 'call' can only be specified when
 the line was introduced with 'click'.
 'call <callbackname>(<args>)' attaches the function 'callbackname' with the specified
-arguments to the task that was specified by 'click'.
+arguments to the node that was specified by 'click'.
 Function arguments are optional: 'call <callbackname>()' simply executes 'callbackname' without any arguments.
 */
 "call"[\s]+             this.begin("callbackname");

From 93f15a507b9e34ab7faec2a7109ef7959a2bf807 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 08:50:16 +0100
Subject: [PATCH 06/12] Handle old and new syntax

---
 cypress/platform/class.html                  |   2 +-
 cypress/platform/click_security_loose.html   |   8 +-
 cypress/platform/interaction.html            |   8 +-
 docs/classDiagram.md                         |  24 +++--
 src/diagrams/class/classDb.js                |  10 +-
 src/diagrams/class/classDiagram.spec.js      | 101 ++++++++++++++++++-
 src/diagrams/class/parser/classDiagram.jison |  43 +++++---
 src/diagrams/class/svgDraw.js                |   2 +-
 8 files changed, 160 insertions(+), 38 deletions(-)

diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 663edb610..a766639bd 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -69,7 +69,7 @@
               int id
               test()
             }
-            click Class01 call callback() "A Tooltip"
+            callback Class01 "callback" "A Tooltip"
 
       </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 896962687..79c0ac2f2 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -41,16 +41,16 @@
 <div id="FirstLine" class="mermaid">
   classDiagram
     class ShapeLink
-    click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
-    click ShapeCallback call clickByClass() "This is a tooltip for a callback"
+    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
 </div>
 <div id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink2
-    click ShapeLink2 href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback2
-    click ShapeCallback2 call clickByClass() "This is a tooltip for a callback"
+    callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback"
 </div>
 
 </div>
diff --git a/cypress/platform/interaction.html b/cypress/platform/interaction.html
index a2c76dfc2..76150c93a 100644
--- a/cypress/platform/interaction.html
+++ b/cypress/platform/interaction.html
@@ -30,19 +30,19 @@
   classDiagram
     class Test
     class ShapeLink
-    click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
     class ShapeCallback
-    click ShapeCallback call clickByClass() "This is a tooltip for a callback"
+    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
 </div>
 <div id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeCallback
-    click ShapeCallback call clickByClass() "This is a tooltip for a callback"
+    callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
 </div>
 <div id="FirstLine" class="mermaid">
   classDiagram-v2
     class ShapeLink
-    click ShapeLink href "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
+    link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link"
 </div>
 </div>
 
diff --git a/docs/classDiagram.md b/docs/classDiagram.md
index 6c930437a..635bd08d9 100644
--- a/docs/classDiagram.md
+++ b/docs/classDiagram.md
@@ -450,11 +450,13 @@ It is possible to bind a click event to a node, the click can lead to either a j
 You would define these actions on a separate line after all classes have been declared.
 
 ```
+action className "reference" "tooltip"
 click className call callback() "tooltip"
 click className href "url" "tooltip"
 ```
-
+- _action_ is either `link` or `callback`, depending on which type of interaction you want to have called
 - _className_ is the id of the node that the action will be associated with
+- _reference_ is either the url link, or the function name for callback.
 - (_optional_) tooltip is a string to be displayed when hovering over element (note: The styles of the tooltip are set by the class .mermaidTooltip.)
 - note: callback function will be called with the nodeId as parameter.
 
@@ -465,7 +467,9 @@ _URL Link:_
 ```
 classDiagram
 class Shape
-click Shape href "http://www.github.com" "This is a tooltip for a link"
+link Shape "http://www.github.com" "This is a tooltip for a link"
+class Shape2
+click Shape2 href "http://www.github.com" "This is a tooltip for a link"
 ```
 
 _Callback:_
@@ -473,7 +477,9 @@ _Callback:_
 ```
 classDiagram
 class Shape
-click Shape call callbackFunction() "This is a tooltip for a callback"
+callback Shape "callbackFunction" "This is a tooltip for a callback"
+class Shape2
+click Shape2 call callbackFunction() "This is a tooltip for a callback"
 ```
 
 ```
@@ -488,8 +494,12 @@ click Shape call callbackFunction() "This is a tooltip for a callback"
 classDiagram
     class Class01
     class Class02
-    click Class01 call callbackFunction() "Callback tooltip"
-    click Class02 href "http://www.github.com" "This is a link"
+    callback Class01 "callbackFunction" "Callback tooltip"
+    link Class02 "http://www.github.com" "This is a link"
+    class Class03
+    class Class04
+    click Class03 call callbackFunction() "Callback tooltip"
+    click Class04 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.
@@ -521,8 +531,8 @@ Beginners tip, a full example using interactive links in an html context:
       +run()
       }
 
-      click Duck call callback() "Tooltip"
-      click Zebra href "http://www.github.com" "This is a link"
+      callback Duck callback "Tooltip"
+      link Zebra "http://www.github.com" "This is a link"
   </div>
 
   <script>
diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index 5a74af0f6..2f5f18f15 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -185,15 +185,21 @@ const setTooltip = function(ids, tooltip) {
  * Called by parser when a link is found. Adds the URL to the vertex data.
  * @param ids Comma separated list of ids
  * @param linkStr URL to create a link for
- * @param tooltip Tooltip for the clickable element
+ * @param target Target of the link, _blank by default as originally defined in the svgDraw.js file
  */
-export const setLink = function(ids, linkStr) {
+export const setLink = function(ids, linkStr, target) {
   const config = configApi.getConfig();
   ids.split(',').forEach(function(_id) {
     let id = _id;
     if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof classes[id] !== 'undefined') {
       classes[id].link = utils.formatUrl(linkStr, config);
+      if (typeof target === 'string') {
+        classes[id].linkTarget = target
+      }else{
+        classes[id].linkTarget ='_blank'
+      }
+
     }
   });
   setCssClass(ids, 'clickable');
diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
index 5a27c255b..0637ff03a 100644
--- a/src/diagrams/class/classDiagram.spec.js
+++ b/src/diagrams/class/classDiagram.spec.js
@@ -338,11 +338,26 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'click Class01 href "google.com" ';
+        'link Class01 "google.com" ';
 
       parser.parse(str);
     });
 
+    it('should handle click statement with click and href link', function () {
+          const str =
+            'classDiagram\n' +
+            'class Class1 {\n' +
+            '%% Comment Class01 <|-- Class02\n' +
+            'int : test\n' +
+            'string : foo\n' +
+            'test()\n' +
+            'foo()\n' +
+            '}\n' +
+            'click Class01 href "google.com" ';
+
+          parser.parse(str);
+        });
+
     it('should handle click statement with link and tooltip', function () {
       const str =
         'classDiagram\n' +
@@ -353,11 +368,27 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'click Class01 href "google.com" "A Tooltip" ';
+        'link Class01 "google.com" "A Tooltip" ';
 
       parser.parse(str);
     });
 
+
+    it('should handle click statement with click and href link and tooltip', function () {
+          const str =
+            'classDiagram\n' +
+            'class Class1 {\n' +
+            '%% Comment Class01 <|-- Class02\n' +
+            'int : test\n' +
+            'string : foo\n' +
+            'test()\n' +
+            'foo()\n' +
+            '}\n' +
+            'click Class01 href "google.com" "A Tooltip" ';
+
+          parser.parse(str);
+        });
+
     it('should handle click statement with callback', function () {
       const str =
         'classDiagram\n' +
@@ -368,11 +399,26 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'click Class01 call functionCall() ';
+        'callback Class01 "functionCall" ';
 
       parser.parse(str);
     });
 
+    it('should handle click statement with click and call callback', function () {
+          const str =
+            'classDiagram\n' +
+            'class Class1 {\n' +
+            '%% Comment Class01 <|-- Class02\n' +
+            'int : test\n' +
+            'string : foo\n' +
+            'test()\n' +
+            'foo()\n' +
+            '}\n' +
+            'click Class01 call functionCall() ';
+
+          parser.parse(str);
+        });
+
     it('should handle click statement with callback and tooltip', function () {
       const str =
         'classDiagram\n' +
@@ -383,11 +429,26 @@ foo()
         'test()\n' +
         'foo()\n' +
         '}\n' +
-        'click Class01 call functionCall() "A Tooltip" ';
+        'callback Class01 "functionCall" "A Tooltip" ';
 
       parser.parse(str);
     });
 
+    it('should handle click statement with click and call callback and tooltip', function () {
+          const str =
+            'classDiagram\n' +
+            'class Class1 {\n' +
+            '%% Comment Class01 <|-- Class02\n' +
+            'int : test\n' +
+            'string : foo\n' +
+            'test()\n' +
+            'foo()\n' +
+            '}\n' +
+            'click Class01 call functionCall() "A Tooltip" ';
+
+          parser.parse(str);
+        });
+
     it('should handle dashed relation definition of different types and directions', function () {
       const str =
         'classDiagram\n' +
@@ -637,6 +698,16 @@ foo()
     });
 
     it('should associate link and css appropriately', function () {
+          const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com"';
+          parser.parse(str);
+
+          const testClass = parser.yy.getClass('Class1');
+          expect(testClass.link).toBe('about:blank');//('google.com'); security needs to be set to 'loose' for this to work right
+          expect(testClass.cssClasses.length).toBe(1);
+          expect(testClass.cssClasses[0]).toBe('clickable');
+        });
+
+    it('should associate click and href link and css appropriately', function () {
       const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com"';
       parser.parse(str);
 
@@ -647,7 +718,7 @@ foo()
     });
 
     it('should associate link with tooltip', function () {
-      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" "A tooltip"';
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com" "A tooltip"';
       parser.parse(str);
 
       const testClass = parser.yy.getClass('Class1');
@@ -657,7 +728,27 @@ foo()
       expect(testClass.cssClasses[0]).toBe('clickable');
     });
 
+    it('should associate click and href link with tooltip', function () {
+          const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" "A tooltip"';
+          parser.parse(str);
+
+          const testClass = parser.yy.getClass('Class1');
+          expect(testClass.link).toBe('about:blank');//('google.com'); security needs to be set to 'loose' for this to work right
+          expect(testClass.tooltip).toBe('A tooltip');
+          expect(testClass.cssClasses.length).toBe(1);
+          expect(testClass.cssClasses[0]).toBe('clickable');
+        });
+
     it('should associate callback appropriately', function () {
+      spyOn(classDb, 'setClickEvent');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"';
+      parser.parse(str);
+
+      expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
+    });
+
+
+    it('should associate click and call callback appropriately', function () {
       spyOn(classDb, 'setClickEvent');
       const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 call functionCall()';
       parser.parse(str);
diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison
index 599910648..23f292c55 100644
--- a/src/diagrams/class/parser/classDiagram.jison
+++ b/src/diagrams/class/parser/classDiagram.jison
@@ -10,8 +10,8 @@
 %x generic
 %x struct
 %x href
-%x callbackname
-%x callbackargs
+%x callback_name
+%x callback_args
 %x open_directive
 %x type_directive
 %x arg_directive
@@ -37,6 +37,8 @@
 
 "class"               return 'CLASS';
 "cssClass"            return 'CSSCLASS';
+"callback"            return 'CALLBACK';
+"link"                return 'LINK';
 "click"               return 'CLICK';
 "<<"                  return 'ANNOTATION_START';
 ">>"                  return 'ANNOTATION_END';
@@ -61,16 +63,21 @@ line was introduced with 'click'.
 ---interactivity command---
 'call' adds a callback to the specified node. 'call' can only be specified when
 the line was introduced with 'click'.
-'call <callbackname>(<args>)' attaches the function 'callbackname' with the specified
+'call <callback_name>(<callback_args>)' attaches the function 'callback_name' with the specified
 arguments to the node that was specified by 'click'.
-Function arguments are optional: 'call <callbackname>()' simply executes 'callbackname' without any arguments.
+Function arguments are optional: 'call <callback_name>()' simply executes 'callback_name' without any arguments.
 */
-"call"[\s]+             this.begin("callbackname");
-<callbackname>\([\s]*\) this.popState();
-<callbackname>\(        this.popState(); this.begin("callbackargs");
-<callbackname>[^(]*     return 'CALLBACKNAME';
-<callbackargs>\)        this.popState();
-<callbackargs>[^)]*     return 'CALLBACKARGS';
+"call"[\s]+              this.begin("callback_name");
+<callback_name>\([\s]*\) this.popState();
+<callback_name>\(        this.popState(); this.begin("callback_args");
+<callback_name>[^(]*     return 'CALLBACK_NAME';
+<callback_args>\)        this.popState();
+<callback_args>[^)]*     return 'CALLBACK_ARGS';
+
+"_self"               return 'LINK_TARGET';
+"_blank"              return 'LINK_TARGET';
+"_parent"             return 'LINK_TARGET';
+"_top"                return 'LINK_TARGET';
 
 \s*\<\|               return 'EXTENSION';
 \s*\|\>               return 'EXTENSION';
@@ -274,12 +281,20 @@ lineType
     ;
 
 clickStatement
-    : CLICK className CALLBACKNAME                     {$$ = $1;yy.setClickEvent($2, $3);}
-    | CLICK className CALLBACKNAME STR                 {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
-    | CLICK className CALLBACKNAME CALLBACKARGS        {$$ = $1;yy.setClickEvent($2, $3, $4);}
-    | CLICK className CALLBACKNAME CALLBACKARGS STR    {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
+    : CALLBACK className STR                           {$$ = $1;yy.setClickEvent($2, $3);}
+    | CALLBACK className STR STR                       {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
+    | LINK className STR                               {$$ = $1;yy.setLink($2, $3);}
+    | LINK className STR SPACE LINK_TARGET             {$$ = $1;yy.setLink($2, $3,$5);}
+    | LINK className STR STR                           {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
+    | LINK className STR STR SPACE LINK_TARGET         {$$ = $1;yy.setLink($2, $3, $6);yy.setTooltip($2, $4);}
+    | CLICK className CALLBACK_NAME                    {$$ = $1;yy.setClickEvent($2, $3);}
+    | CLICK className CALLBACK_NAME STR                {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
+    | CLICK className CALLBACK_NAME CALLBACK_ARGS      {$$ = $1;yy.setClickEvent($2, $3, $4);}
+    | CLICK className CALLBACK_NAME CALLBACK_ARGS STR  {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
     | CLICK className HREF                             {$$ = $1;yy.setLink($2, $3);}
+    | CLICK className HREF SPACE LINK_TARGET           {$$ = $1;yy.setLink($2, $3, $5);}
     | CLICK className HREF STR                         {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
+    | CLICK className HREF STR SPACE LINK_TARGET       {$$ = $1;yy.setLink($2, $3, $6);yy.setTooltip($2, $4);}
     ;
 
 cssClassStatement
diff --git a/src/diagrams/class/svgDraw.js b/src/diagrams/class/svgDraw.js
index 6bd385f8a..0a8be3fcb 100644
--- a/src/diagrams/class/svgDraw.js
+++ b/src/diagrams/class/svgDraw.js
@@ -167,7 +167,7 @@ export const drawClass = function(elem, classDef, conf) {
     title = g
       .append('svg:a')
       .attr('xlink:href', classDef.link)
-      .attr('target', '_blank')
+      .attr('target', classDef.linkTarget)
       .append('text')
       .attr('y', conf.textHeight + conf.padding)
       .attr('x', 0);

From 02fec31c928fae36409378d1b3013a293695c2a6 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 08:57:23 +0100
Subject: [PATCH 07/12] fix indentation

---
 src/diagrams/class/classDb.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index 2f5f18f15..f82710ed1 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -195,11 +195,10 @@ export const setLink = function(ids, linkStr, target) {
     if (typeof classes[id] !== 'undefined') {
       classes[id].link = utils.formatUrl(linkStr, config);
       if (typeof target === 'string') {
-        classes[id].linkTarget = target
-      }else{
-        classes[id].linkTarget ='_blank'
+        classes[id].linkTarget = target;
+      } else {
+        classes[id].linkTarget = '_blank' ;
       }
-
     }
   });
   setCssClass(ids, 'clickable');

From 44a744752fff38ef54aeeeb57699851829dd153d Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 09:01:09 +0100
Subject: [PATCH 08/12] remove useless whitespace

---
 src/diagrams/class/classDb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js
index f82710ed1..0e57f82f0 100644
--- a/src/diagrams/class/classDb.js
+++ b/src/diagrams/class/classDb.js
@@ -197,7 +197,7 @@ export const setLink = function(ids, linkStr, target) {
       if (typeof target === 'string') {
         classes[id].linkTarget = target;
       } else {
-        classes[id].linkTarget = '_blank' ;
+        classes[id].linkTarget = '_blank';
       }
     }
   });

From 1fdd037132d78b2db23a19ab255d7beb1b7eee27 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 10:57:58 +0100
Subject: [PATCH 09/12] test link target

---
 src/diagrams/class/classDiagram.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
index 0637ff03a..088424f34 100644
--- a/src/diagrams/class/classDiagram.spec.js
+++ b/src/diagrams/class/classDiagram.spec.js
@@ -739,6 +739,17 @@ foo()
           expect(testClass.cssClasses[0]).toBe('clickable');
         });
 
+    it('should associate click and href link appropriately', function () {
+      spyOn(classDb, 'setLink');
+      spyOn(classDb, 'setTooltip');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" "A tooltip" _self';
+      parser.parse(str);
+
+      expect(classDb.setLink).toHaveBeenCalledWith('Class1', 'google.com', '_self');
+      expect(classDb.setTooltip).toHaveBeenCalledWith('Class1', 'A tooltip');
+    });
+
+
     it('should associate callback appropriately', function () {
       spyOn(classDb, 'setClickEvent');
       const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"';

From fc3c05692febad1904e3ecb6be2148d162517d6c Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 10:59:34 +0100
Subject: [PATCH 10/12] link or click must both work

---
 src/diagrams/class/classDiagram.spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
index 088424f34..839a08d39 100644
--- a/src/diagrams/class/classDiagram.spec.js
+++ b/src/diagrams/class/classDiagram.spec.js
@@ -749,6 +749,15 @@ foo()
       expect(classDb.setTooltip).toHaveBeenCalledWith('Class1', 'A tooltip');
     });
 
+    it('should associate link appropriately', function () {
+      spyOn(classDb, 'setLink');
+      spyOn(classDb, 'setTooltip');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com" "A tooltip" _self';
+      parser.parse(str);
+
+      expect(classDb.setLink).toHaveBeenCalledWith('Class1', 'google.com', '_self');
+      expect(classDb.setTooltip).toHaveBeenCalledWith('Class1', 'A tooltip');
+    });
 
     it('should associate callback appropriately', function () {
       spyOn(classDb, 'setClickEvent');

From d5d78a101885c04b46902265a641a1650b5268dd Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 11:10:05 +0100
Subject: [PATCH 11/12] remove space

---
 src/diagrams/class/parser/classDiagram.jison | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison
index 23f292c55..9e740b47f 100644
--- a/src/diagrams/class/parser/classDiagram.jison
+++ b/src/diagrams/class/parser/classDiagram.jison
@@ -281,20 +281,20 @@ lineType
     ;
 
 clickStatement
-    : CALLBACK className STR                           {$$ = $1;yy.setClickEvent($2, $3);}
-    | CALLBACK className STR STR                       {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
-    | LINK className STR                               {$$ = $1;yy.setLink($2, $3);}
-    | LINK className STR SPACE LINK_TARGET             {$$ = $1;yy.setLink($2, $3,$5);}
-    | LINK className STR STR                           {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
-    | LINK className STR STR SPACE LINK_TARGET         {$$ = $1;yy.setLink($2, $3, $6);yy.setTooltip($2, $4);}
-    | CLICK className CALLBACK_NAME                    {$$ = $1;yy.setClickEvent($2, $3);}
-    | CLICK className CALLBACK_NAME STR                {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
-    | CLICK className CALLBACK_NAME CALLBACK_ARGS      {$$ = $1;yy.setClickEvent($2, $3, $4);}
-    | CLICK className CALLBACK_NAME CALLBACK_ARGS STR  {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
-    | CLICK className HREF                             {$$ = $1;yy.setLink($2, $3);}
-    | CLICK className HREF SPACE LINK_TARGET           {$$ = $1;yy.setLink($2, $3, $5);}
-    | CLICK className HREF STR                         {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
-    | CLICK className HREF STR SPACE LINK_TARGET       {$$ = $1;yy.setLink($2, $3, $6);yy.setTooltip($2, $4);}
+    : CALLBACK className STR                            {$$ = $1;yy.setClickEvent($2, $3);}
+    | CALLBACK className STR STR                        {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
+    | LINK className STR                                {$$ = $1;yy.setLink($2, $3);}
+    | LINK className STR LINK_TARGET                    {$$ = $1;yy.setLink($2, $3,$4);}
+    | LINK className STR STR                            {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
+    | LINK className STR STR LINK_TARGET                {$$ = $1;yy.setLink($2, $3, $5);yy.setTooltip($2, $4);}
+    | CLICK className CALLBACK_NAME                     {$$ = $1;yy.setClickEvent($2, $3);}
+    | CLICK className CALLBACK_NAME STR                 {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4);}
+    | CLICK className CALLBACK_NAME CALLBACK_ARGS       {$$ = $1;yy.setClickEvent($2, $3, $4);}
+    | CLICK className CALLBACK_NAME CALLBACK_ARGS STR   {$$ = $1;yy.setClickEvent($2, $3, $4);yy.setTooltip($2, $5);}
+    | CLICK className HREF                              {$$ = $1;yy.setLink($2, $3);}
+    | CLICK className HREF LINK_TARGET                  {$$ = $1;yy.setLink($2, $3, $4);}
+    | CLICK className HREF STR                          {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4);}
+    | CLICK className HREF STR LINK_TARGET              {$$ = $1;yy.setLink($2, $3, $5);yy.setTooltip($2, $4);}
     ;
 
 cssClassStatement

From e7db2a63b959f6d88ed827a2a6109b9470974530 Mon Sep 17 00:00:00 2001
From: Matthieu MOREL <matthieu.morel@cnp.fr>
Date: Thu, 10 Dec 2020 12:31:22 +0100
Subject: [PATCH 12/12] improve test coverage

---
 src/diagrams/class/classDiagram.spec.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
index 839a08d39..baaa9ca65 100644
--- a/src/diagrams/class/classDiagram.spec.js
+++ b/src/diagrams/class/classDiagram.spec.js
@@ -739,7 +739,7 @@ foo()
           expect(testClass.cssClasses[0]).toBe('clickable');
         });
 
-    it('should associate click and href link appropriately', function () {
+    it('should associate click and href link with tooltip and target appropriately', function () {
       spyOn(classDb, 'setLink');
       spyOn(classDb, 'setTooltip');
       const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" "A tooltip" _self';
@@ -749,6 +749,22 @@ foo()
       expect(classDb.setTooltip).toHaveBeenCalledWith('Class1', 'A tooltip');
     });
 
+    it('should associate click and href link appropriately', function () {
+      spyOn(classDb, 'setLink');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com"';
+      parser.parse(str);
+
+      expect(classDb.setLink).toHaveBeenCalledWith('Class1', 'google.com');
+    });
+
+    it('should associate click and href link with target appropriately', function () {
+      spyOn(classDb, 'setLink');
+      const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'click Class1 href "google.com" _self';
+      parser.parse(str);
+
+      expect(classDb.setLink).toHaveBeenCalledWith('Class1', 'google.com', '_self');
+    });
+
     it('should associate link appropriately', function () {
       spyOn(classDb, 'setLink');
       spyOn(classDb, 'setTooltip');