Directory

← Back

Viz

A hack to put Graphviz on the web for Vaadin 14

Author

Contributors

Rating

Website

Viz

Viz.js is a hack to put Graphviz on the web. Now you are able to create and render graphs with Graphviz in your Vaadin 14 Project with this custom Add-On.

Documentation

docs.f0rce.de/viz

License

MIT License

Sample code

digraph D {

  node [shape=plaintext fontname="Sans serif" fontsize="8"];

  task_menu [ label=<
   <table border="1" cellborder="0" cellspacing="1">
     <tr><td align="left"><b>Task 1</b></td></tr>
     <tr><td align="left">Choose Menu</td></tr>
     <tr><td align="left"><font color="darkgreen">done</font></td></tr>
   </table>>];

  task_ingredients [ label=<
   <table border="1" cellborder="0" cellspacing="1">
     <tr><td align="left"><b>Task 2</b></td></tr>
     <tr><td align="left">Buy ingredients</td></tr>
     <tr><td align="left"><font color="darkgreen">done</font></td></tr>
   </table>>];

  task_invitation [ label=<
   <table border="1" cellborder="0" cellspacing="1">
     <tr><td align="left"><b>Task 4</b></td></tr>
     <tr><td align="left">Send invitation</td></tr>
     <tr><td align="left"><font color="darkgreen">done</font></td></tr>
   </table>>];

  task_cook [ label=<
   <table border="1" cellborder="0" cellspacing="1">
     <tr><td align="left"><b>Task 5</b></td></tr>
     <tr><td align="left">Cook</td></tr>
     <tr><td align="left"><font color="red">todo</font></td></tr>
   </table>>];

  task_table[ label=<
   <table border="1" cellborder="0" cellspacing="1">
     <tr><td align="left"><b>Task 3</b></td></tr>
     <tr><td align="left">Lay table</td></tr>
     <tr><td align="left"><font color="red">todo</font></td></tr>
   </table>>];

  task_eat[ label=<
   <table border="1" cellborder="0" cellspacing="1">
     <tr><td align="left"><b>Task 6</b></td></tr>
     <tr><td align="left">Eat</td></tr>
     <tr><td align="left"><font color="red">todo</font></td></tr>
   </table>>];


  task_menu        -> task_ingredients;
  task_ingredients -> task_cook;
  task_invitation  -> task_cook;
  task_table       -> task_eat;
  task_cook        -> task_eat;

}
Viz viz = new Viz(); // height: 300px - width: 600px
viz.setFormat(VizFormat.svg); // default
viz.setGraph("digraph H { a -> b }"); // simple dot notation

add(viz);

Compatibility

(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.

Version

v2.1.1 (v2.1.0)

Full Changelog

tl;dr
-- added possibility to get the image uri (base64) of the rendered / displayed graph
--> use "Viz.addImageEncodeListener" to add the listener which contains the uri when needed

due to an problem with the directory (not publishing to maven), I had reupload this version - nothing changed!

Released
2022-01-19
Maturity
STABLE
License
MIT License

Compatibility

Framework
Vaadin 14
Vaadin 14+ in 2.0.0
Browser
Browser Independent

Viz - Vaadin Add-on Directory

A hack to put Graphviz on the web for Vaadin 14 Viz - Vaadin Add-on Directory
![Website](https://img.shields.io/website?down_color=red&down_message=offline&label=documentation&up_color=limegreen&up_message=online&url=https%3A%2F%2Fdocs.f0rce.de%2Fviz) # Viz [Viz.js](https://github.com/mdaines/viz.js/) is a hack to put Graphviz on the web. Now you are able to create and render graphs with Graphviz in **your** Vaadin 14 Project with this custom Add-On. ## Documentation [docs.f0rce.de/viz](https://docs.f0rce.de/viz) ## License [MIT License](https://github.com/F0rce/viz/blob/main/LICENSE)
Online