Appearance in Vue Diagram component

You can change the font style of the annotations with the font specific properties fontSize, fontFamily, color.
The label’s bold, italic, and textDecoration properties are used to style the label’s text.

The label’s fill, strokeColor, and strokeWidth properties are used to define the background color and border color of the annotation and the opacity property is used to define the transparency of the annotations.

The visible property of the annotation enables or disables the visibility of annotation.

The following code illustrates how to customize the appearance of the annotation.

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 { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the node
    annotations: [{
        content: 'Annotation visibility true',
        // Sets the style for the text to be displayed
        style: {
            color: 'blue',
            bold: true,
            italic: true,
            fontSize: 15,
            fontFamily: 'TimesNewRoman',
            fill: 'orange',
            opacity: 0.6,
        },
        visibility:true
    },
    {
        content: 'Annotation visibility false',
        offset: { x: 0.5, y: 1 },
        style: {
          color: 'blue',
          bold: true,
          italic: true,
          fontSize: 15,
          fontFamily: 'TimesNewRoman',
          fill: 'orange',
          whiteSpace: 'PreserveAll',
          opacity: 0.6,
        },
        visibility: false,
    }
    ]
}];

const width = "750px";
const height = "350px";

</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>

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 } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the node
    annotations: [{
        content: 'Annotation visibility true',
        // Sets the style for the text to be displayed
        style: {
            color: 'blue',
            bold: true,
            italic: true,
            fontSize: 15,
            fontFamily: 'TimesNewRoman',
            fill: 'orange',
            opacity: 0.6,
        },
        visibility:true
    },
    {
        content: 'Annotation visibility false',
        offset: { x: 0.5, y: 1 },
        style: {
          color: 'blue',
          bold: true,
          italic: true,
          fontSize: 15,
          fontFamily: 'TimesNewRoman',
          fill: 'orange',
          whiteSpace: 'PreserveAll',
          opacity: 0.6,
        },
        visibility: false,
    }
    ]
}]
export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
        }
    }
}
</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>

Horizontal and vertical alignment

The following tables illustrates all the possible alignments visually with ‘offset (0, 0)’.

Horizontal Alignment	Vertical Alignment	Output with Offset(0,0)
Left	Top
Center	Top
Right	Top
Left	Center
Center	Center
Right	Center
Left	Bottom
Center	Bottom
Right	Bottom

The following codes illustrates how to align annotations.

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 { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the node
    annotations: [{
        content: 'Annotation',
        // Sets the horizontal alignment as left
        horizontalAlignment: 'Left',
        // Sets the vertical alignment as Center
        verticalAlignment: 'Center'
    }]
}];

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

</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>

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 } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the node
    annotations: [{
        content: 'Annotation',
        // Sets the horizontal alignment as left
        horizontalAlignment: 'Left',
        // Sets the vertical alignment as Center
        verticalAlignment: 'Center'
    }]
}];

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

Annotation Margin

Margin is an absolute value used to add some blank space in any one of its four sides. The annotations can be displaced with the margin property. The following code example illustrates how to align a annotation based on its offset, horizontalAlignment, verticalAlignment, and margin values.

Composition API (~/src/App.vue)

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

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the connector
    annotations: [{
        content: 'Task1',
        // Sets the margin for the content
        margin: {
            top: 10
        },
        horizontalAlignment: 'Center',
        verticalAlignment: 'Top',
        offset: {
            x: 0.5,
            y: 1
        }
    }]
}]

const connectors = [{
    sourcePoint: { x: 200, y: 100 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
        {
        content: 'annotation',
        offset: 0.2,
        margin: { left: 40 },
      },
    ],
}]

const width = "750px";
const height = "350px";

</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>

Options API (~/src/App.vue)

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

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the connector
    annotations: [{
        content: 'Task1',
        // Sets the margin for the content
        margin: {
            top: 10
        },
        horizontalAlignment: 'Center',
        verticalAlignment: 'Top',
        offset: {
            x: 0.5,
            y: 1
        }
    }]
}];

const connectors = [{
    sourcePoint: { x: 200, y: 100 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
        {
        content: 'annotation',
        offset: 0.2,
        margin: { left: 40 },
      },
    ],
}]

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

Hyperlink

Diagram provides a support to add a hyperlink for the nodes/connectors annotation. It can also be customized with the below properties.

A User can open the hyperlink in the new window, the same tab and the new tab by using the hyperlinkOpenState property.

