← Back

VizComponent Add-on

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




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.


(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.


The graph api on the server side supports a subset of the dot-language:

  • Only polygon and ellipse node shapes and arrow head/arrow tails are supported
  • Subgraphs are not supported
  • Record-based nodes are not supported. However, one can use nodes with HTML content instead. See the demos.
  • Only the tooltip given by the node id is supported.
  • Images in nodes is not supported
Apache License 2.0


Vaadin 7.5+
Vaadin 7.6+ in 1.0
Vaadin 8.0+ in 2.0
Google Chrome

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.