digraph 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;
    }
}