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