VizComponent Add-on

An addon-on for visualising graphs using a Javascript version of Graphviz

View larger

Close

View larger

Close

VizComponent is an UI component add-on for Vaadin 7. It used for displaying graphs rendered using a Javascript translation of the Graphviz package, viz.js. On the server side, the graphs are represented by special Graph class, which provides a hopefully convenient api to modify graphs. The viz.js library is then used in the web-browser to render this graph to an SVG element that is included in the component. The nodes and edges in the SVG are clickable and it is possible to register listeners for clicks server-side. It is also possible to style nodes and edges using CSS in response to clicks.

Features and limitations:

• Supports basic graphs with basic graph, node and edge parameters
• Only polygon and ellipse node shapes and arrow head/arrow tails supported
• Subgraphs are supported to some degree. However, edges to and from subgraph nodes might not give the expected results. It is better to use edges to and from nodes inside the subgraphs instead (see the demo on Github).
• Record-based nodes are not supported, but nodes with HTML content can be used instead (see demo)
• Images in nodes are not supported
• Supports panning and zooming via an externa JS-library

Source code and demos can be found on Github, see sidebar.

Links

• Issue Tracker
• Source Code

Compatibility