Flowy LogoVIOVNL.Flowy.Blazor Diagram Component

Build beautiful, interactive hierarchical tree visualizations with drag-and-drop functionality. Perfect for family trees, org charts, decision trees, and any hierarchical data structure.

🚀 Quick Start

Step 1: Install the Package

Add VIOVNL.Flowy.Blazor to your project using one of the following methods:

.NET CLI
dotnet add package VIOVNL.Flowy.Blazor
Package Manager
Install-Package VIOVNL.Flowy.Blazor
PackageReference
<PackageReference Include="VIOVNL.Flowy.Blazor" Version="1.0.0" />

Step 2: Add Using Statement

Add the following to your _Imports.razor file:

@using VIOVNL.Flowy.Blazor.Components
@using VIOVNL.Flowy.Blazor.Models

Step 3: Add Static Assets

Include the CSS and JavaScript files in your App.razor or _Host.cshtml:

<head>
    <!-- Add Flowy CSS -->
    <link rel="stylesheet" href="_content/VIOVNL.Flowy.Blazor/css/flowy.css" />
</head>

Note: JavaScript is loaded automatically via ES6 modules.

Step 4: Basic Usage

Add the component to your page:

@page "/family-tree"
@rendermode InteractiveServer

<FlowyCanvasEditor Components="@components" />

@code {
    private List<FlowyComponentItem> components = new()
    {
        new FlowyComponentItem 
        { 
            ComponentId = "person",
            Name = "Person",
            Color = "#667eea"
        },
        new FlowyComponentItem 
        { 
            ComponentId = "spouse",
            Name = "Spouse",
            Color = "#f093fb"
        }
    };
}

Step 5: Add Component Panel (Optional)

For a complete drag-and-drop experience, add the components panel:

<div style="display: flex; height: 600px; gap: 16px;">
    <FlowyComponentsPanel Components="@components" 
                        Title="Components"
                        Style="width: 220px;" />
    
    <FlowyCanvasEditor Components="@components"
                     Style="flex: 1;" />
</div>