> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aseeflow.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Process Diagram Visualization

A BPMN process diagram is a formidable place to visualize information around your process. We recommend to use JavaScript libraries to display process diagrams and enrich them with additional information.

In our web applications [Cockpit](/webapps/cockpit) and [Tasklist](/webapps/tasklist), we use [bpmn.io](http://bpmn.io/), a toolkit for rendering BPMN 2.0 process models directly in the browser. It allows adding additional information to the diagram and includes ways for user interaction. Although bpmn.io is still under development, its API is rather stable.

The previous JavaScript BPMN renderer can still be found at [camunda-bpmn.js](https://github.com/camunda/camunda-bpmn.js), but it is not actively developed anymore.

<img src="https://mintcdn.com/aseeflow/y_kj6VdAP14CCcWg/user-guide/process-engine/img/process-diagram-bpmn-js.png?fit=max&auto=format&n=y_kj6VdAP14CCcWg&q=85&s=07dc8cffaa86c28b4917f2ba14273fa3" alt="Process Diagram Rendering" width="1012" height="748" data-path="user-guide/process-engine/img/process-diagram-bpmn-js.png" />

## bpmn.io Diagram Renderer

To render a process diagram, you need to retrieve the diagram XML via the [Java-](https://docs.camunda.org/javadoc/camunda-bpm-platform/7.24/org/camunda/bpm/engine/RepositoryService.html) or [REST API](/reference/rest/process-definition/get-xml-1). The following example shows how to render the process XML using bpmn.io. For more documentation regarding the annotation of the diagram and user interaction, please refer to the [bpmn.io](https://github.com/bpmn-io/bpmn-js) page.

```javascript theme={null}
var BpmnViewer = require('bpmn-js');

var xml = getBpmnXml(); // get the process xml via REST
var viewer = new BpmnViewer({ container: 'body' });

viewer.importXML(xml, function(err) {

  if (err) {
    console.log('error rendering', err);
  } else {
    console.log('rendered');
  }
});
```

Alternatively, you can use the  [bpmn-viewer widget](https://github.com/camunda/camunda-bpm-platform/blob/7.24.0/webapps/frontend/camunda-commons-ui/lib/widgets/bpmn-viewer/cam-widget-bpmn-viewer.html) from the ASEE Flow commons UI.