Gathering detailed insights and metrics for @syncfusion/ej2-angular-diagrams
Gathering detailed insights and metrics for @syncfusion/ej2-angular-diagrams
Gathering detailed insights and metrics for @syncfusion/ej2-angular-diagrams
Gathering detailed insights and metrics for @syncfusion/ej2-angular-diagrams
Syncfusion Angular UI components library offer more than 50+ cross-browser, responsive, and lightweight angular UI controls for building modern web applications.
npm install @syncfusion/ej2-angular-diagrams
Typescript
Module System
Node Version
NPM Version
TypeScript (96.38%)
SCSS (2.91%)
JavaScript (0.71%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
NOASSERTION License
288 Stars
396 Commits
111 Forks
42 Watchers
1 Branches
24 Contributors
Updated on Jul 10, 2025
Latest Version
30.1.39
Package Id
@syncfusion/ej2-angular-diagrams@30.1.39
Unpacked Size
782.82 kB
Size
128.05 kB
File Count
189
NPM Version
8.19.4
Node Version
16.20.2
Published on
Jul 08, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
The Angular Diagram component is used for visualizing, creating, and editing interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, floor plans, UML diagrams, and BPMN charts either through code or a visual interface.
Getting started . Online demos . Learn more
Trusted by the world's leading companies
You can use Angular CLI to setup your Angular applications. To install the Angular CLI, use the following command.
1npm install -g @angular/cli
Create a new Angular application using the following Angular CLI command.
1ng new my-app 2cd my-app
All Syncfusion Angular packages are available in npmjs.com. To install the Angular diagram package, use the following command.
1ng add @syncfusion/ej2-angular-diagrams
The above command does the below configuration to your Angular app.
@syncfusion/ej2-angular-diagrams
package and its peer dependencies to your package.json
file.DiagramModule
in your application module app.module.ts
.angular.json
file.This makes it easy to add the Syncfusion Angular Diagram module to your project and start using it in your application.
In src/app/app.component.ts, use <ejs-diagram>
selector in the template
attribute of the @Component
directive to render the Syncfusion Angular Diagram component.
1import { Component, OnInit } from '@angular/core'; 2 3@Component({ 4 selector: 'app-root', 5 template: `<ejs-diagram #diagram id="diagram" width="100%" height="700px"> 6 <e-nodes> 7 <e-node id="begin" [height]="40" [offsetX]="300" [offsetY]="80" [shape]="terminator"> 8 <e-node-annotations> 9 <e-node-annotation content="Begin"> </e-node-annotation> 10 </e-node-annotations> 11 </e-node> 12 <e-node id="process" [height]="80" [offsetX]="300" [offsetY]="160" [shape]="decision"> 13 <e-node-annotations> 14 <e-node-annotation content="Process"> </e-node-annotation> 15 </e-node-annotations> 16 </e-node> 17 <e-node id="end" [height]="40" [offsetX]="300" [offsetY]="240" [shape]="process"> 18 <e-node-annotations> 19 <e-node-annotation content="End"> </e-node-annotation> 20 </e-node-annotations> 21 </e-node> 22 </e-nodes> 23 <e-connectors> 24 <e-connector id="connector1" sourceID="begin" targetID="process"> 25 </e-connector> 26 <e-connector id="connector2" sourceID="process" targetID="end"> 27 </e-connector> 28 </e-connectors> 29 </ejs-diagram>` 30}) 31export class AppComponent implements OnInit { 32 public terminator: FlowShapeModel = { type: 'Flow', shape: 'Terminator' }; 33 public decision: FlowShapeModel = { type: 'Flow', shape: 'Decision' }; 34}
Diagram component is also offered in the following list of frameworks.
JavaScript | React | Vue | ASP.NET Core | ASP.NET MVC |
---|
Product support is available through the following mediums.
Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.
This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for 80+ Angular UI components, you can purchase or start a free 30-day trial.
A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
See LICENSE FILE for more info.
© Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.
No vulnerabilities found.
Reason
16 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
0 existing vulnerabilities detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 1/28 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More