digraph treatmentTimeDiagrom {
    bgcolor=lightgray
    margin=50

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dTimeEditIcon       [shape=box,     label="TreatmentSectionIcon.qml\nTouchRect",    fontsize="30pt"];
    dProgressCircle     [shape=box,     label="ProgressCircle.qml\nItem",               fontsize="30pt"];
    dCircle             [shape=box,     label="Circle.qml\nItem",                       fontsize="30pt"];
    dTimeText           [shape=box,     label="TimeText.qml\nRectangle\nvTreatmentTime.time_Remaining",     fontsize="30pt"];

    // screenshots
    iTreatmentTime      [shape=none,    label="Rectangle",                             image="images/TreatmentTime.png",  fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTimeText           [shape=none,    label="",                                       image="images/TimeText.png"];
    iTimeTitleRect      [shape=none,    label="",                                       image="images/TimeTitleRect.png"];
    iTimeRemaining      [shape=none,    label="",                                       image="images/TimeRemaining.png"];
    iTreatmentTimeEdit  [shape=none,    label="",                                       image="images/edit.png"];
    iHours              [shape=none,    label="",                                       image="images/Hours.png"];
    iMinutes            [shape=none,    label="",                                       image="images/Minutes.png"];
    iSeconds            [shape=none,    label="",                                       image="images/Seconds.png"];
    iSeparator          [shape=none,    label="",                                       image="images/Seperator.png"];

    // qml types
    qTimeTitleRect      [shape=ellipse, label="Item\nid: _timeTitleRect",               fontsize="30pt"];
    qTimeTitle          [shape=ellipse, label="Text",                                   fontsize="30pt"];
    qEditIcon           [shape=ellipse, label="Image\nqrc:/images/iEdit.png",           fontsize="30pt"];
    qCirclePath         [shape=ellipse, label="Rectangle\n|_Shape\n|__ShapePath\n|__PathAngleArc",   fontsize="30pt", labeljust=l];
    qTimeHour           [shape=ellipse, label="Text\nHours",                            fontsize="30pt"];
    qTimeMin            [shape=ellipse, label="Text\nMinutes",                          fontsize="30pt"];
    qTimeSec            [shape=ellipse, label="Text\nSeconds",                          fontsize="30pt"];
    qTimeSeparator      [shape=ellipse, label="Text\n Separator ':'",                   fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one {
        label="Treatment Time"
        fontsize="30pt"
        labeljust=l
        iTreatmentTime -> dProgressCircle[color="red"];
        dProgressCircle -> dCircle;
        dCircle -> qCirclePath;

        iTreatmentTime -> dTimeText[color="red"];
        dTimeText -> iTimeText;
        iTimeText -> qTimeHour
        qTimeHour -> iHours
        iTimeText -> qTimeMin
        qTimeMin -> iMinutes
        iTimeText -> qTimeSec
        qTimeSec -> iSeconds
        iTimeText -> qTimeSeparator
        qTimeSeparator -> iSeparator

        iTreatmentTime -> qTimeTitleRect[color="red"];
        qTimeTitleRect -> iTimeTitleRect;
        iTimeTitleRect -> qTimeTitle;
        qTimeTitle -> iTimeRemaining;
        iTimeTitleRect -> dTimeEditIcon;
        dTimeEditIcon -> qEditIcon;
        qEditIcon -> iTreatmentTimeEdit;
    }

}