diff --git a/dist/index.html b/dist/index.html
index 47bf945d57..bf15bac299 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -288,6 +288,13 @@
 Add gantt diagram to demo page      :after a1  , 20h
 Add another diagram to demo page    :doc1, after a1  , 48h
 
+section Clickable
+Visit mermaidjs               :active, cl1, 2014-01-07,2014-01-10
+Calling a Callback (look at the console log) :cl2, after cl1, 3d
+
+click cl1 href "https://mermaidjs.github.io/"
+click cl2 call ganttTestClick("test", test, test)
+
 section Last section
 Describe gantt syntax               :after doc1, 3d
 Add gantt diagram to demo page      : 20h
@@ -346,6 +353,11 @@
     });
   </script>
   <script>
+    function ganttTestClick(a, b, c){
+      console.log("a:", a)
+      console.log("b:", b)
+      console.log("c:", c)
+    }
     function testClick(nodeId) {
       console.log("clicked", nodeId)
       var originalBgColor = document.querySelector('body').style.backgroundColor
diff --git a/package.json b/package.json
index 77dfaae21a..c892ab1fd5 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "scripts": {
     "build": "webpack --progress --colors",
     "build:watch": "yarn build --watch",
+    "minify": "minify ./dist/mermaid.js > ./dist/mermaid.min.js",
     "release": "yarn build -p --config webpack.config.prod.babel.js",
     "lint": "standard",
     "test": "yarn lint && jest",
@@ -25,7 +26,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/knsv/mermaid"
+    "url": "https://github.com/abzicht/mermaid"
   },
   "author": "Knut Sveidqvist",
   "license": "MIT",
@@ -42,6 +43,7 @@
     "graphlibrary": "^2.2.0",
     "he": "^1.2.0",
     "lodash": "^4.17.11",
+    "minify": "^4.1.1",
     "moment": "^2.23.0",
     "scope-css": "^1.2.1"
   },
@@ -84,4 +86,4 @@
       "babel-core"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/diagrams/gantt/ganttDb.js b/src/diagrams/gantt/ganttDb.js
index b4e4fda763..6854725755 100644
--- a/src/diagrams/gantt/ganttDb.js
+++ b/src/diagrams/gantt/ganttDb.js
@@ -1,5 +1,8 @@
 import moment from 'moment'
-import { logger } from '../../logger'
+import {
+  logger
+} from '../../logger'
+import * as d3 from 'd3'
 
 let dateFormat = ''
 let axisFormat = ''
@@ -7,11 +10,13 @@ let title = ''
 let sections = []
 let tasks = []
 let currentSection = ''
