BPMN Event in Vue Diagram component

Event

An event is notated with a circle and it represents an event in a business process. The type of events are as follows:

* Start
* Intermediate
* NonInterruptingStart
* NonInterruptingIntermediate
* ThrowingIntermediate
* End

The event property of the node allows you to define the type of the event. The default value of the event is start. The following code example illustrates how to create a BPMN event.

<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: 150,
      offsetY: 150,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as Start and trigger as None
        event: {
          event: 'Start',
          trigger: 'None',
        },
      },
    },
    {
      // Position of the node
      offsetX: 350,
      offsetY: 150,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as Intermediate and trigger as None
        event: {
          event: 'Intermediate',
          trigger: 'None',
        },
      },
    },
    {
      // Position of the node
      offsetX: 550,
      offsetY: 150,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as End and trigger as None
        event: {
          event: 'End',
          trigger: 'None',
        },
      },
    },
    {
      // Position of the node
      offsetX: 150,
      offsetY: 350,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as NonInterruptingStart and trigger as Timer
        event: {
          event: 'NonInterruptingStart',
          trigger: 'Timer',
        },
      },
    },
    {
      // Position of the node
      offsetX: 350,
      offsetY: 350,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as NonInterruptingIntermediate and trigger as Escalation
        event: {
          event: 'NonInterruptingIntermediate',
          trigger: 'Escalation',
        },
      },
    },
    {
      // Position of the node
      offsetX: 550,
      offsetY: 350,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as ThrowingIntermediate and trigger as Compensation
        event: {
          event: 'ThrowingIntermediate',
          trigger: 'Compensation',
        },
      },
    }]

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

provide('diagram', [BpmnDiagrams]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>
<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: 150,
      offsetY: 150,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as Start and trigger as None
        event: {
          event: 'Start',
          trigger: 'None',
        },
      },
    },
    {
      // Position of the node
      offsetX: 350,
      offsetY: 150,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as Intermediate and trigger as None
        event: {
          event: 'Intermediate',
          trigger: 'None',
        },
      },
    },
    {
      // Position of the node
      offsetX: 550,
      offsetY: 150,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as End and trigger as None
        event: {
          event: 'End',
          trigger: 'None',
        },
      },
    },
    {
      // Position of the node
      offsetX: 150,
      offsetY: 350,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as NonInterruptingStart and trigger as Timer
        event: {
          event: 'NonInterruptingStart',
          trigger: 'Timer',
        },
      },
    },
    {
      // Position of the node
      offsetX: 350,
      offsetY: 350,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as NonInterruptingIntermediate and trigger as Escalation
        event: {
          event: 'NonInterruptingIntermediate',
          trigger: 'Escalation',
        },
      },
    },
    {
      // Position of the node
      offsetX: 550,
      offsetY: 350,
      // Size of the node
      width: 100,
      height: 100,
      //Sets type as Bpmn and shape as event
      shape: {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as ThrowingIntermediate and trigger as Compensation
        event: {
          event: 'ThrowingIntermediate',
          trigger: 'Compensation',
        },
      },
    }]
