Diagram - Hierarchical This example demonstrates an implementation of Hierarchical Diagram.
CEO
CFO
FIN
PUR
CTO
DEV
TST
<p:diagram value="#{diagramHierarchicalView.model}" style="height:600px" styleClass="ui-widget-content" />


/* Demo CSS */
<style type="text/css">
    .ui-diagram-element {	
        width:5em; 
        height:5em;
        line-height:5em;
        text-align: center;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
        border-radius: 5em;
        border: 1px solid #404a4e;
        background-color: #404a4e;
        color: #cccccc;
    }

    .ui-diagram-element:hover {
        background-color: #20282b;
    }
</style>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.