The story of this project

I work as a software engineer in an italian company (yes, I'm italian and my code is better than my english, so, if you find anything wrong in my writing, please report the error) and we're currently developing a platform for building business processes graphically by linking functional blocks that we call nodes. A business process is then represented on this platform as a directed graph of nodes and edges.
For monitoring purposes we use a separate web application and we thought that it would be great to have the processes represented graphically in html pages.

This task has been (correctly) considered "low priority" for our job, but some brainstorming about it was already been done and some discussions arised, so I could not resist the challenge and I started doing some tests at home.

As the first tests succeeded, I started thinking about a general library for representing this kind of graphs on html pages and then decided to start an open source project on Sourceforge.

The basic idea of the project is to draw connectors between nodes using a composition of horizontal and vertical straight segments, and this is obviously because HTML does not provide a way to draw lines or curves, so the only possible way is to use HTML elements "improperly".

It is easy to realize that hand writing the HTML code to draw the connectors is neither simple nor fast and, since my work consists in "ease up the other's work" by building frameworks, the natural choice in this case is a Javascript library that automatically draws the connectors given the start and the end blocks.

A colleague of mine (many thanks to him) suggested to use the borders of a table to draw 3 segments and this idea can be easily extended to draw a chain of any number of segments. Meanwhile, I was thinking about using thin div elements to draw the segments and then position them to build the "chain".

The table strategy seemed to me to be more elegant, but after some test, I experienced the first problem with it: Microsoft Internet Explorer (ie for short) and Mozilla Firefox behave in slightly different ways when rendering tables with forced dimensions, the first considers the border dimension as part of the total, the latter does not and sometimes the segments result separated by 1 pixel.

Another problem is that the tables are composed by many HTML elements (table, tr, td) and this requires more javascript code to be written.

In conclusion, I decided to use the "div" strategy.

In order to minimize the work for the user that writes html pages with graphs, I choosed to use a "declarative strategy", i.e.: rather than ask the user to write javascript code to create the graph, I thought it would be great if he can simply declare that a html element is a node or a connector, or any other kind object involved in the graph.

So, I decided to rely on css classes for this task in order to keep the document a valid html page and also ease up the definition of objects layout.