Is there a library for rendering basic flow diagrams in Javascript/CSS?

Question

On a web page I want to dynamically render very basic flow diagrams, i.e. a few boxes joined by lines. Ideally the user could then click on one of these boxes (DIVs?) and be taken to a different page. Resorting to Flash seems like an overkill. Is anyone aware of any client-side (i.e. server agnostic) Javascript or CSS library/technique that may help achieve this?

Answer 1

Does the rendering have to be client side?

If yes, you could try Processing:

http://ejohn.org/blog/processingjs/

If you can do it server side, then Graphviz is a good choice.

http://www.graphviz.org/

Answer 2

This kind of flowchart can be accomplished using CSS, resorting to JavaScript graphing libraries (canvas) might be overkill. You may wish to checkout how some Genealogy sites do this to get a family tree.

Answer 3

Sergio Acosta writes:

Does the rendering have to be client side?

Ideally yes because that means the solution can be applied to any project no matter the server back-end.

(I have edited the question to make this more explicit)

If yes, you could try Processing

Processing looks like it may help achieve what I want, but at the same time it is a very low level library (when compared to some of the JS graphing libraries out there). All the same I will take a look at it.

Ravi Chhabra wrote:

You may wish to checkout how some Genealogy sites do this to get a family tree.

Good point, I had not thought of that. I will take a look around, unfortunately the only online family trees I have seen so far have been put together with Flash.

(I have expanded the question to include CSS in response to this comment)