<status>Done with adding all I wanted to add -- have fun with GraphvizFiddle tool.</status>
<EDIT>see GraphvizFiddle Share blog posting on new "Share" button</EDIT>
GraphvizFiddle draws DOT language directed graphs, see DOT User's Guide (on http://graphviz.org/). It is an online code editor and playground for Graphviz dot layout tool.
The tool is online, the initial "viz.js" download of 1.3MB takes a little time:
(when I will figure out how to serve viz.js.gz only 305KB need to be transfered)
This tool is motivated by similar fiddle tools I use:
Below you see a screenshot of GraphvizFiddle tool.
On the top you have links to DOT language User's guide and to this blog posting.
In "DOT input & control" area you can select Graphviz output format (default svg),
initiate drawing of graph, Save and load files from and to the input area, as well as
to just click some sample and edit DOT input file.
In "[SVG] output" area the graph will be layed out and drawn.
And there is Save option for exporting the generated data (eg. just the SVG data created by Graphviz tool).
The rest of this posting is structured as follows:
Scalability of online Graphviz tools
The "standard" way of using Graphviz drawing tools is by installing the Graphviz distribution locally.
A DOT language file can be processed by a public webdot server, and graphviz.org even provides such a server. A sample DOT input file is
If you click on
it will get drawn by
Since input file has to be provided on a public web server, this is no real basis for an online tool. Do "View Page Source" to see how the webdot server gets invoked.
On Graphviz resources page I found another online tool, Graphviz workspace. That does use a server service for doing the layout, too.
Graphviz documentation explicitely warns for running a public webdot server because of insufficient support to limit the load:
Some argument applies to "GViz Helper Tool" and "Graphviz workspace".
Now if really many users at same time or some evildoers access a webdot server it may become unusable quickly. Therefore server-side Graphviz solutions are not scalable.
GraphvizFiddle does the whole processing client-side, therefore it is a scalable solution, and I think the first scalable solution that does not require installation.
Basic functionality is to draw graphs specified in input area. After drawing "Draw" button gets greyed out until input changed. No automatic drawing, you have to click on "Draw".
The left selection box allows to specify the output format, "svg" being the default and only fromat visible in browsers.
In order for GraphvizFiddle to be a complete solution at least Load functionality had to be added (by the "Choose File" or "Browse" buttons). Things get difficult with "Save" button. The only portable solution across browsers is to make use of "data:text/plain;charset=utf-8;,..." protocol trick and window.open(). Then browser "Save as" functionality allows to just save the data ("Save" button is available on input as well as output area). Internet Explorer disables windows.open() with "data:..." for security reasons -- but hey, you should use a different browser anyway ;-)
Graphviz version and features
As stated in my previous Graphviz / viz.js posting I still am not able to build viz.js myself. Therefore I just use "http://mdaines.github.io/viz.js/viz.js" (really a local copy of that on my website to make sure that GraphvizFiddle tool is not affected on any bad changes on github version). The Graphviz News page lists lots of versions and so the valid questions is what Graphviz version viz.js does provide. The answer to that question was found surprisingly easy by doing a SVG drawing and clicking on output area "Save" button. The SVG shown just states graphviz version in 2nd line ouf output:
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
<!-- Title: minimal_nonplanar_graphs Pages: 1 -->
The features are limited of cours
The features are limited of course, only dot layout tool is available, and only 7 textual output formats are available (the "svg" one resulting in graphical display in browsers, see http://caniuse.com/svg for detailed browser version support).
Six of the provided 10 samples are from Graphviz Gallery. I did add a comment line to 5 of them. If you just delete the comment start characters ("//") and click on "Draw" you will see some effect without needing to have any knowledge of DOT language.
I did think quite some time what should be the "initial" demo for GraphvizFiddle. Since the tool is on (nice) graph layout definitely planarity is a topic, and so I chose to display the two minimal non-planar graphs and demonstrated the cluster feature of Graphviz. In additon "tooltip" and "URL" are used to demonstrate what you can do to make Graphviz layouts interactive.
The second sample "scalable" is just a graphical representation of what I said in section Scalability of online Graphviz tools.
I did create "number" sample while fixing APAR IC92083 " DATAPOWER FAILS TO PROCESS SOME VALID JSON NUMBERS IN SCIENTIFICNOTATION". I wrote a generator that created 98282 json numbers of 1<=length<=10 from that graph which is now part of DataPower 24x7 testing.
The fourth sample generates a really big output -- no problem with a scalable output format like SVG (// complete f(x)=x² mod 221 graph for Pollard's rho method).
The samples should allow you to have fun with the tool even without knowing the details of DOT language, and to be a starting point for your own experiments.
Web browser support
As always I did test my solution with all big5 browsers, with these versions:
I do the Windows testing in Virtual_Client_for_Linux_Windows_7-KVM.
Theses are the issues I did identify for GraphvizFiddle tool:
Linux Opera always raises warning
"dot does not support the aspect attribute for disconnected graphs or graphs with clusters"
messing up the whole drawing display -- but the layout is done correctly below that big warning.
Windows 7 Firefox sometimes crashed while running viz.js in order to draw the graph. Starting Firefox in safe mode resolved that issue. Since save mode resolved the issue, it seems to be a problem with my Linux Firefox installation and not a general Firefox/viz.js issue.
JSLint and W3C Markup Validation service
Hermann<myXsltBlog/> <myXsltTweets/> <myCE/> <myFrameless/>