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.

As of 2.0: In order to shrink the size of the GoJS library we no longer define most predefined figures in the library. Instead, you can find all of their definitions 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 remain predefined in version 2.0. The figures that remain in 2.0 are: "Rectangle", "Square", "RoundedRectangle", "Border", "Ellipse", "Circle", "TriangleRight", "TriangleDown", "TriangleLeft", "TriangleUp", "Triangle", "Diamond", "LineH", "LineV", "BarH", "BarV", "MinusLine", "PlusLine", "XLine". 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.