This pretends to show a sheet of paper with the diagram on it.
Both the DraggingTool and the ResizingTool are constrained to keep the nodes within the area of the sheet of paper, minus the margins. The
user can zoom and scroll/pan normally. There are several variables, such as pageSize, that govern how the sheet of paper is set up.
The Legend is implemented with a template that is assumed to only be used for a single Part. It is located at the bottom right corner of the usable area. Its text can be edited, and the legend adapts in size automatically.
GoJS provides functionality to display a grid of lines drawn at regular intervals. Grid Panels can also force dragged parts to be aligned on grid points, and resize parts to be multiples of the grid cell size.
Grids are implemented using a type of Panel, Panel.Grid. Grid Panels, like most other types of Panels, can be used within Nodes or any other kind of Part. However when they are used as the Diagram.grid, they are effectively infinite in extent.
More information can be found in the GoJS Intro.
A Legend can be created for a Diagram using a simple Part. Typically that is added directly to the Diagram as an unmodeled Part, not as a template with data in the Model. However you may want to define a template and add a legend data object to the model so that you can parameterize the legend with information persisted with the model.
Usually a legend will be created as an "Auto" Panel for a border around a "Table" Panel holding information about the types of nodes and/or links that are in the diagram.
It probably will want to be in the "ViewportBackground" or "ViewportForeground" Layer so that it is always visible in the viewport despite scrolling or zooming. Set the GraphObject.alignment property to position it where you want it to be; by default it will be in the lower right corner. However you may want to treat the legend Part as a regular Part in the Diagram, possibly laid out by the diagram's Diagram.layout.
More information can be found in the GoJS Intro.