Diagram - FlowChart FlowCharts can be created using label overlays and arrow connectors.
Fight for your dream
Do you meet some trouble?
Do you give up?
Succeed
Fail
<p:diagram value="#{diagramFlowChartView.model}" style="height:600px" 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 transparent;
        background-color: #98AFC7;
        color: #ffffff;
    }

    .ui-diagram-success {
        background-color: #9CB071;
        color: #ffffff;
        border-color: #7ab02c;
    }

    .ui-diagram-fail {
        background-color: #C34A2C;
        color: #ffffff;
    }

    .flow-label {
        font-size: 24px;
        font-weight: bold;
        color: #816A51;
    }
</style>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.