BPMN flows in Vue Diagram component

BPMN Flows are lines that connects BPMN flow objects.

  • Association
  • Sequence
  • Message

Association flow

BPMN Association flow is used to link flow objects with its corresponding text or artifact. An association is represented as a dotted graphical line with opened arrow. The type of association are as follows.

  • Directional
  • BiDirectional
  • Default

The association property allows you to define the type of association. The following code example illustrates how to create an association.

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

const connectors = [{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 100
  },
  targetPoint: {
      x: 300,
      y: 100
  },
  //Sets type of the connector as Orthogonal
  type: 'Orthogonal',
  //Sets type as Bpmn, shflowape as Association and association as BiDirectional
  shape: {
      type: 'Bpmn',
      flow: 'Association',
      association: 'BiDirectional'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 200
  },
  targetPoint: {
      x: 300,
      y: 200
  },
  //Sets type of the connector as Orthogonal
  type: 'Orthogonal',
  //Sets type as Bpmn, shflowape as Association and association as Directional
  shape: {
      type: 'Bpmn',
      flow: 'Association',
      association: 'Directional'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 300
  },
  targetPoint: {
      x: 300,
      y: 300
  },
  //Sets type of the connector as Orthogonal
  type: 'Orthogonal',
  //Sets type as Bpmn, shflowape as Association and association as Default
  shape: {
      type: 'Bpmn',
      flow: 'Association',
      association: 'Default'
  },
}]
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' :connectors='connectors'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, BpmnDiagrams } from '@syncfusion/ej2-vue-diagrams';

let connectors = [{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 100
  },
  targetPoint: {
      x: 300,
      y: 100
  },
  //Sets type of the connector as Orthogonal
  type: 'Orthogonal',
  //Sets type as Bpmn, shflowape as Association and association as BiDirectional
  shape: {
      type: 'Bpmn',
      flow: 'Association',
      association: 'BiDirectional'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 200
  },
  targetPoint: {
      x: 300,
      y: 200
  },
  //Sets type of the connector as Orthogonal
  type: 'Orthogonal',
  //Sets type as Bpmn, shflowape as Association and association as Directional
  shape: {
      type: 'Bpmn',
      flow: 'Association',
      association: 'Directional'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 300
  },
  targetPoint: {
      x: 300,
      y: 300
  },
  //Sets type of the connector as Orthogonal
  type: 'Orthogonal',
  //Sets type as Bpmn, shflowape as Association and association as Default
  shape: {
      type: 'Bpmn',
      flow: 'Association',
      association: 'Default'
  },
}]
export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
     data() {
        return {
            width: "100%",
            height: "600px",
            connectors: connectors
        }
    },
    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>

The following table demonstrates the visual representation of association flows.

Association Image
Default Default BPMN FlowShapes
Directional Directional BPMN FlowShapes
BiDirectional BiDirectional BPMN FlowShapes

NOTE

The default value for the property association is default.

Sequence flow

A Sequence flow shows the order in which the activities are performed in a BPMN Process and is represented with a solid graphical line. The type of sequence are as follows.

  • Normal
  • Conditional
  • Default

The sequence property allows you to define the type of sequence. The following code example illustrates how to create a sequence flow.

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

const connectors = [{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 100
  },
  targetPoint: {
      x: 300,
      y: 100
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Sequence, and sequence as Default
  shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Default'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 200
  },
  targetPoint: {
      x: 300,
      y: 200
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Sequence, and sequence as Normal
  shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Normal'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 300
  },
  targetPoint: {
      x: 300,
      y: 300
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Sequence, and sequence as Conditional
  shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Conditional'
  },
},]

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' :connectors='connectors'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, BpmnDiagrams } from '@syncfusion/ej2-vue-diagrams';

const connectors = [{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 100
  },
  targetPoint: {
      x: 300,
      y: 100
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Sequence, and sequence as Default
  shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Default'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 200
  },
  targetPoint: {
      x: 300,
      y: 200
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Sequence, and sequence as Normal
  shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Normal'
  },
},
{
  // Position of the node
  sourcePoint: {
      x: 100,
      y: 300
  },
  targetPoint: {
      x: 300,
      y: 300
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Sequence, and sequence as Conditional
  shape: {
      type: 'Bpmn',
      flow: 'Sequence',
      sequence: 'Conditional'
  },
},]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
     data() {
        return {
            width: "100%",
            height: "600px",
            connectors: connectors
        }
    },
    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>

The following table contains various representation of sequence flows.

Sequence Image
Default Default Sequence BPMN Shpae
Conditional Conditional Sequence BPMN Shpae
Normal Normal Sequence BPMN Shpae

NOTE

The default value for the property sequence is “normal”.

Message flow

A message flow shows the flow of messages between two Participants. A message flow is represented by dashed line. The type of message are as follows.

  • InitiatingMessage
  • NonInitiatingMessage
  • Default

The message property allows you to define the type of message. The following code example illustrates how to define a message flow.

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

const connectors = [{
    
  sourcePoint: {
      x: 100,
      y: 100
  },
  targetPoint: {
      x: 300,
      y: 100
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Message, and message as Default
  shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'Default'
  },
},
{
  
  sourcePoint: {
      x: 100,
      y: 200
  },
  targetPoint: {
      x: 300,
      y: 200
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Message, and message as NonInitiatingMessage
  shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'NonInitiatingMessage'
  },
},
{
  
  sourcePoint: {
      x: 100,
      y: 300
  },
  targetPoint: {
      x: 300,
      y: 300
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Message, and message as InitiatingMessage
  shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'InitiatingMessage'
  },
}]

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' :connectors='connectors'></ejs-diagram>
    </div>
</template>
<script>
import { DiagramComponent, BpmnDiagrams } from '@syncfusion/ej2-vue-diagrams';

let connectors = [{
    
  sourcePoint: {
      x: 100,
      y: 100
  },
  targetPoint: {
      x: 300,
      y: 100
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Message, and message as Default
  shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'Default'
  },
},
{
  
  sourcePoint: {
      x: 100,
      y: 200
  },
  targetPoint: {
      x: 300,
      y: 200
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Message, and message as NonInitiatingMessage
  shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'NonInitiatingMessage'
  },
},
{
  
  sourcePoint: {
      x: 100,
      y: 300
  },
  targetPoint: {
      x: 300,
      y: 300
  },
  type: 'Orthogonal',
  //Sets type as Bpmn, flow as Message, and message as InitiatingMessage
  shape: {
      type: 'Bpmn',
      flow: 'Message',
      message: 'InitiatingMessage'
  },
}]

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
     data() {
        return {
            width: "100%",
            height: "600px",
            connectors: connectors
        }
    },
    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>

The following table contains various representation of message flows.

Message Image
Default Default Message BPMN Shape
InitiatingMessage InitiatingMessage Message BPMN Shape
NonInitiatingMessage NonInitiatingMessage Message BPMN Shape

NOTE

The default value for the property message is default.