Blazor Diagramming Samples (blazor-diagram-samples)

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.

---

🚀 Key Features

• 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 TableNode items 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.

---

📂 Samples Demonstrated

This repository contains 18 specialized Blazor samples illustrating various diagramming implementations:

Core Concepts & Layouts

• ⚓ 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 & Navigation

• 🛠️ 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 NodeListView control.
• 🧭 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.

Specialized Use Cases

• 🧬 Inheritance — Visualizes class inheritance models using TableNode objects 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.

Tutorials

• 🏁 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.
• 🖱️ ContextMenu — Shows how to build and trigger a custom HTML/Razor context menu upon right-clicking nodes.

---

⚙️ Getting Started

Prerequisites

• 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).

How to Build & Run

1. Clone the Repository:

   git clone https://github.com/MindFusionComponents/blazor-diagram-samples.git
   cd blazor-diagram-samples

2. Open a Sample:
   • Navigate to any sample folder (e.g., LayeredLayout, NodeList, or TreeMap).
   • Double-click the .sln or .csproj file to open it in Visual Studio.
3. Restore NuGet Packages:
   • When you build or debug the project, Visual Studio will automatically restore the missing MindFusion.Diagramming.Blazor package and its dependencies.
4. Run:
   • Press F5 or click Start in Visual Studio to run the WebAssembly or Server application!

---

📄 License and Product Info

• 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.