Syncfusion® ASP.NET MVC Diagram control is a rich, interactive, and feature-complete diagramming library for building flowcharts, organizational charts, mind maps, network diagrams, BPMN diagrams, floor plans, and UML diagrams in web applications. It supports nodes, connectors, ports, swimlanes, complex layouts (hierarchical, radial, organizational), drag-and-drop, serialization, undo/redo, zooming, panning, and print/export capabilities. Ideal for workflow, process modeling, and visual design tools built on ASP.NET MVC.
Install
No framework information available.
README
Syncfusion® ASP.NET MVC Diagram Component
A feature-rich library for creating, visualizing, and editing interactive diagrams including flowcharts, organizational charts, mind maps, BPMN diagrams, and network diagrams.
Key Features
- Multiple Diagram Types: Supports flowchart, organizational chart, mind map, BPMN, and network diagram layouts
- Drag-and-Drop Interface: Intuitive drag-and-drop nodes and connectors with snap-to-grid support
- Symbol Palette: Built-in symbol palette for easy shape selection and customization
- Automatic Layout: Multiple layout algorithms (hierarchical, radial, symmetric) for automatic diagram organization
- Edit Operations: Undo/redo, clipboard, and serialization support for comprehensive editing capabilities
- Navigation Controls: Pan, zoom, and fit-to-page functionality for exploring large diagrams
- Export Capabilities: Export to PNG, JPEG, SVG, and PDF formats
- Connection Routing: Automatic connection routing and orthogonal connectors
- Customization: Extensive styling and appearance customization options
- Accessibility: Full keyboard navigation and screen reader support
Common Setup
These setup steps are required only once for your application, regardless of which Syncfusion components you use.
1. Install Base NuGet Package
Install-Package Syncfusion.AspNetMvc.Diagram
2. Add Namespace Reference
Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:
<namespaces>
<add namespace="Syncfusion.EJ2"/>
</namespaces>
3. Add Stylesheet & Script References
In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title - Syncfusion Application</title>
<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/34.2.2/fluent2.css" />
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script>
</head>
4. Register Script Manager
At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):
<body>
@RenderBody()
<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()
</body>
Quick Start
Add the Diagram control
Add the Syncfusion® ASP.NET MVC Diagram control in the ~/Views/Home/Index.cshtml file using the @Html.EJS().Diagram() HTML helper.
@Html.EJS().Diagram("diagram").Width("100%").Height("580px").Render()
Run the Application
Press Ctrl+F5 to run the application in your browser.
Documentation
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA
About Syncfusion®
Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:
Web: Blazor | ASP.NET MVC | ASP.NET MVC | JavaScript | Angular | React | Vue
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
[email protected] | Toll Free: 1-888-9-DOTNET
Changes from Previous Version
Adoption Assessment
A verified publisher signal is available. Assess fit from the package's supported frameworks, license and dependency graph rather than popularity alone.
Related Guides & Workflows
Learn how to evaluate, integrate, or audit this package in your .NET project.