Embedding Graphviz in HTML Pages

Original idea by Yi Wang

A screenshot is worth a thousand words:

Serving

A simple web-service was written in Haskell, which invokes Graphviz and returns a base64-encoded image upon a POST request.

Rendering

Dynamic rendering can be done with simple AJAX code

    var d = $(dot_source_element).val();
    $.post(graphviz_server_path, d, function(data) {
      $(output_element).html('<img src=\"data:image/png;base64,' + data + '\" />');
    });

Things that are missing

• Caching
• Proper error handling

Set up guide

1. Download Haskell platform (or obtain Haskell in any other way) and update the repository information:

   cabal update

2. Make sure you have Graphviz installed

3. Install scotty using cabal:

   cabal install scotty
   ```
   
   

4. Check out the source code to your machine and build it:

   git clone git://github.com/co-dan/graphviz-render.git
   cd graphviz-render
   cabal build
   

Then you can run the graphviz-render binary and you'll get a server running on port 3000

5. Play around with test.html and test2.html.