digraph HeaderBar {
    bgcolor=lightgray
    margin=50
    ordering=out; 

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dTopLevelComponent      [shape=box,     label="HeaderBar.qml\nRectangle",               fontsize="30pt"];
    dMainMenu               [shape=box,     label="MainMenu.qml\nRectangle",                fontsize="30pt"];
    dWifiButton             [shape=box,     label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dCloudSyncButton        [shape=box,     label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dBlueToothButton        [shape=box,     label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dSettingsButton         [shape=box,     label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dPrescriptionButton     [shape=box,     label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dInformationButton      [shape=box,     label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dStorageButton          [shape=box,     label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dDelegateTouchRect      [shape=box,     label="TouchRect.qml\nRectangle",               fontsize="30pt"];

    // screenshots
    iHeaderBar      [shape=none,    label="",                       image="images/HeaderBar.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iDateTime       [shape=none,    label="",                       image="images/DateTime.png",        fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iDateText       [shape=none,    label="",                       image="images/DateText.png",        fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTimeText       [shape=none,    label="",                       image="images/TimeText.png",        fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMainMenu       [shape=none,    label="",                       image="images/MainMenu.png",        fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iHighlight      [shape=none,    label="",                       image="images/Highlight.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iButtonRow      [shape=none,    label="",                       image="images/ButtonRow.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iWifi           [shape=none,    label="",                       image="images/Wifi.png",            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iSettings       [shape=none,    label="",                       image="images/Settings.png",        fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iPrescription   [shape=none,    label="",                       image="images/Prescription.png",    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iBluetooth      [shape=none,    label="",                       image="images/Bluetooth.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iCloudSync      [shape=none,    label="",                       image="images/CloudSync.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iInformation    [shape=none,    label="",                       image="images/Information.png",     fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iStorage        [shape=none,    label="",                       image="images/Storage.png",         fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMenuHighlight  [shape=none,    label="",                       image="images/menuHighlight.png",   fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMenuDelegate   [shape=none,    label="",                       image="images/menuDelegate.png",    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iDelegateItem   [shape=none,    label="",                       image="images/delegateItem.png",    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    // qml types
    qDateTimeItem       [shape=ellipse, label="Item\nid: _dateTimeItem",        fontsize="30pt"];
    qDateTimeColumn     [shape=ellipse, label="Column",                         fontsize="30pt"];
    qTimeText           [shape=ellipse, label="Text\nvDateTime.time",           fontsize="30pt"];
    qDateText           [shape=ellipse, label="Text\nvDateTime.date",           fontsize="30pt"];
    qButtonRow          [shape=ellipse, label="ButtonRow",                      fontsize="30pt"];
    qWifiButton         [shape=ellipse, label="Image",                          fontsize="30pt"];
    qCloudSyncButton    [shape=ellipse, label="Image",                          fontsize="30pt"];
    qBlueToothButton    [shape=ellipse, label="Image",                          fontsize="30pt"];
    qSettingsButton     [shape=ellipse, label="Image",                          fontsize="30pt"];
    qPrescriptionButton [shape=ellipse, label="Image",                          fontsize="30pt"];
    qInformationButton  [shape=ellipse, label="Image",                          fontsize="30pt"];
    qStorageButton      [shape=ellipse, label="Image",                          fontsize="30pt"];
    qMenuRow            [shape=ellipse, label="ListView",                       fontsize="30pt"];
    qMenuHighlight      [shape=ellipse, label="Rectangle\nid: _highlightRectangle", fontsize="30pt"];
    qHighlight          [shape=ellipse, label="Rectangle\nid : _highlightedItem",fontsize="30pt"];
    qMenuDeligate       [shape=ellipse, label="Rectangle\nid: _delegateControl", fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one  {
        label="Main Component"
        fontsize="30pt"
        labeljust=l

        dTopLevelComponent -> iHeaderBar -> qDateTimeItem -> iDateTime -> qDateTimeColumn;
        qDateTimeColumn -> qTimeText -> iTimeText;
        qDateTimeColumn -> qDateText -> iDateText;

        iHeaderBar -> dMainMenu -> iMainMenu
        iMainMenu -> qMenuRow
        qMenuRow -> qMenuHighlight -> iMenuHighlight -> qHighlight -> iHighlight
        qMenuRow -> qMenuDeligate -> iMenuDelegate -> dDelegateTouchRect -> iDelegateItem

        iHeaderBar -> qButtonRow -> iButtonRow
        iButtonRow -> dPrescriptionButton -> iPrescription -> qPrescriptionButton
        iButtonRow -> dWifiButton -> iWifi -> qWifiButton
        iButtonRow -> dBlueToothButton -> iBluetooth -> qBlueToothButton
        iButtonRow -> dCloudSyncButton -> iCloudSync -> qCloudSyncButton
        iButtonRow -> dStorageButton ->iStorage -> qStorageButton
        iButtonRow -> dSettingsButton -> iSettings -> qSettingsButton
        iButtonRow -> dInformationButton -> iInformation -> qInformationButton
    }
}