This is a minimalist HTML and JavaScript skeleton of the GoJS Sample processFlow.html. It was automatically generated from a button on the sample page, and does not contain the full HTML. It is intended as a starting point to adapt for your own usage. For many samples, you may need to inspect the full source on Github and copy other files or scripts.

This text is displayed if your browser does not support the Canvas HTML element.

A process flow diagram is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment. A simple SCADA diagram, with animation of the flow along the pipes, is implemented here.

The diagram displays the background grid layer by setting grid.visible to true, and also allows snapping to the grid using DraggingTool.isGridSnapEnabled, ResizingTool.isGridSnapEnabled, and RotatingTool.snapAngleMultiple alongside RotatingTool.snapAngleEpsilon.

There is also a custom animation that modifies the Shape.strokeDashOffset for each link.

Diagram Model saved in JSON format:

GoJS version 2.3.3. Copyright 1998-2023 by Northwoods Software.

View this sample page's source on GitHub