Blazor.Diagrams 使用教程

1. 项目介绍

Blazor.Diagrams 是一个完全可定制和可扩展的通用图表库，适用于 Blazor（包括服务器端和 WASM）。它最初受到流行的 React 库 react-diagrams 的启发，但后来发展成为一个更大的项目。Blazor.Diagrams 可以用于创建具有自定义设计的复杂图表，甚至库的行为也可以根据您的需求进行“黑客”修改。

主要特点

• 多用途：适用于大多数图表使用场景。
• 高性能：特别在 WebAssembly 中表现出色。
• 数据层与 UI 层分离：便于保存快照或修改模型。
• 完全可定制：无论是外观还是行为，都可以通过提供 Blazor 组件或使用 CSS 进行定制。
• 避免 JavaScript：95% 的代码使用 C#/Blazor 编写，仅在必要时使用 JS。

2. 项目快速启动

安装

首先，您需要通过 NuGet 安装 Blazor.Diagrams 包：

dotnet add package Z.Blazor.Diagrams

创建图表

在您的 Blazor 项目中，创建一个新的 Razor 组件，例如 DiagramComponent.razor，并添加以下代码：

@page "/diagram"
@using Z.Blazor.Diagrams
@using Z.Blazor.Diagrams.Core.Models

<Diagram @ref="diagram">
    <Nodes>
        <NodeModel Id="node1" X="100" Y="100">
            <NodeWidget>
                <div style="width: 100px; height: 50px; background-color: lightblue;">
                    Node 1
                </div>
            </NodeWidget>
        </NodeModel>
        <NodeModel Id="node2" X="300" Y="100">
            <NodeWidget>
                <div style="width: 100px; height: 50px; background-color: lightgreen;">
                    Node 2
                </div>
            </NodeWidget>
        </NodeModel>
    </Nodes>
    <Links>
        <LinkModel Source="node1" Target="node2" />
    </Links>
</Diagram>

@code {
    private Diagram diagram;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            diagram.ZoomToFit();
        }
    }
}

运行项目

在 Startup.cs 或 Program.cs 中注册 Blazor.Diagrams 服务：

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddBlazorDiagrams();
}

启动您的 Blazor 项目，访问 /diagram 路由，您将看到一个简单的图表。

3. 应用案例和最佳实践

应用案例

• 流程图：用于展示业务流程或工作流程。
• 网络拓扑图：用于展示网络设备的连接关系。
• 组织结构图：用于展示公司或组织的层级结构。

最佳实践

• 自定义节点和链接：通过继承 NodeModel 和 LinkModel 类，创建自定义节点和链接。
• 性能优化：使用虚拟化技术，仅绘制可见的节点，以提高性能。
• 数据持久化：将图表数据序列化为 JSON，便于保存和恢复。

4. 典型生态项目

• Blazor.Diagrams.Algorithms：提供图表算法支持，如路径查找、最短路径等。
• Blazor.Diagrams.Extensions：提供扩展功能，如自定义行为、插件等。
• Blazor.Diagrams.Samples：包含多个示例项目，展示如何使用 Blazor.Diagrams 创建各种图表。

通过以上步骤，您可以快速上手并使用 Blazor.Diagrams 创建复杂的图表应用。