The content property of hyperlink is used to display the content of the hyper link display text. The color property of the hyperlink is used to display the color of the hyper link.
The textDecoration property is used to decorate the hyper link text with Underline, LineThrough, Overline. The following example illustrates how to define and customize hyper link in both node and connector.

Composition API (~/src/App.vue)

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

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        hyperlink: {
            link: 'https://stackoverflow.com/',
            //Set the link to open in the current tab
            hyperlinkOpenState: 'NewWindow'
        }
    }]
}]

const connectors = [{
    sourcePoint: { x: 300, y: 200 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        hyperlink: {
          link: 'https://google.com',
          hyperlinkOpenState: 'NewWindow',
          content: 'Google',
          color: 'orange',
          textDecoration: 'Underline',
        },
      },
    ],
}]

const width = "750px";
const height = "350px";

</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>

Options API (~/src/App.vue)

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

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        hyperlink: {
            link: 'https://stackoverflow.com/',
            //Set the link to open in the current tab
            hyperlinkOpenState: 'NewWindow'
        }
    }]
}];

let connectors = [{
    sourcePoint: { x: 300, y: 200 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        hyperlink: {
          link: 'https://google.com',
          hyperlinkOpenState: 'NewWindow',
          content: 'Google',
          color: 'orange',
          textDecoration: 'Underline',
        },
      },
    ],
}]

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

Rotate Annotation

Annotation can be rotated by setting the rotateAngle property of the annotation. The following example shows how to rotate annotation text.

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 { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the node
  annotations: [{
      // Sets the content for the annotation
      content: 'Annotation Text',
      rotateAngle: 45,
  }]
}];

const width = "750px";
const height = "500px";
</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>

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 } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
  // Position of the node
  offsetX: 250,
  offsetY: 250,
  // Size of the node
  width: 100,
  height: 100,
  // Sets the annotation for the node
  annotations: [{
      // Sets the content for the annotation
      content: 'Annotation Text',
      rotateAngle: 45,
  }]
}];

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "500px",
            nodes: nodes,
        }
    }
}
</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 support for annotation

Diagram provides template support for annotation. You can either define a string template and assign it to template property of annotation or define a annotation template in html file and assign it to the annotationTemplate property of the diagram.

String template

For string template you should define a SVG/HTML content as string in the annotation’s template property.

The following code illustrates how to define a template in annotation.

Composition API (~/src/App.vue)

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

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        // Set an template for annotation
        template: '<div><input type="button" value="Submit"></div>'
    }]
}];

const connectors = [{
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
        // Set an template for annotation
        height: 60, width: 100, offset: 0.5,
        template: '<div><input type="button" value="Submit"></div>'
    }]
}];

const width = "750px";
const height = "350px";

</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>

Options API (~/src/App.vue)

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

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
        // Set an template for annotation
        template: '<div><input type="button" value="Submit"></div>'
    }]
}];

let connectors = [{
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
        // Set an template for annotation
        height: 60, width: 100, offset: 0.5,
        template: '<div><input type="button" value="Submit"></div>'
    }]
}];

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

NOTE

For the proper alignment of template, we need to mention width and height for the annotation while using template.

Annotation template

For annotation template you should define a template in html file which you want to render in annotation and assign it to the annotationTemplate property of diagram. This template can be applied to both nodes and connectors within the diagram.

The following code illustrates how to define a annotationTemplate in annotation for nodes and connectors.

Composition API (~/src/App.vue)

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

const itemVue = createApp({}).component("nodeTemplate", {
  template: `<div><input type="button" value="Submit"></div>`,
  data() {
    return {};
  }
});

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{

    }]
}];

const connectors = [{
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
        height: 20
    }]
}];

const width = "750px";
const height = "350px";

const annotationTemplate = function () {
    return { template: itemVue };
};

</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>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <script id="annotationTemplate" >
          <div style="width:100%;height:100%;overflow:hidden"><input type="button" value="Node"
          style="width:100px;" /></div>
        </script>
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :annotationTemplate='annotationTemplate'></ejs-diagram>
    </div>
</template>
<script>
import { createApp } from "vue";
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

let itemVue = createApp({}).component("nodeTemplate", {
  template: `<div><button type="button" style="width:100px"> Button</button></div> `,
  data() {
    return {};
  }
});

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
      
    }]
}];

let connectors = [{
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
        height: 20
    }]
}];

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
            connectors: connectors,
            annotationTemplate: function () {
              return { template: itemVue };
            },
        }
    }
}
</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>

Functional template

