diff --git a/dist/www/index.html b/dist/www/index.html
index e81d84ce1e..a55309358f 100644
--- a/dist/www/index.html
+++ b/dist/www/index.html
@@ -49,6 +49,9 @@
$(function () {
setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
});
+ var callback = function(){
+ alert('A callback was triggered');
+ }
diff --git a/docs/content/flowchart.md b/docs/content/flowchart.md
index aa3e2e5478..a2ba54f28a 100644
--- a/docs/content/flowchart.md
+++ b/docs/content/flowchart.md
@@ -290,6 +290,8 @@ graph LR;
```
+When integration mermaid using the mermaidAPI #mermaidapi the function that binds the events need to be run when the finished graph has been added to the page. This is described in the [API usage](#api-usage) section.
+
## Styling and classes
### Styling links
diff --git a/docs/content/usage.md b/docs/content/usage.md
index 0e23fb1dbe..bedd3b54ae 100644
--- a/docs/content/usage.md
+++ b/docs/content/usage.md
@@ -153,7 +153,7 @@ could be used. The example just logs the resulting svg to the javascript console
});
</script>
```
-##Sample of API usage together with browserify
+## Sample of API usage together with browserify
```
$ = require('jquery');
mermaidAPI = require('mermaid').mermaidAPI;
@@ -170,6 +170,36 @@ $(function(){
});
```
+### Binding events
+
+Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must
+add those events after the graph has been inserted into the DOM.
+
+The example code below is an extract of wheat mermaid does when using the API. The example show how it is possible to
+bind events to a svg when using the API for rendering.
+
+```
+ var insertSvg = function(svgCode, bindFunctions){
+ element.innerHTML = svgCode;
+ if(typeof callback !== 'undefined'){
+ callback(id);
+ }
+ bindFunctions(element);
+ };
+
+ var id = 'theGraph';
+
+
+ mermaidAPI.render(id,txt,insertSvg, element);
+```
+
+1. The graph is generated using the render call.
+2. After generation the render function calls the provided callback function, in this case its called insertSvg.
+3. The callback function is called with two parameters, the svg code of the generated graph and a function. This
+function binds events to the svg **after** it is inserted into the DOM.
+4. Insert the svg code into the DOM for presentation
+5. Call the binding function that bainds the events
+
## Example of a marked renderer
This is the renderer used for transforming the documentation from markdown to html with mermaid diagrams in the html.