Bpmn shapes in Vue Diagram component

28 Mar 20254 minutes to read

BPMN shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, in the node property shape, type should be set as “bpmn” and its shape should be set as any one of the built-in shapes. The following code example illustrates how to create a simple business process.

NOTE

If you want to use BPMN shapes in diagram, you need to inject BpmnDiagrams in the diagram.

Composition API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, BpmnDiagrams } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  //Sets type as Bpmn and shape as Event
  shape: {
      type: 'Bpmn',
      shape: 'Event',
      // set the event type as End
      event: {
          event: 'End'
      }
  }
}]

const width = "100%";
const height = "350px";

provide('diagram', [BpmnDiagrams]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, BpmnDiagrams } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  //Sets type as Bpmn and shape as Event
  shape: {
      type: 'Bpmn',
      shape: 'Event',
      // set the event type as End
      event: {
          event: 'End'
      }
  },
},]
export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
        }
    },
    provide: {
        diagram: [BpmnDiagrams]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>

NOTE

The default value for the property shape is “event”.

The list of BPMN shapes are as follows:

Shape	Image
Event
Gateway
Task
Message
DataSource
DataObject
Group

The BPMN shapes and its types are explained as follows.