Home | AJAX Demos | Java Demos | Products

Java Process Flow Diagram Editor

This is an example of a Process Flow Diagram (PFD) editor written entirely in Java that may be run inside a browser or as a stand-alone Java application.

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 data while it is being edited.

The saved diagram may be loaded into a simple viewer which displays the diagram and updates it with live data. The viewer may be either a Java applet, or a server-side AJAX component that uses the GLG Graphics Server.

The flow diagram can be extended by adding custom connectivity rules and other application-specific features. Click here for more information.

Click here for the description of the demo features and details of the User Interaction.
Click here to view the source code.
The GLG Demo Download contains the C/C++ version of the Process Flow Diagram Editor.

Applet Source Code

Description of Features and User Interaction

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

  • Object Palette
  • Node and Edge Objects
  • Modality
  • Connectivity Information
  • Object Selection and Editing
  • Selection Feedback
  • Prompt Area
  • Properties Editing and Attaching Custom Data
  • Attaching Data Sources
  • Cut and Paste
  • Zooming, Scrolling and ZoomTo Features
  • Automatic Tooltips on mouse over
  • Saving the Drawing and Traversing Object Data
  • PostScript Printing
  • Object Palette

    Allows creating objects by selecting them from a palette. To create objects, click on the icons in the palette, then click in the drawing to position an object.


    There are two modes for creating nodes and links. In the default creation mode, the edition 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 finish creating objects, click on the "Select" icon or disable the "sticky" mode using the Creation Mode toolbar button.

    Node and Edge Objects

    Two kinds of objects are provided: node objects and edge (connector) objects. To connect two nodes, select the edge type from the palette, then select two nodes in the drawing. Keep selecting nodes to create more then one connector object.

    Connectivity Information

    The demo uses custom data to keep track of what nodes are connected. This may be used for traversing connected nodes, etc.

    Object Selection and Editing

    Press the Select button in the Object palette to activate editing mode. In editing mode, you can move the object with the mouse, edit its properties and perform other editing operations using the toolbar buttons. Both nodes and edges can be edited.

    Selection Feedback

    The name (or other properties) of the selected objects are displayed in the selection display area at the bottom.

    Prompt Area

    Prompts and error messages are displayed in the message area at the bottom.

    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 custom data properties associated with the objects are edited, but the graphical properties (colors, etc.) may be edited in the same way using color palettes, etc. The custom data are attached to the object and are automatically saved with the drawing.

    Attaching Data Sources

    The Data Source field 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 as they are edited.

    The Select button next to the Data Source field 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 (Cut and Paste toolbar buttons)

    Zooming, Scrolling and ZoomTo Features

  • The ZoomIn/ZoomOut buttons and a zoom slider may be used for zooming.
  • The 100% button restores initial zooming.
  • To zoom to an area, press the ZoomTo button, then select a rectangle to zoom to (click, drag, then release the mouse).
  • Scrollbars on the side of the drawing may be used for scrolling.
  • Automatic Tooltips

    Position a mouse over any button to display a tooltip

    Saving the Drawing and Traversing Object Data (Save toolbar button)

    The demo source code shows two ways of saving the drawing:

  • Saving the drawing file
  • Traversing all objects and saving only the data associated with the objects (the default in the demo). In the demo, saved information is also printed on the Java Console.
  • Loading a Previously Saved Drawing (Insert toolbar button)

    PostScript Printing (Print toolbar button)

    Generates a PostScript file for the stand-alone version of the demo. Java printing may also be used. For an applet, the browser's print button may be used for printing.