digraph treatmentParametersDialysateCondDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality componenet, i - image
    // Define the main componenets
    dDialysateCondLabelValue    [shape=box,     label="LabelValue.qml\nItem",                   fontsize="30pt"];

    // screenshots
    iDialysateCond              [shape=none,    label="",                       image="images/DialysateCond.png",               fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondTitle         [shape=none,    label="",                       image="images/DialysateCondTitle.png",          fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondLabelValue    [shape=none,    label="",                       image="images/DialysateCondLabelValue.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondTopText       [shape=none,    label="",                       image="images/DialysateCondTopText.png",        fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iDialysateCondBottomText    [shape=none,    label="",                       image="images/DialysateCondBottomText.png",     fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];

    // qml types
    qDialysateCondRect          [shape=ellipse, label="Rectangle",                                  fontsize="30pt"];
    qDialysateCondTitle         [shape=ellipse, label="Text\nid: _title",                           fontsize="30pt"];
    qDialysateCondRow           [shape=ellipse, label="Row",                                        fontsize="30pt"];
    qDialysateCondExtraText     [shape=ellipse, label="Text\nid: _extraText\n'visible: false",      fontsize="30pt"];
    qDialysateCondColumn        [shape=ellipse, label="Column\n'visible: false'",                   fontsize="30pt"];
    qDialysateCondTopText       [shape=ellipse, label="Text\nvDDConductivity.acidBicarbCondutivity2",   fontsize="30pt"];
    qDialysateCondCenterText    [shape=ellipse, label="Text\nid: _centerText\n'visible: false'",    fontsize="30pt"];
    qDialysateCondBottomText    [shape=ellipse, label="Text\nid: _bottomText",                      fontsize="30pt"];
    qDialysateCondUnitText      [shape=ellipse, label="Text\nid: _unitText\n'visible: false'",      fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one {
        label="Dialysate Cond."
        fontsize="30pt"
        labeljust=l

        iDialysateCond -> qDialysateCondRect[color="red"];
        qDialysateCondRect -> qDialysateCondTitle -> iDialysateCondTitle
        qDialysateCondRect -> qDialysateCondExtraText
        qDialysateCondRect -> qDialysateCondRow      
        qDialysateCondRow -> dDialysateCondLabelValue -> iDialysateCondLabelValue
        iDialysateCondLabelValue -> qDialysateCondTopText -> iDialysateCondTopText
        iDialysateCondLabelValue -> qDialysateCondCenterText
        iDialysateCondLabelValue -> qDialysateCondBottomText -> iDialysateCondBottomText
        iDialysateCondLabelValue -> qDialysateCondUnitText  
             
        qDialysateCondRow -> qDialysateCondColumn
    }
}