Home | Demos | Products

GLG Process Flow Diagram Editor Web Demo (HTML5 & JavaScript)

This is an example of a Process Flow Diagram (PFD) Editor written entirely in JavaScript using the GLG Extended API. The PFD editor allows the user to create a process flow diagram by placing and connecting process equipment and attaching data sources for real-time updates. The flow diagram may be updated with live data while it is being edited. A saved diagram may be loaded into a simple Web viewer which displays the diagram and updates it with real-time data.

The user interface and the dynamic icons of the PFD editor were built using the GLG Graphics Builder. The resulting drawing was saved into a file which is then loaded in a JavaScript program on a web page. The GLG API is used to handle user interaction with the drawing.

Mobile Devices Note: The process symbols in this demo use attachment points that are intended for the desktop use. For mobile devices with small screens, simpler process symbols with a single attachment point in the center of a symbol may be used, as shown in the Diagram Demo.

The GLG Demo Download contains the desktop versions of this demo implemented in C/C++/C# and Java that provide the same functionality as the JavaScript version. The drawing and the programming logic are shared between all versions of the demo with only syntax differences in the source code. More information

Description of Features and User Interaction

The Diagram Editor provides a sample implementation of the following features:

Object Palette

The Object Palette contains custom dynamic icons created in the GLG Graphics Builder. To create a diagram node, click on a desired node icon in the palette, then click in the drawing to position the node. The create a link between two nodes, click on a link icon, then click on two nodes in the drawing to be connected.


There are two modes for creating nodes and links. In the default creation mode, the editing mode is restored to the Selection mode after creating each node or link. To create several nodes, the user has to click on a node icon each time before clicking in the drawing to position the node.

The Creation Mode toolbar button toggles between the default creation mode and the "sticky" creation mode.

In the "sticky" mode, the creation mode stays active to allow the user to create several nodes or links in a row by repeatedly clicking in the drawing area, without a need to click on the node or link icon each time. To exit object creation mode, click on the Select icon in the Object Palette or disable the "sticky" mode using the Creation Mode toolbar button.

Custom Node and Edge Objects

Two types of objects are available for creating a diagram: node objects and edge (connector) objects. To connect two nodes, select the edge type from the palette, then select two nodes in the drawing. Some nodes have more than one connection point; connection points are highlighed when the mouse moves over them.

Connectivity Information

The demo uses custom data to keep track of what nodes are connected. This may be used by an application for traversing connected nodes. The connectivity information is stored when the digram is saved and restored when the saved diagram is loaded.

The flow diagram can be extended by adding custom connectivity rules and other application-specific features. More information

Object Selection and Editing

The editing mode is activated by pressing the Select button in the Object Palette. In the editing mode, you can move nodes and edges with the mouse, edit their properties and perform other editing operations using the toolbar buttons.

Selection Feedback

In the demo, the name of the selected object is displayed in the selection display area at the bottom. In an application, a custom handling can be performed when an object is selected or unselected.

Prompt Area

Prompts and error messages are displayed in the message area at the bottom of the diagram. The errors are also displayed in an alert dialog and logged to the broser console.

Properties Editing and Attaching Custom Data

The Properties toolbar button may be used to popup the Properties Dialog for the selected object. In this demo, the dialog is used for editing custom data properties associated with the object, but the graphical properties (such as colors, etc.) may be edited the same way using either a color palette or a text box. The custom data are attached to the object: they are saved when the diagram is saved and restored when the saved diagram is loaded.

Attaching Data Sources for Real-Time Updates

The Data Source text box of the Properties dialog may be used to define the data source of live data to update the graphical icon in the drawing. For example, a data source providing a tank level may be associated with a tank object to display changing data from a live data source. The objects in the diagram may be updated with live data while they are being edited.

The Select button next to the Data Source text box of the Properties Dialog brings the list of available data sources to choose from. In an application, the list of the data sources may be queried from a process database or a PLC.

Cut and Paste

The Cut toolbar button may be used to delete a node or link, and the Paste button may be used to undo the Cut action.

Zooming, Scrolling and ZoomTo Features

Integrated Tooltips

Hover a mouse over any button to display a tooltip. On mobile devices, touch and hold a button to display its description.

Saving the Diagram

The Save toolbar button demonstrates saving the created diagram as a JSON string. This string can be sent to a server for persistent storage. The JSON string is also printed to the console for information and debugging.

Loading a Previously Saved Drawing

The Load toolbar button loads a previously saved diagram. In the demo, it loads a diagram from the JSON string generated by the Save action. In an application, the JSON string containing a previously saved diagram can be loaded from a server.


The Print toolbar button can be used to print the diagram web page using the browser's native print dialog.