SVG for Process Visualisation

This paper reports on a persistent challenge for developers who want to visualize the process that is executed under the hood of a application. Typically, such a process is initiated by an end-user via the user interface. It is quite natural that the execution steps in the process are not visible from the perspective of the user interface, except when an error occurs. Hence, the end-user is often unaware of the complexity of the executed process, which might quite often be a distributed process. And we want to keep it that way, except in the cases where we use the application for demonstration, instruction or scientific purposes, with the focus on what happens exactly under the hood of the application when we perform such and such action. To visualize the process in realtime, a monitoring framework is required that monitors the events in an application and translates these events into a graphical representation that can easily be understood and adapted by the demonstration or instruction group. In the latter phase, SVG can play an important rol because of its extensive range of graphics concepts, its highly dynamic nature and because it is programmable though Java or JavaScript. We will present a generic infrastructure for monitoring events in applications that dynamically adapts an SVG representation of an underlying logical process model. The same approach can also be used for monitoring events in distributed applications, and in both inter and intra-business processes.

The monitoring framework offers a number of features, including pushing of XML events (typically originating from an application that should be visualized) from a server to a client web browser over a persistent http connection, easy client side JavaScript XML parsing, mapping of xml events to graphical updates that control the SVG representation of the process, and also event queuing facilities to delay the event flow of high-speed applications, in order to adapt the visualization speed to human perception capabilities. To translate the incoming XML events into animation and manipulation of the SVG model, a dedicated XML based transformation language has been developed.

The SVG representation can be designed by a human for relatively simple processes. For more complex processes, however, it is more appropriate to generate the SVG automatically (using XSLT) from a formal (business) process model, expressed in XML based standards for process modelling, including ebXML BPSS, BPEL4WS, UML/XMI or RSD studio models. Often, these standards already include a graphical respresentation of the process that can be translated into a SVG representation with the proper hooks and APIs to serve as a process visiualiser in the monitoring framework. An additional advantage of an automatic transformation is that it can also serve to generate a template for the transformation from events to actions. This template can then be completed by the developer who knows how events translate into actions on the different elements of the process model.

The framework has been tested in several demonstrations of (distributed) applications, including business web services, electronic marketplaces, and mobile service delivery. SVG has been found to be a powerful and flexible technology to display dynamic process models controlled by realtime events from running applications, that deliver insight in the processes executed under the hood of these applications. However, a small number of open issues still remain, including the generation of a surveyable SVG representation of rather complex processes, the visualisation of parallel events arriving in the same message queue, and for the developers, intelligent development environments that support easy SVG scripting with debugging capability.