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