Diagram is generic component to create visual elements and connect them on a web page. SVG is used on modern browsers and VML on IE 8 and below. Component is highly flexible in terms of api, events and theming.
Documentation<style type="text/css"> .ui-diagram-element { border:0.1em dotted #d4e06b; width:14em; height:4em; line-height:4em; text-align: center; } </style> <p:diagram value="#{diagramBasicView.model}" style="height:400px" styleClass="ui-widget-content" />
@Named("diagramBasicView") @RequestScoped public class BasicView { private DefaultDiagramModel model; @PostConstruct public void init() { model = new DefaultDiagramModel(); model.setMaxConnections(-1); model.setConnectionsDetachable(false); Element elementA = new Element("A", "20em", "6em"); elementA.addEndPoint(new DotEndPoint(EndPointAnchor.BOTTOM)); Element elementB = new Element("B", "10em", "18em"); elementB.addEndPoint(new DotEndPoint(EndPointAnchor.TOP)); Element elementC = new Element("C", "40em", "18em"); elementC.addEndPoint(new DotEndPoint(EndPointAnchor.TOP)); model.addElement(elementA); model.addElement(elementB); model.addElement(elementC); model.connect(new Connection(elementA.getEndPoints().get(0), elementB.getEndPoints().get(0))); model.connect(new Connection(elementA.getEndPoints().get(0), elementC.getEndPoints().get(0))); } public DiagramModel getModel() { return model; } }