|
1 | | -# ej2-web-diagram-examples |
2 | | -This repository contains demos of JavaScript, Angular, react, Vue, MVC and Core |
| 1 | +# Getting Started with EJ2 Diagram Samples |
| 2 | + |
| 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 | + |
| 5 | +## Prerequisites |
| 6 | + |
| 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 | + |
| 11 | +## Getting Started |
| 12 | + |
| 13 | +### Clone the repository |
| 14 | + |
| 15 | +```sh |
| 16 | +git clone <repo-url> |
| 17 | +cd ej2-web-diagram-examples |
| 18 | +``` |
| 19 | + |
| 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) |
| 23 | + |
| 24 | +The ASP.NET Core sample demonstrates diagram-to-PowerPoint conversion capabilities: |
| 25 | + |
| 26 | +```powershell |
| 27 | +cd ConvertDiagramToPPTX |
| 28 | +dotnet run -p ConvertDiagramToPPTX.Net8.csproj |
| 29 | +``` |
| 30 | + |
| 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. |
| 32 | + |
| 33 | +### React Flowchart Sample |
| 34 | + |
| 35 | +The React implementation showcases advanced flowchart layouts and customization: |
| 36 | + |
| 37 | +```powershell |
| 38 | +cd React/Flowchart-layout |
| 39 | +npm install |
| 40 | +npm start |
| 41 | +``` |
| 42 | + |
| 43 | +View the flowchart demo at http://localhost:3000. Experiment with different layout options, node connections, and styling capabilities. |
| 44 | + |
| 45 | +### Angular Sample |
| 46 | + |
| 47 | +The Angular sample demonstrates TypeScript integration and component architecture: |
| 48 | + |
| 49 | +```powershell |
| 50 | +cd Angular/Flowchart-layout |
| 51 | +npm install |
| 52 | +npm start |
| 53 | +``` |
| 54 | + |
| 55 | +Access the Angular implementation at http://localhost:4200 to explore component-based diagram development. |
| 56 | + |
| 57 | +## Production Build |
| 58 | + |
| 59 | +For React/Angular samples: |
| 60 | + |
| 61 | +```bash |
| 62 | +npm run build |
| 63 | +``` |
| 64 | + |
| 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