what vaadin components to use for displaying boxes with arrows between them

Vaadin 6 / 7 / 8
1

I want to show some boxes with arrows between them [Image result for diagram boxes arrows connected image]
,
these boxes would be used to show some system components and connections between them (e.g. systemX sending data to systemY, with arrow illustrating direction of data flow).
what Vaadin components could I use? if Vaadin appropriate for this kind of application/UI?

my goals are:

  • show several boxes and arrows
  • neither boxes not arrows need to be “editable” or “draggable”, this will be a set of predefined elements, not a generic diagram editor.
  • change color of a box when some event happens
  • change color or style of an arrow when some event happens (e.g. make it red dotted instead of regular black arrow line to indicate error).
  • show/hide boxes when needed.
  • low priority: arrows should be automatically laid out and graphically connected to boxes defined in some model. e.g. if there are many boxes, arrows would be bent at 90 degrees to go around boxes, etc. this is

so, would Vaadin be a good choice for this kind of UI? what components would you use for this (panel, layout, boxes? what about those arrows connecting boxes?)

2

sample diagram
34522.jpg

3

Sounds like you might want to consider SVG. You can display SVG in an Embedded component, but you mightvwant to use some library as well.

4

Check out e.g. jFreeSVG if you decide to go the svg route.

5

Apache Batik is a solid choice as well.

6

Thank you, Olli! I see both options are for generating and displaying an image, rather than displaying some native html components/div/etc, which I guess makes sense. I will explore those libraries.