digraph 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

    }
}