| 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":"33.1.44","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 request
- Read 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
Instead, respond with:
โ ๏ธ 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 |
|---|
| 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) |
| Undo/Redo | Diagram.Inject(UndoRedo) |
| Line Distribution | Diagram.Inject(LineDistribution) |
| Line Routing | Diagram.Inject(LineRouting) |
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, style |
| Connectors | Lines/arrows connecting nodes | id, sourceID, targetID, type, style, targetDecorator |
| Labels | Text annotations on nodes/connectors | content, font, alignment, offset |
Key Features
โ
Automatic Layout (flowchart, hierarchical, organizational)
โ
Data Binding (JSON, parent-child relationships)
โ
Interactive Tools (drawing, selection, pan, zoom, drag-drop)
โ
Styling (CSS customization, themes, conditional styles)
โ
Serialization (save/load as JSON)
โ
Export (PNG, JPG, SVG, PDF)
โ
User Interactions (events, constraints, undo/redo)
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 |
| ๐ uml-diagrams.md | UML class/sequence/activity diagrams, classifiers, relationships |
| ๐ 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, export to image/PDF, print, Visio 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');
HTML:
<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
โ
Building flowcharts, process flows, or hierarchies
โ
Implementing BPMN or UML diagrams
โ
Configuring node/connector shapes, styles, annotations
โ
Setting up automatic layouts
โ
Adding symbol palettes for drag-and-drop
โ
Binding diagram data from APIs or JSON
โ
Exporting diagrams or printing
โ
Enabling drawing tools, undo/redo, layers
Do NOT use for: Simple static charts or graphs (use Chart component), data tables (use Grid component)
Key TypeScript Interfaces
| Interface | Purpose | Key Properties |
|---|
NodeModel | Node configuration | id, offsetX, offsetY, width, height, shape, style, annotations |
ConnectorModel | Connector configuration | id, sourceID, targetID, type, style, targetDecorator |
ShapeModel | Shape definition | type (Basic/BPMN/UML/Flow), shape name |
AnnotationModel | Label on node/connector | content, font, alignment, offset |
PortModel | Connection 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
Usage:
shape: { type: 'Flow', shape: 'Process' }
Basic Shapes
Rectangle, Ellipse, Triangle, Pentagon, Hexagon, Heptagon, Octagon, Star, Cross, Diamond, CylindricalShape, Trapezoid, Parallelogram, Rhombus
Usage:
shape: { type: 'Basic', shape: 'Rectangle' }