Goal

When my Solis product manager came to me with a file representing a list of the application functionalities asking me how to present then on the web I naturally started searching for various solutions. The problem: representing a graph (or more simply a tree) to the web. This articles describes the various tests I have done: plain html, java applet, plain image, dojo.gfx.

Plain html

The plain html strategy is the simplest one and I will not go over it in detail as the result is the classical site tree. Either formated with tables, or more recently and recommended, with CSS styled lists it still has a simple look. You can add the dhtml or javascript to collapse it and give him a little bit more looks but it will still remain a plain simple tree with little appeal.

The html code looks something like that and is then styled from css

<ul>
<li>item</li>
...
</ul>

Plain image

If you are searching for something really different then there is no lack of tools to create an image representation of the graph you need to represent. There are however some problems with an image. You have no interactivity whatsoever and you cannot scale to whatever size you want. You can of course create maps and different other tricks but even if this will be probably the final choice it just does not seem the right one in a Web 2.0 age. Here is an attached image created from SVG with inkscape.

Inkscape drawing