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