I am also  working on something similar. My project requires showing the completed node information and the upcoming potential owners. I got the idea of overlaying the image file by an icon (red triangle) from the console using different z-indexes. Current active nodes info added to the data found in NodeInstanceLog should provide much of the information required.

I am assuming one can parse the bpmn file using an xml parser, but I would prefer using KnowledgeBase APIs to find out the nodes, node parameters and metadata. You can get height,width,UniqueId,y,x  using org.drools.definition.process.Node.getMetaData()  (http://docs.jboss.org/jbpm/v5.3/javadocs/org/drools/definition/process/Node.html).

By the way, WorkItemInfo does not keep completed task data, so when a task is completed, there is no way to know who executed task of  a certain node. What I am doing is storing the actor information  (processInstanceId,nodeId,actor) in a table just before an actor is completing the task before it is lost forever.

Where I am struggling is getting potential owners from the process definition.I know potentialOwners does not represent the actual actor that will be completing a task but it would be nice to be able to show who (person or group) is tasked to do certain work. So far I have not found a method that provides this.

If you are using jBPM Designer to model your processes you can genearte and save the process image as SVG or PNG. With SVG you can then either do your own overlays using one of many SVG manipulation libs, use existing open source projects such as https://github.com/esteban-aliverti/jBPM-Process-Image-Processor or use the jBPM Designer JS api to dynamically overlay things ontop of it.

HTH

There you go :

//You probably have just the process instance id. so you need to get teh proc def id
  String processDefId = JPAProcessInstanceDbLog.findProcessInstance(Long.parseLong(processInstanceId)).getProcessId();
// And process name to get a process object. I maintain an XML file to map process ids with process names and process image file names. So that i dont have to hard code process id or name anywhere. You can get the name whichever way you like...
  String processName = ........
  logger.info("Process Name : "+processName);
// FInally you need a process object. using process def id and process name.. 
// read your knowledge base feeding it your process name
  readKnowledgeBase(processName);
  process = kbase.getProcess(processDefId);

//Now you can get the nodes and coordinates using following code.  
  ArrayList<Object> coordinates = new ArrayList<Object>();
  try
  {
   List<NodeInstanceLog> nodeInstanceLogList;
   for (Node node : (Node[])((WorkflowProcessImpl) process).getNodes())
   {
    nodeInstanceLogList = JPAProcessInstanceDbLog.findNodeInstances(Long.parseLong(processInstanceId), new Long(node.getId()).toString());
    if(nodeInstanceLogList.size() == 1)
    {
     logger.info("Name of the Node : "+node.getName());
     coordinates.add(node.getMetaData().get("x"));
     coordinates.add(node.getMetaData().get("y"));
     coordinates.add(node.getMetaData().get("height"));
     coordinates.add(node.getMetaData().get("width"));
    }
   }
   coordinates.add(processName);
  }

Code above gives you the coordinates of the active workitem.

In your jsp you can have an image of your process in a div and another div to create a box or an arrow or whatever using the coordinates from the method above.

Regards.