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

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dNotificationDialogAlarmButtonRow       [shape=box,         label="AlarmButtonRow.qml\nItem",               fontsize="30pt"];
    dNotificationDialogMuteButton           [shape=box,         label="MuteButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dNotificationDialogAlarmList            [shape=box,         label="IconButton.qml\nTouchRect.qml",          fontsize="30pt"];
    dNotificationDialogMinButton            [shape=box,         label="ArrowButton.qml\nTouchRect.qml",         fontsize="30pt"];
    dNotificationDialogTimeText             [shape=box,         label="TimeText.qml\nvAlarmStatus.alarm_MuteTimeout",       fontsize="30pt"];

    // screenshots
    iNotificationDialogHeaderBar            [shape=none,    label="",           image="images/notificationDialogHeaderBar.png",             fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationBarAlarmButtonRow          [shape=none,    label="",           image="images/notificationBarAlarmButtonRow.png",           fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogAlarmList            [shape=none,    label="",           image="images/alarmList.png",                               fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogMinButton            [shape=none,    label="",           image="images/minButton.png",                               fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogMuteButtonSilenced   [shape=none,    label="",           image="images/muteButtonSilenced.png",                      fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogMuteTimeText         [shape=none,    label="",           image="images/muteTimeText.png",                            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogMute                 [shape=none,    label="",           image="images/mute.png",                                    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogHour                 [shape=none,    label="",           image="images/hour.png",                                    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogMinute               [shape=none,    label="",           image="images/minute.png",                                  fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogColon                [shape=none,    label="",           image="images/colon.png",                                   fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogHeaderText           [shape=none,    label="",           image="images/notificationDialogHeaderBarTitleText.png",    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    // qml types
    qNotificationDialogHeaderBar        [shape=ellipse, label="Rectangle\nid : _titleBar",                      fontsize="30pt"];
    qNotificationDialogHourText         [shape=ellipse, label="Text\nid : _hourText",                           fontsize="30pt"];
    qNotificationDialogMinuteText       [shape=ellipse, label="Text\nid : _minuteText",                         fontsize="30pt"];
    qNotificationDialogColonText        [shape=ellipse, label="Text\nid : _timeSeparator",                      fontsize="30pt"];
    qNotificationDialogSecondsText      [shape=ellipse, label="Text\nid : _secondText\nvisible = 'false'",      fontsize="30pt"];
    qNotificationDialogMuteImage        [shape=ellipse, label="Image\nvAlarmStatus.alarm_Flag_alarmsSilenced ?\n'qrc:/images/iBellOff' :\n'qrc:/images/iBellOn'",    fontsize="30pt"];
    qNotificationDialogAlarmListImage   [shape=ellipse, label="Image\n'qrc:/images/iList' ",                    fontsize="30pt"];
    qNotificationDialogMinImage         [shape=ellipse, label="Image\n'qrc:/images/iChevronDown' ",             fontsize="30pt"];
    qNotificationDialogHeaderText       [shape=ellipse, label="Text\nvAlarmStatus.title ",                      fontsize="30pt"];


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

        qNotificationDialogHeaderBar -> iNotificationDialogHeaderBar[color="red"]

        iNotificationDialogHeaderBar -> qNotificationDialogHeaderText -> iNotificationDialogHeaderText

        iNotificationDialogHeaderBar -> dNotificationDialogAlarmButtonRow -> iNotificationBarAlarmButtonRow
        iNotificationBarAlarmButtonRow -> dNotificationDialogMuteButton -> iNotificationDialogMuteButtonSilenced
        iNotificationDialogMuteButtonSilenced -> dNotificationDialogTimeText -> iNotificationDialogMuteTimeText
        iNotificationDialogMuteTimeText -> qNotificationDialogHourText -> iNotificationDialogHour
        iNotificationDialogMuteTimeText -> qNotificationDialogColonText -> iNotificationDialogColon
        iNotificationDialogMuteTimeText -> qNotificationDialogMinuteText -> iNotificationDialogMinute
        iNotificationDialogMuteTimeText -> qNotificationDialogSecondsText
        iNotificationDialogMuteButtonSilenced -> qNotificationDialogMuteImage -> iNotificationDialogMute

        iNotificationBarAlarmButtonRow -> dNotificationDialogAlarmList -> iNotificationDialogAlarmList -> qNotificationDialogAlarmListImage
        iNotificationBarAlarmButtonRow -> dNotificationDialogMinButton -> iNotificationDialogMinButton -> qNotificationDialogMinImage
    }
}