Documentation of usage of the mermaidAPI and binding user interaction…

… events

dist/www/index.html

@@ -49,6 +49,9 @@
         $(function () {
             setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
         });
+        var callback = function(){
+            alert('A callback was triggered');
+        }
     </script>
 </head>
 

docs/content/flowchart.md

@@ -290,6 +290,8 @@ graph LR;
 ```
 <aside class="success">The tooltip functionality and the ability to link to urls are available from version 0.5.2.</aside>
 
+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

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.