Updated 18-oct-2008: There is a great solution in Flex which I have used for this and this projects.

Conclusion

The problem of representing a graph on the web is not a solved one. On the desktop application side there are lots of tools which can handle large graphs with nice visualization but on a web page the choices are limited. For the given problem of representing a set of nodes connected through lines in order to illustrate the elements of an application I have tried the following:

  • html representation using ul and li’s. This approach is very simple to realize but can be used for very simple representations only. It will probably look ok in most browsers if the CSS is done ok.
  • plain image representation. This approach can offer the best visual results and will also look ok on all browsers which support images but it’s completely static.
  • java applet representation. This approach was the most flexible but required a specialized applet. It also is plugin dependent and the applet technology is rather questioned at the moment in terms of viability. The technology is the same as 3-4 years ago on this subject.
  • dojo.gfx representation. This surely the newest and trendy choice but it’s not yet mature enough and also requires specialized coding. It will surely advance a lot in the future as the demand will grow more and more as applications leave the desktop to the browser.

What I left out:

  • flash. I know nothing of flash. All I know is that is proprietary and you need a windows environment to code it so this is why I avoided it. Feel free to tell me if there is a flash solution which could have solved my problem instantly.

Comments:

Phil Gooch -

Hi there I wrote an algorithm for rendering an in-memory tree to a graph using pure HTML and CSS - the results aren’t too bad, give me your email address and I’ll send you some examples. Regards Phil