digraph combined_diagram {
    margin=150
    center=true;

    
    subgraph mainTreatmentScreen {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dTopLevelComponent                  [shape=box,     label="TreatmentHome.qml",              fontsize="30pt"];
    dTreatmentTimeComponent             [shape=box,     label="TreatmentTime.qml",              fontsize="30pt"];
    dTreatmentSalineComponent           [shape=box,     label="TreatmentSaline.qml",            fontsize="30pt"];
    dTreatmentVitalsComponent           [shape=box,     label="TreatmentVitals.qml",            fontsize="30pt"];
    dTreatmentPressuresComponent        [shape=box,     label="TreatmentPressures.qml",         fontsize="30pt"];
    dTreatmentUltrafiltrationComponent  [shape=box,     label="TreatmentUltrafiltration.qml",   fontsize="30pt"];
    dTreatmentFlowsComponent            [shape=box,     label="TreatmentFlows.qml",             fontsize="30pt"];

    // screenshots
    iTreatmentHome      [shape=none,    label="ScreenItem.qml",         image="images/TreatmentHome.png",   fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTopRow             [shape=none,    label="id: _topRow",            image="images/topRow.png",          fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iBottomRow          [shape=none,    label="id: _bottomRow",         image="images/bottomRow.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    iTreatmentTime      [shape=none,    label="Rectangle",              image="images/TreatmentTime.png",               fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTreatmentSaline    [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentSaline.png",             fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTreatmentVitals    [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentVitals.png",             fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTreatmentPressures [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentPressures.png",          fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    iTreatmentUF        [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentUltrafiltration.png",    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTreatmentFlows     [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentFlows.png",              fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    
    // qml types
    qColumn             [shape=ellipse, label="Column",                 fontsize="30pt"];
    qRowTop             [shape=ellipse, label="Row\nid: _topRow",       fontsize="30pt"];
    qRowBottom          [shape=ellipse, label="Row\nid: _bottomRow",    fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one  {
        label="Main Component"
        fontsize="30pt"
        labeljust=l
        dTopLevelComponent -> iTreatmentHome -> qColumn;
        qColumn -> qRowTop -> iTopRow;
        qColumn -> qRowBottom -> iBottomRow;
    }

    subgraph cluster_two  {
        label="Top Row"
        fontsize="30pt"
        labeljust=l
        iTopRow -> dTreatmentTimeComponent -> iTreatmentTime;
        iTopRow -> dTreatmentSalineComponent -> iTreatmentSaline;
        iTopRow -> dTreatmentVitalsComponent -> iTreatmentVitals;
        iTopRow -> dTreatmentPressuresComponent -> iTreatmentPressures;
    }

    subgraph cluster_three {
        label="Bottom Row"
        fontsize="30pt"
        labeljust=l
        iBottomRow -> dTreatmentUltrafiltrationComponent -> iTreatmentUF;
        iBottomRow -> dTreatmentFlowsComponent -> iTreatmentFlows;
    }
}

    subgraph treatmentTimeDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dTimeEditIcon       [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dProgressCircle     [shape=box,     label="ProgressCircle.qml\nItem",               fontsize="30pt"];
    dCircle             [shape=box,     label="Circle.qml\nItem",                       fontsize="30pt"];
    dTimeText           [shape=box,     label="TimeText.qml\nRectangle\nvTreatmentTime.time_Remaining",     fontsize="30pt"];

    // screenshots
    iTreatmentTime      [shape=none,    label="Rectangle",                             image="images/TreatmentTime.png",  fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTimeText           [shape=none,    label="",                                       image="images/TimeText.png"];
    iTimeTitleRect      [shape=none,    label="",                                       image="images/TimeTitleRect.png"];
    iTimeRemaining      [shape=none,    label="",                                       image="images/TimeRemaining.png"];
    iTreatmentTimeEdit  [shape=none,    label="",                                       image="images/edit.png"];
    iHours              [shape=none,    label="",                                       image="images/Hours.png"];
    iMinutes            [shape=none,    label="",                                       image="images/Minutes.png"];
    iSeconds            [shape=none,    label="",                                       image="images/Seconds.png"];
    iSeparator          [shape=none,    label="",                                       image="images/Seperator.png"];

    // qml types
    qTimeTitleRect      [shape=ellipse, label="Item\nid: _timeTitleRect",               fontsize="30pt"];
    qTimeTitle          [shape=ellipse, label="Text",                                   fontsize="30pt"];
    qEditIcon           [shape=ellipse, label="Image\nqrc:/images/iEdit.png",           fontsize="30pt"];
    qCirclePath         [shape=ellipse, label="Rectangle\n|_Shape\n|__ShapePath\n|__PathAngleArc",   fontsize="30pt", labeljust=l];
    qTimeHour           [shape=ellipse, label="Text\nHours",                            fontsize="30pt"];
    qTimeMin            [shape=ellipse, label="Text\nMinutes",                          fontsize="30pt"];
    qTimeSec            [shape=ellipse, label="Text\nSeconds",                          fontsize="30pt"];
    qTimeSeparator      [shape=ellipse, label="Text\n Separator ':'",                   fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one {
        label="Treatment Time"
        fontsize="30pt"
        labeljust=l
        iTreatmentTime -> dProgressCircle[color="red"];
        dProgressCircle -> dCircle;
        dCircle -> qCirclePath;

        iTreatmentTime -> dTimeText[color="red"];
        dTimeText -> iTimeText;
        iTimeText -> qTimeHour
        qTimeHour -> iHours
        iTimeText -> qTimeMin
        qTimeMin -> iMinutes
        iTimeText -> qTimeSec
        qTimeSec -> iSeconds
        iTimeText -> qTimeSeparator
        qTimeSeparator -> iSeparator

        iTreatmentTime -> qTimeTitleRect[color="red"];
        qTimeTitleRect -> iTimeTitleRect;
        iTimeTitleRect -> qTimeTitle;
        qTimeTitle -> iTimeRemaining;
        iTimeTitleRect -> dTimeEditIcon;
        dTimeEditIcon -> qEditIcon;
        qEditIcon -> iTreatmentTimeEdit;
    }

}

    subgraph treatmentSalineDiagram {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dSectionHeaderSaline            [shape=box, label="TreatmentSectionHeader.qml\nRectangle",              fontsize="30pt"];
    dSalineHeaderLockButton         [shape=box, label="TreatmentSectionIcon.qml\nTouchRect",                fontsize="30pt"];
    dSalineHeaderEditButton         [shape=box, label="TreatmentSectionIcon.qml\nTouchRect",                fontsize="30pt"];
    dSalineProgressBar              [shape=box, label="ProgressBar.qml",                                    fontsize="30pt"];
    dSalineValueLabel               [shape=box, label="Label.qml",                                          fontsize="30pt"];
    dSalineUnitLabel                [shape=box, label="Label.qml",                                          fontsize="30pt"];
    dSalineProgressBarRect          [shape=box, label="ProgressRect.qml\n|_RangeRect.qml\n|__Rectangle",    fontsize="30pt"];
    dSalineProgressBarRangeMarker   [shape=box, label="RangeMarker.qml\n'visible: false'",                  fontsize="30pt"];
    dSalineTouchRect                [shape=box, label="TouchRect.qml",                                      fontsize="30pt"];

    // screenshots
    iTreatmentSaline        [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentSaline.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iSalineHeader           [shape=none,    label="",                       image="images/SalineHeader.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iSalineContent          [shape=none,    label="ContentArea.qml",        image="images/SalineContent.png",       fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iSalineDeliveredText    [shape=none,    label="",                       image="images/SalineDeliveredText.png", fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iSalineProgressArea     [shape=none,    label="",                       image="images/SalineProgressArea.png",  fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iSalineUnit             [shape=none,    label="",                       image="images/SalineUnit.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iSalineValue            [shape=none,    label="",                       image="images/SalineValue.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iSalineProgressBar      [shape=none,    label="RangeRect.qml",          image="images/SalineProgressBar.png",   fontcolor="#00FF21", fontsize="23pt", labelloc=t, imagescale=true];
    iSalineButton           [shape=none,    label="Rectangle",              image="images/SalineButton.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qSalineSection          [shape=ellipse, label="Rectangle",                                  fontsize="30pt"];
    qSalineSectionTitle     [shape=ellipse, label="Text\n'Saline'",                             fontsize="30pt"];
    qSalineLockImage        [shape=ellipse, label="Image\nid: _lockButton\n'visible: false'",   fontsize="30pt"];
    qSalineEditImage        [shape=ellipse, label="Image\nid: _editButton\n'visible: false'",   fontsize="30pt"];
    qSalineContentColumn    [shape=ellipse, label="Column",                                     fontsize="30pt"];
    qSalineDesciptionText   [shape=ellipse, label="Text",                                       fontsize="30pt"];
    qSalineProgressArea     [shape=ellipse, label="Item\nid: _progressBarArea",                 fontsize="30pt"];
    qSalineValueText        [shape=ellipse, label="Text\nvTreatmentSaline.delivered",           fontsize="30pt"];
    qSalineUnitText         [shape=ellipse, label="Text\nUnit",                                 fontsize="30pt"];
    qSalineRangeHandle      [shape=ellipse, label="Rectangle\nHandle",                          fontsize="30pt"];
    qSalineRangeStick       [shape=ellipse, label="Rectangle\nStick",                           fontsize="30pt"];
    qSalineRangeValue       [shape=ellipse, label="Text\nValue",                                fontsize="30pt"];
    qSalineButtonText       [shape=ellipse, label="Text\n'Start Bolus (0mL)'",                  fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one {
        label="Saline Treatment"
        fontsize="30pt"
        labeljust=l
        iTreatmentSaline -> qSalineSection[color="red"];

        qSalineSection -> dSectionHeaderSaline -> iSalineHeader;
        iSalineHeader -> qSalineSectionTitle;
        iSalineHeader -> dSalineHeaderLockButton -> qSalineLockImage;
        iSalineHeader -> dSalineHeaderEditButton -> qSalineEditImage;

        qSalineSection -> iSalineContent -> qSalineContentColumn;
        qSalineContentColumn -> dSalineTouchRect -> iSalineButton -> qSalineButtonText;
        qSalineContentColumn -> qSalineDesciptionText -> iSalineDeliveredText;
        qSalineContentColumn -> qSalineProgressArea -> iSalineProgressArea;

        iSalineProgressArea -> dSalineValueLabel -> qSalineValueText -> iSalineValue;
        iSalineProgressArea -> dSalineUnitLabel -> qSalineUnitText -> iSalineUnit;
        iSalineProgressArea -> dSalineProgressBar -> iSalineProgressBar;

        iSalineProgressBar -> dSalineProgressBarRect;
        iSalineProgressBar -> dSalineProgressBarRangeMarker;

        dSalineProgressBarRangeMarker -> qSalineRangeHandle;
        dSalineProgressBarRangeMarker -> qSalineRangeStick;
        dSalineProgressBarRangeMarker -> qSalineRangeValue;
    }
}

    subgraph treatmentVitalsDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dSectionHeaderVitals        [shape=box,     label="TreatmentSectionHeader.qml\nRectangle",  fontsize="30pt"];
    dVitalsHeaderLockButton     [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dVitalsHeaderEditButton     [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dBloodPressureLabelValue    [shape=box,     label="LabelValue.qml\nItem",                   fontsize="30pt"];
    dHeartBeatLabelValue        [shape=box,     label="LabelValue.qml\nItem",                   fontsize="30pt"];
    
    // screenshots
    iTreatmentVitals        [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentVitals.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVitalsHeader           [shape=none,    label="",                       image="images/VitalsHeader.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVitalsContent          [shape=none,    label="ContentArea.qml",        image="images/VitalsContent.png",           fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVitalsEdit             [shape=none,    label="",                       image="images/edit.png",                    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iLastRecorded           [shape=none,    label="",                       image="images/LastRecorded.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodPressureLabel     [shape=none,    label="",                       image="images/BloodPressureLabel.png",      fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iHeartBeatLabel         [shape=none,    label="",                       image="images/HeartBeatLabel.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodPressureTopText   [shape=none,    label="",                       image="images/BloodPressureTopText.png",    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodPressureBottomText[shape=none,    label="",                       image="images/BloodPressureBottomText.png", fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iHeartBeatTopText       [shape=none,    label="",                       image="images/HeartBeatTopText.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iHeartBeatBottomText    [shape=none,    label="",                       image="images/HeartBeatBottomText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qVitalsSection              [shape=ellipse, label="Rectangle",                                  fontsize="30pt"];
    qVitalsSectionTitle         [shape=ellipse, label="Text\n'Vitals'",                             fontsize="30pt"];
    qVitalsLockImage            [shape=ellipse, label="Image\nid: _lockButton\n'visible: false'",   fontsize="30pt"];
    qVitalsEditImage            [shape=ellipse, label="Image",                                      fontsize="30pt"];
    qVitalsContentColumn        [shape=ellipse, label="Column",                                     fontsize="30pt"];
    qLastRecordedText           [shape=ellipse, label="Text",                                       fontsize="30pt"];
    qBloodPressureTopText       [shape=ellipse, label="Text\nid: _topText",                         fontsize="30pt"];
    qBloodPressureCenterText    [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",    fontsize="30pt"];
    qBloodPressureBottomText    [shape=ellipse, label="Text\nid: _bottomText",                      fontsize="30pt"];
    qBloodPressureUnitText      [shape=ellipse, label="Text\nid: _unitText\n'visible: false'",      fontsize="30pt"];
    qHeartBeatTopText           [shape=ellipse, label="Text\nid: _topText",                         fontsize="30pt"];
    qHeartBeatCenterText        [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",    fontsize="30pt"];
    qHeartBeatBottomText        [shape=ellipse, label="Text\nid: _bottomText",                      fontsize="30pt"];
    qHeartBeatUnitText          [shape=ellipse, label="Text\nid: _unitText\n'visible: false'",      fontsize="30pt"];

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

        iTreatmentVitals -> qVitalsSection[color="red"];
        qVitalsSection -> dSectionHeaderVitals -> iVitalsHeader;
        iVitalsHeader -> qVitalsSectionTitle;
        iVitalsHeader -> dVitalsHeaderLockButton -> qVitalsLockImage;
        iVitalsHeader -> dVitalsHeaderEditButton -> qVitalsEditImage -> iVitalsEdit;

        qVitalsSection -> iVitalsContent -> qVitalsContentColumn;

        qVitalsContentColumn -> dBloodPressureLabelValue -> iBloodPressureLabel;
        iBloodPressureLabel -> qBloodPressureTopText -> iBloodPressureTopText;
        iBloodPressureLabel -> qBloodPressureCenterText;
        iBloodPressureLabel -> qBloodPressureBottomText -> iBloodPressureBottomText;
        iBloodPressureLabel -> qBloodPressureUnitText;

        qVitalsContentColumn -> dHeartBeatLabelValue -> iHeartBeatLabel;
        iHeartBeatLabel -> qHeartBeatTopText -> iHeartBeatTopText;
        iHeartBeatLabel -> qHeartBeatCenterText;
        iHeartBeatLabel -> qHeartBeatBottomText -> iHeartBeatBottomText;
        iHeartBeatLabel -> qHeartBeatUnitText;

        qVitalsContentColumn -> qLastRecordedText -> iLastRecorded;
    }
}

    subgraph treatmentPressuresDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dSectionHeaderPressures     [shape=box,     label="TreatmentSectionHeader.qml\nRectangle",      fontsize="30pt"];
    dPressuresHeaderLockButton  [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",        fontsize="30pt"];
    dPressuresHeaderEditButton  [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",        fontsize="30pt"];
    dExpandingButton            [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",        fontsize="30pt"];
    dArterialRangeBar           [shape=box,     label="RangeBar.qml\nRangeRect",                    fontsize="30pt"];
    dVenousRangeBar             [shape=box,     label="RangeBar.qml\nRangeRect",                    fontsize="30pt"];
    dTmpRangeBar                [shape=box,     label="RangeBar.qml\nRangeRect",                    fontsize="30pt"];
    dArterialRangeRect          [shape=box,     label="RangeRect.qml\nid: _rangeRect",              fontsize="30pt"];
    dArterialValueMarker        [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dArterialLowerMarker        [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dArterialUpperMarker        [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dVenousRangeRect            [shape=box,     label="RangeRect.qml\nid: _rangeRect",              fontsize="30pt"];
    dVenousValueMarker          [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dVenousLowerMarker          [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dVenousUpperMarker          [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dTmpRangeRect               [shape=box,     label="RangeRect.qml\nid: _rangeRect",              fontsize="30pt"];
    dTmpValueMarker             [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dTmpLowerMarker             [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];
    dTmpUpperMarker             [shape=box,     label="RangeMarker.qml\nItem",                      fontsize="30pt"];

    // screenshots
    iTreatmentPressures         [shape=none,    label="TreatmentSection.qml",           image="images/TreatmentPressures.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iPressuresHeader            [shape=none,    label="",                               image="images/PressuresHeader.png",             fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iPressuresContent           [shape=none,    label="ContentArea.qml",                image="images/PressuresContent.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iPressuresEdit              [shape=none,    label="",                               image="images/edit.png",                        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialPressureComponent  [shape=none,    label="TreatmentPressureComponent.qml", image="images/ArterialPressureComponent.png",   fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousPressureComponent    [shape=none,    label="TreatmentPressureComponent.qml", image="images/VenousPressureComponent.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpPressureComponent       [shape=none,    label="TreatmentPressureComponent.qml", image="images/TmpPressureComponent.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iExpandingButton            [shape=none,    label="",                               image="images/ExpandingButton.png",             fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialTitle              [shape=none,    label="",                               image="images/ArterialTitle.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousTitle                [shape=none,    label="",                               image="images/VenousTitle.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpTitle                   [shape=none,    label="",                               image="images/TmpTitle.png",                    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialValue              [shape=none,    label="",                               image="images/ArterialValue.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousValue                [shape=none,    label="",                               image="images/VenousValue.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpValue                   [shape=none,    label="",                               image="images/TmpValue.png",                    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialRangeBar           [shape=none,    label="",                               image="images/ArterialRangeBar.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousRangeBar             [shape=none,    label="",                               image="images/VenousRangeBar.png",              fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpRangeBar                [shape=none,    label="",                               image="images/TmpRangeBar.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialValueMarker        [shape=none,    label="",                               image="images/ArterialValueMarker.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialValueMarkerText    [shape=none,    label="",                               image="images/ArterialValueMarkerText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialValueMarkerStick   [shape=none,    label="",                               image="images/ArterialValueMarkerStick.png",    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialValueMarkerHandle  [shape=none,    label="",                               image="images/valueHandle.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialLowerMarker        [shape=none,    label="",                               image="images/ArterialLowerMarker.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialLowerMarkerText    [shape=none,    label="",                               image="images/ArterialLowerMarkerText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialLowerMarkerStick   [shape=none,    label="",                               image="images/ArterialLowerMarkerStick.png",    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialUpperMarker        [shape=none,    label="",                               image="images/ArterialUpperMarker.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialUpperMarkerText    [shape=none,    label="",                               image="images/ArterialUpperMarkerText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iArterialUpperMarkerStick   [shape=none,    label="",                               image="images/ArterialUpperMarkerStick.png",    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousValueMarker          [shape=none,    label="",                               image="images/VenousValueMarker.png",           fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousValueMarkerText      [shape=none,    label="",                               image="images/VenousValueMarkerText.png",       fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousValueMarkerStick     [shape=none,    label="",                               image="images/VenousValueMarkerStick.png",      fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousValueMarkerHandle    [shape=none,    label="",                               image="images/valueHandle.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousLowerMarker          [shape=none,    label="",                               image="images/VenousLowerMarker.png",           fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousLowerMarkerText      [shape=none,    label="",                               image="images/VenousLowerMarkerText.png",       fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousLowerMarkerStick     [shape=none,    label="",                               image="images/VenousLowerMarkerStick.png",      fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousUpperMarker          [shape=none,    label="",                               image="images/VenousUpperMarker.png",           fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousUpperMarkerText      [shape=none,    label="",                               image="images/VenousUpperMarkerText.png",       fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVenousUpperMarkerStick     [shape=none,    label="",                               image="images/VenousUpperMarkerStick.png",      fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpValueMarker             [shape=none,    label="",                               image="images/TmpValueMarker.png",              fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpValueMarkerText         [shape=none,    label="",                               image="images/TmpValueMarkerText.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpValueMarkerStick        [shape=none,    label="",                               image="images/TmpValueMarkerStick.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpValueMarkerHandle       [shape=none,    label="",                               image="images/valueHandle.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpLowerMarker             [shape=none,    label="",                               image="images/TmpLowerMarker.png",              fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpLowerMarkerText         [shape=none,    label="",                               image="images/TmpLowerMarkerText.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpLowerMarkerStick        [shape=none,    label="",                               image="images/TmpLowerMarkerStick.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpUpperMarker             [shape=none,    label="",                               image="images/TmpUpperMarker.png",              fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpUpperMarkerText         [shape=none,    label="",                               image="images/TmpUpperMarkerText.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTmpUpperMarkerStick        [shape=none,    label="",                               image="images/TmpUpperMarkerStick.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qPressuresSection               [shape=ellipse, label="Rectangle",                                              fontsize="30pt"];
    qPressuresSectionTitle          [shape=ellipse, label="Text\n'Pressures(mmHg)'",                                fontsize="30pt"];
    qPressuresLockImage             [shape=ellipse, label="Image\nid: _lockButton\n'visible: false'",               fontsize="30pt"];
    qPressuresEditImage             [shape=ellipse, label="Image",                                                  fontsize="30pt"];
    qPressuresContentColumn         [shape=ellipse, label="Column",                                                 fontsize="30pt"];
    qExpandingButtonImage           [shape=ellipse, label="Image",                                                  fontsize="30pt"];
    qArterialPressureComponentRow   [shape=ellipse, label="Row",                                                    fontsize="30pt"];
    qVenousPressureComponentRow     [shape=ellipse, label="Row",                                                    fontsize="30pt"];
    qTmpPressureComponentRow        [shape=ellipse, label="Row",                                                    fontsize="30pt"];
    qArterialTitleText              [shape=ellipse, label="Text\nid: _title",                                       fontsize="30pt"];
    qArterialValueText              [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.arterialPressure",     fontsize="25pt"];
    qVenousTitleText                [shape=ellipse, label="Text\nid: _title",                                       fontsize="30pt"];
    qVenousValueText                [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.venousPressure",       fontsize="25pt"];
    qTmpTitleText                   [shape=ellipse, label="Text\nid: _title",                                       fontsize="30pt"];
    qTmpValueText                   [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.tmpPressure",          fontsize="25pt"];
    qArterialMarkerValueHandle      [shape=ellipse, label="Rectangle\nid: _handle",                                 fontsize="30pt"];
    qArterialMarkerValueStick       [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qArterialMarkerValueText        [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.arterialPressure",     fontsize="25pt"];
    qArterialMarkerLowerHandle      [shape=ellipse, label="Rectangle\nid: _handle\n'visible: false'",               fontsize="30pt"];
    qArterialMarkerLowerStick       [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qArterialMarkerLowerText        [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.arterialMin",          fontsize="25pt"];
    qArterialMarkerUpperHandle      [shape=ellipse, label="Rectangle\nid: _handle\n'visible: false'",               fontsize="30pt"];
    qArterialMarkerUpperStick       [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qArterialMarkerUpperText        [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.arterialMax",          fontsize="25pt"];
    qVenousMarkerValueHandle        [shape=ellipse, label="Rectangle\nid: _handle",                                 fontsize="30pt"];
    qVenousMarkerValueStick         [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qVenousMarkerValueText          [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.venousPressure",       fontsize="30pt"];
    qVenousMarkerLowerHandle        [shape=ellipse, label="Rectangle\nid: _handle\n'visible: false'",               fontsize="30pt"];
    qVenousMarkerLowerStick         [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qVenousMarkerLowerText          [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.venousMin",            fontsize="25pt"];
    qVenousMarkerUpperHandle        [shape=ellipse, label="Rectangle\nid: _handle\n'visible: false'",               fontsize="30pt"];
    qVenousMarkerUpperStick         [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qVenousMarkerUpperText          [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.venousMax",            fontsize="25pt"];
    qTmpMarkerValueHandle           [shape=ellipse, label="Rectangle\nid: _handle",                                 fontsize="30pt"];
    qTmpMarkerValueStick            [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qTmpMarkerValueText             [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.tmpPressure",          fontsize="25pt"];
    qTmpMarkerLowerHandle           [shape=ellipse, label="Rectangle\nid: _handle\n'visible: false'",               fontsize="30pt"];
    qTmpMarkerLowerStick            [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qTmpMarkerLowerText             [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.tmpMin",               fontsize="25pt"];
    qTmpMarkerUpperHandle           [shape=ellipse, label="Rectangle\nid: _handle\n'visible: false'",               fontsize="30pt"];
    qTmpMarkerUpperStick            [shape=ellipse, label="Rectangle\nid: _stick",                                  fontsize="30pt"];
    qTmpMarkerUpperText             [shape=ellipse, label="Text\nvTreatmentPressureOcclusion.tmpMax",               fontsize="25pt"];

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

        iTreatmentPressures -> qPressuresSection[color="red"];

        qPressuresSection -> dSectionHeaderPressures -> iPressuresHeader;
        iPressuresHeader -> qPressuresSectionTitle;
        iPressuresHeader -> dPressuresHeaderLockButton -> qPressuresLockImage;
        iPressuresHeader -> dPressuresHeaderEditButton -> qPressuresEditImage -> iPressuresEdit;

        qPressuresSection -> dExpandingButton -> qExpandingButtonImage ->iExpandingButton;

        qPressuresSection -> iPressuresContent -> qPressuresContentColumn;
        qPressuresContentColumn -> iArterialPressureComponent -> qArterialPressureComponentRow;
        qPressuresContentColumn -> iVenousPressureComponent -> qVenousPressureComponentRow;
        qPressuresContentColumn -> iTmpPressureComponent -> qTmpPressureComponentRow;

        qArterialPressureComponentRow -> qArterialTitleText -> iArterialTitle
        qArterialPressureComponentRow -> qArterialValueText -> iArterialValue
        qArterialPressureComponentRow -> dArterialRangeBar -> iArterialRangeBar
        iArterialRangeBar -> dArterialRangeRect 
        dArterialRangeRect -> dArterialLowerMarker -> iArterialLowerMarker
        iArterialLowerMarker -> qArterialMarkerLowerHandle
        iArterialLowerMarker -> qArterialMarkerLowerStick -> iArterialLowerMarkerStick
        iArterialLowerMarker -> qArterialMarkerLowerText -> iArterialLowerMarkerText

        dArterialRangeRect -> dArterialUpperMarker -> iArterialUpperMarker
        iArterialUpperMarker -> qArterialMarkerUpperHandle
        iArterialUpperMarker -> qArterialMarkerUpperStick ->iArterialUpperMarkerStick
        iArterialUpperMarker -> qArterialMarkerUpperText ->iArterialUpperMarkerText

        iArterialRangeBar -> dArterialValueMarker -> iArterialValueMarker
        iArterialValueMarker -> qArterialMarkerValueHandle -> iArterialValueMarkerHandle
        iArterialValueMarker -> qArterialMarkerValueStick -> iArterialValueMarkerStick
        iArterialValueMarker -> qArterialMarkerValueText -> iArterialValueMarkerText

        qVenousPressureComponentRow -> qVenousTitleText -> iVenousTitle
        qVenousPressureComponentRow -> qVenousValueText -> iVenousValue
        qVenousPressureComponentRow -> dVenousRangeBar -> iVenousRangeBar
        iVenousRangeBar -> dVenousRangeRect 
        dVenousRangeRect -> dVenousLowerMarker -> iVenousLowerMarker
        iVenousLowerMarker -> qVenousMarkerLowerHandle
        iVenousLowerMarker -> qVenousMarkerLowerStick -> iVenousLowerMarkerStick
        iVenousLowerMarker -> qVenousMarkerLowerText -> iVenousLowerMarkerText

        dVenousRangeRect -> dVenousUpperMarker -> iVenousUpperMarker
        iVenousUpperMarker -> qVenousMarkerUpperHandle
        iVenousUpperMarker -> qVenousMarkerUpperStick ->iVenousUpperMarkerStick
        iVenousUpperMarker -> qVenousMarkerUpperText ->iVenousUpperMarkerText

        iVenousRangeBar -> dVenousValueMarker -> iVenousValueMarker
        iVenousValueMarker -> qVenousMarkerValueHandle -> iVenousValueMarkerHandle
        iVenousValueMarker -> qVenousMarkerValueStick -> iVenousValueMarkerStick
        iVenousValueMarker -> qVenousMarkerValueText -> iVenousValueMarkerText

        qTmpPressureComponentRow -> qTmpTitleText -> iTmpTitle
        qTmpPressureComponentRow -> qTmpValueText -> iTmpValue
        qTmpPressureComponentRow -> dTmpRangeBar -> iTmpRangeBar
        iTmpRangeBar -> dTmpRangeRect 
        dTmpRangeRect -> dTmpLowerMarker -> iTmpLowerMarker
        iTmpLowerMarker -> qTmpMarkerLowerHandle
        iTmpLowerMarker -> qTmpMarkerLowerStick -> iTmpLowerMarkerStick
        iTmpLowerMarker -> qTmpMarkerLowerText -> iTmpLowerMarkerText

        dTmpRangeRect -> dTmpUpperMarker -> iTmpUpperMarker
        iTmpUpperMarker -> qTmpMarkerUpperHandle
        iTmpUpperMarker -> qTmpMarkerUpperStick ->iTmpUpperMarkerStick
        iTmpUpperMarker -> qTmpMarkerUpperText ->iTmpUpperMarkerText

        iTmpRangeBar -> dTmpValueMarker -> iTmpValueMarker
        iTmpValueMarker -> qTmpMarkerValueHandle -> iTmpValueMarkerHandle
        iTmpValueMarker -> qTmpMarkerValueStick -> iTmpValueMarkerStick
        iTmpValueMarker -> qTmpMarkerValueText -> iTmpValueMarkerText
    }
}

    subgraph treatmentUltrafiltrationDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dSectionHeaderUltrafiltration       [shape=box,     label="TreatmentSectionHeader.qml\nRectangle",                      fontsize="30pt"];
    dUltrafiltrationHeaderLockButton    [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",                        fontsize="30pt"];
    dUltrafiltrationHeaderEditButton    [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",                        fontsize="30pt"];
    dUfVolumeLabelValue                 [shape=box,     label="LabelValue.qml\nid: _ufVolume",                              fontsize="30pt"];
    dUfRateLabelValue                   [shape=box,     label="LabelValue.qml\nid: _ufRate",                                fontsize="30pt"];
    dUfProgressBar                      [shape=box,     label="ProgressBar.qml\nRangeRect.qml",                             fontsize="30pt"];
    dUfProgressBarRect                  [shape=box,     label="ProgressRect.qml\nid: _progressRect",                        fontsize="30pt"];

    // screenshots
    iTreatmentUF                    [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentUltrafiltration.png",    fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUltrafiltrationHeader          [shape=none,    label="",                       image="images/UltrafiltrationHeader.png",       fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUltrafiltrationContent         [shape=none,    label="ContentArea.qml",        image="images/UltrafiltrationContent.png",      fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUltrafiltrationEdit            [shape=none,    label="",                       image="images/edit.png",                        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfLeftColumn                   [shape=none,    label="",                       image="images/UfLeftColumn.png",                fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfRightColumn                  [shape=none,    label="",                       image="images/UfRightColumn.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfVolumeLabel                  [shape=none,    label="",                       image="images/UfVolumeLabel.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfRateLabel                    [shape=none,    label="",                       image="images/UfRateLabel.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfVolumeTopText                [shape=none,    label="",                       image="images/UfVolumeTopText.png",             fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfVolumeCenterText             [shape=none,    label="",                       image="images/UfVolumeCenterText.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfVolumeBottomText             [shape=none,    label="",                       image="images/UfVolumeBottomText.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfVolumeUnitText               [shape=none,    label="",                       image="images/UfVolumeUnitText.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfRateTopText                  [shape=none,    label="",                       image="images/UfRateTopText.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfRateBottomText               [shape=none,    label="",                       image="images/UfRateBottomText.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfRateUnitText                 [shape=none,    label="",                       image="images/UfRateUnitText.png",              fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iVolumeRemoved                  [shape=none,    label="",                       image="images/VolumeRemoved.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfProgressBar                  [shape=none,    label="",                       image="images/UfProgressBar.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfProgressBarProgressRect      [shape=none,    label="",                       image="images/UfProgressBarProgressRect.png",   fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfProgressMin                  [shape=none,    label="",                       image="images/UfProgressMin.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfProgressMax                  [shape=none,    label="",                       image="images/UfProgressMax.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iUfValueText                    [shape=none,    label="",                       image="images/UfValueText.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types 
    qUltrafiltrationSection         [shape=ellipse, label="Rectangle",                                      fontsize="30pt"];
    qUltrafiltrationSectionTitle    [shape=ellipse, label="Text\n'Ultrafiltration(UF)'",                    fontsize="30pt"];
    qUltrafiltrationLockImage       [shape=ellipse, label="Image\n'visible: false'",                        fontsize="30pt"];
    qUltrafiltrationEditImage       [shape=ellipse, label="Image",                                          fontsize="30pt"];
    qUltrafiltrationContentRow      [shape=ellipse, label="Row",                                            fontsize="30pt"];
    qUltrafiltrationLeftColumn      [shape=ellipse, label="Column\nid: _leftColumn",                        fontsize="30pt"];
    qUltrafiltrationRightColumn     [shape=ellipse, label="Column\nid: _rightColumn",                       fontsize="30pt"];
    qUfVolumeTopText                [shape=ellipse, label="Text\nid: _topText",                             fontsize="30pt"];
    qUfVolumeCenterText             [shape=ellipse, label="Text\nid: _centerText",                          fontsize="30pt"];
    qUfVolumeBottomText             [shape=ellipse, label="Text\vTreatmentUltrafiltration.setVolume",       fontsize="30pt"];
    qUfVolumeUnitText               [shape=ellipse, label="Text\nid: _unitText",                            fontsize="30pt"];
    qUfRateTopText                  [shape=ellipse, label="Text\nid: _topText",                             fontsize="30pt"];
    qUfRateCenterText               [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",        fontsize="30pt"];
    qUfRateBottomText               [shape=ellipse, label="Text\nvTreatmentUltrafiltration.targetRate",     fontsize="30pt"];
    qUfRateUnitText                 [shape=ellipse, label="Text\nid: _unitText",                            fontsize="30pt"];
    qVolumeRemovedText              [shape=ellipse, label="Text",                                           fontsize="30pt"];
    qvalueText                      [shape=ellipse, label="Text\nvTreatmentUltrafiltration.volumeRemoved",  fontsize="30pt"];
    qProgressBarProgressMin         [shape=ellipse, label="Text\nid: _textMinimum\n'visible: false'",       fontsize="30pt"];
    qProgressBarProgressMax         [shape=ellipse, label="Text\nid: _textMaximum\n'visible: false'",       fontsize="30pt"];
    qProgressBarMin                 [shape=ellipse, label="Text\nvTreatmentUltrafiltration.minimum",        fontsize="30pt"];
    qProgressBarMax                 [shape=ellipse, label="Text\nvTreatmentUltrafiltration.maximum",        fontsize="30pt"];

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

        iTreatmentUF -> qUltrafiltrationSection[color="red"];

        qUltrafiltrationSection -> dSectionHeaderUltrafiltration -> iUltrafiltrationHeader;
        iUltrafiltrationHeader -> qUltrafiltrationSectionTitle;
        iUltrafiltrationHeader -> dUltrafiltrationHeaderLockButton -> qUltrafiltrationLockImage;
        iUltrafiltrationHeader -> dUltrafiltrationHeaderEditButton -> qUltrafiltrationEditImage -> iUltrafiltrationEdit;

        qUltrafiltrationSection -> iUltrafiltrationContent -> qUltrafiltrationContentRow;
        qUltrafiltrationContentRow -> qUltrafiltrationLeftColumn -> iUfLeftColumn;

        iUfLeftColumn -> dUfVolumeLabelValue -> iUfVolumeLabel;
        iUfVolumeLabel -> qUfVolumeTopText -> iUfVolumeTopText;
        iUfVolumeLabel -> qUfVolumeCenterText -> iUfVolumeCenterText;
        iUfVolumeLabel -> qUfVolumeBottomText -> iUfVolumeBottomText;
        iUfVolumeLabel -> qUfVolumeUnitText -> iUfVolumeUnitText;

        iUfLeftColumn -> dUfRateLabelValue -> iUfRateLabel;
        iUfRateLabel -> qUfRateTopText -> iUfRateTopText;
        iUfRateLabel -> qUfRateCenterText;
        iUfRateLabel -> qUfRateBottomText -> iUfRateBottomText;
        iUfRateLabel -> qUfRateUnitText -> iUfRateUnitText;

        qUltrafiltrationContentRow -> qUltrafiltrationRightColumn -> iUfRightColumn;
        iUfRightColumn -> qVolumeRemovedText -> iVolumeRemoved; 
        iUfRightColumn -> qvalueText -> iUfValueText;

        iUfRightColumn -> dUfProgressBar -> iUfProgressBar;

        iUfProgressBar -> qProgressBarMin -> iUfProgressMin;
        iUfProgressBar -> qProgressBarMax -> iUfProgressMax;

        iUfProgressBar -> dUfProgressBarRect -> iUfProgressBarProgressRect;
        iUfProgressBarProgressRect -> qProgressBarProgressMin;
        iUfProgressBarProgressRect -> qProgressBarProgressMax;
    }
}

    subgraph treatmentParametersDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality componenet, i - image
    // Define the main componenets
    dSectionHeaderParameters    [shape=box,     label="TreatmentSectionHeader.qml\nRectangle",  fontsize="30pt"];
    dParametersHeaderLockButton [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dParametersHeaderEditButton [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dBloodFlowComponent         [shape=box,     label="TreatmentFlowsComponent.qml", fontsize="30pt"];
    dDialysateFlowComponent     [shape=box,     label="TreatmentFlowsComponent.qml", fontsize="30pt"];
    dDialysateTempComponent     [shape=box,     label="TreatmentFlowsComponent.qml", fontsize="30pt"];
    dDialysateCondComponent     [shape=box,     label="TreatmentFlowsComponent.qml", fontsize="30pt"];

    // screenshots
    iTreatmentFlows             [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentFlows.png",              fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iParametersHeader           [shape=none,    label="",                       image="images/ParametersHeader.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iParametersContent          [shape=none,    label="ContentArea.qml",        image="images/ParametersContent.png",           fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iParametersEdit             [shape=none,    label="",                       image="images/edit.png",                        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iParametersLock             [shape=none,    label="",                       image="images/lock.png",                        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlow                  [shape=none,    label="",                       image="images/BloodFlow.png",                   fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTemp              [shape=none,    label="",                       image="images/DialysateTemp.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlow              [shape=none,    label="",                       image="images/DialysateFlow.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCond              [shape=none,    label="",                       image="images/DialysateCond.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qParametersSection          [shape=ellipse, label="Rectangle",                              fontsize="30pt"];
    qParametersSectionTitle     [shape=ellipse, label="Text\n'Treatment Parameters'",           fontsize="30pt"];
    qParametersLockImage        [shape=ellipse, label="Image",                                  fontsize="30pt"];
    qParametersEditImage        [shape=ellipse, label="Image",                                  fontsize="30pt"];
    qParametersContentRow       [shape=ellipse, label="Row",                                    fontsize="30pt"];

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

        iTreatmentFlows -> qParametersSection[color="red"];

        qParametersSection -> dSectionHeaderParameters -> iParametersHeader;
        iParametersHeader -> qParametersSectionTitle;
        iParametersHeader -> dParametersHeaderLockButton -> qParametersLockImage -> iParametersLock;
        iParametersHeader -> dParametersHeaderEditButton -> qParametersEditImage -> iParametersEdit;

        qParametersSection -> iParametersContent -> qParametersContentRow;
        qParametersContentRow -> dBloodFlowComponent -> iBloodFlow;
        qParametersContentRow -> dDialysateFlowComponent -> iDialysateFlow;
        qParametersContentRow -> dDialysateTempComponent -> iDialysateTemp;
        qParametersContentRow -> dDialysateCondComponent -> iDialysateCond;
    }
}

    subgraph treatmentParametersBloodFlowDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality componenet, i - image
    // Define the main componenets
    dBloodFlowLabelValue        [shape=box,     label="LabelValue.qml\nItem",                   fontsize="30pt"];
    dBloodFlowUpIcon            [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dBloodFlowDownIcon          [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];

    // screenshots
    iBloodFlow                  [shape=none,    label="",                       image="images/BloodFlow.png",                   fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlowTitle             [shape=none,    label="",                       image="images/BloodFlowTitle.png",              fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlowLabelValue        [shape=none,    label="",                       image="images/BloodFlowLabelValue.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlowTopText           [shape=none,    label="",                       image="images/BloodFlowTopText.png",            fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlowBottomText        [shape=none,    label="",                       image="images/BloodFlowBottomText.png",         fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlowArrowColumn       [shape=none,    label="",                       image="images/arrowColumn.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlowArrowUp           [shape=none,    label="",                       image="images/arrowUp.png",                     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iBloodFlowArrowDown         [shape=none,    label="",                       image="images/arrowDown.png",                   fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qBloodFlowRect               [shape=ellipse, label="Rectangle",                                 fontsize="30pt"];
    qBloodFlowTitle             [shape=ellipse, label="Text\nid: _title",                           fontsize="30pt"];
    qBloodFlowRow               [shape=ellipse, label="Row",                                        fontsize="30pt"];
    qBloodFlowExtraText         [shape=ellipse, label="Text\nid: _extraText\n'visible: false",      fontsize="30pt"];
    qBloodFlowColumn            [shape=ellipse, label="Column",                                     fontsize="30pt"];
    qBloodFlowTopText           [shape=ellipse, label="Text\nvTreatmentSetPoint.bloodFlow",         fontsize="30pt"];
    qBloodFlowCenterText        [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",    fontsize="30pt"];
    qBloodFlowBottomText        [shape=ellipse, label="Text\nid: _bottomText",                      fontsize="30pt"];
    qBloodFlowUnitText          [shape=ellipse, label="Text\nid: _unitText\n'visible: false'",      fontsize="30pt"];
    qBloodFlowUpImage           [shape=ellipse, label="Image\nid: _upArrowIcon",                    fontsize="30pt"];
    qBloodFlowDownImage         [shape=ellipse, label="Image\nid: _downArrowIcon",                  fontsize="30pt"];

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

        iBloodFlow -> qBloodFlowRect[color="red"];
        qBloodFlowRect -> qBloodFlowTitle -> iBloodFlowTitle
        qBloodFlowRect -> qBloodFlowExtraText
        qBloodFlowRect -> qBloodFlowRow      
        qBloodFlowRow -> dBloodFlowLabelValue ->iBloodFlowLabelValue
        iBloodFlowLabelValue -> qBloodFlowTopText -> iBloodFlowTopText
        iBloodFlowLabelValue -> qBloodFlowCenterText
        iBloodFlowLabelValue -> qBloodFlowBottomText ->iBloodFlowBottomText
        iBloodFlowLabelValue -> qBloodFlowUnitText  

        qBloodFlowRow -> qBloodFlowColumn-> iBloodFlowArrowColumn
        iBloodFlowArrowColumn -> dBloodFlowUpIcon -> qBloodFlowUpImage -> iBloodFlowArrowUp
        iBloodFlowArrowColumn -> dBloodFlowDownIcon -> qBloodFlowDownImage -> iBloodFlowArrowDown

    }
}

    subgraph treatmentParametersDialysateFlowDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality componenet, i - image
    // Define the main componenets
    dDialysateFlowLabelValue    [shape=box,     label="LabelValue.qml\nItem",                   fontsize="30pt"];
    dDialysateFlowUpIcon        [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dDialysateFlowDownIcon      [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];

    // screenshots
    iDialysateFlow              [shape=none,    label="",                       image="images/DialysateFlow.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowTitle         [shape=none,    label="",                       image="images/DialysateFlowTitle.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowExtraText     [shape=none,    label="",                       image="images/dialysateFlowExtraText.png",      fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowLabelValue    [shape=none,    label="",                       image="images/DialysateFlowLabelValue.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowTopText       [shape=none,    label="",                       image="images/DialysateFlowTopText.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowBottomText    [shape=none,    label="",                       image="images/DialysateFlowBottomText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowArrowColumn   [shape=none,    label="",                       image="images/arrowColumn.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowArrowUp       [shape=none,    label="",                       image="images/arrowUp.png",                     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateFlowArrowDown     [shape=none,    label="",                       image="images/arrowDown.png",                   fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qDialysateFlowRect          [shape=ellipse, label="Rectangle",                                  fontsize="30pt"];
    qDialysateFlowTitle         [shape=ellipse, label="Text\nid: _title",                           fontsize="30pt"];
    qDialysateFlowRow           [shape=ellipse, label="Row",                                        fontsize="30pt"];
    qDialysateFlowExtraText     [shape=ellipse, label="Text\nid: _extraText",                       fontsize="30pt"];
    qDialysateFlowColumn        [shape=ellipse, label="Column",                                     fontsize="30pt"];
    qDialysateFlowTopText       [shape=ellipse, label="Text\nvTreatmentSetPoint.dialysateFlow",     fontsize="30pt"];
    qDialysateFlowCenterText    [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",    fontsize="30pt"];
    qDialysateFlowBottomText    [shape=ellipse, label="Text\nid: _bottomText",                      fontsize="30pt"];
    qDialysateFlowUnitText      [shape=ellipse, label="Text\nid: _unitText\n'visible: false'",      fontsize="30pt"];
    qDialysateFlowUpImage       [shape=ellipse, label="Image\nid: _upArrowIcon",                    fontsize="30pt"];
    qDialysateFlowDownImage     [shape=ellipse, label="Image\nid: _downArrowIcon",                  fontsize="30pt"];


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

        iDialysateFlow -> qDialysateFlowRect[color="red"]
        qDialysateFlowRect -> qDialysateFlowTitle -> iDialysateFlowTitle
        qDialysateFlowRect -> qDialysateFlowExtraText -> iDialysateFlowExtraText
        qDialysateFlowRect -> qDialysateFlowRow      
        qDialysateFlowRow -> dDialysateFlowLabelValue -> iDialysateFlowLabelValue
        iDialysateFlowLabelValue -> qDialysateFlowTopText -> iDialysateFlowTopText
        iDialysateFlowLabelValue -> qDialysateFlowCenterText
        iDialysateFlowLabelValue -> qDialysateFlowBottomText -> iDialysateFlowBottomText
        iDialysateFlowLabelValue -> qDialysateFlowUnitText  

        qDialysateFlowRow -> qDialysateFlowColumn -> iDialysateFlowArrowColumn
        iDialysateFlowArrowColumn -> dDialysateFlowUpIcon -> qDialysateFlowUpImage -> iDialysateFlowArrowUp
        iDialysateFlowArrowColumn -> dDialysateFlowDownIcon -> qDialysateFlowDownImage -> iDialysateFlowArrowDown  
    }
}

    subgraph treatmentParametersDialysateTempDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality componenet, i - image
    // Define the main componenets
    dDialysateTempLabelValue    [shape=box,     label="LabelValue.qml\nItem",                   fontsize="30pt"];
    dDialysateTempUpIcon        [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dDialysateTempDownIcon      [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];

    // screenshots
    iDialysateTemp              [shape=none,    label="",                       image="images/DialysateTemp.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTempTitle         [shape=none,    label="",                       image="images/DialysateTempTitle.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTempLabelValue    [shape=none,    label="",                       image="images/DialysateTempLabelValue.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTempTopText       [shape=none,    label="",                       image="images/DialysateTempTopText.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTempBottomText    [shape=none,    label="",                       image="images/DialysateTempBottomText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTempArrowColumn   [shape=none,    label="",                       image="images/arrowColumn.png",                 fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTempArrowUp       [shape=none,    label="",                       image="images/arrowUp.png",                     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateTempArrowDown     [shape=none,    label="",                       image="images/arrowDown.png",                   fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qDialysateTempRect          [shape=ellipse, label="Rectangle",                                  fontsize="30pt"];
    qDialysateTempTitle         [shape=ellipse, label="Text\nid: _title",                           fontsize="30pt"];
    qDialysateTempRow           [shape=ellipse, label="Row",                                        fontsize="30pt"];
    qDialysateTempExtraText     [shape=ellipse, label="Text\nid: _extraText\n'visible: false",      fontsize="30pt"];
    qDialysateTempColumn        [shape=ellipse, label="Column",                                     fontsize="30pt"];
    qDialysateTempTopText       [shape=ellipse, label="Text\nvTreatmentSetPoint.dialysateTemp",     fontsize="30pt"];
    qDialysateTempCenterText    [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",    fontsize="30pt"];
    qDialysateTempBottomText    [shape=ellipse, label="Text\nid: _bottomText",                      fontsize="30pt"];
    qDialysateTempUnitText      [shape=ellipse, label="Text\nid: _unitText\n'visible: false'",      fontsize="30pt"];
    qDialysateTempUpImage       [shape=ellipse, label="Image\nid: _upArrowIcon",                    fontsize="30pt"];
    qDialysateTempDownImage     [shape=ellipse, label="Image\nid: _downArrowIcon",                  fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one {
        label="Dialysate Temp."
        fontsize="30pt"
        labeljust=l

        iDialysateTemp -> qDialysateTempRect[color="red"]
        qDialysateTempRect -> qDialysateTempTitle -> iDialysateTempTitle
        qDialysateTempRect -> qDialysateTempExtraText
        qDialysateTempRect -> qDialysateTempRow  

        qDialysateTempRow -> dDialysateTempLabelValue -> iDialysateTempLabelValue
        iDialysateTempLabelValue -> qDialysateTempTopText -> iDialysateTempTopText
        iDialysateTempLabelValue -> qDialysateTempCenterText 
        iDialysateTempLabelValue -> qDialysateTempBottomText -> iDialysateTempBottomText
        iDialysateTempLabelValue -> qDialysateTempUnitText   

        qDialysateTempRow -> qDialysateTempColumn -> iDialysateTempArrowColumn
        iDialysateTempArrowColumn -> dDialysateTempUpIcon -> qDialysateTempUpImage -> iDialysateTempArrowUp
        iDialysateTempArrowColumn -> dDialysateTempDownIcon -> qDialysateTempDownImage -> iDialysateTempArrowDown
    }
}

    subgraph treatmentParametersDialysateCondDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality componenet, i - image
    // Define the main componenets
    dDialysateCondLabelValue    [shape=box,     label="LabelValue.qml\nItem",                   fontsize="30pt"];

    // screenshots
    iDialysateCond              [shape=none,    label="",                       image="images/DialysateCond.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondTitle         [shape=none,    label="",                       image="images/DialysateCondTitle.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondLabelValue    [shape=none,    label="",                       image="images/DialysateCondLabelValue.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondTopText       [shape=none,    label="",                       image="images/DialysateCondTopText.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondBottomText    [shape=none,    label="",                       image="images/DialysateCondBottomText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qDialysateCondRect          [shape=ellipse, label="Rectangle",                                  fontsize="30pt"];
    qDialysateCondTitle         [shape=ellipse, label="Text\nid: _title",                           fontsize="30pt"];
    qDialysateCondRow           [shape=ellipse, label="Row",                                        fontsize="30pt"];
    qDialysateCondExtraText     [shape=ellipse, label="Text\nid: _extraText\n'visible: false",      fontsize="30pt"];
    qDialysateCondColumn        [shape=ellipse, label="Column\n'visible: false'",                   fontsize="30pt"];
    qDialysateCondTopText       [shape=ellipse, label="Text\nvDDConductivity.acidBicarbCondutivity2",   fontsize="30pt"];
    qDialysateCondCenterText    [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",    fontsize="30pt"];
    qDialysateCondBottomText    [shape=ellipse, label="Text\nid: _bottomText",                      fontsize="30pt"];
    qDialysateCondUnitText      [shape=ellipse, label="Text\nid: _unitText\n'visible: false'",      fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one {
        label="Dialysate Cond."
        fontsize="30pt"
        labeljust=l

        iDialysateCond -> qDialysateCondRect[color="red"];
        qDialysateCondRect -> qDialysateCondTitle -> iDialysateCondTitle
        qDialysateCondRect -> qDialysateCondExtraText
        qDialysateCondRect -> qDialysateCondRow      
        qDialysateCondRow -> dDialysateCondLabelValue -> iDialysateCondLabelValue
        iDialysateCondLabelValue -> qDialysateCondTopText -> iDialysateCondTopText
        iDialysateCondLabelValue -> qDialysateCondCenterText
        iDialysateCondLabelValue -> qDialysateCondBottomText -> iDialysateCondBottomText
        iDialysateCondLabelValue -> qDialysateCondUnitText  
             
        qDialysateCondRow -> qDialysateCondColumn
    }
}

}