digraph mainTreatmentScreen {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dTopLevelComponent                  [shape=box,     label="TreatmentHome.qml",              fontsize="30pt"];
    dTreatmentTimeComponent             [shape=box,     label="TreatmentTime.qml",              fontsize="30pt"];
    dTreatmentSalineComponent           [shape=box,     label="TreatmentSaline.qml",            fontsize="30pt"];
    dTreatmentVitalsComponent           [shape=box,     label="TreatmentVitals.qml",            fontsize="30pt"];
    dTreatmentPressuresComponent        [shape=box,     label="TreatmentPressures.qml",         fontsize="30pt"];
    dTreatmentUltrafiltrationComponent  [shape=box,     label="TreatmentUltrafiltration.qml",   fontsize="30pt"];
    dTreatmentFlowsComponent            [shape=box,     label="TreatmentFlows.qml",             fontsize="30pt"];

    // screenshots
    iTreatmentHome      [shape=none,    label="ScreenItem.qml",         image="images/TreatmentHome.png",   fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTopRow             [shape=none,    label="id: _topRow",            image="images/topRow.png",          fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iBottomRow          [shape=none,    label="id: _bottomRow",         image="images/bottomRow.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    iTreatmentTime      [shape=none,    label="Rectangle",              image="images/TreatmentTime.png",               fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTreatmentSaline    [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentSaline.png",             fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTreatmentVitals    [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentVitals.png",             fontcolor="#00FF21", fontsize="25pt", labelloc=t, imagescale=true];
    iTreatmentPressures [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentPressures.png",          fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    iTreatmentUF        [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentUltrafiltration.png",    fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTreatmentFlows     [shape=none,    label="TreatmentSection.qml",   image="images/TreatmentFlows.png",              fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    
    // qml types
    qColumn             [shape=ellipse, label="Column",                 fontsize="30pt"];
    qRowTop             [shape=ellipse, label="Row\nid: _topRow",       fontsize="30pt"];
    qRowBottom          [shape=ellipse, label="Row\nid: _bottomRow",    fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one  {
        label="Main Component"
        fontsize="30pt"
        labeljust=l
        dTopLevelComponent -> iTreatmentHome -> qColumn;
        qColumn -> qRowTop -> iTopRow;
        qColumn -> qRowBottom -> iBottomRow;
    }

    subgraph cluster_two  {
        label="Top Row"
        fontsize="30pt"
        labeljust=l
        iTopRow -> dTreatmentTimeComponent -> iTreatmentTime;
        iTopRow -> dTreatmentSalineComponent -> iTreatmentSaline;
        iTopRow -> dTreatmentVitalsComponent -> iTreatmentVitals;
        iTopRow -> dTreatmentPressuresComponent -> iTreatmentPressures;
    }

    subgraph cluster_three {
        label="Bottom Row"
        fontsize="30pt"
        labeljust=l
        iBottomRow -> dTreatmentUltrafiltrationComponent -> iTreatmentUF;
        iBottomRow -> dTreatmentFlowsComponent -> iTreatmentFlows;
    }
}