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