Diagram - StateMachine StateMachines can be created using state machine connectors.
Idle
TurnedOn
Activity
<p:diagram value="#{diagramStateMachineView.model}" style="height:700px" styleClass="ui-widget-content" />


/* Demo CSS */
<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>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.