|
1 | | -# Getting Started with EJ2 Diagram Samples (ASP.NET Core, React, and Angular) |
| 1 | +# Getting Started with EJ2 Diagram Samples |
2 | 2 |
|
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. |
4 | 4 |
|
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 |
8 | 6 |
|
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 |
10 | 10 |
|
11 | | -Prerequisites |
| 11 | +## Getting Started |
12 | 12 |
|
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 |
16 | 14 |
|
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 |
25 | 18 | ``` |
26 | 19 |
|
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) |
28 | 23 |
|
29 | | -Run the React (CRA) Flowchart Layout sample |
| 24 | +The ASP.NET Core sample demonstrates diagram-to-PowerPoint conversion capabilities: |
30 | 25 |
|
31 | 26 | ```powershell |
32 | | -cd React/Flowchart-layout |
33 | | -npm install |
34 | | -npm start |
| 27 | +cd ConvertDiagramToPPTX |
| 28 | +dotnet run -p ConvertDiagramToPPTX.Net8.csproj |
35 | 29 | ``` |
36 | 30 |
|
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. |
38 | 32 |
|
39 | | -Angular |
| 33 | +### React Flowchart Sample |
40 | 34 |
|
41 | | -If the Angular sample exists under `Angular/`, start it the same way: |
| 35 | +The React implementation showcases advanced flowchart layouts and customization: |
42 | 36 |
|
43 | 37 | ```powershell |
44 | | -cd Angular/Flowchart-layout |
| 38 | +cd React/Flowchart-layout |
45 | 39 | npm install |
46 | 40 | npm start |
47 | 41 | ``` |
48 | 42 |
|
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. |
88 | 44 |
|
89 | | -## Installing Packages |
| 45 | +### Angular Sample |
90 | 46 |
|
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: |
99 | 48 |
|
100 | 49 | ```powershell |
101 | 50 | cd Angular/Flowchart-layout |
102 | 51 | npm install |
103 | | -``` |
104 | | - |
105 | | -## Run the application (React / Angular) |
106 | | - |
107 | | -For React (development): |
108 | | - |
109 | | -```powershell |
110 | 52 | npm start |
111 | 53 | ``` |
112 | 54 |
|
113 | | -For Angular (development): |
| 55 | +Access the Angular implementation at http://localhost:4200 to explore component-based diagram development. |
114 | 56 |
|
115 | | -```powershell |
116 | | -npm start |
117 | | -``` |
| 57 | +## Production Build |
118 | 58 |
|
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: |
124 | 60 |
|
125 | 61 | ```bash |
126 | 62 | npm run build |
127 | 63 | ``` |
128 | 64 |
|
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