Skip to main content Home Creators syncfusion angular-ui-components-skills syncfusion-angular-diagram
syncfusion-angular-diagram Build and configure Syncfusion EJ2 Angular Diagram for flowcharts, org charts, process diagrams, and data-visualization. Trigger when users ask to create nodes/connectors, apply layouts, swimlane, use BPMN/UML shapes, ER diagrams, or add interactivity like drag-drop, zoom/pan, snapping, editing, and symbol palettes.
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/angular-ui-components-skills --skill syncfusion-angular-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... name syncfusion-angular-diagram description Build and configure Syncfusion EJ2 Angular Diagram for flowcharts, org charts, process diagrams, and data-visualization. Trigger when users ask to create nodes/connectors, apply layouts, swimlane, use BPMN/UML shapes, ER diagrams, or add interactivity like drag-drop, zoom/pan, snapping, editing, and symbol palettes. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
Implementing Syncfusion Angular Diagrams
When to Use This Skill
Use this skill when you need to:
Create visual diagrams (flowcharts, org-charts, BPMN, UML)Build interactive diagrams with nodes and connectorsApply layouts (hierarchical, org-chart, mindmap, radial, flowchart)Design BPMN or UML diagrams for business processesAdd interaction (drag, resize, selection, undo/redo)Export or serialize diagrams to JSON/images
Important: API Verification Required
API Verification Required : Always verify API class names, properties, and signatures by reading reference files (references/*.md) BEFORE generating code examples. Do not assume or infer class names.
⚠️ Before writing ANY code, review the Common Mistakes section directly below to avoid known invalid APIs and properties.
Component Overview
The Syncfusion Angular Diagram component provides a visual canvas for creating and editing diagrams:
Core Concepts
Nodes - Rectangles, circles, flowchart shapes, custom shapes
Connectors - Lines linking nodes (Straight, Orthogonal, Bezier)
Labels - Text annotations on nodes and connectors
Ports - Connection points on node boundaries
Swimlanes - Horizontal/vertical lanes for process diagrams
Layouts - Automatic positioning (hierarchical, org-chart, mindmap, etc.)
BPMN Shapes - Business process diagram standardized shapes
UML Diagrams - Class and sequence diagram notation
Symbol Palette - Draggable symbol library
Data Binding - Render diagrams from JSON data
Key Features
Interactive editing: Drag, resize, rotate nodes and connectorsAuto-layout: Hierarchical, org-chart, mindmap, radial, flowchart layoutsBPMN & UML: Built-in shape libraries for standard diagramsSerialization: Save/load diagrams as JSONExport: PNG, SVG, PDF image export and printUndo/Redo: Full history supportVirtualization: Render large diagrams efficientlyAccessibility: WCAG 2.1 compliance with keyboard navigation
Documentation and Navigation Guide Start with Getting Started , then jump to the specific feature you need:
Core Diagram Building
Installation and dependencies
Theme setup (material, bootstrap, fabric)
CSS/SCSS imports
Basic DiagramComponent usage
Module injection pattern
Standalone component setup
Creating and adding nodes to diagram
Offsetting and positioning (offsetX, offsetY)
Node dimensions (width, height)
Built-in shapes (Flow, Basic, Path)
Custom styling (fill, stroke, opacity)
Node templates and appearance
Expand/collapse node groups
Node events (click, select, drag)
getNodeDefaults pattern for style defaults
Three connector types: Straight, Orthogonal, Bezier
Segments configuration and pathfinding
sourceID and targetID linking nodes
Multiple segments in connectors
Bezier control points and orientation
Connector customization (stroke, fill, dashing)
Connector events and interaction
getConnectorDefaults pattern for style defaults
Labels, Ports & Styling
Adding annotations to nodes and connectors
Label appearance (font, color, bold, italic, alignment)
Positioning labels on connectors (start, end, center)
Node labels vs connector labels
Label interaction (edit mode, drag, resize)
Label events (edit, focus, blur)
Formatting with markdown or HTML
Port types and positioning on nodes
Appearance customization (shape, fill, size)
Connecting connectors to specific ports
Connection visibility and constraints
Port interaction and visibility
getPortDefaults pattern
Built-in shape types: Flow, Basic, Path, Image, HTML, Native SVG
Flow chart shapes (process, decision, start, end, etc.)
Style properties (fill, stroke, strokeWidth, dashArray, shadow)
CSS class and theme customization
Gradient and pattern fills
Advanced Diagrams
Entity Relationship Diagram design and database schema visualization
ER entity nodes with ErShapeModel configuration
Entity header, fields, and constraints (primary key, foreign key, unique, not null)
Field management at runtime (add, remove, modify)
Entity styling and alternate row colors
ER relationships and connectors with Crow's Foot multiplicity notation
Complete database schema examples (Customer-Order-Product)
BPMN module injection and setup
BPMN shapes overview and standard notation
Activities (task, subprocess, expanded subprocess, loop)
Events (start, end, intermediate catch/throw)
Gateways (exclusive, parallel, inclusive, complex)
Flows (sequence flow, message flow, association)
Data objects and data sources
Groups and text annotations
BPMN-specific styling and labels
UML class diagram shapes
Classifier shapes (class, interface, enumeration, package, component)
Class attributes, methods, visibility modifiers
UML relationships (association, generalization, aggregation, composition)
UML sequence diagrams with participants, messages, and activation boxes
Sequence participants with 6 stereotypes (Actor, Boundary, Control, Entity, Database, Default)
Sequence messages with 6 types (Synchronous, Asynchronous, Reply, Create, Delete, Self)
Activation boxes and destruction markers
Destruction markers for participant termination
Complete login flow and interaction sequence examples
Layout & Structure
Hierarchical tree layout with top-down, bottom-up, left-right, right-left
Organizational chart layout
Mindmap layout (sub-trees, branches)
Radial tree layout
Flowchart layout with swimlanes
Complex hierarchical tree with extended nodes
Automatic layout configuration
Layout customization (orientation, spacing, margin)
Layout events and completion
Swimlane structure overview (header, children, phases)
Creating lanes and phases within swimlanes
Swimlane children positioning and constraints
Swimlane headers and labeling
Swimlane palette integration
Swimlane interaction (resize, move, add/remove children)
Grouping nodes together
Group operations (add/remove children, expand/collapse)
Container nodes with padding and layout
Child positioning within containers
Container constraints
Interaction & Tools
SymbolPaletteComponent setup and integration
Defining palette symbols and categories
Drag and drop symbols to diagram
Palette customization (icons, search, categories, size)
Symbol palette events
Creating custom symbol libraries
DataManager and dataSourceSettings configuration
Mapping data to nodes (id, parentId, nodeTemplate)
Rendering organizational charts from JSON data
PostgreSQL data source integration
setNodeTemplate for data-driven node styling
Dynamic data updates and refresh
Node selection, drag, and resize interactions
Tool modes (pointer, draw, pan, pan-select)
Constraints (node constraints, connector constraints, diagram constraints)
Commands (keyboard shortcuts, custom commands)
Undo and Redo functionality
Context menu (right-click menu)
User handles (custom connection handles)
Serialization & Export
saveDiagram and loadDiagram (JSON serialization)
Mermaid syntax support (saveDiagramAsMermaid, loadDiagramFromMermaid)
Detect unsaved changes with isModified property
Export to image formats (PNG, SVG, PDF)
Print diagram functionality
Visio file import (.vsdx)
EJ1 API migration serialization
Custom serialization handling
Configuration & Settings
Layers (add, lock, visibility, ordering)
Virtualization (performance optimization for large diagrams)
Grid lines (snapping, dots/lines, step size)
Ruler (horizontal and vertical measurement rulers)
Scroll settings (auto-scroll, pan)
Page settings (size, orientation, margin, fit to page)
Tooltip configuration
Overview panel for navigation
Localization and language support
Accessibility (WCAG, ARIA labels, keyboard navigation)
Quick Start Example Here's a minimal diagram to get started:
import { Component , Inject } from '@angular/core' ;
import { DiagramComponent , DiagramModule } from '@syncfusion/ej2-angular-diagrams' ;
@Component ({
selector : 'app-diagram' ,
template : `
<ejs-diagram #diagram
width="100%"
height="600px"
[nodes]="nodes"
[connectors]="connectors">
</ejs-diagram>
` ,
standalone : true ,
imports : [DiagramModule ]
})
export class DiagramComponent {
nodes = [
{
id : 'start' ,
width : 80 ,
height : 80 ,
offsetX : 150 ,
offsetY : 150 ,
shape : { type : 'Flow' , shape : 'Terminator' },
annotations : [{ content : 'START' }]
},
{
id : 'process' ,
width : 100 ,
height : 80 ,
offsetX : 350 ,
offsetY : 150 ,
shape : { type : 'Flow' , shape : 'Process' },
annotations : [{ content : 'Process' }]
},
{
id : 'end' ,
width : 80 ,
height : 80 ,
offsetX : 550 ,
offsetY : 150 ,
shape : { type : 'Flow' , shape : 'Terminator' },
annotations : [{ content : 'END' }]
}
];
connectors = [
{ id : 'connector1' , sourceID : 'start' , targetID : 'process' },
{ id : 'connector2' , sourceID : 'process' , targetID : 'end' }
];
}
Module Injection Pattern Syncfusion Diagram uses Inject directive for feature registration:
import { Component , Inject } from '@angular/core' ;
import { BpmnDiagrams , Swimlane , SymbolPalette } from '@syncfusion/ej2-angular-diagrams' ;
Diagram .Inject (BpmnDiagrams , SymbolPalette )
Always inject the features you use. This keeps bundle size small and makes dependencies explicit.
Common Patterns
1. Get Node/Connector Defaults getNodeDefaults (node : NodeModel ): NodeModel {
return {
shape : { type : 'Flow' , shape : 'Process' },
style : { fill : '#90EE90' , stroke : '#228B22' }
};
}
2. Bind Data to Nodes dataSourceSettings : {
id : 'id' ,
parentId : 'parentId' ,
dataSource : yourDataArray
}
3. Handle Selection diagram.selectionChange ((args ) => {
console .log ('Selected:' , args.newItems );
});
4. Export Diagram diagram.exportDiagram ({format : 'PNG' , fileName : 'diagram' });
5. Serialize Diagram const diagramData = diagram.saveDiagram ();
localStorage .setItem ('diagram' , JSON .stringify (diagramData));
Common Mistakes
❌ Shape Type Errors
shape : { type : 'FlowShape' , shape : 'Process' }
shape : { type : 'Flow' , shape : 'Process' }
shape : { type : 'Bpmn' , shape : 'Task' }
shape : { type : 'Basic' , shape : 'Rectangle' }
❌ Invalid Module in Diagram.Inject()
Diagram .Inject (BpmnDiagrams , Swimlane );
Diagram .Inject (BpmnDiagrams );
📄 Verify injectable modules in: references/bpmn-diagrams.md,
references/swimlanes.md
❌ whiteSpace Does Not Exist in Annotation Style
annotations : [{
content : 'Multi\nLine' ,
style : { fontSize : 11 , whiteSpace : 'pre-wrap' }
}]
annotations : [{
content : 'Multi\nLine' ,
style : { fontSize : 11 , color : '#000' , bold : true }
}]
📄 Verify annotation style properties in:
references/labels-and-annotations.md
❌ updateNode() Does Not Exist on DiagramComponent
this .diagram .updateNode ('nodeId' , { style : { fill : '#ff0000' } });
const node = this .diagram .getObject ('nodeId' ) as NodeModel ;
if (node) {
node.style !.fill = '#ff0000' ;
this .diagram .dataBind ();
}
📄 Verify runtime APIs in: references/nodes.md
❌ Data Binding Configuration
nodes = this .employeeData ;
dataSourceSettings : {
id : 'EmployeeID' ,
parentId : 'ReportingManagerID' ,
dataSource : this .employeeData
}
setNodeTemplate (obj : NodeModel ): void {
obj.width = 100 ;
obj.height = 60 ;
obj.annotations = [{
content : obj.data .EmployeeName
}];
}
❌ Standalone Component Setup
@Component ({
selector : 'app-diagram' ,
templateUrl : './component.html' ,
imports : [DiagramModule ]
})
@Component ({
selector : 'app-diagram' ,
templateUrl : './component.html' ,
standalone : true ,
imports : [CommonModule , DiagramModule ],
})
⚠️ Performance Tips
Virtualization: For diagrams with 1000+ nodes, enable virtualization in references/diagram-settings.md Layout Performance: Pre-compute positions for complex hierarchiesConnector Updates: Use connectorChanges instead of recreating connectorsExport Large Diagrams: Use incremental approach for PDFs > 50MB
Next Steps More from this repository
syncfusion-angular-calendars Comprehensive guide for implementing Syncfusion Angular 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 controlled component patterns in Angular applications.
syncfusion-angular-data-manager Implements Syncfusion Angular 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.
Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Related occupations SOC
Based on SOC occupation classification
