GoJS supports the notion of "Comment"s. A "Comment" is a node that is linked with another node but is positioned by some layouts to go along with that other node, rather than be laid out like a regular node and link.

In this sample there are three "Comment" nodes, connected with regular nodes by three "Comment" links. Node and link data are marked as "Comment"s by specifying "Comment" as the category. But the "Comment" nodes and links have a different default template, and thus a different appearance, than regular nodes and links. You can specify your own templates for "Comment" nodes and "Comment" links. The "Comment" link template defined here uses the BalloonLink class defined in BalloonLink.js in the Extensions directory.

Initial Diagram.model saved in JSON format:

  

GoJS Features in this sample

Links

The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS Intro.

Related samples


Tree Layout

This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.

Related samples


Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples