Directory

← Back

Mermaid

Mermaid Add-on for Vaadin

Author

Contributors

Rating

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));

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

IE can now handle Chart Download. Only Edge (IE > 12) will Download a PNG IE < 12 will download the SVG

Released
2017-07-12
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.7+
Browser
Firefox
Safari
Google Chrome
Internet Explorer
Internet Explorer
Microsoft Edge
Online