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

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dAlarmDialog            [shape=box,         label="NotificationDialog.qml\nRectangle",                                      fontsize="30pt"];
    dAlarmBar               [shape=box,         label="NotificationBar.qml\nRectangle",                                         fontsize="30pt"];
    dResumeButton           [shape=box,         label="TouchRect.qml\n'visible = ! vAlarmStatus.alarm_Flag_noResume'",          fontsize="30pt"];
    dRinsebackButton        [shape=box,         label="TouchRect.qml\n'visible = ! vAlarmStatus.alarm_Flag_noRinseback'",       fontsize="30pt"];
    dEndTreatment           [shape=box,         label="TouchRect.qml\n'visible = ! vAlarmStatus.alarm_Flag_noEndTreatment'",    fontsize="30pt"];
    dOk                     [shape=box,         label="TouchRect.qml\n'visible = vAlarmStatus.alarm_Flag_UserMustAck'",         fontsize="30pt"];
    dInfoItem               [shape=box,         label="Item\nNotificationBarSmall.qml",                                         fontsize="30pt"];

    // screenshots
    iNotificationDialog             [shape=none,    label="",           image="images/notificationDialog.png",                  fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iNotificationDialogAlarmID      [shape=none,    label="",           image="images/notificationDialogAlarmID.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];
    iResumeButton                   [shape=none,    label="",           image="images/resume.png",                              fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iRinsebackButton                [shape=none,    label="",           image="images/rinseback.png",                           fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iEndTreatment                   [shape=none,    label="",           image="images/endTreatment.png",                        fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iOk                             [shape=none,    label="",           image="images/ok.png",                                  fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmDialogDescRect            [shape=none,    label="",           image="images/alarmDialogDescRect.png",                 fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iInstructionHelp                [shape=none,    label="",           image="images/instructionHelp.png",                     fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iHelpIcon                       [shape=none,    label="",           image="images/helpIcon.png",                            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iHelpText                       [shape=none,    label="",           image="images/helpText.png",                            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iFigureImage                    [shape=none,    label="",           image="images/FigureImage.png",                         fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iListView                       [shape=none,    label="",           image="images/ListView.png",                            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iListViewDelegate               [shape=none,    label="",           image="images/ListViewDelegate.png",                    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iStepNumber                     [shape=none,    label="",           image="images/StepNumber.png",                          fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iStepText                       [shape=none,    label="",           image="images/StepText.png",                            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    // qml types
    qNotificationDialogHeaderBar        [shape=ellipse, label="Rectangle\nid : _titleBar",          fontsize="30pt"];
    qNotificationDialogAlarmID          [shape=ellipse, label="Text\nvAlarmStatus.alarm_AlarmID",   fontsize="30pt"];
    qButtonRow                          [shape=ellipse, label="Row\nid: _buttonGroup",              fontsize="30pt"];
    qAlarmDescRect                      [shape=ellipse, label="Rectangle\nid: _descriptionRect",    fontsize="30pt"];
    qInstructionHelp                    [shape=ellipse, label="Rectangle\nRow",                     fontsize="30pt"];
    qHelpIcon                           [shape=ellipse, label="Image\'qrc:/images/iHelp'",          fontsize="30pt"];
    qHelpText                           [shape=ellipse, label="Text",                               fontsize="30pt"];
    qImageContainer                     [shape=ellipse, label="Item\nid: _imageContainer",          fontsize="30pt"];
    qFigureImage                        [shape=ellipse, label="Image\nvAlarmStatus.instructionValues",  fontsize="30pt"];
    qFigureText                         [shape=ellipse, label="Text\nFigure 1\n'visible = false'",  fontsize="30pt"];
    qAlarmContentRow                    [shape=ellipse, label="Row\nid: _alarmContentRow",          fontsize="30pt"];
    qListView                           [shape=ellipse, label="ListView\nid: _listView",            fontsize="30pt"];
    qListViewDelegate                   [shape=ellipse, label="ListViewDelegate\nItem",             fontsize="30pt"];
    qStepNumber                         [shape=ellipse, label="Rectangle\nText\nStep Number",       fontsize="30pt"];
    qStepText                           [shape=ellipse, label="Text\nvAlarmStatus.instructionKeys", fontsize="30pt"];
    qStepFigureText                     [shape=ellipse, label="Text\nFigure 1\n'visible = false", fontsize="30pt"];

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

        dAlarmDialog -> dAlarmBar [ltail=AlarmDialog, lhead=AlarmBar, color="blue", fontcolor="blue",  fontsize="40pt", label="ACT: Minimized"];
        dAlarmBar -> dAlarmDialog [ltail=AlarmBar, lhead=AlarmDialog, color="blue", fontcolor="blue",  fontsize="40pt", label="ACT: Maximized"];

        dAlarmDialog -> iNotificationDialog
        iNotificationDialog -> qNotificationDialogHeaderBar

        iNotificationDialog -> qAlarmDescRect -> iAlarmDialogDescRect
        iAlarmDialogDescRect -> dInfoItem -> iInstructionHelp -> qInstructionHelp
        qInstructionHelp -> iHelpIcon -> qHelpIcon
        qInstructionHelp -> iHelpText -> qHelpText

        iAlarmDialogDescRect -> qAlarmContentRow
        qAlarmContentRow -> qListView -> iListView -> qListViewDelegate -> iListViewDelegate
        iListViewDelegate -> qStepNumber -> iStepNumber
        iListViewDelegate -> qStepText -> iStepText
        iListViewDelegate -> qStepFigureText

        qAlarmContentRow -> qImageContainer
        qImageContainer -> iFigureImage -> qFigureImage
        qImageContainer -> qFigureText

        iNotificationDialog -> qNotificationDialogAlarmID -> iNotificationDialogAlarmID

        iNotificationDialog -> qButtonRow -> iButtonRow

        iButtonRow -> dResumeButton -> iResumeButton
        iButtonRow -> dRinsebackButton -> iRinsebackButton
        iButtonRow -> dEndTreatment -> iEndTreatment
        iButtonRow -> dOk -> iOk
    }
}