Mermaid

Mermaid Add-on for Vaadin

View larger

Close

Vaadin-Mermaid is a Javascript UI component add-on for Vaadin 7. It uses the Mermaid Javascript lib to generate Charts via a simple description language. See http://knsv.github.io/mermaid/ for more details on how to generate a Chart.

For the Addon simply pass the description for the Chart and a Component will be rendered. Additionally you can add listener to react on clicks to the Chart.

Sample code

  private static final String DEMO_CHART = "graph LR;\n" +
      "  a(Find elements)-->b{Processed}\n" +
      "  b-->|Yes|c(Leave element)\n" +
      "  b-->|No |d(Transform)\n" +
      "  click b \"http://www.github.com\" \"This is a tooltip for a link\"";

  final MermaidChart component = new MermaidChart(DEMO_CHART);
  component.addStateClickListener(val -> Notification.show("You clicked on id: " + val));

Links

• Issue Tracker
• Source Code

Compatibility