We can define a function which would return a string template and assign that method to the annotationTemplate property of diagram. Inside that function we can do customizations based on the id of the annotation.

The following code illustrates how to define a functional template.

Composition API (~/src/App.vue)

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

const itemVue = createApp({}).component("nodeTemplate", {
  template: `<div><input type="button" value="Submit"></div>`,
  data() {
    return {};
  }
});

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{

    }]
}];

const connectors = [{
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
        height: 20
    }]
}];

const width = "750px";
const height = "350px";

const annotationTemplate = function () {
    return { template: itemVue };
};

</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>

Options API (~/src/App.vue)

<template>
    <div id="app">
        <script id="annotationTemplate" >
          <div style="width:100%;height:100%;overflow:hidden"><input type="button" value="Node"
          style="width:100px;" /></div>
        </script>
        <ejs-diagram id="diagram" :width='width' :height='height' :nodes='nodes' :connectors='connectors' :annotationTemplate='annotationTemplate'></ejs-diagram>
    </div>
</template>
<script>
import { createApp } from "vue";
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

let itemVue = createApp({}).component("nodeTemplate", {
  template: `<div><button type="button" style="width:100px"> Button</button></div> `,
  data() {
    return {};
  }
});

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the Node
    annotations: [{
      
    }]
}];

let connectors = [{
    sourcePoint: {
        x: 300,
        y: 100
    },
    targetPoint: {
        x: 400,
        y: 300
    },
    type: 'Orthogonal',
    // Sets the Annotation for the Connector
    annotations: [{
        height: 20
    }]
}];

export default {
    name: "App",
    components: {
        "ejs-diagram": DiagramComponent
    },
    data() {
        return {
            width: "100%",
            height: "350px",
            nodes: nodes,
            connectors: connectors,
            annotationTemplate: function () {
              return { template: itemVue };
            },
        }
    }
}
</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>

Text align

The textAlign property of annotation allows you to set how the text should be aligned (left, right, center, or justify) inside the text block. The following codes illustrate how to set textAlign for an annotation.

Composition API (~/src/App.vue)

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

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Right',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Right',
        },
      },
    ],
  },
  {
    id: 'node2',
    // Position of the node
    offsetX: 300,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Center',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Center',
        },
      },
    ],
  },
  {
    id: 'node3',
    // Position of the node
    offsetX: 500,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Left',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Left',
        },
      },
    ],
  },
  {
    id: 'node4',
    // Position of the node
    offsetX: 700,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Justify',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Justify',
        },
      },
    ],
}];

let connectors = [{
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Right' },
      },
    ],
  },
  {
    sourcePoint: { x: 300, y: 200 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Center' },
      },
    ],
  },
  {
    sourcePoint: { x: 500, y: 200 },
    targetPoint: { x: 700, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Left' },
      },
    ],
  },
  {
    sourcePoint: { x: 700, y: 200 },
    targetPoint: { x: 900, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Justify' },
      },
    ],
}]

const width = "750px";
const height = "600px";

</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>

Options API (~/src/App.vue)

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

let nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Right',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Right',
        },
      },
    ],
  },
  {
    id: 'node2',
    // Position of the node
    offsetX: 300,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Center',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Center',
        },
      },
    ],
  },
  {
    id: 'node3',
    // Position of the node
    offsetX: 500,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Left',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Left',
        },
      },
    ],
  },
  {
    id: 'node4',
    // Position of the node
    offsetX: 700,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    // Sets the annotation for the NOde
    annotations: [
      {
        content: 'Text align is set as Justify',
        // Sets the textAlign as left for the content
        style: {
          textAlign: 'Justify',
        },
      },
    ],
}];

let connectors = [{
    sourcePoint: { x: 100, y: 200 },
    targetPoint: { x: 300, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Right' },
      },
    ],
  },
  {
    sourcePoint: { x: 300, y: 200 },
    targetPoint: { x: 500, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Center' },
      },
    ],
  },
  {
    sourcePoint: { x: 500, y: 200 },
    targetPoint: { x: 700, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Left' },
      },
    ],
  },
  {
    sourcePoint: { x: 700, y: 200 },
    targetPoint: { x: 900, y: 300 },
    type: 'Orthogonal',
    //Path annotation offset
    annotations: [
      {
        content: 'long annotation content for connector anntoation',
        width: 100,
        offset: 0.2,
        style: { textAlign: 'Justify' },
      },
    ],
}]

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

Text Align	Output image
Right
Left
Center
Justify

Text Wrapping

