Getting Started with Vue 2 Diagram Component

23 Jul 20269 minutes to read

This section explains how to create a Vue 2 application from scratch and build a simple diagram using the Vue Diagram component.

NOTE

Ready to streamline your Syncfusion^® Vue development? Discover the full potential of Syncfusion^® Vue components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant.

Prerequisites

Before getting started, ensure that your development environment meets the system requirements for Syncfusion® Vue UI components.

Syncfusion® Vue components require Node.js 14.0.0 or later and npm 6.14.0 or later.

Before You Begin

This guide uses the Vue 2 application structure generated by Vue CLI.

The main files used in this guide are:

• src/main.js — Application entry point where the Vue Diagram plugin is registered.
• src/App.vue — Defines the root Vue component and renders the Diagram component.

NOTE

This guide uses JavaScript for Vue 2 because Vue CLI generates a JavaScript-based Vue 2 application by default.

Step 1: Set up the Vue 2 environment

Use Vue CLI to create and manage Vue 2 applications. Vue CLI provides a standard project structure and development workflow for Vue 2 applications.

NOTE

The Vue CLI requires Node.js. Verify it is installed by running node -v and npm -v in your terminal before proceeding. See the Prerequisites section for the required versions.

Install Vue CLI globally using the following command:

npm install -g @vue/cli

Verify the Vue CLI installation by running vue --version in your terminal.

Step 2: Create a Vue 2 application

Create a new Vue 2 application using the following command:

vue create my-diagram-app

When prompted, select the Default ([Vue 2] Babel, ESLint) preset.

NOTE

If your project uses TypeScript, select the Manually select features preset and enable TypeScript. The steps in this guide remain the same; only the file extensions change (.ts instead of .js).

Navigate to the project folder:

cd my-diagram-app

Step 3: Install the Vue Diagram package

All Syncfusion Essential® JS 2 packages are available in the npmjs.com registry.

Install the Vue Diagram package using the following command:

npm install @syncfusion/ej2-vue-diagrams

NOTE

Installing @syncfusion/ej2-vue-diagrams automatically installs the required dependency packages.

Step 4: Register the Diagram plugin

Import DiagramPlugin from @syncfusion/ej2-vue-diagrams and register it in the Vue application.

NOTE

Plugin registration via Vue.use(DiagramPlugin) is global and one-time. It registers the ejs-diagram component across the entire Vue application.

Replace the entire contents of src/main.js with the following code:

import Vue from 'vue';
import App from './App.vue';
import { DiagramPlugin } from '@syncfusion/ej2-vue-diagrams';

Vue.config.productionTip = false;
Vue.use(DiagramPlugin);

new Vue({
  render: h => h(App)
}).$mount('#app');

Step 5: Add the required styles

The Diagram component needs Syncfusion® theme styles to display correctly. Syncfusion® theme packages include ready-to-use styles for supported controls.

To add the styles, install the Tailwind 3 theme package using the following command:

npm install @syncfusion/ej2-tailwind3-theme

Add the following import to the src/App.vue file:

<style>
  @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/diagram/index.css";
</style>

For the list of available themes, refer to the Themes documentation.

NOTE

Syncfusion® provides multiple built-in themes. If the application uses a different theme, install the corresponding theme package (for example, npm install @syncfusion/ej2-material3-theme) and replace @syncfusion/ej2-tailwind3-theme/styles/diagram/index.css with the stylesheet from that package, such as @syncfusion/ej2-material3-theme/styles/diagram/index.css. The CSS references can also be moved to a separate global stylesheet (for example, src/styles.css) and imported once in src/main.js if your application follows a centralized styling approach.

Step 6: Add the Diagram component

Add the ejs-diagram component to the Vue component template.

Replace the entire contents of src/App.vue with the following code:

<template>
  <ejs-diagram
    id="diagram"
    width="100%"
    height="580px"
  />
</template>

<script>
  export default {
    name: 'App'
  };
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/diagram/index.css";
</style>

At this stage, the Diagram component renders an empty canvas.

NOTE

The Diagram component must have a valid height; if the height is not set, the canvas may not be visible. In a Vue CLI-generated Vue 2 application, the root element is defined in public/index.html as <div id="app"></div>, and the application is rendered from src/main.js.

Step 7: Create your first Diagram with nodes and connectors

This section explains how to create a simple flowchart by adding nodes, customizing their appearance, and connecting them using connectors.

The following example creates a flowchart with four nodes: Start, Process, Decision, and End. It also applies common node and connector settings through the getNodeDefaults and getConnectorDefaults callback bindings.

Replace the entire contents of src/App.vue with the following code:

<template>
  <ejs-diagram
    id="diagram"
    width="100%"
    height="580px"
    :nodes="nodes"
    :connectors="connectors"
    :getNodeDefaults="nodeDefaults"
    :getConnectorDefaults="connectorDefaults"
  />
</template>

<script>
const terminator = {
  type: 'Flow',
  shape: 'Terminator'
};

const process = {
  type: 'Flow',
  shape: 'Process'
};

const decision = {
  type: 'Flow',
  shape: 'Decision'
};

export default {
  name: 'App',
  data() {
    return {
      nodes: [
        {
          id: 'node1',
          offsetX: 300,
          offsetY: 100,
          shape: terminator,
          annotations: [
            {
              content: 'Start'
            }
          ]
        },
        {
          id: 'node2',
          offsetX: 300,
          offsetY: 200,
          shape: process,
          annotations: [
            {
              content: 'Process'
            }
          ]
        },
        {
          id: 'node3',
          offsetX: 300,
          offsetY: 300,
          shape: decision,
          annotations: [
            {
              content: 'Decision?'
            }
          ]
        },
        {
          id: 'node4',
          offsetX: 300,
          offsetY: 400,
          shape: terminator,
          annotations: [
            {
              content: 'End'
            }
          ]
        }
      ],
      connectors: [
        {
          id: 'connector1',
          sourceID: 'node1',
          targetID: 'node2'
        },
        {
          id: 'connector2',
          sourceID: 'node2',
          targetID: 'node3'
        },
        {
          id: 'connector3',
          sourceID: 'node3',
          targetID: 'node4'
        }
      ]
    };
  },
  methods: {
    nodeDefaults(node) {
      node.width = 140;
      node.height = 50;
      node.style = {
        fill: '#E8F4FF',
        strokeColor: '#357BD2'
      };
      return node;
    },
    connectorDefaults(connector) {
      connector.type = 'Orthogonal';
      connector.targetDecorator = {
        shape: 'Arrow',
        width: 10,
        height: 10
      };
      return connector;
    }
  }
};
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/diagram/index.css";
</style>

In this example:

• offsetX and offsetY define the position of each node.
• shape defines the node shape configuration, and FlowShapeModel.shape specifies flowchart shapes such as Terminator, Process, or Decision.
• The annotations property adds text inside each node using the content field.
• sourceID and targetID define the connection between nodes.
• getNodeDefaults applies common width, height, fill color, and stroke color to all nodes.
• getConnectorDefaults applies common connector settings, such as orthogonal routing and target arrows.

Step 8: Run the application

Run the application using the following command:

npm run serve

Then open the local URL shown in the terminal, such as http://localhost:8080 (the port may differ if 8080 is already in use). The application displays the flowchart diagram as shown below:

The output will appear as follows:

Next steps

• Connectors and routing options
• Automatic layouts
• Labels and annotations
• Full API reference

NOTE

For a Vue 3 version of this guide, see Getting started with the Vue 3 Diagram component.