export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "600px",
            nodes: nodes
        }
    },
    provide: {
        diagram: [BpmnDiagrams]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
</style>

BPMN event trigger

Event triggers are notated as icons inside the circle and they represent the specific details of the process. The trigger property of the node allows you to set the type of trigger and by default, it is set as none. The following table illustrates the type of event triggers.

Triggers Start Non-Interrupting Start Intermediate Non-Interrupting Intermediate Throwing Intermediate End
None None Trigger Start event BPMN Shape None Trigger Interupting event BPMN Shape None Trigger Intermediate event BPMN Shape None Trigger NonInteruptingIntermediate BPMNShape None Trigger Throwing Intermediate None Trigger End event event BPMNShape
Message Message Trigger Start Event BPMN Shape Message Trigger NonInterupting Event BPMN Shape Message Trigger Intermediate Event BPMN Shape Message Trigger NonInteruptingIntermediate Event BPMN Shape Message Trigger ThrowingIntermediate Event BPMNShape Message Trigger End Event BPMN EndShape
Timer Timer Trigger Start Event BPMNShape Timer Trigger NonInterupting Event BPMN Shape Timer Trigger Intermediate Event BPMN Shape Timer Trigger NonInteruptingIntermediate Event BPMN Shape Timer Trigger Throwing intermediate Timer Trigger End Event BPMN EndShape
Conditional Conditional Trigger Start BPMN Shape Conditional Trigger NonInterupting BPMN Shape Conditional Trigger Intermediate BPMN Shape Conditional Trigger NonInteruptingIntermediateBPMNShape Conditional Trigger Throwing intermediate BPMNShape Conditional Trigger End BPMN shape
Link Link Trigger Start BPMN Shape Link Trigger NonInterruptingStart BPMN Shape Link Trigger Intermediate Event BPMNShape Link Trigger NonInterrupting intermediate BPMN Shape Link Trigger ThrowingIntermediate Event BPMN Shape Link Trigger End BPMN Shape
Signal Signal Trigger Start Event BPMN Shape Signal Trigger NonInterrupting Event BPMN Shape Signal Trigger Intermediate Event BPMN Shape Signal Trigger NonInterrupting Event BPMN Shape SignalThrowing Trigger Intermediate Event BPMN Shape Signal Trigger End Event BPMN Shape
Error Error Trigger Start Event BPMN Shape Error Trigger Start Event BPMN Shape Error Trigger Intermediate Event BPMN Shape Error Trigger NonInterrupting intermediate BPMN Shape Error Trigger Throwing intermediate BPMN Shape Error Trigger End Event BPMN Shape
Escalation Escalation Trigger Start Event BPMN Shape Escalation Trigger Non-Interrupting Event BPMN Shape Escalation Trigger Intermediate Event BPMN Shape Escalation Trigger Non-Interrupting Event BPMN Shape Escalation Trigger Throwing Intermediate Event BPMN Shape Escalation Trigger End Event BPMN Shape
Termination Termination Trigger Start Event BPMN Shape Termination Trigger NonInterruptingStart Event BPMN Shape Termination Trigger Intermediate Event BPMN Shape Termination Trigger NonInteruptingIntermediate Event BPMN Shape Termination Trigger Throwing intermediate Event BPMN Shape Termination Trigger End Event BPMN Shape
Compensation Compensation Trigger Start Event BPMN Shape Compensation Trigger NonInterruptingStart Event BPMN Shape Compensation Trigger Intermediate Event BPMN Shape Compensation Trigger NonInteruptingIntermediate Event BPMN Shape Compensation Trigger Throwing Intermediate Event BPMN Shape Compensation Trigger End BPMN Event Shape
Cancel Cancel Trigger Start Event BPMN Shape Cancel Trigger NonInterruptingStart Event BPMN Shape Cancel Trigger Intermediate Event BPMN Shape Cancel Trigger NonInteruptingIntermediate Event BPMN Shape Cancel Trigger ThrowingIntermediate Event BPMN Shape Cancel Trigger End Event BPMN Shape
Multiple Multiple Trigger Start Event BPMN Shape Multiple Trigger Non-Interrupting Event BPMN Shape Multiple Trigger Intermediate BPMN Shape Multiple Trigger Non-Interrupting Event BPMN Shape Multiple Trigger Throwing Intermediate Event BPMN Shape Multiple Trigger End Event BPMN Shape
Parallel Parallel Trigger Start Event BPMN Shape Parallel Trigger Non-Interrupting Event BPMN Shape Parallel Trigger Intermediate Event BPMN Shape Parallel Trigger End Event BPMN Shape Parallel Trigger ThrowingIntermediate Event BPMN Shape Parallel Trigger End Event BPMN Shape