Skip to main content Home Creators syncfusion javascript-ui-controls-skills syncfusion-javascript-diagram
syncfusion-javascript-diagram Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.
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/javascript-ui-controls-skills --skill syncfusion-javascript-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-javascript-diagram description Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
⚠️ STRICT USAGE RULES — MANDATORY FOR ALL CODE GENERATION
These rules are non-negotiable and must be followed for every code generation request.
Rule A — Use Only Provided Reference Files
Always read references/getting-started.md for every requestRead additional reference files only if they match the user's query (see Navigation Guide below)
No external knowledge allowed:
❌ Do NOT use internet documentation
❌ Do NOT use training-data assumptions about Syncfusion APIs
❌ Do NOT reference older EJ1 APIs or deprecated syntax
✅ If a feature cannot be confirmed from reference files, apply Rule B
Rule B — No Guessing, No Inference
If a feature, property, API, or behavior is not explicitly documented in the reference files:
You must NOT:
Invent class properties, subclasses, or constructor overloads
Infer JavaScript/TypeScript callback signatures or method names
Assume module injections exist beyond those documented
Generalize from other Syncfusion components
Use deprecated or undocumented shape types ⚠️ NOT DOCUMENTED: [feature name] is not covered in the reference files.
Skipping this feature to avoid generating incorrect code.
Rule C — Enforce Required Module Injections Before generating code for these features, always include the corresponding injection:
Feature Required Injection Entity Relationship Diagrams Diagram.Inject(ErDiagrams)BPMN diagrams Diagram.Inject(BpmnDiagrams)Export / Print Diagram.Inject(PrintAndExport)Mind Map layout Diagram.Inject(MindMap)Complex Hierarchical layout Diagram.Inject(ComplexHierarchicalTree)Hierarchical or Organizational layout Diagram.Inject(HierarchicalTree)UML Sequence Diagrams No additional injection required Undo/Redo Diagram.Inject(UndoRedo)Line Distribution Diagram.Inject(LineDistribution)Line Routing Diagram.Inject(LineRouting)Mermaid Syntax Diagram.Inject(FlowchartLayout, DataBinding) or Diagram.Inject(MindMap, DataBinding)
Do NOT assume any other injections exist unless confirmed in reference files.
Diagram Component Overview The Diagram control is a feature-rich component for creating interactive, editable diagrams in TypeScript/JavaScript applications.
Core Elements Element Purpose Common Properties Nodes Graphical shapes representing entities id, offsetX, offsetY, width, height, shape, styleConnectors Lines/arrows connecting nodes id, sourceID, targetID, type, style, targetDecoratorLabels Text annotations on nodes/connectors content, font, alignment, offset
Key Features ✅ Automatic Layout (flowchart, hierarchical, organizational)
Navigation Guide Always read references/getting-started.md first , then read only files relevant to the request.
Reference File Read When the Query Involves 📄 getting-started.md Every request — Package installation, imports, first diagram, initialization📄 nodes-and-shapes.md Creating/styling nodes, shapes, positioning, BPMN/UML shapes, annotations 📄 connectors-and-connections.md Lines (Straight/Orthogonal/Bezier), arrows, routing, sourceID/targetID, segments 📄 labels-and-annotations.md Text labels, font, alignment, hyperlinks on nodes/connectors 📄 ports.md Connection points, port positioning, port constraints 📄 shapes-and-styles.md Flow/Basic/Path/Image/HTML/Native shapes, fill, stroke, gradient, opacity 📄 data-binding-and-loading.md DataSourceSettings, JSON loading, parent-child mapping, dynamic updates 📄 layout-and-automation.md Hierarchical, org chart, mind map, radial, symmetric layouts, orientation 📄 bpmn-diagrams.md BPMN module injection, events, gateways, activities, data objects, annotations 📄 uml-diagrams.md UML class diagrams, UML sequence diagrams, classifiers, relationships, participants, messages, fragments 📄 entity-relationship-diagrams.md ER entities, entity fields, data types, primary/foreign keys, relationships, Crow's Foot multiplicity, ERD styling 📄 swimlanes.md Swimlane structure, lanes, phases, header config, interaction 📄 groups-and-containers.md Grouping nodes, Canvas/Stack/Grid containers, nesting, boundaries 📄 symbol-palette.md SymbolPaletteComponent, drag-drop, categories, custom symbols, search 📄 interaction-and-tools.md Drawing tools, selection, constraints, pan/zoom, events, undo/redo 📄 styling-and-appearance.md CSS theming, colors, fonts, accessibility, responsive design 📄 serialization-and-export.md Save/load diagrams as JSON, prevent defaults, detect unsaved changes, export to image/PDF/Visio, Mermaid syntax, uploader support 📄 diagram-settings.md Layers, virtualization, grid, ruler, scroll, page settings, tooltip, localization 📄 advanced-features.md Undo/redo, custom commands, toolbars, performance optimization
Quick Start
1. Install Package npm install @syncfusion/ej2-diagrams
2. Import Required Modules import { Diagram , NodeModel , ConnectorModel } from '@syncfusion/ej2-diagrams' ;
3. Create Diagram with Nodes & Connectors
let nodes : NodeModel [] = [
{
id : 'node1' ,
offsetX : 250 ,
offsetY : 250 ,
width : 100 ,
height : 100 ,
style : { fill : '#6BA5D7' },
annotations : [{ content : 'Start' }]
},
{
id : 'node2' ,
offsetX : 400 ,
offsetY : 250 ,
width : 100 ,
height : 100 ,
style : { fill : '#FFD700' },
annotations : [{ content : 'Process' }]
}
];
let connectors : ConnectorModel [] = [
{
id : 'connector1' ,
sourceID : 'node1' ,
targetID : 'node2' ,
style : { strokeColor : '#6BA5D7' },
targetDecorator : { shape : 'Arrow' }
}
];
let diagram : Diagram = new Diagram ({
width : '100%' ,
height : '500px' ,
nodes : nodes,
connectors : connectors
});
diagram.appendTo ('#diagram-container' );
<div id ="diagram-container" > </div >
Common Patterns
Flowchart Pattern Creating a simple flowchart with decision points:
Use rectangle shapes for processes
Use diamond shapes for decisions
Connect with arrows
Apply Flowchart auto-layout
Organizational Chart Pattern Creating hierarchical structures:
Use data binding with parent-child relationships
Apply HierarchicalTree layout
Define employee nodes with names/photos
Show reporting relationships via connectors
Network Diagram Pattern Creating system architecture diagrams:
Use predefined shapes (server, database, client)
Connect with labeled lines showing data flow
Organize using grid-based positioning
Add icons and styling for clarity
Interactive Diagram Pattern Building user-editable diagrams:
Enable drawing tools
Allow node/connector creation and deletion
Add context menus for operations
Implement save/load with serialization
Handle user events (selection, drag, resize)
When to Use This Skill ✅ Creating any diagram type in TypeScript/JavaScript
Do NOT use for: Simple static charts or graphs (use Chart component), data tables (use Grid component)
Key TypeScript Interfaces Interface Purpose Key Properties NodeModelNode configuration id, offsetX, offsetY, width, height, shape, style, annotationsConnectorModelConnector configuration id, sourceID, targetID, type, style, targetDecoratorShapeModelShape definition type (Basic/BPMN/UML/Flow), shape nameAnnotationModelLabel on node/connector content, font, alignment, offsetPortModelConnection point id, offset, shape, visibility, constraints
Common Shape Types
Flow Shapes Terminator, Process, Decision, Document, DirectData, MultiDocument, PreDefinedProcess, Delay, Annotation, ManualOperation, ManualInput, Card, Or, SummingJunction, Extract, Merge, Sort, OffPageReference
shape : { type : 'Flow' , shape : 'Process' }
Basic Shapes Rectangle, Ellipse, Triangle, Pentagon, Hexagon, Heptagon, Octagon, Star, Cross, Diamond, CylindricalShape, Trapezoid, Parallelogram, Rhombus
shape : { type : 'Basic' , shape : 'Rectangle' }
More from this repository syncfusion-javascript-data-manager Implements Syncfusion TypeScript/JavaScript(ES6+) 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.
syncfusion-javascript-grid Implements Syncfusion JavaScript 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, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-javascript-pivot-table Use this skill whenever the user wants to implement Syncfusion PivotView in TypeScript applications. Triggers include: pivot table, pivot grid, data analysis, OLAP, aggregation in TypeScript context. Covers data binding (JSON, CSV, remote), drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), and pivot charts. Use for interactive reports and dashboards. Do NOT use for React, Vue, or Angular.
Related occupations SOC
Based on SOC occupation classification
