blazor-showcase-diagram-builder

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

blazor-showcase-diagram-builder

★ 21 Open GitHub ↗

Diagram Builder is a Blazor application which is used to create the diagrams like Flow Chart, process diagrams and more interactively.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![.NET](https://github.com/syncfusion/blazor-showcase-diagram-builder/actions/workflows/dotnet.yml/badge.svg)](https://github.com/syncfusion/blazor-showcase-diagram-builder/actions/workflows/dotnet.yml)

# Essential Studio® for Blazor - Diagram Builder

The Blazor diagram builder application is used to create diagrams such as FlowChart and MindMap diagrams. In the diagram builder application, all support diagrams, such as Print, Export, and Drawing Tool support, are available in the Diagram Builder application. You can interact with the diagram or create your own using shapes.

## Requirements to run the demo

* [System requirements](https://blazor.syncfusion.com/documentation/system-requirements/)

* [NET 10 WebAssembly Workload](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-10.0#net-webassembly-build-tools)

#### accelerate Android emulators on Windows with Hyper-V:

- Visit the following link to learn about hardware acceleration for Android emulators on Windows: [Hardware Acceleration for Android Emulators](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/hardware-acceleration).

- Once you have completed the above steps, you can proceed with setting up the emulator by following the instructions outlined in the documentation below:

#### Setting Up Android SDK and Android Device Manager

- Visit the following link to Step-by-Step Guide for Setting Up Android SDK and Configuring Android Device for API 33: (https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android&tabs=vswin).
      
 - In the documentation, you will find detailed instructions on setting up your development environment, including installing the necessary tools and SDKs and RUN Application in andriod TFM.

## How to run the demo

Clone the repository. This repository contains Blazor Diagram Builder Server app, Blazor Diagram Builder WASM app.
* `server-side` folder has solution and project files to run Diagram Builder server app.
* `Wasm-side` folder has solution and project files to run Diagram Builder WebAssembly app.
* `MAUI` folder has solution and Project files to run Diagram Builder MAUI demo.
* The Common folder contains all the common files (i.e., samples, static web assets, resources) which are applicable for Blazor Diagram Builder Server demos, Blazor Diagram Builder WASM demos and Blazor Diagram Builder MAUI demos.

### Run the demo using .NET CLI

* Open the command prompt from the demo's directory.
* Run the demo using the following command.
   
   To run .NET 10 Diagram Builder Server project
   > `dotnet run --project Server-side/DiagramBuilder.csproj`

To run .NET 10 Diagram Builder WASM project
   > `dotnet run --project wasm-side/DiagramBuilder.sln`
* To run Diagram Builder Maui Demos,  Open the `DiagramBuilderMAUI.sln` from 'MAUI' folder via visual studio 2026.

- In Visual Studio, select the target platform by expanding the dropdown menu at the top toolbar.

> Press `F5` to run the demo.

### Run the demo using Visual Studio

* Open the solution file using Visual Studio.
* Press `Ctrl + F5` to run the demo.

### Run the demo using Visual Studio code

* Open the Visual Studio code from the Demo directory where the project file is present.

* Press `Ctrl + F5` to run the demo.

## Live Demo

#### Server -  <a href="https://blazor.syncfusion.com/showcase/diagrambuilder/" target="_blank">Diagram Builder Server Live Demo</a>
#### WebAssembly  - <a href="https://blazor.syncfusion.com/showcase/wasm/diagrambuilder/" target="_blank">Diagram Builder Wasm Live Demo</a>

Check all the showcase samples from <a href="https://www.syncfusion.com/showcase-apps" target="_blank">here</a>.

## License

Syncfusion® Blazor Components is available under the Syncfusion® Essential Studio program, and can be licensed either under the Syncfusion® Community License Program or the Syncfusion commercial license.

To be qualified for the Syncfusion® Community License Program, you must have gross revenue of less than one (1) million U.S. dollars (USD 1,000,000.00) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion's terms and conditions.

Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.

Use of Syncfusion® Blazor Components requires prior acquisition of either a Community License or a Commercial License. Additionally, usage is subject to acceptance of and compliance with Syncfusion's license terms and conditions.

The Syncfusion® license that contains the terms and conditions can be found at
[https://www.syncfusion.com/content/downloads/syncfusion_license.pdf](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf)

## Support and feedback

* For any other queries, reach the [Syncfusion® support team](https://support.syncfusion.com/) or post the queries through the [community forums](https://www.syncfusion.com/forums?utm_source=github&utm_medium=listing&utm_campaign=blazor-samples).

* To renew the subscription, click [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing&utm_campaign=blazor-samples) or contact our sales team at <salessupport@syncfusion.com>.

* If the required information is not available, it can be submitted through the Syncfusion® Blazor Components Feedback Portal [feedback portal](https://www.syncfusion.com/feedback/blazor-components).

## See also

* [Blazor Documentation](https://blazor.syncfusion.com/documentation/introduction)
* [Blazor Components](https://www.syncfusion.com/blazor-components)
* [Blazor Live Demos - Server](https://blazor.syncfusion.com/demos/)
* [Blazor Live Demos - WebAssembly](https://blazor.syncfusion.com/wasm/demos/)
* [Blazor Playground](https://blazorplayground.syncfusion.com/)
* [Blazor Smart/AI Samples](https://github.com/syncfusion/smart-ai-samples)

blazor-showcase-diagram-builder

Today's picks

Was this content helpful?

Recent Feedback

blazor-showcase-diagram-builder

Today's picks

Was this content helpful?

Recent Feedback

Download README