Example: Basic Path

HTML

<div id="mygraphiccontainer"></div>

CSS

#mygraphiccontainer {
    position: relative;
    width: 700px;
    height:300px;
}

Javascript

Create a Graphic instance.

var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});

Create two path elements for end shapes. Give each a red fill and a black stroke.

var diamond1 = mygraphic.addShape({
        type: "path",
        stroke: {
            weight: 1,
            color: "#000"
        },
        fill: {
            color: "#f00"
        }
    });

var diamond2 = mygraphic.addShape({
        type: "path",
        stroke: {
            weight: 1,
            color: "#000"
        },
        fill: {
            color: "#f00"
        }
    });

Create a path for the connecting segment. Give it a black dashed stroke and no fill. The dashstyle property of the stroke attribute allows for the creation of a dashed stroke. The first value is the length of the dash and the second value is the gap space between dashes.

var connector = mygraphic.addShape({
        type: "path",
        stroke: {
            weight: 1,
            color: "#000",
            opacity: 1,
            dashstyle: [3, 4]
        }
    });

Draw the first diamond.

diamond1.moveTo(60, 60);
diamond1.lineTo(80, 40);
diamond1.lineTo(100, 60);
diamond1.lineTo(80, 80);
diamond1.lineTo(60, 60);
diamond1.end();

Draw the connector segment.

connector.moveTo(100, 60);
connector.lineTo(450, 220);
connector.end();

Draw the second diamond.

diamond2.moveTo(450, 220);
diamond2.lineTo(470, 200);
diamond2.lineTo(490, 220);
diamond2.lineTo(470, 240);
diamond2.lineTo(450, 220);
diamond2.end();

Complete Example Source

<div id="mygraphiccontainer"></div>
<script>
    YUI().use('graphics', function (Y) 
    { 
        var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
            connector = mygraphic.addShape({
                type: "path",
				stroke: {
					weight: 1,
					color: "#000",
					opacity: 1,
					dashstyle: [3, 4]
				},
				id: "connector"
            }),
            diamond1 = mygraphic.addShape({
                type: "path",
                stroke: {
                    weight: 1,
                    color: "#000"
                },
                fill: {
                    color: "#f00"
                },
                id: "diamond1"
            }),
            diamond2 = mygraphic.addShape({
                type: "path",
                stroke: {
                    weight: 1,
                    color: "#000"
                },
                fill: {
                    color: "#f00"
                },
                id: "diamond2"
            });

            diamond1.moveTo(60, 60);
            diamond1.lineTo(80, 40);
            diamond1.lineTo(100, 60);
            diamond1.lineTo(80, 80);
            diamond1.lineTo(60, 60);
            diamond1.end();

			connector.moveTo(100, 60);
            connector.lineTo(450, 220);
            connector.end();

            diamond2.moveTo(450, 220);
            diamond2.lineTo(470, 200);
            diamond2.lineTo(490, 220);
            diamond2.lineTo(470, 240);
            diamond2.lineTo(450, 220);
            diamond2.end();
    });
</script>