This sample showcases all predefined GoJS figures. This sample also makes use of GoJS Highlighting data bindings: Mouse-hover over a shape to see its name.

You can specify a predefined geometry for a Shape by setting its Shape.figure.

In order to reduce the size of the GoJS library, most predefined figures are in the Figures.js file. You can load this file or simply load only those figures that you want to use by copying their definitions into your code.

A number of very common figures are predefined in go.js: "Rectangle", "Square", "RoundedRectangle", "Border", "Ellipse", "Circle", "TriangleRight","TriangleDown", "TriangleLeft", "TriangleUp", "Triangle", "Diamond", "LineH", "LineV", "BarH", "BarV", "MinusLine", "PlusLine", "XLine", "LineRight", "LineDown", "LineLeft", "LineUp". These figures are filled green above, instead of pink.

With GoJS you can also define your own custom shapes with SVG-like path syntax, see the SVG icons sample for examples or the Geometry Path Strings intro page to learn more.

For predefined arrowheads, see the Arrowheads sample.