Represent Connected Graph on Container.

Hi guys,

I am writing because I am working on an application based on Vaadin that define some workflows and let the user to execute them (similar to Activiti).
I have a requirement where we need to represent a user defined workflow graphically (something like jBPM designer does).
I was taking a look to graphviz library and we did some poc’s and the result is cool, but we need something more complete and less manual.

Basically we need to draw a direct conected graph.

Does anyone know a library/widget to do something like that? How can I do to integrate with Vaadin?
Anyone that can throw me some of light on this?

Thanks!. :smiley:

Take a look of this Vaadin based graph component:
Graph Explorer

The component is not public at the moment the technologies behind it are and can be recommended:

All nodes are just divs with absolute positioning. This gives you CSS based themeability and ability to put any HTML to nodes.

Arrows are drawn with
GWT Graphics
. It is an excellent cross-browser vector graphics library.

In Graph Explorer all logic and API is kept on server-side. Even the layout calculation are done there. Client side is just for animations and user interactions. Even though this sounds a bit heavy, it works very well.

Hey Joonas,

Thank you! Nice example! It’s a shame that is not open solution.
BTW I was looking on google code for some libraries and I found these:

Now I have to take a look how can integrate this widgets into vaadin. someone who has worked on this?
Is there any guide that can I follow in order to integrate gwt widgets on Vaadin? (besides of the vaadin book?)

Another think that I have to take into consideration, is a way to layout the nodes on the canvas.
Are there someone who has been working/had experience on this field?


I would use GWT Graphics instead of canvas to do the drawing in an editable DOM and support older IE:s. Also I would probably use just DIV:s to draw elements and let browser do text layout within those DIVs.

For widgets, the book is probably the best source.

GWT Links provides a solution based on :

  • Canvas for the html5 browser compliant (like FF4 Chrome 10…)
  • VML for the old IEs like IE6 or IE7

Try the Live Demo on IE6 or 7 :

Dear Joonas,

I would like to test the Graph Explorer component, but it seems that unfortunately it is still unavailable. I would like to know if you plan to publish it shortly, or I best think in other alternatives for interactive graphs on the browser. Even if the link on the virtuallypreinstalled domain does not work, I must confess that I still have a very good impression of what I can remember about this component from when the demo was available :love:.

Thanks in advance for your answer and your great work.


Up! :slight_smile: