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.
<style>
.ui-diagram-element {
border: 0.1em dotted #d4e06b;
width: 14em;
height: 4em;
line-height: 4em;
text-align: center;
}
</style>
<div class="card">
<p:diagram value="#{diagramBasicView.model}" style="height:400px" styleClass="ui-widget-content"/>
</div>
@Named("diagramBasicView")
@ViewScoped
public class BasicView implements Serializable {
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;
}
}