Diagram Component

Diagram is a brand new addition to PrimeFaces. It is a generic component to create elements and connect them visually. Accompanied with a flexible api, callbacks and theming, many diagram types like flowcharts, state machines, uml diagrams, hierarchical plots can be painted easily. Diagram is built on top of jsPlumb library which uses SVG on modern browsers and VML on legacy like IE8.

Overview

API consists of the following core members;

Diagram Model : Backend model of the diagram, everything is defined on the model instead of component attributes. Similar design to PrimeFaces Charts.

: Backend model of the diagram, everything is defined on the model instead of component attributes. Similar design to PrimeFaces Charts. Element : DOM element in the diagram.

: DOM element in the diagram. Connector : Connector type, possible implementations are Bezier, FlowChart, StateMachine and Straight.

: Connector type, possible implementations are Bezier, FlowChart, StateMachine and Straight. EndPoint : Hook to connect an element, location is defined by its anchor.

: Hook to connect an element, location is defined by its anchor. Anchor : Location of the endpoint, these can be static like TOP, BOTTOM or dynamic like CONTINUOUS.

: Location of the endpoint, these can be static like TOP, BOTTOM or dynamic like CONTINUOUS. Overlay : Overlays are used to decorate endpoints and connectors like arrows, labels.

: Overlays are used to decorate endpoints and connectors like arrows, labels. Connection: A connection consists of two endpoints, a connector and overlays.

API is quite flexible, you can define default values like default connector in model and override defaults when making a connection. Theming is easy with CSS and Javascript. Various events like connect, disconnect and connectionChange are provided as well.

Live Demos are available at PrimeFaces Showcase. Diagram will be available in 5.1.8 next week for Elite-PRO users and in 5.2 for community users.