Skip to content

Commit 93240c1

Browse files
957932: Updated content
1 parent 6e58df7 commit 93240c1

File tree

1 file changed

+32
-92
lines changed

1 file changed

+32
-92
lines changed

README.md

Lines changed: 32 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,69 @@
1-
# Getting Started with EJ2 Diagram Samples (ASP.NET Core, React, and Angular)
1+
# Getting Started with EJ2 Diagram Samples
22

3-
This repository contains focused examples that demonstrate how to use the Syncfusion EJ2 Diagram component across multiple frameworks. The goal is to provide small, practical samples you can run and adapt:
3+
This repository demonstrates the usage of Syncfusion EJ2 Diagram components across multiple frameworks (ASP.NET Core, React, and Angular). Each example showcases different aspects of the diagram component's capabilities and implementation patterns.
44

5-
- An ASP.NET Core MVC sample (ConvertDiagramToPPTX) that shows server-side hosting, rendering, and an export flow that converts diagrams into a downloadable PowerPoint (.pptx).
6-
- A React (Create React App) Flowchart layout sample that demonstrates client-side diagram construction, layout algorithms, and interactivity.
7-
- An optional Angular sample that illustrates the same diagram features in an Angular environment.
5+
## Prerequisites
86

9-
Each sample is runnable and intended as a starting point: inspect the code to see how nodes and connectors are created, experiment with layout algorithms, and try client- and server-side export flows.
7+
* .NET SDK 6.0 or 8.0 (for ASP.NET Core)
8+
* Node.js LTS and npm (for React/Angular)
9+
* Modern web browser
1010

11-
Prerequisites
11+
## Getting Started
1212

13-
- .NET SDK 6.0 or 8.0 (for the ASP.NET Core sample)
14-
- Node.js (LTS) and npm (for React and Angular samples)
15-
- A modern web browser to view the demos
13+
### Clone the repository
1614

17-
Run the ASP.NET Core MVC sample
18-
19-
Open PowerShell in this repository and run:
20-
21-
```powershell
22-
cd ConvertDiagramToPPTX
23-
# Run the .NET 8 project (or switch to the .NET 6 csproj if needed)
24-
dotnet run -p ConvertDiagramToPPTX.Net8.csproj
15+
```sh
16+
git clone <repo-url>
17+
cd ej2-web-diagram-examples
2518
```
2619

27-
The application will print a local HTTPS URL (commonly https://localhost:5001). Open that URL to see the diagram demo and try the Convert to PPTX action to download a PowerPoint file containing the diagram.
20+
Replace `<repo-url>` with the repository URL. Each sample is contained in its own directory with independent dependencies and configurations.
21+
22+
### ASP.NET Core Sample (Convert to PPTX)
2823

29-
Run the React (CRA) Flowchart Layout sample
24+
The ASP.NET Core sample demonstrates diagram-to-PowerPoint conversion capabilities:
3025

3126
```powershell
32-
cd React/Flowchart-layout
33-
npm install
34-
npm start
27+
cd ConvertDiagramToPPTX
28+
dotnet run -p ConvertDiagramToPPTX.Net8.csproj
3529
```
3630

37-
Open http://localhost:3000 in your browser to view the example. The React sample focuses on layout configuration (flowchart layout) and interactive diagram features.
31+
Access the application at https://localhost:5001 to explore the interactive diagram editor and try the PPTX export feature. The sample includes pre-configured diagram templates and export options.
3832

39-
Angular
33+
### React Flowchart Sample
4034

41-
If the Angular sample exists under `Angular/`, start it the same way:
35+
The React implementation showcases advanced flowchart layouts and customization:
4236

4337
```powershell
44-
cd Angular/Flowchart-layout
38+
cd React/Flowchart-layout
4539
npm install
4640
npm start
4741
```
4842

49-
Open the URL shown by the dev server (commonly http://localhost:4200).
50-
51-
Documentation and resources
52-
53-
- React Diagram docs: https://ej2.syncfusion.com/react/documentation/diagram/getting-started/
54-
- ASP.NET Core EJ2 docs: https://ej2.syncfusion.com/aspnetcore/documentation/introduction
55-
- Diagram overview: https://ej2.syncfusion.com/aspnetcore/documentation/diagram/overview
56-
57-
Troubleshooting tips
58-
59-
- Port in use: stop the conflicting process or run the app on a different port.
60-
- Missing SDKs: install the required .NET SDK or Node.js version.
61-
- npm install failures: remove `node_modules` and `package-lock.json`, then run `npm install` again.
62-
- ASP.NET issues: confirm the correct .csproj is used and that CDN links in `Views/Shared/_Layout.cshtml` are reachable.
63-
64-
Notes
65-
66-
- If you plan to use EJ2 Diagram with Next.js, refer to the Syncfusion Next.js documentation for configuration guidance. The repository also includes a React sample that is easy to adapt to Next.js or other React-based frameworks.
67-
68-
If you want, I can add a short micro-sample that programmatically creates a diagram node and demonstrates export to PPTX — tell me which sample you prefer and I will implement it.
69-
70-
## Features
71-
72-
* Interactive diagram creation and editing
73-
* Built-in shape library and customizable shapes
74-
* Automatic layout algorithms (flowchart, hierarchical, etc.)
75-
* Export options (PPTX export in the ASP.NET sample, plus image/SVG in client samples)
76-
* Undo/redo and basic editing operations
77-
78-
## Clone the repository
79-
80-
To get a local copy of these examples, run:
81-
82-
```sh
83-
git clone <repo-url>
84-
cd ej2-web-diagram-examples
85-
```
86-
87-
Replace <repo-url> with your fork or the upstream repository URL.
43+
View the flowchart demo at http://localhost:3000. Experiment with different layout options, node connections, and styling capabilities.
8844

89-
## Installing Packages
45+
### Angular Sample
9046

91-
For the React and Angular samples, install dependencies inside each sample folder:
92-
93-
```powershell
94-
cd React/Flowchart-layout
95-
npm install
96-
```
97-
98-
And for Angular (if present):
47+
The Angular sample demonstrates TypeScript integration and component architecture:
9948

10049
```powershell
10150
cd Angular/Flowchart-layout
10251
npm install
103-
```
104-
105-
## Run the application (React / Angular)
106-
107-
For React (development):
108-
109-
```powershell
11052
npm start
11153
```
11254

113-
For Angular (development):
55+
Access the Angular implementation at http://localhost:4200 to explore component-based diagram development.
11456

115-
```powershell
116-
npm start
117-
```
57+
## Production Build
11858

119-
The dev server will report the local URL (commonly http://localhost:3000 for React and http://localhost:4200 for Angular).
120-
121-
## Build for Production
122-
123-
To create a production build for a client sample (React):
59+
For React/Angular samples:
12460

12561
```bash
12662
npm run build
12763
```
12864

129-
This produces optimized static assets you can serve from any static host.
65+
## Documentation
66+
67+
* [React Diagram](https://ej2.syncfusion.com/react/documentation/diagram/getting-started/)
68+
* [ASP.NET Core EJ2](https://ej2.syncfusion.com/aspnetcore/documentation/introduction)
69+
* [Diagram Overview](https://ej2.syncfusion.com/aspnetcore/documentation/diagram/overview)

0 commit comments

Comments
 (0)