Skip to main content Home Creators syncfusion vue-ui-components-skills syncfusion-vue-diagram
syncfusion-vue-diagram Build interactive diagrams using Syncfusion Vue Diagram, including flowcharts, BPMN workflows, UML diagrams, Entity Relationship (ER) diagrams, swimlanes, and organizational charts. Trigger when working with Vue diagram components such as nodes, connectors, shapes, ports, labels, layouts, symbol palettes, serialization/deserialization with unsaved changes detection, Mermaid syntax support, data binding, interactive editing, and exporting diagrams for visualization and process flows.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-diagramThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Comprehensive guide for implementing Syncfusion Vue 3 button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a Vue application.
Comprehensive guide for implementing Syncfusion Vue Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and reactive data patterns in Vue 3 applications using Composition API.
syncfusion-vue-data-manager Implements Syncfusion Vue DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-vue-diagram description Build interactive diagrams using Syncfusion Vue Diagram, including flowcharts, BPMN workflows, UML diagrams, Entity Relationship (ER) diagrams, swimlanes, and organizational charts. Trigger when working with Vue diagram components such as nodes, connectors, shapes, ports, labels, layouts, symbol palettes, serialization/deserialization with unsaved changes detection, Mermaid syntax support, data binding, interactive editing, and exporting diagrams for visualization and process flows. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Implementing Diagrams with Syncfusion Vue
The Syncfusion Vue Diagram component enables you to create interactive, customizable diagrams for visualizing complex processes, organizational hierarchies, workflows, and data relationships. From simple flowcharts to advanced BPMN diagrams and UML representations, the Diagram component provides comprehensive tools for visual communication.
When to Use This Skill
Flowcharts & Process Diagrams — Visualize workflows, decision trees, or procedural flowsOrganizational Charts — Represent hierarchical structures with automatic layoutsBPMN Workflows — Design business process models with activities, gateways, and eventsUML Diagrams — Create class diagrams, sequence diagrams, and structured relationshipsMind Maps & Radial Trees — Organize ideas and concepts hierarchicallySwimlane Diagrams — Show processes across multiple actors or departmentsCustom Shapes & Connectors — Build tailored diagrams with styled nodes and labeled connections
Interactive Visualization — Enable drag-drop, selection, pan/zoom, and user interaction
Navigation Guide
Getting Started
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
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
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
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
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
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
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
UML class diagrams
Classifier shapes (class, interface, enumeration)
UML relationships and associations
UML sequence diagram elements and participants
Participant stereotypes (Actor, Boundary, Control, Entity, Database, Default)
Message types (Synchronous, Asynchronous, Reply, Create, Delete, Self)
Activation boxes and lifelines
Complete workflow examples
Entity Relationship Diagrams
Entity Relationship (ER) diagram concepts and models
ER shape configuration with fields and properties
Field constraints (NotNull, Unique, Primary Key, Foreign Key)
Relationship types and multiplicities (One, OneAndOnlyOne, Many, ZeroOrOne, OneOrMany, ZeroOrMany)
ER connectors and relationship configuration
Runtime field management and manipulation
Automatic Layouts
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
Swimlane structure and overview
Creating lanes and phases
Swimlane children and header configuration
Swimlane palette
Swimlane interaction
Grouping & Containers
Grouping nodes together
Group operations (add/remove children)
Container nodes and nesting
Padding and layout within containers
Symbol Palette
SymbolPaletteComponent setup
Defining palette symbols
Drag & drop to diagram
Palette customization (icons, search, size)
Palette events and interactions
Data Binding
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
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
Save/load diagrams as JSON
Export to image (PNG, SVG, JPG) — use exportDiagram (inject PrintAndExport)
Print functionality
Visio file import/export (experimental; inject ImportAndExportVisio)
Mermaid syntax support with saveDiagramAsMermaid() and loadDiagramFromMermaid()
Change detection with isModified property for unsaved changes tracking
EJ1 migration serialization
Diagram Settings & Configuration
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 ([...]);
import { DiagramComponent } from '@syncfusion/ej2-vue-diagrams' ;
export default {
data (return {
nodes : [...]
}
}
}
⚡ 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
const layout = {
type : 'HierarchicalTree' ,
orientation : 'TopToBottom' ,
horizontalSpacing : 50 ,
verticalSpacing : 50 ,
getLayoutInfo : (node, options ) => {
}
};
diagram.layout = layout;
diagram.doLayout ();
Pattern 2: Data-Driven Organization Chart
const dataSettings = {
id : 'id' ,
parentId : 'manager' ,
dataSource : new DataManager (employeeData)
};
diagram.dataSourceSettings = dataSettings;
Pattern 3: Interactive Node Selection
diagram.selectionChange = (args ) => {
console .log ('Selected:' , args.newItems );
};
const onSelectionChange = (args ) => {
console .log ('Selected:' , args.newItems );
};
Pattern 4: Export & Persistence (Advanced)
const jsonData = diagram.saveDiagram ();
localStorage .setItem ('diagram' , jsonData);
const saved = localStorage .getItem ('diagram' );
diagram.loadDiagram (saved);
diagram.export ({ format : 'PNG' , fileName : 'diagram' });
Key Props Prop Type Purpose nodesArray Collection of diagram nodes connectorsArray Collection of connectors linking nodes layoutObject Automatic layout configuration dataSourceSettingsObject Data binding and source configuration snapSettingsObject Snap constraints and guidelines pageSettingsObject Page size, orientation, margins scrollSettingsObject Pan and scroll behavior constraintsObject Diagram-level interaction constraints contextMenuSettingsObject Right-click menu configuration undoRedoSettingsObject Undo/redo behavior
Related Skills
BPMN process modeling with Syncfusion workflows
Data visualization layouts and hierarchies
Interactive flowchart design
