Process Diagram in Custom API representation

Camunda 8 Topics
1

Hi Team,
I would like to show the graphical presentation in my own UI application. Do we have any Rest api is available in Camunda to show the process in this diagram manner ?
Camunda 7 or Camunda 8. Plz suggest both

image
image1083×259 12.2 KB

2

Hello @vinothkumar ,

for UI rendering, you might want to use bpmn.io

For Camunda 7, the xml can be retrieved here: Get BPMN 2.0 XML | docs.camunda.org

For Camunda 8, the xml can be retrieved here: Operate API (REST) | Camunda Platform 8 (ProcessDefinitions → XML)

If you need overlays (to show process instances in the diagram, …), you have to create them and link them to the BPMN XML element id. An example can be found here: https://github.com/camunda-consulting/camunda-8-code-examples/blob/main/camunda-8-process-application/camunda-8-process-application-frontend/src/components/viewer/BpmnViewer.vue

I hope this helps

Jonathan

3

Thanks @jonathan.lukas

I am working with Angular Application in front end. which one I can use it to show the BPMN file and flow similar like cockpit ?

4

Hello @vinothkumar ,

the example I have provided uses bpmn.io inside Vue.js

The approach for Angular should be pretty similar, I refer to the above mentioned vue file with code lines:

  1. use bpmn-js - npm
  2. copy the code from line 14 to 31 into your onMounted event listener. Adjust to your needs.
  3. make it “pretty” (see line 39-55)

Jonathan

1 Like