Syncfusion Javascript Diagram

⚠️ 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

1. Always read references/getting-started.md for every request
2. Read additional reference files only if they match the user's query (see Navigation Guide below)
3. 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:

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

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.

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

// Define nodes
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' }]
  }
];

// Define connector between nodes
let connectors: ConnectorModel[] = [
  {
    id: 'connector1',
    sourceID: 'node1',
    targetID: 'node2',
    style: { strokeColor: '#6BA5D7' },
    targetDecorator: { shape: 'Arrow' }
  }
];

// Create diagram
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

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' }