When text overflows node boundaries, you can control it by using text wrapping. So, it is wrapped into multiple lines. The wrapping property of annotation defines how the text should be wrapped. The following code illustrates how to wrap a text in a node.

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 { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
    id: 'node1',
    // Position of the node
    offsetX: 100,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    //Sets the annotation for the node
    annotations: [
    {
        content: 'Annotation Text WrapWithOverflow',
        // Sets the style for the text wrapping
        style: {
            textWrapping: 'WrapWithOverflow',
        },
    },
    ],
},
{
    id: 'node2',
    // Position of the node
    offsetX: 300,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    //Sets the annotation for the node
    annotations: [
    {
        content: 'Annotation Text Wrap',
        // Sets the style for the text wrapping
        style: {
            textWrapping: 'Wrap',
        },
    },
    ],
},
{
    id: 'node3',
    // Position of the node
    offsetX: 500,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    //Sets the annotation for the node
    annotations: [
    {
        content: 'Annotation Text NoWrap',
        // Sets the style for the text wrapping
        style: {
            textWrapping: 'NoWrap',
        },
    },
    ],
}];


const width = "750px";
const height = "350px";
</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>

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 } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
  id: 'node1',
  // Position of the node
  offsetX: 100,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  //Sets the annotation for the node
  annotations: [
    {
      content: 'Annotation Text WrapWithOverflow',
      // Sets the style for the text wrapping
      style: {
        textWrapping: 'WrapWithOverflow',
      },
    },
  ],
},
{
  id: 'node2',
  // Position of the node
  offsetX: 300,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  //Sets the annotation for the node
  annotations: [
    {
      content: 'Annotation Text Wrap',
      // Sets the style for the text wrapping
      style: {
        textWrapping: 'Wrap',
      },
    },
  ],
},
{
  id: 'node3',
  // Position of the node
  offsetX: 500,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  //Sets the annotation for the node
  annotations: [
    {
      content: 'Annotation Text NoWrap',
      // Sets the style for the text wrapping
      style: {
        textWrapping: 'NoWrap',
      },
    },
  ],
}];

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

Value	Description	Image
No Wrap	Text will not be wrapped.
Wrap	Text-wrapping occurs, when the text overflows beyond the available node width.
WrapWithOverflow (Default)	Text-wrapping occurs, when the text overflows beyond the available node width. However, the text may overflow beyond the node width in the case of a very long word.

Text overflow

The label’s TextOverflow property is used control whether to display the overflowed content in node or not.

• Clip - The text which overflowing node’s bounds will be removed.
• Ellipsis - The text which overflowing nodes’s bounds will be replaced by three dots.
• Wrap - Entire text will be rendered overflowing in y-axis and wrapped in x-axis.

Types of text overflow are shown in below table.

TextOverflow	output image
Clip
Ellipsis
Wrap(Default)

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 { DiagramComponent as EjsDiagram } from '@syncfusion/ej2-vue-diagrams';

const nodes = [{
  // Position of the node
  offsetX: 100,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'WrapWithOverflow' },
    },
  ],
},

{
  // Position of the node
  offsetX: 100,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'WrapWithOverflow' },
    },
  ],
},

{
  // Position of the node
  offsetX: 100,
  offsetY: 700,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 500,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 700,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'WrapWithOverflow' },
    },
  ],
}];

const width = "750px";
const height = "600px";

</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>

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 } from '@syncfusion/ej2-vue-diagrams';

let nodes = [{
  // Position of the node
  offsetX: 100,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 100,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Clip WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Clip', textWrapping: 'WrapWithOverflow' },
    },
  ],
},

{
  // Position of the node
  offsetX: 100,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 300,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Ellipsis WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Ellipsis', textWrapping: 'WrapWithOverflow' },
    },
  ],
},

{
  // Position of the node
  offsetX: 100,
  offsetY: 700,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap Wrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'Wrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 300,
  offsetY: 500,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap NoWrap',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'NoWrap' },
    },
  ],
},
{
  // Position of the node
  offsetX: 500,
  offsetY: 700,
  // Size of the node
  width: 100,
  height: 100,
  annotations: [
    {
      content: 'Wrap WrapWithOverflow',
      offset: { x: 0.5, y: 1.4 },
    },
    {
      content:
        'Long Annotation Text, Long annotation text long annotation text long annotation text long annotation text',
      style: { textOverflow: 'Wrap', textWrapping: 'WrapWithOverflow' },
    },
  ],
}];

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