A comprehensive collection of C# Blazor WebAssembly and Blazor Server sample applications demonstrating the interactive charting, custom nodes, event handling, and automatic graph layouts of the MindFusion.Diagramming for Blazor component library.
Native Blazor Web Charting: MindFusion.Diagramming for Blazor is developed entirely in C# and provides ready-to-use capabilities for visualizing, editing, and designing relational data (flowcharts, workflows, database schema ERDs, class inheritance models, and hierarchies) inside standard web browsers, supporting ASP.NET Core 9 and .NET 8.0 / 9.0.
All sample projects in this repository are pre-configured to reference the official MindFusion.Diagramming.Blazor NuGet package directly. This enables automatic package restore and seamless out-of-the-box building.
- Dual Hosting Models: Full support for both Blazor WebAssembly (WASM) and Blazor Server rendering contexts.
- Draggable Node Palettes: Integrated drag-and-drop components (
NodeListView,ItemListView,Palette) for interactive visual building. - Automatic Layout Algorithms: Instantly arrange nodes using advanced algorithms, including LayeredLayout (graph routing), FractalLayout (artistic trees), and TreeMapLayout (tree weighting mapping).
- Table & Container Nodes: Foldable, nested, and scrollable container nodes, as well as complex
TableNodeitems with multi-row spanning cells. - Auxiliary UI Controls: Out-of-the-box support for the Overview (minimap zoom/pan viewport), Ruler (measuring guides), and interactive context menus.
This repository contains 23 specialized Blazor samples illustrating various diagramming implementations:
- 🪑 BanquetSeating: Create complex seating styles (Banquet, Cabaret, U-Shape etc.) just by dragging them from the NodeListView. Double-click on a chair to enter text.
- 💻 DiagramApp: Demonstrates how users can interact with the diagram; how nodes and links are created and edited; what are the different modes of diagram behavior.
- ⚖️ DecisionFlowchart: Demonstrates how applying an automatic layout - the Decision Layout algorithm in this case - can transform a chaotic set of connected nodes and links into a well-arranged, easy to follow, flowchart.
- 📐 FloorPlanner: A fully-functional dynamic application that allows the user to create complex floor plans and infrastructure layout diagrams. The sample includes save and load of diagrams on the client side, context menu and custom shapes.
- 👥 BlazorOrgChart: A detailed org chart that creates CompositeNode-s from custom elements like text, image, border and layout containers. The sample uses the TreeLayout algorithm to arrange the nodes.
- ⚓ AnchorPoints — Demonstrates how to define custom connection and routing patterns on diagram nodes.
- 📦 Containers — Illustrates foldable and scrollable container nodes for grouping sub-nodes.
- 🌳 FractalLayout — Showcases the high-performance FractalLayout tree layout routing algorithm.
- 🥞 LayeredLayout — Demonstrates the LayeredLayout graph layout algorithm for complex workflow routing.
- 🗺️ TreeMap — Illustrates the TreeMapLayout tree mapping algorithm (e.g. visualizing country sizes and populations as proportional tiles).
- 🛠️ Controls — Demonstrates auxiliary UI components, including the Ruler scale guides and the Minimap/Overview window.
- 🎯 NodeList — Implements a drag-and-drop node palette using the
NodeListViewcontrol. - 🧭 PathFinder — Uses the graph analysis engine to calculate and highlight shortest paths and route connections between nodes.
- ⚡ EventLogger — Displays raised events in real-time, helping devs trace mouse hover, selection, and drag behaviors.
- 🧬 Inheritance — Visualizes class inheritance models using
TableNodeobjects to represent tables and classes. - 📑 SpanningCells — Demonstrates advanced cell merging, showing how to create cells spanning multiple rows and columns in tables.
- 📊 SequenceDiagram — Demonstrates how to configure a drawing canvas tailored for sequence diagram structures.
- 📦 StockShapes — A catalog displaying all predefined shape templates and their string identifiers.
- 🚀 MinApp — A bare-minimum project setup illustrating how to display a diagram on a Blazor page with minimal code.
- 🏋️ StressTest — Tests spatial indexing performance by rendering thousands of active vector nodes smoothly.
- 🏁 Tutorial 1 — Demonstrates loading raw relational graph data from an XML file and dynamically creating nodes and links.
- 🎄 Tutorial 2 — Demonstrates loading hierarchical XML data to automatically construct and render a tree structure.
- 🎄 Tutorial 3 — Demonstrates how to create custom node types whose appearance is defined by a hierarchy of components loaded from an XML template.
- 🖱️ ContextMenu — Shows how to build and trigger a custom HTML/Razor context menu upon right-clicking nodes.
- IDE: Visual Studio 2022 (v17.12+ or newer) or VS Code with C# Dev Kit.
- SDK: .NET 8.0 SDK or .NET 9.0 SDK.
- Package Manager: NuGet (integrated natively into Visual Studio / dotnet CLI).
- Clone the Repository:
git clone https://github.com/MindFusionComponents/blazor-diagram-samples.git cd blazor-diagram-samples - Open a Sample:
- Navigate to any sample folder (e.g.,
LayeredLayout,NodeList, orTreeMap). - Double-click the
.slnor.csprojfile to open it in Visual Studio.
- Navigate to any sample folder (e.g.,
- Restore NuGet Packages:
- When you build or debug the project, Visual Studio will automatically restore the missing
MindFusion.Diagramming.Blazorpackage and its dependencies.
- When you build or debug the project, Visual Studio will automatically restore the missing
- Run:
- Press
F5or click Start in Visual Studio to run the WebAssembly or Server application!
- Press
- These samples are designed to work with MindFusion.Diagramming for Blazor.
- A license can be purchased with the control's full C# source code.
- For product documentation, licensing, or evaluation licenses, visit the MindFusion Official Website or Diagramming for Blazor product page.