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.

The diagram also uses the loop function to animate the links by adjusting the Shape.strokeDashOffset every 100 ms.

Diagram Model saved in JSON format:

View this sample page's source in-page

View this sample page's source on GitHub