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

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dAlarmBar               [shape=box,         label="NotificationBar.qml\nRectangle",                 fontsize="30pt"];
    dAlarmButtonRow         [shape=box,         label="AlarmButtonRow.qml\nItem",                       fontsize="30pt"];
    dMuteButton             [shape=box,         label="MuteButton.qml\nTouchRect.qml",                  fontsize="30pt"];
    dAlarmList              [shape=box,         label="IconButton.qml\nTouchRect.qml",                  fontsize="30pt"];
    dMaxButton              [shape=box,         label="ArrowButton.qml\nTouchRect.qml",                 fontsize="30pt"];
    dTimeText               [shape=box,         label="TimeText.qml\nvAlarmStatus.alarm_MuteTimeout",   fontsize="30pt"];

    // screenshots
    iNotificationBar        [shape=none,    label="",                   image="images/notificationBar.png",         fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmID                [shape=none,    label="",                   image="images/alarmID.png",                 fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmText              [shape=none,    label="",                   image="images/alarmText.png",               fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmButtons           [shape=none,    label="",                   image="images/alarmButtonRow.png",          fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmList              [shape=none,    label="",                   image="images/alarmList.png",               fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMaxButton              [shape=none,    label="",                   image="images/maxButton.png",               fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMuteButtonSilenced     [shape=none,    label="",                   image="images/muteButtonSilenced.png",      fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMuteTimeText           [shape=none,    label="",                   image="images/muteTimeText.png",            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMute                   [shape=none,    label="",                   image="images/mute.png",                    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iHour                   [shape=none,    label="",                   image="images/hour.png",                    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iMinute                 [shape=none,    label="",                   image="images/minute.png",                  fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iColon                  [shape=none,    label="",                   image="images/colon.png",                   fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    // qml types
    qAlarmID            [shape=ellipse, label="Text\nvAlarmStatus.alarm_AlarmID",           fontsize="30pt"];
    qAlarmText          [shape=ellipse, label="Text\nvAlarmStatus.title",                   fontsize="30pt"];
    qHourText           [shape=ellipse, label="Text\nid : _hourText",                       fontsize="30pt"];
    qMinuteText         [shape=ellipse, label="Text\nid : _minuteText",                     fontsize="30pt"];
    qColonText          [shape=ellipse, label="Text\nid : _timeSeparator",                  fontsize="30pt"];
    qSecondsText        [shape=ellipse, label="Text\nid : _secondText\nvisible = 'false'",  fontsize="30pt"];
    qMuteImage          [shape=ellipse, label="Image\nvAlarmStatus.alarm_Flag_alarmsSilenced ?\n'qrc:/images/iBellOff' :\n'qrc:/images/iBellOn'",   fontsize="30pt"];
    qAlarmListImage     [shape=ellipse, label="Image\n'qrc:/images/iList' ",                fontsize="30pt"];
    qMaxImage           [shape=ellipse, label="Image\n'qrc:/images/iChevronUp' ",           fontsize="30pt"];

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

        dAlarmBar -> iNotificationBar
        iNotificationBar -> qAlarmID -> iAlarmID
        iNotificationBar -> qAlarmText -> iAlarmText
        iNotificationBar -> dAlarmButtonRow -> iAlarmButtons
        iAlarmButtons -> dMuteButton -> iMuteButtonSilenced
        iMuteButtonSilenced -> dTimeText -> iMuteTimeText
        iMuteTimeText -> qHourText -> iHour
        iMuteTimeText -> qColonText -> iColon
        iMuteTimeText -> qMinuteText -> iMinute
        iMuteTimeText -> qSecondsText
        iMuteButtonSilenced -> qMuteImage -> iMute

        iAlarmButtons -> dAlarmList -> iAlarmList -> qAlarmListImage

        iAlarmButtons -> dMaxButton -> iMaxButton -> qMaxImage
    }
}