<style type="text/css">
.ui-diagram-element {
width:14em;
height:4em;
line-height:4em;
text-align: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
border-radius: 4px;
border: 1px solid #646D7E;
background-color: #646D7E;
color: #ffffff;
}
.ui-diagram-element:hover {
background-color: #828B9C;
}
.start-node {
width:4em;
border-radius: 6px;
background-color: #000000 !important;
}
.flow-label {
color: #464F60;
font-size: 18px;
font-weight: bold;
}
</style>
<p:diagram value="#{diagramStateMachineView.model}" style="height:700px" styleClass="ui-widget-content" />
@Named("diagramStateMachineView")
@RequestScoped
public class StateMachineView {
private DefaultDiagramModel model;
@PostConstruct
public void init() {
model = new DefaultDiagramModel();
model.setMaxConnections(-1);
StateMachineConnector connector = new StateMachineConnector();
connector.setOrientation(StateMachineConnector.Orientation.ANTICLOCKWISE);
connector.setPaintStyle("{strokeStyle:'#7D7463',lineWidth:3}");
model.setDefaultConnector(connector);
Element start = new Element(null, "15em", "5em");
start.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM));
start.setStyleClass("start-node");
Element idle = new Element("Idle", "10em", "20em");
idle.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP));
idle.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM_RIGHT));
idle.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM_LEFT));
Element turnedOn = new Element("TurnedOn", "10em", "35em");
turnedOn.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP));
turnedOn.addEndPoint(new BlankEndPoint(EndPointAnchor.RIGHT));
turnedOn.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM_RIGHT));
Element activity = new Element("Activity", "45em", "35em");
activity.addEndPoint(new BlankEndPoint(EndPointAnchor.LEFT));
activity.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM_LEFT));
activity.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP));
activity.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP_RIGHT));
activity.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP_LEFT));
model.addElement(start);
model.addElement(idle);
model.addElement(turnedOn);
model.addElement(activity);
model.connect(createConnection(start.getEndPoints().get(0), idle.getEndPoints().get(0), null));
model.connect(createConnection(idle.getEndPoints().get(1), turnedOn.getEndPoints().get(0), "Turn On"));
model.connect(createConnection(turnedOn.getEndPoints().get(0), idle.getEndPoints().get(2), "Turn Off"));
model.connect(createConnection(turnedOn.getEndPoints().get(1), activity.getEndPoints().get(0), null));
model.connect(createConnection(activity.getEndPoints().get(1), turnedOn.getEndPoints().get(2), "Request Turn Off"));
model.connect(createConnection(activity.getEndPoints().get(2), activity.getEndPoints().get(2), "Talk"));
model.connect(createConnection(activity.getEndPoints().get(3), activity.getEndPoints().get(3), "Run"));
model.connect(createConnection(activity.getEndPoints().get(4), activity.getEndPoints().get(4), "Walk"));
}
public DiagramModel getModel() {
return model;
}
private Connection createConnection(EndPoint from, EndPoint to, String label) {
Connection conn = new Connection(from, to);
conn.getOverlays().add(new ArrowOverlay(20, 20, 1, 1));
if(label != null) {
conn.getOverlays().add(new LabelOverlay(label, "flow-label", 0.5));
}
return conn;
}
} 
