Syncfusion Vue Diagram

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and npm packages (Vue 2/3/Next.js/Preact)
• Project setup with Vite/CRA
• CSS imports and theme configuration
• Basic DiagramComponent usage
• Module injection basics

Core Elements: Nodes

📄 Read: references/nodes.md

• Creating and adding nodes to diagrams
• Node positioning (offsetX/Y, width/height)
• Node shape types (Flow, Basic, Path)
• Styling nodes (fill, stroke, opacity, shadows)
• Node customization and templates
• Expand/collapse functionality
• Node events and callbacks

Core Elements: Connectors

📄 Read: references/connectors.md

• Connector types (Straight, Orthogonal, Bezier)
• Segment configuration and routing
• Connecting nodes via sourceID/targetID
• Advanced segments and bezier curves
• Connector customization and styling
• Connector events and interaction

Annotations: Labels & Text

📄 Read: references/labels-and-annotations.md

• Adding labels to nodes and connectors
• Label styling (font, color, alignment, rotation)
• Label interaction (edit, drag, resize)
• Label positioning and offset
• Label events

Connection Points: Ports

📄 Read: references/ports.md

• Port types and connection points on nodes
• Port positioning and visibility
• Port appearance and styling
• Connecting connectors to specific ports
• Port interaction and events

Shapes & Visual Styling

📄 Read: references/shapes-and-styles.md

• Built-in shape types (Flow, Basic, Path, Image, HTML)
• Flow chart shape reference
• Style properties (fill, stroke, dash, shadow)
• CSS class customization
• Theme integration

BPMN Diagrams

📄 Read: references/bpmn-diagrams.md

• BPMN module injection and setup
• BPMN shape overview and types
• Activities (task, subprocess, expanded subprocess)
• Events (start, end, intermediate)
• Gateways (exclusive, parallel, inclusive)
• Flows (sequence, message, association)
• Data objects and data sources
• Groups and text annotations

UML Diagrams

📄 Read: references/uml-diagrams.md

• UML class diagrams
• Classifier shapes (class, interface, enumeration)
• UML relationships and associations
• UML sequence diagrams
• Lifelines and message interactions

Automatic Layouts

📄 Read: references/layouts.md

• Hierarchical tree layout
• Organizational chart layout
• Mindmap layout
• Radial tree layout
• Flowchart layout
• Complex hierarchical configurations
• Layout customization and spacing
• Layout events and callbacks

Swimlanes & Phases

📄 Read: references/swimlanes.md

• Swimlane structure and overview
• Creating lanes and phases
• Swimlane children and header configuration
• Swimlane palette
• Swimlane interaction

Grouping & Containers

📄 Read: references/groups-and-containers.md

• Grouping nodes together
• Group operations (add/remove children)
• Container nodes and nesting
• Padding and layout within containers

Symbol Palette

📄 Read: references/symbol-palette.md

• SymbolPaletteComponent setup
• Defining palette symbols
• Drag & drop to diagram
• Palette customization (icons, search, size)
• Palette events and interactions

Data Binding

📄 Read: references/data-binding.md

• DataManager and dataSourceSettings
• id/parentId mapping for hierarchies
• Rendering org-charts from JSON data
• Remote data via DataManager (OData/Web API/REST)
• setNodeTemplate for data-driven rendering

Interaction & Tools

📄 Read: references/interaction-and-tools.md

• Selection, drag, resize interactions
• Tool modes (pointer, draw, pan)
• Constraints (node, connector, diagram)
• Commands and keyboard shortcuts
• Undo/Redo functionality
• Context menus
• User handles

Serialization & Export

📄 Read: references/serialization-and-export.md

• Save/load diagrams as JSON
• Export to image (PNG, SVG, JPG) — use exportDiagram (inject PrintAndExport)
• Print functionality
• Visio file import/export (experimental; inject ImportAndExportVisio)
• EJ1 migration serialization

Diagram Settings & Configuration

📄 Read: references/diagram-settings.md

• Layers (add, lock, visibility, selection)
• Virtualization (performance optimization)
• Grid lines (snapping, dots/lines)
• Ruler (horizontal/vertical)
• Scroll settings
• Page settings (size, orientation, margins)
• Tooltip configuration
• Overview panel
• Localization and accessibility