+let funs = []
 
 export const clear = function () {
   sections = []
   tasks = []
   currentSection = ''
+  funs = []
   title = ''
   taskCnt = 0
   lastTask = undefined
@@ -242,18 +247,33 @@ const parseData = function (prevTaskId, dataStr) {
   switch (data.length) {
     case 1:
       task.id = parseId()
-      task.startTime = { type: 'prevTaskEnd', id: prevTaskId }
-      task.endTime = { data: data[0] }
+      task.startTime = {
+        type: 'prevTaskEnd',
+        id: prevTaskId
+      }
+      task.endTime = {
+        data: data[0]
+      }
       break
     case 2:
       task.id = parseId()
-      task.startTime = { type: 'getStartDate', startData: data[0] }
-      task.endTime = { data: data[1] }
+      task.startTime = {
+        type: 'getStartDate',
+        startData: data[0]
+      }
+      task.endTime = {
+        data: data[1]
+      }
       break
     case 3:
       task.id = parseId(data[0])
-      task.startTime = { type: 'getStartDate', startData: data[1] }
-      task.endTime = { data: data[2] }
+      task.startTime = {
+        type: 'getStartDate',
+        startData: data[1]
+      }
+      task.endTime = {
+        data: data[2]
+      }
       break
     default:
   }
@@ -270,8 +290,11 @@ export const addTask = function (descr, data) {
     section: currentSection,
     type: currentSection,
     processed: false,
-    raw: { data: data },
-    task: descr
+    raw: {
+      data: data
+    },
+    task: descr,
+    classes: []
   }
   const taskInfo = parseData(lastTaskID, data)
   rawTask.raw.startTime = taskInfo.startTime
@@ -299,7 +322,8 @@ export const addTaskOrg = function (descr, data) {
     section: currentSection,
     type: currentSection,
     description: descr,
-    task: descr
+    task: descr,
+    classes: []
   }
   const taskInfo = compileData(lastTask, data)
   newTask.startTime = taskInfo.startTime
@@ -348,6 +372,108 @@ const compileTasks = function () {
   return allProcessed
 }
 
+/**
+ * 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
+ */
+export const setLink = function (ids, linkStr) {
+  ids.split(',').forEach(function (id) {
+    let rawTask = findTaskById(id)
+    if (typeof rawTask !== 'undefined') {
+      pushFun(id, () => { window.open(linkStr, '_self') })
+    }
+  })
+  setClass(ids, 'clickable')
+}
+
+/**
+ * Called by parser when a special node is found, e.g. a clickable element.
+ * @param ids Comma separated list of ids
+ * @param className Class to add
+ */
+export const setClass = function (ids, className) {
+  ids.split(',').forEach(function (id) {
+    let rawTask = findTaskById(id)
+    if (typeof rawTask !== 'undefined') {
+      rawTask.classes.push(className)
+    }
+  })
+}
+
+const setClickFun = function (id, functionName, functionArgs) {
+  if (typeof functionName === 'undefined') {
+    return
+  }
+
+  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
+    }
+  }
+
+  let rawTask = findTaskById(id)
+  if (typeof rawTask !== 'undefined') {
+    pushFun(id, () => { window[functionName](...argList) })
+  }
+}
+
+/**
+ * The callbackFunction is executed in a click event bound to the task with the specified id or the task's assigned text
+ * @param id The task's id
+ * @param callbackFunction A function to be executed when clicked on the task or the task's text
+ */
+const pushFun = function (id, callbackFunction) {
+  funs.push(function (element) {
+    const elem = d3.select(element).select(`[id="${id}"]`)
+    if (elem !== null) {
+      elem.on('click', function () {
+        callbackFunction()
+      })
+    }
+  })
+  funs.push(function (element) {
+    const elem = d3.select(element).select(`[id="${id}-text"]`)
+    if (elem !== null) {
+      elem.on('click', function () {
+        callbackFunction()
+      })
+    }
+  })
+}
+
+/**
+ * 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 functionArgs Function args the function should be called with
+ */
+export const setClickEvent = function (ids, functionName, functionArgs) {
+  ids.split(',').forEach(function (id) {
+    setClickFun(id, functionName, functionArgs)
+  })
+  setClass(ids, 'clickable')
+}
+
+/**
+ * Binds all functions previously added to fun (specified through click) to the element
+ * @param element
+ */
+export const bindFunctions = function (element) {
+  funs.forEach(function (fun) {
+    fun(element)
+  })
+}
+
 export default {
   clear,
   setDateFormat,
@@ -359,5 +485,8 @@ export default {
   getTasks,
   addTask,
   findTaskById,
-  addTaskOrg
+  addTaskOrg,
+  setClickEvent,
+  setLink,
+  bindFunctions
 }
diff --git a/src/diagrams/gantt/ganttRenderer.js b/src/diagrams/gantt/ganttRenderer.js
index 7d24df2a4c..c3b816e926 100644
--- a/src/diagrams/gantt/ganttRenderer.js
+++ b/src/diagrams/gantt/ganttRenderer.js
@@ -126,6 +126,7 @@ export const draw = function (text, id) {
       .enter()
 
     rectangles.append('rect')
+      .attr('id', function (d) { return d.id })
       .attr('rx', 3)
       .attr('ry', 3)
       .attr('x', function (d) {
@@ -141,6 +142,11 @@ export const draw = function (text, id) {
       .attr('class', function (d) {
         const res = 'task '
 
+        let classStr = ''
+        if (d.classes.length > 0) {
+          classStr = d.classes.join(' ')
+        }
+
         let secNum = 0
         for (let i = 0; i < categories.length; i++) {
           if (d.type === categories[i]) {
@@ -150,28 +156,30 @@ export const draw = function (text, id) {
 
         if (d.active) {
           if (d.crit) {
-            return res + ' activeCrit' + secNum
+            return res + classStr + ' activeCrit' + secNum
           } else {
-            return res + ' active' + secNum
+            return res + classStr + ' active' + secNum
           }
         }
 
         if (d.done) {
           if (d.crit) {
-            return res + ' doneCrit' + secNum
+            return res + classStr + ' doneCrit' + secNum
           } else {
-            return res + ' done' + secNum
+            return res + classStr + ' done' + secNum
           }
         }
 
         if (d.crit) {
-          return res + ' crit' + secNum
+          return res + classStr + ' crit' + secNum
         }
 
-        return res + ' task' + secNum
+        return res + classStr + ' task' + secNum
       })
 
-    rectangles.append('text')
+    rectangles
+      .append('text')
+      .attr('id', function (d) { return d.id + '-text' })
       .text(function (d) {
         return d.task
       })
@@ -200,6 +208,12 @@ export const draw = function (text, id) {
         const startX = timeScale(d.startTime)
         const endX = timeScale(d.endTime)
         const textWidth = this.getBBox().width
+
+        let classStr = ''
+        if (d.classes.length > 0) {
+          classStr = d.classes.join(' ')
+        }
+
         let secNum = 0
         for (let i = 0; i < categories.length; i++) {
           if (d.type === categories[i]) {
@@ -231,12 +245,12 @@ export const draw = function (text, id) {
         // Check id text width > width of rectangle
         if (textWidth > (endX - startX)) {
           if (endX + textWidth + 1.5 * conf.leftPadding > w) {
-            return 'taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType
+            return classStr + ' taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType
           } else {
-            return 'taskTextOutsideRight taskTextOutside' + secNum + ' ' + taskType
+            return classStr + ' taskTextOutsideRight taskTextOutside' + secNum + ' ' + taskType
           }
         } else {
-          return 'taskText taskText' + secNum + ' ' + taskType
+          return classStr + ' taskText taskText' + secNum + ' ' + taskType
         }
       })
   }
diff --git a/src/diagrams/gantt/parser/gantt.jison b/src/diagrams/gantt/parser/gantt.jison
index 49ab3ad477..3903cf3c06 100644
--- a/src/diagrams/gantt/parser/gantt.jison
+++ b/src/diagrams/gantt/parser/gantt.jison
@@ -7,27 +7,63 @@
 
 %options case-insensitive
 
-%{
-	// Pre-lexer code can go here
-%}
-
+%x click
+%x href
+%x callbackname
+%x callbackargs
 %%
 
 [\n]+                   return 'NL';
 \s+                     /* skip whitespace */
 \#[^\n]*                /* skip comments */
 \%%[^\n]*               /* skip comments */
-"gantt"     	        return 'gantt';
+
+/*
+---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 task 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 introdcued 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';
+
+/*
+'click' is the keyword to introduce a line that contains interactivity commands.
+'click' must be followed by an existing task-id. All commands are attached to
+that id.
+'click <id>' can be followed by href or call commands in any desired order
+*/
+"click"[\s]+            this.begin("click");
+<click>[\s\n]           this.popState();
+<click>[^\s\n]*         return 'click';
+
+"gantt"                 return 'gantt';
 "dateFormat"\s[^#\n;]+  return 'dateFormat';
 "axisFormat"\s[^#\n;]+  return 'axisFormat';
 \d\d\d\d"-"\d\d"-"\d\d  return 'date';
 "title"\s[^#\n;]+       return 'title';
 "section"\s[^#:\n;]+    return 'section';
-[^#:\n;]+               return 'taskTxt';
+[^#:\n;]+             return 'taskTxt';
 ":"[^#\n;]+             return 'taskData';
-":"                         return ':';
-<<EOF>>                     return 'EOF';
-.                           return 'INVALID';
+":"                     return ':';
+<<EOF>>                 return 'EOF';
+.                       return 'INVALID';
 
 /lex
 
@@ -54,11 +90,39 @@ line
 	;
 
 statement
-	: 'dateFormat' {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
+  : 'dateFormat' {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
   | 'axisFormat' {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
-	| title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
-	| section {yy.addSection($1.substr(8));$$=$1.substr(8);}
-	| taskTxt taskData {yy.addTask($1,$2);$$='task';}
-	;
+  | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
+  | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
+  | clickStatement
+  | taskTxt taskData {yy.addTask($1,$2);$$='task';}
+  ;
 
-%%
+/*
+click allows any combination of href and call.
+*/
+clickStatement
+    : click callbackname                    {$$ = $1;yy.setClickEvent($1, $2, null);}
+    | click callbackname callbackargs       {$$ = $1;yy.setClickEvent($1, $2, $3);}
+
+    | click callbackname href               {$$ = $1;yy.setClickEvent($1, $2, null);yy.setLink($1,$3);}
+    | click callbackname callbackargs href  {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setLink($1,$4);}
+
+    | click href callbackname               {$$ = $1;yy.setClickEvent($1, $3, null);yy.setLink($1,$2);}
+    | click href callbackname callbackargs  {$$ = $1;yy.setClickEvent($1, $3, $4);yy.setLink($1,$2);}
+
+    | click href                            {$$ = $1;yy.setLink($1, $2);}
+    ;
+
+clickStatementDebug
+    : click callbackname                    {$$=$1 + ' ' + $2;}
+    | click callbackname href               {$$=$1 + ' ' + $2 + ' ' + $3;}
+
+    | click callbackname callbackargs       {$$=$1 + ' ' + $2 + ' ' + $3;}
+    | click callbackname callbackargs href  {$$=$1 + ' ' + $2 + ' ' + $3 + ' ' + $4;}
+
+    | click href callbackname               {$$=$1 + ' ' + $2 + ' ' + $3;}
+    | click href callbackname callbackargs  {$$=$1 + ' ' + $2 + ' ' + $3 + ' ' + $4;}
+
+    | click href                            {$$=$1 + ' ' + $2;}
+    ;%%
diff --git a/src/diagrams/gantt/parser/gantt.js b/src/diagrams/gantt/parser/gantt.js
index c72af3eb9e..94ca056c52 100644
--- a/src/diagrams/gantt/parser/gantt.js
+++ b/src/diagrams/gantt/parser/gantt.js
@@ -72,12 +72,12 @@
   }
 */
 var parser = (function(){
-var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[6,8,10,11,12,13,14,15],$V1=[1,9],$V2=[1,10],$V3=[1,11],$V4=[1,12],$V5=[1,13];
+var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[6,8,10,11,12,13,14,16,18],$V1=[1,9],$V2=[1,10],$V3=[1,11],$V4=[1,12],$V5=[1,14],$V6=[1,15];
 var parser = {trace: function trace () { },
 yy: {},
-symbols_: {"error":2,"start":3,"gantt":4,"document":5,"EOF":6,"line":7,"SPACE":8,"statement":9,"NL":10,"dateFormat":11,"axisFormat":12,"title":13,"section":14,"taskTxt":15,"taskData":16,"$accept":0,"$end":1},
-terminals_: {2:"error",4:"gantt",6:"EOF",8:"SPACE",10:"NL",11:"dateFormat",12:"axisFormat",13:"title",14:"section",15:"taskTxt",16:"taskData"},
-productions_: [0,[3,3],[5,0],[5,2],[7,2],[7,1],[7,1],[7,1],[9,1],[9,1],[9,1],[9,1],[9,2]],
+symbols_: {"error":2,"start":3,"gantt":4,"document":5,"EOF":6,"line":7,"SPACE":8,"statement":9,"NL":10,"dateFormat":11,"axisFormat":12,"title":13,"section":14,"clickStatement":15,"taskTxt":16,"taskData":17,"click":18,"callbackname":19,"callbackargs":20,"href":21,"clickStatementDebug":22,"$accept":0,"$end":1},
+terminals_: {2:"error",4:"gantt",6:"EOF",8:"SPACE",10:"NL",11:"dateFormat",12:"axisFormat",13:"title",14:"section",16:"taskTxt",17:"taskData",18:"click",19:"callbackname",20:"callbackargs",21:"href"},
+productions_: [0,[3,3],[5,0],[5,2],[7,2],[7,1],[7,1],[7,1],[9,1],[9,1],[9,1],[9,1],[9,1],[9,2],[15,2],[15,3],[15,3],[15,4],[15,3],[15,4],[15,2],[22,2],[22,3],[22,3],[22,4],[22,3],[22,4],[22,2]],
 performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
 /* this == yyval */
 
@@ -110,12 +110,42 @@ break;
 case 11:
 yy.addSection($$[$0].substr(8));this.$=$$[$0].substr(8);
 break;
-case 12:
+case 13:
 yy.addTask($$[$0-1],$$[$0]);this.$='task';
 break;
+case 14:
+this.$ = $$[$0-1];yy.setClickEvent($$[$0-1], $$[$0], null);
+break;
+case 15:
+this.$ = $$[$0-2];yy.setClickEvent($$[$0-2], $$[$0-1], $$[$0]);
+break;
+case 16:
+this.$ = $$[$0-2];yy.setClickEvent($$[$0-2], $$[$0-1], null);yy.setLink($$[$0-2],$$[$0]);
+break;
+case 17:
+this.$ = $$[$0-3];yy.setClickEvent($$[$0-3], $$[$0-2], $$[$0-1]);yy.setLink($$[$0-3],$$[$0]);
+break;
+case 18:
+this.$ = $$[$0-2];yy.setClickEvent($$[$0-2], $$[$0], null);yy.setLink($$[$0-2],$$[$0-1]);
+break;
+case 19:
+this.$ = $$[$0-3];yy.setClickEvent($$[$0-3], $$[$0-1], $$[$0]);yy.setLink($$[$0-3],$$[$0-2]);
+break;
+case 20:
+this.$ = $$[$0-1];yy.setLink($$[$0-1], $$[$0]);
+break;
+case 21: case 27:
+this.$=$$[$0-1] + ' ' + $$[$0];
+break;
+case 22: case 23: case 25:
+this.$=$$[$0-2] + ' ' + $$[$0-1] + ' ' + $$[$0];
+break;
+case 24: case 26:
+this.$=$$[$0-3] + ' ' + $$[$0-2] + ' ' + $$[$0-1] + ' ' + $$[$0];
+break;
 }
 },
-table: [{3:1,4:[1,2]},{1:[3]},o($V0,[2,2],{5:3}),{6:[1,4],7:5,8:[1,6],9:7,10:[1,8],11:$V1,12:$V2,13:$V3,14:$V4,15:$V5},o($V0,[2,7],{1:[2,1]}),o($V0,[2,3]),{9:14,11:$V1,12:$V2,13:$V3,14:$V4,15:$V5},o($V0,[2,5]),o($V0,[2,6]),o($V0,[2,8]),o($V0,[2,9]),o($V0,[2,10]),o($V0,[2,11]),{16:[1,15]},o($V0,[2,4]),o($V0,[2,12])],
+table: [{3:1,4:[1,2]},{1:[3]},o($V0,[2,2],{5:3}),{6:[1,4],7:5,8:[1,6],9:7,10:[1,8],11:$V1,12:$V2,13:$V3,14:$V4,15:13,16:$V5,18:$V6},o($V0,[2,7],{1:[2,1]}),o($V0,[2,3]),{9:16,11:$V1,12:$V2,13:$V3,14:$V4,15:13,16:$V5,18:$V6},o($V0,[2,5]),o($V0,[2,6]),o($V0,[2,8]),o($V0,[2,9]),o($V0,[2,10]),o($V0,[2,11]),o($V0,[2,12]),{17:[1,17]},{19:[1,18],21:[1,19]},o($V0,[2,4]),o($V0,[2,13]),o($V0,[2,14],{20:[1,20],21:[1,21]}),o($V0,[2,20],{19:[1,22]}),o($V0,[2,15],{21:[1,23]}),o($V0,[2,16]),o($V0,[2,18],{20:[1,24]}),o($V0,[2,17]),o($V0,[2,19])],
 defaultActions: {},
 parseError: function parseError (str, hash) {
     if (hash.recoverable) {
@@ -593,8 +623,6 @@ stateStackSize:function stateStackSize() {
     },
 options: {"case-insensitive":true},
 performAction: function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {
-	// Pre-lexer code can go here
-
 var YYSTATE=YY_START;
 switch($avoiding_name_collisions) {
 case 0:return 10;
@@ -605,32 +633,56 @@ case 2:/* skip comments */
 break;
 case 3:/* skip comments */
 break;
-case 4:return 4;
+case 4:this.begin("href");
+break;
+case 5:this.popState();
+break;
+case 6:return 21;
+break;
+case 7:this.begin("callbackname");
+break;
+case 8:this.popState();
+break;
+case 9:this.popState(); this.begin("callbackargs");
+break;
+case 10:return 19;
+break;
+case 11:this.popState();
+break;
+case 12:return 20;
+break;
+case 13:this.begin("click");
+break;
+case 14:this.popState();
+break;
+case 15:return 18;
+break;
+case 16:return 4;
 break;
-case 5:return 11;
+case 17:return 11;
 break;
-case 6:return 12;
+case 18:return 12;
 break;
-case 7:return 'date';
+case 19:return 'date';
 break;
-case 8:return 13;
+case 20:return 13;
 break;
-case 9:return 14;
+case 21:return 14;
 break;
-case 10:return 15;
+case 22:return 16;
 break;
-case 11:return 16;
+case 23:return 17;
 break;
-case 12:return ':';
+case 24:return ':';
 break;
-case 13:return 6;
+case 25:return 6;
 break;
-case 14:return 'INVALID';
+case 26:return 'INVALID';
 break;
 }
 },
-rules: [/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:gantt\b)/i,/^(?:dateFormat\s[^#\n;]+)/i,/^(?:axisFormat\s[^#\n;]+)/i,/^(?:\d\d\d\d-\d\d-\d\d\b)/i,/^(?:title\s[^#\n;]+)/i,/^(?:section\s[^#:\n;]+)/i,/^(?:[^#:\n;]+)/i,/^(?::[^#\n;]+)/i,/^(?::)/i,/^(?:$)/i,/^(?:.)/i],
-conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],"inclusive":true}}
+rules: [/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:href[\s]+["])/i,/^(?:["])/i,/^(?:[^"]*)/i,/^(?:call[\s]+)/i,/^(?:\([\s]*\))/i,/^(?:\()/i,/^(?:[^(]*)/i,/^(?:\))/i,/^(?:[^)]*)/i,/^(?:click[\s]+)/i,/^(?:[\s\n])/i,/^(?:[^\s\n]*)/i,/^(?:gantt\b)/i,/^(?:dateFormat\s[^#\n;]+)/i,/^(?:axisFormat\s[^#\n;]+)/i,/^(?:\d\d\d\d-\d\d-\d\d\b)/i,/^(?:title\s[^#\n;]+)/i,/^(?:section\s[^#:\n;]+)/i,/^(?:[^#:\n;]+)/i,/^(?::[^#\n;]+)/i,/^(?::)/i,/^(?:$)/i,/^(?:.)/i],
+conditions: {"callbackargs":{"rules":[11,12],"inclusive":false},"callbackname":{"rules":[8,9,10],"inclusive":false},"href":{"rules":[5,6],"inclusive":false},"click":{"rules":[14,15],"inclusive":false},"INITIAL":{"rules":[0,1,2,3,4,7,13,16,17,18,19,20,21,22,23,24,25,26],"inclusive":true}}
 });
 return lexer;
 })();
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index ea122371d2..948ef18898 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -447,6 +447,7 @@ const render = function (id, txt, cb, container) {
 
   if (typeof cb !== 'undefined') {
     cb(svgCode, flowDb.bindFunctions)
+    cb(svgCode, ganttDb.bindFunctions)
   } else {
     logger.warn('CB = undefined!')
   }
diff --git a/src/themes/dark/index.scss b/src/themes/dark/index.scss
index 579d871b2f..c74d9ff52d 100644
--- a/src/themes/dark/index.scss
+++ b/src/themes/dark/index.scss
@@ -43,6 +43,7 @@ $taskBkgColor: $mainBkg;
 $taskTextColor: $darkTextColor;
 $taskTextLightColor: $mainContrastColor;
 $taskTextOutsideColor: $taskTextLightColor;
+$taskTextClickableColor: #003163;
 $activeTaskBorderColor: rgba(255, 255, 255, 0.5);
 $activeTaskBkgColor: #81B1DB;
 $gridColor: $mainContrastColor;
diff --git a/src/themes/default/index.scss b/src/themes/default/index.scss
index 2718eb3efe..8bb0fd4823 100644
--- a/src/themes/default/index.scss
+++ b/src/themes/default/index.scss
@@ -42,6 +42,7 @@ $taskTextLightColor: white;
 $taskTextColor: $taskTextLightColor;
 $taskTextDarkColor: black;
 $taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
 $activeTaskBorderColor: #534fbc;
 $activeTaskBkgColor: #bfc7ff;
 $gridColor: lightgrey;
diff --git a/src/themes/forest/index.scss b/src/themes/forest/index.scss
index c4a7122971..4d6760848b 100644
--- a/src/themes/forest/index.scss
+++ b/src/themes/forest/index.scss
@@ -43,6 +43,7 @@ $taskTextLightColor: white;
 $taskTextColor: $taskTextLightColor;
 $taskTextDarkColor: black;
 $taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
 $activeTaskBorderColor: $taskBorderColor;
 $activeTaskBkgColor: $mainBkg;
 $gridColor: lightgrey;
diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss
index 6793135ec8..04bf450663 100644
--- a/src/themes/gantt.scss
+++ b/src/themes/gantt.scss
@@ -66,7 +66,6 @@
 
 /* Task styling */
 
-
 /* Default task */
 
 .task {
@@ -90,6 +89,27 @@
   font-size: 11px;
 }
 
+/* Special case clickable */
+.task.clickable {
+  cursor: pointer;
+}
+.taskText.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+.taskTextOutsideLeft.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
+
+.taskTextOutsideRight.clickable {
+  cursor: pointer;
+  fill: $taskTextClickableColor !important;
+  font-weight: bold;
+}
 
 /* Specific task settings for the sections*/
 
@@ -109,7 +129,7 @@
 }
 
 .taskTextOutside0,
-.taskTextOutside2,
+.taskTextOutside2
 {
   fill: $taskTextOutsideColor;
 }
diff --git a/src/themes/neutral/index.scss b/src/themes/neutral/index.scss
index ea41b9b8c2..7e12c5a0bd 100644
--- a/src/themes/neutral/index.scss
+++ b/src/themes/neutral/index.scss
@@ -47,6 +47,7 @@ $taskTextLightColor: white;
 $taskTextColor: $taskTextLightColor;
 $taskTextDarkColor: $text;
 $taskTextOutsideColor: $taskTextDarkColor;
+$taskTextClickableColor: #003163;
 $activeTaskBorderColor: $taskBorderColor;
 $activeTaskBkgColor: $mainBkg;
 $gridColor: lighten($border1, 30%);
diff --git a/yarn.lock b/yarn.lock
index 8e373dc641..69873856fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1589,6 +1589,14 @@ callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
 
+camel-case@3.0.x:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -1737,6 +1745,13 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+clean-css@4.2.x, clean-css@^4.1.6:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
+  integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==
+  dependencies:
+    source-map "~0.6.0"
+
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -1863,7 +1878,7 @@ commander@2, commander@^2.19.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@~2.17.1:
+commander@2.17.x, commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
@@ -2056,6 +2071,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+css-b64-images@~0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/css-b64-images/-/css-b64-images-0.2.5.tgz#42005d83204b2b4a5d93b6b1a5644133b5927a02"
+  integrity sha1-QgBdgyBLK0pdk7axpWRBM7WSegI=
+
 css-loader@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.0.1.tgz#2e51a15449ab3f7195b7e1bc00a407460016a3b3"
@@ -3826,7 +3846,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@^1.2.0:
+he@1.2.x, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -3871,6 +3891,19 @@ html-encoding-sniffer@^1.0.2:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-minifier@^3.0.1:
+  version "3.5.21"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+  dependencies:
+    camel-case "3.0.x"
+    clean-css "4.2.x"
+    commander "2.17.x"
+    he "1.2.x"
+    param-case "2.1.x"
+    relateurl "0.2.x"
+    uglify-js "3.4.x"
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -5242,6 +5275,11 @@ loud-rejection@^1.0.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
+lower-case@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
+
 lru-cache@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
@@ -5458,6 +5496,19 @@ mimic-fn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
 
+minify@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/minify/-/minify-4.1.1.tgz#06d7a6faf5c171ac3075b79e5afdbe606c0c1fe5"
+  integrity sha512-D99KM2lBtJbAAAtKkekL5R1rCFQqhx2dMeFl5etybEdTwGjMYvPsWPDH0CSxTXWSmI2Q7Tx7Gx4rRxik5ahgQA==
+  dependencies:
+    clean-css "^4.1.6"
+    css-b64-images "~0.2.5"
+    debug "^4.1.0"
+    html-minifier "^3.0.1"
+    terser "^3.16.1"
+    try-catch "^2.0.0"
+    try-to-catch "^1.0.2"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -5629,6 +5680,13 @@ nice-try@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
 
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
+  dependencies:
+    lower-case "^1.1.1"
+
 node-gyp@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@@ -6071,6 +6129,13 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
+param-case@2.1.x:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
+  dependencies:
+    no-case "^2.2.0"
+
 parse-asn1@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.1.tgz#f6bf293818332bd0dab54efb16087724745e6ca8"
@@ -6750,6 +6815,11 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
+relateurl@0.2.x:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
 remove-bom-buffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz#c2bf1e377520d324f623892e33c10cac2c252b53"
@@ -7268,6 +7338,14 @@ source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.6:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@~0.5.9:
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.10.tgz#2214080bc9d51832511ee2bab96e3c2f9353120c"
+  integrity sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
@@ -7287,7 +7365,7 @@ source-map@^0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -7630,6 +7708,15 @@ terser-webpack-plugin@^1.1.0:
     webpack-sources "^1.1.0"
     worker-farm "^1.5.2"
 
+terser@^3.16.1:
+  version "3.16.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-3.16.1.tgz#5b0dd4fa1ffd0b0b43c2493b2c364fd179160493"
+  integrity sha512-JDJjgleBROeek2iBcSNzOHLKsB/MdDf+E/BOAJ0Tk9r7p9/fVobfv7LMJ/g/k3v9SXdmjZnIlFd5nfn/Rt0Xow==
+  dependencies:
+    commander "~2.17.1"
+    source-map "~0.6.1"
+    source-map-support "~0.5.9"
+
 terser@^3.8.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-3.11.0.tgz#60782893e1f4d6788acc696351f40636d0e37af0"
@@ -7817,6 +7904,16 @@ trim-right@^1.0.1:
   dependencies:
     glob "^7.1.2"
 
+try-catch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/try-catch/-/try-catch-2.0.0.tgz#a491141d597f8b72b46757fe1c47059341a16aed"
+  integrity sha512-RPXpVjsbtWgymwGq5F/OWDFsjEzdvzwHFaMjWWW6f/p6+uk/N7YSKJHQfIfGqITfj8qH4cBqCLMnhKZBaKk7Kg==
+
+try-to-catch@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/try-to-catch/-/try-to-catch-1.1.1.tgz#770162dd13b9a0e55da04db5b7f888956072038a"
+  integrity sha512-ikUlS+/BcImLhNYyIgZcEmq4byc31QpC+46/6Jm5ECWkVFhf8SM2Fp/0pMVXPX6vk45SMCwrP4Taxucne8I0VA==
+
 tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -7847,7 +7944,7 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-uglify-js@^3.1.4:
+uglify-js@3.4.x, uglify-js@^3.1.4:
   version "3.4.9"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
   integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==
@@ -7959,6 +8056,11 @@ upath@^1.0.5:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
   integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==
 
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
+
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"