Quick Start

<template>
  <div id="app">
    <ejs-diagram 
      id="diagram"
      :width="width"
      :height="height"
      :nodes="nodes"
      :connectors="connectors"
      :snapSettings="snapSettings"
    ></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent,SnapConstraints } from '@syncfusion/ej2-vue-diagrams';
export default {
  name: "App",
  components: {
      "ejs-diagram": DiagramComponent
  },
  data() {
      return {
          width: "100%",
          height: "590px",
          nodes: [
            {
              id: 'node1',
              width: 100,
              height: 100,
              offsetX: 250,
              offsetY: 250,
              style: { fill: '#6BA3D5' },
              annotations: [{ content: 'Node 1' }]
            },
            {
              id: 'node2',
              width: 100,
              height: 100,
              offsetX: 450,
              offsetY: 250,
              style: { fill: '#6BA3D5' },
              annotations: [{ content: 'Node 2' }]
            }
          ],
          connectors: [
            {
              id: 'connector1',
              sourceID: 'node1',
              targetID: 'node2',
              type: 'Orthogonal'
            }
          ],
          snapSettings: {
            constraints: SnapConstraints.None
          }
      }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css';
</style>

Vue 2 vs Vue 3 Decision Guide

⚠️ CRITICAL: Syncfusion Diagram works with both Vue 2 and Vue 3, but patterns differ significantly.

Quick Decision Tree

┌─ Do you have an existing Vue project?
│
├─ YES, it's Vue 3 (Vite, create-vue, etc.)
│  └─ Use: Composition API with <script setup>
│     ✅ Modern, performant, recommended
│     📄 Read: getting-started.md (Vue 3 Composition API section)
│
├─ YES, it's Vue 2 (Vue CLI, legacy projects)
│  └─ Use: Options API with export default
│     ✅ Compatible, but consider migrating
│     📄 Read: getting-started.md (Vue 2 section)
│
└─ NO, starting fresh
   └─ Recommended: Vue 3 with Vite
      ✅ Fastest, most modern
      📄 Read: getting-started.md (Vite + Vue 3 setup)

Version Signatures

Vue 3 Composition API (Recommended):

import { ref } from 'vue';
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

const nodes = ref([...]);  // ← Use ref()

Vue 2 Options API:

import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams';

export default {
  data() {
    return {
      nodes: [...]  // ← Use data()
    }
  }
}

⚡ Pro Tip: If you're unsure, default to Vue 3 Composition API—it's the industry standard for new Syncfusion projects.

Common Patterns

Pattern 1: Creating Flowchart with Auto Layout

// Use hierarchical layout with nodes and connectors
const layout = {
  type: 'HierarchicalTree',
  orientation: 'TopToBottom',
  horizontalSpacing: 50,
  verticalSpacing: 50,
  getLayoutInfo: (node, options) => {
    // Customize layout per node
  }
};
diagram.layout = layout;
diagram.doLayout();

Pattern 2: Data-Driven Organization Chart

// Render org chart from JSON data with DataManager
const dataSettings = {
  id: 'id',
  parentId: 'manager',
  dataSource: new DataManager(employeeData)
};
diagram.dataSourceSettings = dataSettings;

Pattern 3: Interactive Node Selection

// Handle node selection events
diagram.selectionChange = (args) => {
  console.log('Selected:', args.newItems);
};

// In Vue: bind the selectionChange event and read newValue/oldValue
// <ejs-Diagram :selectionChange="onSelectionChange" ... />
const onSelectionChange = (args) => {
  console.log('Selected:', args.newItems);
};

Pattern 4: Export & Persistence (Advanced)

// Save state and export
const jsonData = diagram.saveDiagram();
localStorage.setItem('diagram', jsonData);

// Later: Load from storage
const saved = localStorage.getItem('diagram');
diagram.loadDiagram(saved);

// Export as PNG
diagram.export({ format: 'PNG', fileName: 'diagram' });

Key Props

Related Skills

• BPMN process modeling with Syncfusion workflows
• Data visualization layouts and hierarchies
• Interactive flowchart design